$(function(){
	gestionCarouselBoutiques.init();
	boutiquesTooltip.init();
});

var gestionCarouselBoutiques = function () {
	var mycarousel_itemList;
	function _init () {
		mycarousel_itemList = $('.boutique') ;
		if (mycarousel_itemList.size() < 11) return;

		function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
		{
			// The index() method calculates the index from a
			// given index who is out of the actual item range.
			var idx = carousel.index(i, mycarousel_itemList.length);
			var carouselAddedElmt = carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
			carouselAddedElmt.addClass('boutique');
			boutiquesTooltip.addTooltip(carouselAddedElmt);
			boutiquesTooltip.addSelect(carouselAddedElmt);
		};

		function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
		{
		   carousel.remove(i);
		};
		/**
		 * Item html creation helper.
		 */
		function mycarousel_getItemHTML(item) {return $(item).html();};
		$('#boutiquesListe').jcarousel({
			animation: 'slow',
			easing: 'swing',
			wrap: 'circular',
			scroll: 1,
			size: 11,
			itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
			itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
		});
	}
	return {init:_init}
}();

var boutiquesTooltip = function(){
	var boutiques, tooltipContainer;

	function _init(){
		boutiques = $('.boutique');

		$('#ecommerce_flot').append('<div id="tooltip"></div>');
		tooltipContainer = $('#tooltip');

		_addTooltip(boutiques);
		_addSelect(boutiques);
	};

	function _addSelect(elmts) {
		elmts.filter(
			function(){return $(this).find('.boutiqueSelected').size()}
		).addClass('selected');
		elmts.hover(
			function(){addInnerBorder($(this))},
			function(){removeInnerBorder($(this))}
		).focus(
			function(){addInnerBorder($(this))}
		).blur(
			function(){removeInnerBorder($(this))}
		);
		function addInnerBorder(elmt){
			if (!elmt) return;
			elmt = getBoutique(elmt);

			if (!elmt.find('.boutiqueSelected').size()) elmt.find('a').prepend('<span class="boutiqueSelected"></span>');
		}
		function removeInnerBorder(elmt){
			if (!elmt || elmt.is('.selected')) return;
			elmt = getBoutique(elmt);
			elmt.find('a .boutiqueSelected').remove();
		}
		function getBoutique(elmt){
			if (!elmt.is('.boutique')) elmt = elmt.parents('.boutique:first');
			return elmt;
		}
	}

	function _addTooltip(elmts){
		elmts.hover(
			function(){createTooltip($(this))},
			function(){removeTooltip($(this))}
		).focus(
			function(){createTooltip($(this))}
		).blur(
			function(){removeTooltip($(this))}
		);

		function createTooltip(elmt){
			if (tooltipContainer.html() != "") return;
			var tooltipInnerHtml = '<div class="tooltip"><div class="tooltipHaut"></div><div class="tooltipFond">'+elmt.find('img:first').attr("alt")+'</div><div class="tooltipBas"></div></div>';

			var shift = 30;
			if (!elmt.is('.jcarousel-item')) shift = -30;
			var left = (elmt.offset().left-elmt.offsetParent().offset().left+shift)+'px';
			tooltipContainer.css({left: left});
			tooltipContainer.html(tooltipInnerHtml).fadeIn(250);
		}

		function removeTooltip(elmt){
			tooltipContainer.empty().css({opacity: 1}).stop().hide();
		}

	};
	return {init:_init, addTooltip:_addTooltip, addSelect:_addSelect}
}();