/***************************************************************************/
//  Elements
/***************************************************************************/

var $offersSlider = $( 'homeOffers' );


/***************************************************************************/
//  Functions
/***************************************************************************/

var fnCloseOffers = function () {

	new Effect.Morph( $offersSlider, {
		style:'width:80px;',
		afterFinish: function () {
			$offersSlider.toggleClassName( 'open' );
			homepageBanners.stopTimer();
		}
	});

};

var fnOpenOffers = function () {

	new Effect.Morph( $offersSlider, {
		style:'width:970px;',
		afterFinish: function () {
			$offersSlider.toggleClassName( 'open' );
			//homepageBanners.startTimer();
		}
	});
    
    $$( '#offerContainer a.homeImageLink' ).invoke( 'observe', 'mouseover', function () {		//  Stop timer onmouseover -- requires Prototype 1.6.1
			homepageBanners.stopTimer(  );
		}).invoke( 'observe', 'mouseout', function () {		//  Start timer onmouseout -- requires Prototype 1.6.1
			homepageBanners.startTimer(  );
		})
};



/***************************************************************************/
//  Slider class
/***************************************************************************/

var homepageBanners = {

	/***  Settings/default properties  ***/

	delay: 4,
	currentIndex: 0,
	timer: false,
	
	//set to true to stop the timer permanently
	_timerStopped : false,

	/***  Main init function  ***/

	init: function ( options ) {

		var _self = this;

		//  Set defaults if nothing set
		options				= options || {};
		options.delay		= options.delay || 5;

		//  Get all the banners
		this.banners = $$( '#offerContainer a.homeImageLink' );

		if ( this.banners.length > 1 ) {

			//  Manual controls and stop the timer
			$('btnOfferPrevious').observe( 'click', function ( ev ) {
				if(this._moving)return false;
				Event.stop( ev );
				_self.stopTimer();
				_self.goBack();
				_self._timerStopped = true;
			});

			$('btnOfferNext').observe( 'click', function ( ev ) {
				if(this._moving)return false;
				Event.stop( ev );
				_self.stopTimer();
				_self.goNext();
				_self._timerStopped = true;
			});

		}

		//  Make banners moveable by setting their position to absolute and moving them to the default position
		this.banners.each( function ( banner ) {
			banner.setStyle({
				display: 'block',
				position: 'absolute'
			}).clonePosition( $('bannerWrapper'), { offset: $('bannerWrapper').getWidth(), onComplete: function () { } });

		});

		//  Default to last banner because of the way the browser lays
		this.currentIndex = this.banners.length - 1;

		 _self.startTimer( options.delay );		//  Wait until the slider is slid out.

	},


	/***  Class methods  ***/

	changeImage: function ( i, position ) {
		
		if(this._moving){
			return false;	
		}
		
		this._moving = true;
		
		var c = this.banners[this.currentIndex];	//  Current
		var n = this.banners[i];					//  New

		//  Get all the banners which are they current or new
		this.banners.findAll( function ( img, index ) {
			return ( index != i && index != this.currentIndex );
		}.bind( this )).each( function ( el ) {
			el.setStyle({ zIndex: 0 });
		}.bind( this ));

		//  Put the new banner on top of the current one
		n.setStyle({ zIndex: '3' });
		c.setStyle({ zIndex: '2' });

		//  Get the width of the current banner to work out the offset
		var w = n.getWidth();

		//  Position and move the new image
		switch ( position ) {

			case 'left':
				n.clonePosition( $('bannerWrapper'), { offsetLeft: -w });
				this.slide( n, w );
			break;

			case 'right':
				n.clonePosition( $('bannerWrapper'), { offsetLeft: w });
				this.slide( n, -w );
			break;

		}

	},

	goBack: function () {

		//  Get prev image index
		var i = ( this.currentIndex > 0 ) ? this.currentIndex - 1 : this.banners.length - 1;
		this.changeImage( i, 'left' );
		this.currentIndex = i;

	},

	goNext: function () {

		//  Get next image index
		var i = ( this.currentIndex < ( this.banners.length - 1 ) ) ? this.currentIndex + 1 : 0;
		this.changeImage( i, 'right' );
		this.currentIndex = i;

	},

	slide: function ( element, offset ) {
		var self = this;
		//All the slider effects should sit under one queue, limited to one event, stops nasty transitions
		new Effect.Move( element, { x: offset, mode: 'relative', duration: 0.6, queue:{scope: 'homepageBanners',limit: 1}, afterFinish: function(){self._moving = false;} });
	},

	startTimer: function ( delay ) {
		
		if(this._timerStopped) return;
		
		delay = delay || this.delay;
		this.timer = new PeriodicalExecuter( this.goNext.bindAsEventListener( this ), delay );
	},

	stopTimer: function () {

		//  Stop the timer (probably a click on a manual link)
		if ( this.timer !== false ) {
			this.timer.stop();
			this.timer = false;
		}

	}

};



/***************************************************************************/
//  Buttons
/***************************************************************************/

$('btnCloseOffers').observe( 'click', function ( ev ) {

	ev.stop();
	fnCloseOffers();

});

$('btnShowOffers').observe( 'click', function ( ev ) {

	ev.stop();
	if ( $offersSlider.hasClassName( 'open' ) ) {
		fnCloseOffers();
	} else {
		fnOpenOffers();
	}

});


homepageBanners.init();