vanilla.namespace('mexcapade.carrousel');

mexcapade.carrousel =
{
    TIME		: 5000,
    FADING_TIME		: 600,

    init : function(properties)
    {
	var self	= this;
	this.view	= $("#view-" + properties.viewId);
	this.items	= this.view.find("ul.circuits li.circuit");
	this.interval	= null;

	this._initNavigation();

	// on centre les descriptions
	this.items.find("div.description").each
	(
	    function()
	    {
		var $t = $(this);
		var dw = $t.width();
		var pw = $t.parent().width();

		$t.css({left:(pw/2-dw/2) + "px"});
	    }
	);

	this.items.hide();
	this.selectByIndex(Math.round(Math.random()*(this.items.length-1)));
    },

    _initNavigation : function()
    {
	var self = this;
	
	this.navigation = $("<ul></ul>").addClass("navigation").appendTo(this.view);
	this.items.each
	(
	    function(i)
	    {
		var classNames	= this.className.split(/\s+/);
		var secteur	= classNames.length > 1 ? $.trim(classNames[1]) : "";

		$("<a></a>").addClass(secteur).attr("href", "#").click
		(
		    function(e)
		    {
			e.stopPropagation();
			e.preventDefault();

			self.selectByIndex(i, true);
		    }
		)
		.wrap("<li></li>").parent().appendTo(self.navigation);
	    }
	);

	var nw = this.navigation.width();
	var vw = this.view.width();

	this.navigation.css({left:(vw/2-nw/2) + "px"});

	this.previousButton = $('<a href="#" />').addClass("previous").click
	(
	    function(e)
	    {
		e.stopPropagation();
		e.preventDefault();
		self.previous(true);	
	    }
	)
	.appendTo(this.view);

	this.nextButton = $('<a href="#" />').addClass("next").click
	(
	    function(e)
	    {
		e.stopPropagation();
		e.preventDefault();
		self.next(true);	
	    }
	)
	.appendTo(this.view);
    },

    select : function(item, clearInterval)
    {
	item = $(item);

	if ( clearInterval && this.interval != null )
	{
	    window.clearInterval(this.interval);
	    this.interval = null;
	}

	var current = this.getCurrent();
	if ( current.get(0) == item.get(0) )
	{
	    return;
	}

	var self = this;
	if ( current.length <= 0 )
	{
	    // la première fois une affiche juste l'image
	    item.toggleClass("selected", true).css({opacity:1}).show();
	    self._updateNavigation(item);
	}
	else
	{
	    current.toggleClass("selected", false);
	    item.toggleClass("selected", true);

	    this.view.find("div.carrouselContainer").clearQueue().queue
	    (
		function(next)
		{
		    current.css("z-index", 2);
		    item.css("z-index", 1).show().stop(true).css("opacity", 1);

		    // le delay permet d'avoir une méthode intermédiare
		    // sinon jquery ne s'en sort pas avec la fin de l'animation et le dequeue
		    current.stop(true).delay(0).animate
		    (
		        {opacity:0},
			{
			    duration	: self.FADING_TIME, 
			    esaing	: "linear", 
			    complete	: function(s)
			    {
				current.hide();
				next();
			    }
			}
		    );

		    self._updateNavigation(item);
		}
	    )
	}

	if ( this.interval == null && this.items.length > 1 )
	{
	    var self = this;
	    this.interval = window.setInterval
	    (
	        function()
	        {
	            self.next();
	        },
	        this.TIME
	    );
	}
    },

    _updateNavigation : function(item)
    {
	var index = this.items.index(item);
	this.navigation.find(".selected").toggleClass("selected", false);
	this.navigation.find("li").eq(index).toggleClass("selected", true);
    },

    selectByIndex : function(index, clearInterval)
    {
	var self = this;
	this.view.synchronize
	(
	    function()
	    {
		self.select(self.items[index], clearInterval);
	    }
	)
    },

    getCurrent : function()
    {
	return this.items.filter(".selected");
    },

    next : function(clearInterval)
    {
	if ( this.items.length <= 0 )
	{
	    return;
	}

	var self = this;
	this.view.synchronize
	(
	    function()
	    {
		var i = self.items.index(self.getCurrent()) + 1;
		i %= self.items.length;

		self.selectByIndex(i, clearInterval);
	    }
	);
    },

    previous : function(clearInterval)
    {
	if ( this.items.length <= 0 )
	{
	    return;
	}

	var self = this;
	this.view.synchronize
	(
	    function()
	    {
		var i = self.items.index(self.getCurrent()) - 1;
		if ( i < 0 )
		{
		    i = self.items.length - 1;
		}

		self.selectByIndex(i, clearInterval);
	    }
	);
    }
};