/*
	SlideItMoo v1.0 - Image slider
	(c) 2007-2008 Constantin Boiangiu <http://www.php-help.ro>
	MIT-style license.
*/
var FadeItMoo = new Class({
					   
	initialize: function(options){
		this.options = $extend({
			showControls:1,
			autoFade: 0,
			transition: Fx.Transitions.linear,
			duration: 1000,
			currentElement: 0,
			thumbsContainer: 'thumbs',
			overallContainer: 'gallery_container',
			controlsContainer: 'gallery_controls'
		},options || {});	
		
		var tmpImg = []
		$(this.options.thumbsContainer).getElements('a').each(function(item){
			var tmpObj = {};
			tmpObj.element = item;
			tmpImg.push(tmpObj);
		});
		this.images = tmpImg;
		// assumes that all thumbnails have the same width
		this.image_size = this.images[0].element.getSize();
		
		// resizes the container div's according to the number of itemsVisible thumbnails
		this.setContainersSize();
		
		var tmpDuration = this.options.duration;
		var tmpTransition = this.options.transition;
		this.images.each(function(item){
			item.fx = new Fx.Style(item.element, 'opacity', {duration: tmpDuration, transition: tmpTransition});
			item.element.setOpacity(0);
			item.element.setStyle('z-index', 1);
		});
		this.images[this.options.currentElement].element.setStyle('z-index', 2);
		this.images[this.options.currentElement].fx.set(1);
		// adds the forward-backward buttons
		if( this.images.length > 1 ){
			this.bkwd = this.addControlers('addbkwd');
			this.fwd = this.addControlers('addfwd');
			this.forward();
			this.backward();
			/* if autoSlide is not set, scoll on mouse wheel */
			if( !this.options.autoFade ){
				$(this.options.thumbsContainer).addEvent('mousewheel', function(ev){
					new Event(ev).stop();
					ev.wheel < 0 ? this.fwd.fireEvent('click') : this.bkwd.fireEvent('click');			
				}.bind(this));
			}
			else{
				this.startIt = function(){ this.fwd.fireEvent('click') }.bind(this);
				this.autoFade = this.startIt.periodical(this.options.autoFade, this);
				/*this.images.addEvents({
					'mouseover':function(){
						$clear(this.autoSlide);	
						//alert('cleared');
					}.bind(this),
					'mouseout':function(){
						this.autoSlide = this.startIt.periodical(this.options.autoSlide, this);
					}.bind(this)
				})*/
			}
		};
		
		// if there's a specific default thumbnail to start with, slide to it
		if( this.options.currentElement!==0 ){
			this.options.currentElement-=1;
			this.fade(1);
		}
	},
	
	setContainersSize: function(){
		$(this.options.overallContainer).set({
			styles:{
				'width': this.image_size.size.x
			}
		});
	},
	
	forward: function(){				
		this.fwd.addEvent('click',function(){
			this.fade(1);
		}.bind(this));		
	},
	
	backward: function(){			
		this.bkwd.addEvent('click',function(){											
			this.fade(-1);			
		}.bind(this))	
	},
	
	addControlers: function(cssClass){
		element = new Element('div',{
			'class': cssClass,
			styles:{
				'display': this.options.showControls ? '' : 'none'
			}
		}).injectInside($(this.options.controlsContainer));
		return element;
	},
	
	fade: function(step){
		
		var perviousElement = this.options.currentElement;
		this.options.currentElement += step;
		
		/* if autoslice is on, when end is reached, go back to begining */
		if(this.options.autoFade && this.options.currentElement > this.images.length-1){
			this.options.currentElement = 0;
		}

		if(this.options.autoFade && this.options.currentElement < 0 ){
			this.options.currentElement = this.images.length-1;
		}
		
		//~ if(this.options.currentElement == 0 && step < 0 ){
			//~ this.options.currentElement = this.images.length-1;
		//~ }
		
		
		//~ if ( ( this.options.currentElement < this.images.length && step>0 ) || ( step < 0 && this.options.currentElement !== 0 ) ){
			//this.myFx.stop();
			
					
			//~ this.myFx.toElement( this.images[this.options.currentElement] );
			this.images[this.options.currentElement].fx.set(0);
			this.images[perviousElement].element.setStyle('z-index', 1);
			this.images[this.options.currentElement].element.setStyle('z-index', 2);
			this.images[this.options.currentElement].fx.start(1).chain(function(){
				//~ this.images[perviousElement].fx.set(0);
			});
			this.images[perviousElement].fx.start(0);
		//~ }
	}
});