//Slideshow with clickable thumbs

// Call from the HTML with this code:
/*
Event.observe( window, 'load', function () {
	if( $$('#imageContainer a').length > 1){
		homepageBanners.init('#offerNavigator li a','#thumbs div.frame');
	} else {
		$$('#imageContainer').invoke('show');
	}

});
*/

var homepageBanners = {

	currentIndex: 0,
	isChanging: false,
	timer: false,
    paginationId: '',
    thumbsId: '',
    slideShowLinkListId: '',
    slideShowLinkId: '',

	init: function ( paginationId, thumbsId, slideShowLinkListId, slideShowLinkId, options ) {

        this.paginationId = paginationId;
        this.thumbsId = thumbsId;
        this.slideShowLinkListId = slideShowLinkListId;
        this.slideShowLinkId = slideShowLinkId;
        
		$('banner').style.display = 'block';

		this.banners 	= $$('#banner a.slideShowImage' );
        
		this.banners.each( function ( banner ) {
			banner.setStyle({
				display:	'block',
				position: 	'absolute',
				zIndex:		'0'
			});
		});

        if ( paginationId ) {
            $$(paginationId).invoke( 'observe', 'click', this.paginationClick.bind( this ) );
        }
        
        if (thumbsId) {
            $$(thumbsId).invoke( 'observe', 'click', this.paginationClick.bind( this ) );
            $$(thumbsId).invoke( 'observe', 'click', function(){$('controller').hide();} );
        }
        
        
        

                
		//  Default to last banner because of the way the browser lays
		this.banners[ this.currentIndex ].setStyle({ zIndex: '10' });

		this.options 		= options || {};
		this.options.delay	= this.options.delay || 7;

		this.startTimer();

	},


	atLastImage: function () {

		return ( this.currentIndex == this.banners.length - 1 );

	},


	goNext: function () {

		var c 			= this.banners[ this.currentIndex ];						//  Current image
		var nextIndex 	= ( this.atLastImage() ) ? 0 : this.currentIndex + 1;		//  Next image's index
		var n		 	= this.banners[ nextIndex ];								//  Next image

        //  Reset z-index on images which aren't the current or next banners
		this.banners.findAll( function ( img, index ) {
			return ( index != nextIndex && index != this.currentIndex );
		}.bind( this )).each( function ( el ) {
			el.setStyle({ zIndex: 0 });
		}.bind( this ));

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

		//  Show banner so it fades in automatically
		$(n).show();

		this.isChanging = true;


		$(c).fade({
			duration:1.5,
			from:1,
			to:0,
			afterFinish: function () {
				this.isChanging = false;
                if ( this.paginationId != '' ) {
                    $$(this.paginationId).invoke( 'removeClassName', 'active' )
                    $$(this.paginationId)[ nextIndex ].addClassName( 'active' );
                }
                if (this.slideShowLinkListId) {
                    $(this.slideShowLinkId).href = $$(this.slideShowLinkListId)[ nextIndex ].href;
                    
                }
			}.bind( this )
		});

		this.currentIndex = nextIndex;

	},


	paginationClick: function ( ev ) {


		Event.stop( ev );

		this.stopTimer();

		el = ev.element();
        $$(this.paginationId).invoke( 'removeClassName', 'active' );
		el.addClassName( 'active' );
        $$(this.paginationId).each( function ( banner ) {
			banner.setStyle({
				zIndex: '0'
			});
		});
        
        if (this.slideShowLinkListId) {
            var nextIndex = $$(this.paginationId).indexOf(el);
            $(this.slideShowLinkId).href = $$(this.slideShowLinkListId)[ nextIndex ].href;
        }

            
		this.banners.each( function ( banner ) {
			banner.setStyle({
				zIndex:		0
			});
		});

        if ( $( el ).hasClassName( 'imgFrame' ) ){
            this.banners[ $( el ).up().up().previousSiblings().length ].setStyle({zIndex:10}).show();
            $('controller').hide();
        } else {
            this.banners[ $( el ).up().previousSiblings().length ].setStyle({zIndex:10}).show();
        }

	},


	startTimer: function () {

		this.timer = new PeriodicalExecuter( this.goNext.bindAsEventListener( this ), this.options.delay );

	},


	stopTimer: function () {

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

	}


}