/** Slider
 *	
 *	Developped for Compiegne Equestre
 *	@author : Partikule, 2010
 *
 */


var Slider = new Class({

	Implements: Options,

	initialize: function(el, options)
	{
		this.current = 0;
		this.setOptions(options);
		this.buttons = $(this.options.buttons);

		this.$el = $(el);
		this.w = this.$el.getSize().x;			// Slider width
		this.gw = this.w * 3;					// Global width
		
		$imgs = this.$el.getElements('img');	// Image array

		this.cw = this.gw;		// calculated width : Set to gw to create the first container

		$imgs.setStyle('opacity', 0.4);
		$imgs.set('tween',{duration:500, wait:false});

		$imgs.addEvent('mouseenter', function(e){
			e.target.get('tween').start('opacity',1);
			$clear(this.idp);
		}.bind(this));

		$imgs.addEvent('mouseleave', function(e){
			e.target.get('tween').start('opacity',0.4);
			this.idp = this.showNext.periodical(this.options.speed, this);
		}.bind(this));

		imgsSrc = new Array();
		for(i=0; i<$imgs.length; i++)
		{
			imgsSrc.include($imgs[i].getProperty('src'));
		}

		this.images = new Asset.images(imgsSrc, {
			onComplete: this.build.bind(this)
		});
	},

	
	build: function()
	{
		var bloc;
		var blocs = new Array();

		cw = this.gw;

		$a = this.$el.getElements('a');

		for(i=0; i < this.images.length; i++)
		{
			// Object width
			$img = this.images[i];
			ow = $img.width;

			cw += ow;
			
			if (cw > this.gw)
			{
				if (bloc) {	blocs.include(bloc); }
				bloc = new Element('div', {'styles': {'width': this.w, 'float': 'left'}});
				cw = ow;
			}
			bloc.adopt($a[i]);
		}
		
		// Add the last block
		r = bloc.getElements('img').length;
		if (r>0) { blocs.include(bloc); }

		this.n = blocs.length -1;
		
		this.$el.empty();
		var $cont = new Element('div', {'styles': {'width': this.w * blocs.length}});
		for(i=0; i<blocs.length; i++)
		{
			$cont.adopt(blocs[i]);
			if (this.n > 0)
			{
				$a = new Element('a', {href:'#'});
				$a.store('i', i);
				$a.addEvent('click', function(e){
					e.stop();
					$clear(this.idp);
					this.idp = this.showNext.periodical(this.options.speed, this);
					this.show(e.target.retrieve('i'));
				}.bind(this));
				$but = new Element('li');
				if (i==0){ $but.addClass('active')};
				$but.adopt($a);
				this.buttons.adopt($but);
			}
		}
		
		$int = new Element('div', {'styles': {'width': this.w, 'overflow': 'hidden'}});	// intermediary el
		$int.adopt($cont);
		this.$el.adopt($int);
		
		this.n = blocs.length -1;

		this.mover = new Fx.Move($cont, {
			relativeTo: $int,
						duration: 600,
						transition: Fx.Transitions.Quad.easeInOut,
			link: 'chain',
			position: 'upperLeft',
			edge: 'upperLeft'
		});

		this.show(0);

		if (this.n > 0)
		{
			this.idp = this.showNext.periodical(this.options.speed, this);
		}
	},

	show: function(n)
	{
		this.current = n;
		this.mover.start({
			offset: {x:n * this.w *(-1), y:0}
		});
		if (this.n > 0)
		{
			$col = this.buttons.getElements('li');
			$col.removeClass('active');
			$col[n].addClass('active');
		}
	},

	showNext: function(n)
	{
		i = this.current + 1;
		if (i > this.n) {i = 0};
		this.show(i);
	}
});