/**
 * @title		yBox
 * @vesrion		0.0.2
 * @author		ylo
 */
// js class on html tag
document.getElementsByTagName("html")[0].className = "js";


/**
 * @section		png fix configuration
 */
pxPath = '/themes/default/img/common/visu/px.gif';


// general inits
$(document).ready(function () {
	
	// init isIE
	manageIsIE.init();
	
	// png fix
	fixPng();
	
});


/**
 * @section		create global var ieIE 6, 7 & 8
 */
var isIE = false;
var manageIsIE = {
	init: function () {
		if (jQuery.browser.msie) {
			isIE = true;
			if(parseInt(jQuery.browser.version) == 6) {
				isIE = 6;
			} else if (parseInt(jQuery.browser.version) == 7) {
				isIE = 7;
			} else if (parseInt(jQuery.browser.version) == 8) {
				isIE = 8;
			}
		}
	}
};

/**
 * @section		fix png images
 * @affect		IE6
 */
function fixPng(elmt) {

	if(isIE == 6) {
		if(elmt) {
			var container = $(elmt);
		} else {
			var container = $('html');
		}
		var oImage = $('img', container);
		
		if(!oImage.length)  return;
		for(var i=0;i<oImage.length;i++) {
			if(oImage[i].src.indexOf('.png') > -1) {
				with(oImage[i].style) {
					background = 'none';
					filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + oImage[i].src + '", sizingMethod="image")';
				}
				oImage[i].src = pxPath;
			}
		}
	}
}

/**
 * @section		carousel
 */
var manageCarousel = {
	init: function (obj) {
		
		if(!$('.wrapper ul li:first', obj).hasClass('first')) {
			$('.wrapper ul li:first', obj).addClass('first')
		}
		
		var totalWidth = 0;
		$('.wrapper ul li', obj).each(function () {
			totalWidth = totalWidth + manageCarousel.itemTotalWidth(this);
		});
		
		
		$('.wrapper > ul', obj).css({
			width: totalWidth+'px'
		});
		
		$('.nextArrow', obj).click(function (e) {
			manageCarousel.next($(this).parent());
			return false;
		});
		
		$('.prevArrow', obj).click(function (e) {
			manageCarousel.previous($(this).parent());
			return false;
		});
		
	},
	config: {
		'duration': 300,
		'auto': false,
		'waitToMove':4000,
		'pauseDuration':10000
	},
	play: function (elmt) {
		
		var obj = $(elmt);
		manageCarousel.next(obj);
		var cicleDuration = manageCarousel.config.waitToMove + manageCarousel.config.duration;
		function moveCarousel() {
			
			manageCarousel.next(obj);
		}
		cicle = setInterval(moveCarousel, cicleDuration);
		
	},
	pause: function (elmt) {
		
		var obj = $(elmt);
		function restart() {
			manageCarousel.play(obj);
		}
		
		window.clearInterval(cicle);
		if(typeof(pauseCicle) != 'undefined') {
			window.clearTimeout(pauseCicle);
		}
		pauseCicle = window.setTimeout(restart, manageCarousel.config.pauseDuration);
		
	},
	itemTotalWidth: function (obj, test) {
		var itemWidth 		= parseInt($(obj).width());
		var leftMargin 		= parseInt($(obj).css('margin-left'));
		if(String(leftMargin).indexOf("NaN") > -1) {leftMargin = 0;}
		
		var rightMargin 	= parseInt(String($(obj).css('margin-right')).replace('px', '').replace(' ', ''));
		if(String(rightMargin).indexOf("NaN") > -1) {rightMargin = 0;}
		
		var leftPadding 	= parseInt(String($(obj).css('padding-left')).replace('px', '').replace(' ', ''));
		if(String(leftPadding).indexOf("NaN") > -1) {leftPadding = 0;}
		
		var rightPadding	= parseInt(String($(obj).css('padding-right')).replace('px', '').replace(' ', ''));
		if(String(rightPadding).indexOf("NaN") > -1) {rightPadding = 0;}
		
		var totalWidth = itemWidth + leftMargin + rightMargin + leftPadding + rightPadding;
		return totalWidth;
	},
	previous: function (obj) {
		if(!obj.hasClass('move')) {
			obj.addClass('move');
			
			var distance = manageCarousel.itemTotalWidth($('.wrapper > ul > :last', obj));
			
			var lastItem = $('.wrapper > ul > :last', obj);
			$('.wrapper > ul > :last', obj).remove();
			
			$('.wrapper > ul', obj).css({'left':0}).prepend(lastItem);
			
			$('.wrapper > ul > .first', obj).removeClass('first');
			$('.wrapper > ul > :first', obj).addClass('first');
			
			$('.wrapper > ul', obj).css({'left': '-'+distance+'px'}).animate({
				'left': '0px'
			}, manageCarousel.config.duration, function () {
				obj.removeClass('move');
			});
			
		}
	},
	next: function (obj) {
		if(!obj.hasClass('move')) {
			obj.addClass('move');
			
			var distance = manageCarousel.itemTotalWidth($('.wrapper > ul > .first', obj));
			$('.wrapper > ul', obj).animate({
				'left': '-'+distance+'px'
			}, manageCarousel.config.duration, function () {
				
				var firstItem = $('.wrapper > ul > :first', obj);
				$('.wrapper > ul > .first', obj).remove();
				
				$('.wrapper > ul', obj).css({'left':0}).append(firstItem);
				
				$('.wrapper > ul > .first', obj).removeClass('first');
				$('.wrapper > ul > :first', obj).addClass('first');
				
				obj.removeClass('move');
			});
			
		}
	}
};

// manage custom select
(function($){
	$.fn.extend({
		ySelect: function() {
			return this.each(function() {
				
				var elmt = $(this);
				var container = elmt.parent();
		
				// create plugin html
				container.append(select.params.mainContent);
				
				var link = $('.link', container);
				var linkList = $('.itemList', container);
				
				// create item into link list
				$('option', elmt).each(function () {
					var optionItem = $(this);
					$('ul', linkList).append('<li><a href="#'+optionItem.val()+'">'+optionItem.text()+'</a></li>');
					$('ul li:last a', linkList).click(function () {
						var item = $(this);
						var value = item.attr('href').split('#')[1];
						select.select(elmt, value);
						
						linkList.hide();
						return false;
					});
				});
				
				// bind click on link
				link.click(function () {
					linkList.toggle();
				});
				
				// update first state
				select.update(elmt);
				
				// bind onChange event on select item
				elmt.change(function () {
					select.update(elmt);
				});
				
				// container on foreground when mouse hover
				container.parent().parent().hover(function () {
					var obj = $(this);
					obj.css('z-index', '2');
				}, function () {
					var obj = $(this);
					obj.css('z-index', '1');
					linkList.hide();
				});
				
			});
		}
	});
})(jQuery);

var select = {
	params: {
		mainContent: '<div class="selectContainer"><div class="link"></div><div class="itemList"><ul></ul></div></div>'
	},
	getSelectedItem: function (obj) {
		
		var elmt = $(obj);
		var list = elmt.find('option').filter(':selected');
		
		return list;
	},
	show: function (obj) {
		var elmt = $(obj);
	},
	hide:function (obj) {
		var elmt = $(obj);
	},
	update: function (obj) {
		
		var elmt = $(obj);
		var container = elmt.parent();
		var link = $('.link', container);
		var selectedItem = select.getSelectedItem(elmt);
		link.html(selectedItem.text());
		
	},
	select: function (obj, value) {
		var elmt = $(obj);
		elmt.val(value);
		select.update(elmt);
	}
};