var FaderMoo = new Class({
	
	Implements: [Events,Options],
	options: {
		overallContainer: null,/* outer container, contains fwd/back buttons and container for thumbnails */
		elementScrolled: null, /* has a set width/height with overflow hidden to allow sliding of elements */
		thumbsContainer: null,	/* actual thumbnails container */	
		itemsSelector: null, /* css class for inner elements ( ie: .FadeItMoo_element ) */
		itemWidth: null, /* single element width */
		itemHeight: null, /* single element height */
		navs:{ /* starting this version, you'll need to put your back/forward navigators in your HTML */
			fwd:'.FadeItMoo_forward', /* forward button CSS selector */
			bk:'.FadeItMoo_back' /* back button CSS selector */
		},
		showControls:1, /* show forward/back controls */
		transition: Fx.Transitions.linear, /* transition */
		duration: 800, /* transition duration */
		direction: 1, /* sliding direction ( 1: enter from left/top; -1:enter from right/bottom ) */
		autoFade: false, /* auto fade - as milliseconds ( ie: 10000 = 10 seconds ) */
		startIndex: null,
		onChange: $empty
	},
	
	initialize: function(options){
		this.setOptions(options);
		/* all elements are identified on CSS selector (itemsSelector) */
		this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
		this.totalElements = this.elements.length;
		// width of thumbsContainer children
		var defaultSize = this.elements[0].getSize();
		this.elementWidth = this.options.itemWidth || defaultSize.x;
		this.elementHeight = this.options.itemHeight || defaultSize.y;
		this.currentElement = 0;
		this.direction = this.options.direction;
		this.autoFadeTotal = this.options.autoFade + this.options.duration;
		this.begin();
	},
	
	begin: function(){
		for(i=1;i<this.elements.length;i++){
			this.elements[i].setStyle('display','none');
		}
		/* if navigation is needed and enabled, add it */
		this.addControls();
				
		// resizes the container div's according to the number of itemsVisible thumbnails
		//this.setContainersSize();
		
		this.myFx = new Fx.Tween(this.options.thumbsContainer, { 
			property: ('opacity'),
			transition: this.options.transition,
			duration: this.options.duration
		});
		
		if( this.options.autoFade )
			this.startAutoFade();
	},
	
	
	/* sets the containers width to leave visible only the specified number of elements */
	//setContainersSize
	
	
	/* determines the current index in element list */
	currentIndex: function(){
		var elemIndex = null;
		switch( this.direction ){
			/* forward */
			case 1:
				elemIndex = this.currentElement >= this.totalElements-1 ? 0 : this.currentElement + this.direction;				
			break;
			/* backwards */
			case -1:
				elemIndex = this.currentElement == 0 ? this.totalElements - 1 : this.currentElement + this.direction;
			break;
		}
		return elemIndex;
	},
	
	/* adds forward/back buttons */
	addControls: function(){
		if( !this.options.showControls || this.elements.length > 1 ) return;
		
		this.fwd = $(this.options.overallContainer).getElement(this.options.navs.fwd);
		this.bkwd = $(this.options.overallContainer).getElement(this.options.navs.bk);
		
		if( this.fwd )
			this.fwd.addEvent('click', this.fade.pass(1, this));
		if( this.bkwd )
			this.bkwd.addEvent('click', this.fade.pass(-1, this));		
	},
	
	/* fades elements */
	fade: function( direction ){
		
		if(this.started) return;
		
		var fxDist = 0;
		var nextIndex;
		this.started = true;
		
		this.myFx.start(0).chain(function(){
				this.elements[this.currentElement].setStyle('display','none');
				nextIndex = this.currentIndex();
				this.elements[nextIndex].setStyle('display','block');
				this.myFx.start(1).chain(function(){
						this.started = false;
						this.currentElement = nextIndex;
					}.bind(this)
				);
			}.bind(this)
		);
		
		this.fireEvent('onChange', this.currentElement);
		
	},
	
	/* starts auto fading */
	startAutoFade: function(){
		this.startIt = this.fade.bind(this).pass(this.direction|1);
		this.autoFade = this.startIt.periodical(this.autoFadeTotal, this);
		this.isRunning = true;
		this.elements.addEvents({
			'mouseenter':function(){
				$clear(this.autoFade);
				this.isRunning = false;
			}.bind(this),
			'mouseleave':function(){
				this.autoFade = this.startIt.periodical(this.autoFadeTotal, this);
				this.isRunning = true;
			}.bind(this)
		})
	},
	/* stops auto fading */
	stopAutoFade: function(){
		$clear(this.autoFade);
		this.isRunning = false;
	}
	
})