/** Slider
 *	
 *	Developped for Heal FashionLab
 *	@author : Michel-Ange K. partikule, 2009
 *
 */


var Slider = new Class({

	Implements: Options,

	options: {
		container:	false,
		nbcol:		2,
		nbrow:		3,
		current_id: ''			// Current showed article (article's name)
	},

	initialize: function(options)
	{
		this.setOptions(options);
		
		this.container  = $(options.container);
		
		// Nb pictures / planche
		this.picturesPerBloc = parseInt(this.options.nbcol) * parseInt(this.options.nbrow);
							
		// Get the childs pictures
		this.pictures = this.container.getElements('img');

		// Pictures size (get the first picture size)
		this.iPictureSize = this.getPictureSize.periodical(100, this);

	},

	
	start: function()
	{

		this.blocSize = {
							width: this.pictureSize.width * this.options.nbcol,
							height: this.pictureSize.height * this.options.nbrow
						};
						
		// Nb planches
		this.nbPlanche = Math.ceil(this.pictures.length/this.picturesPerBloc);
		
		// Suppression du contenu du container
		this.container.empty();
		
		// Ajout barre de defilement gauche
		var leftBar = new Element('div', {'id': 'bloc-prev', 'styles':{'height':this.blocSize.height+'px', 'width':'20px', 'float':'left', 'cursor':'pointer'}});
		leftBar.inject(this.container);

		// Conteneur de la vue
		var viewContainer = new Element('div', {'id': 'view-container', 'class':'view-container', 'styles':{'height':this.blocSize.height+'px', 'width':this.blocSize.width+'px', 'display':'block','float':'left', 'overflow':'hidden'}});
		viewContainer.inject(this.container);
		
		// Ajout barre de defilement droite
		var rightBar = new Element('div', {'id': 'bloc-next', 'styles':{'height':this.blocSize.height+'px', 'width':'20px', 'float':'left', 'cursor':'pointer'}});
		rightBar.inject(this.container);

		// container des blocs : largeur * nb planches
		var blocContainer = new Element('div', {'id': 'bloc-container', 'class':'bloc-container', 'styles':{'height':this.blocSize.height+'px', 'width':(this.blocSize.width*this.nbPlanche)+'px', 'display':'block','float':'left'}});
		blocContainer.inject(viewContainer);


		// Current bloc
		this.currentBloc = 0;
		var maxBloc = this.nbPlanche -1;

		// Injection des images	
		var blocs = new Array();
		for (var i=0; i<this.nbPlanche; i++ )
		{
			var bloc = new Element('div', {'id': 'bloc'+i, 'class':'bloc', 'styles':{'height':this.blocSize.height+'px', 'width':this.blocSize.width+'px'}});
			
			// Inject pictures
			for (var j=0; j<this.picturesPerBloc; j++)
			{
				var index = i*this.picturesPerBloc + j;
				
				if (this.pictures[index])
				{
					var picture = new Element(this.pictures[index]);
					
					// Normalize the pictures sizes
					picture.setAttribute('width', this.pictureWidth);
					picture.setAttribute('height', this.pictureHeight);
					
					// Set the link
					var href = this.pictures[index].getAttribute('rel');
					var title = picture.getAttribute('alt');
					
					// Set the current bloc
					var id = (href.substring(href.lastIndexOf('/')+1)).replace('.html', '');
					if (id == this.options.current_id)
					{
						this.currentBloc = i;
						picture.addClass('active');
					}
					
					var link = new Element('a', {'href': href, 'title': title});
					link.addClass('article-link');
					
					picture.inject(link);
					
					link.inject(bloc);

				}
			}
			bloc.inject(blocContainer);
		}
		
		// Container size
		// If viewContainer has margin, calculate the new container size !
		var viewContainerMarginSize = 0;
		if (parseInt(viewContainer.getStyle('margin-top').replace('px','')) > 0)
		{
			viewContainerMarginSize = parseInt(viewContainer.getStyle('margin-top').replace('px','') * 2 );
		}
		// Set container size
		var barSizes = parseInt(leftBar.getStyle('width').replace('px','')) * 2;
		var containerWidth = (this.pictureSize.width * this.options.nbcol) + barSizes + viewContainerMarginSize;
		var containerHeight = (this.pictureSize.height * this.options.nbrow) + viewContainerMarginSize;
				
		this.container.setStyle('width', containerWidth);
		this.container.setStyle('height', containerHeight);
		
		// Button injection : We know the container size, so the buttons could be verticaly aligned.
		this.leftButton = (new Element('div', {'id': 'bloc-btn-prev', 'styles':{'margin-top':(containerHeight/2-10)+'px'}})).inject(leftBar);
		this.rightButton = (new Element('div', {'id': 'bloc-btn-next', 'styles':{'margin-top':(containerHeight/2-10)+'px'}})).inject(rightBar);
		
		
		
		// Scroll transition
		var myFx = new Fx.Scroll(viewContainer, {
							link: 'chain',
							offset: {'x': 0, 'y': 0},
							wheelStops: false,
							transition: Fx.Transitions.Quad.easeInOut
						});

		// Ajout du dˇfilement droite
		rightBar.addEvent('click', function(event) {
	 		event = new Event(event).stop();
			if (this.currentBloc < maxBloc)
			{
				this.currentBloc += 1;
				myFx.toElement('bloc' + this.currentBloc);
				this.checkButtons();
			}
		}.bind(this));
			
		// Ajout du dˇfilement gauche
		leftBar.addEvent('click', function(event) {
			event = new Event(event).stop();
			if (this.currentBloc > 0)
			{
				this.currentBloc -= 1; 
				myFx.toElement('bloc' + this.currentBloc);
				this.checkButtons();
			}
		}.bind(this));
		
		try{
			heal.setContentLinks();
		}
		catch(e){}
		
		// Page reload : Go to the current article bloc
		this.container.fade('hide');
		this.container.setStyle('display', 'block');

		myFx.toElement('bloc' + this.currentBloc);
		
		// Display : block;
		this.container.fade('in');
		
		this.checkButtons();


	},

	
	checkButtons: function() 
	{
		this.leftButton.setStyle('display', 'block');
		this.rightButton.setStyle('display', 'block');

		if (this.currentBloc == 0)
		{
			this.leftButton.setStyle('display', 'none');
			
		}
		else if ((this.currentBloc + 1) == this.nbPlanche)
		{
			this.rightButton.setStyle('display', 'none');
		}
	},
	

	getPictureSize: function()
	{
		if (this.pictures.length > 0)
		{
			
			if (this.pictures[0])
			{

				this.container.setStyle('display', 'block');

				if (this.pictures[0].width > 0 )
				{
					var w = this.pictures[0].width;
					var h = this.pictures[0].height;
					
//					$('debug').set('html',$('debug').get('html') + w + '<br/>');

					$clear(this.iPictureSize);

					var heightToAdd = 0;
					var widthToAdd = 0;
					
					heightToAdd += parseInt(this.pictures[0].getStyle('margin-top').replace('px','') );
					heightToAdd += parseInt(this.pictures[0].getStyle('margin-bottom').replace('px',''));
					heightToAdd += parseInt(this.pictures[0].getStyle('padding-top').replace('px','') );
					heightToAdd += parseInt(this.pictures[0].getStyle('padding-bottom').replace('px',''));
					heightToAdd += parseInt(this.pictures[0].getStyle('border-top-width').replace('px',''));
					heightToAdd += parseInt(this.pictures[0].getStyle('border-bottom-width').replace('px',''));
	
					widthToAdd += parseInt(this.pictures[0].getStyle('margin-right').replace('px',''));
					widthToAdd += parseInt(this.pictures[0].getStyle('margin-left').replace('px',''));
					widthToAdd += parseInt(this.pictures[0].getStyle('padding-right').replace('px',''));
					widthToAdd += parseInt(this.pictures[0].getStyle('padding-left').replace('px',''));
					widthToAdd += parseInt(this.pictures[0].getStyle('border-right-width').replace('px',''));
					widthToAdd += parseInt(this.pictures[0].getStyle('border-left-width').replace('px',''));
				
					var pictureSize = {width:w + widthToAdd, height:h + heightToAdd};
					
					// Set the picture ref size as this picture size
					this.pictureWidth = w;
					this.pictureHeight = h;

					this.pictureSize = pictureSize;
					
					this.start();
				}
				else
				{
//					$('debug').set('html',$('debug').get('html') + 'getPictureSize<br/>');
				}
				
			}
		}
	}
	
});