// modified version of the store's gamehighlightplayer.js

var Slideshow = Class.create( {
	m_elemContainer: null,
	m_elemSlideContainer: null,
	m_elemTicker: null,
	m_rgImageURLs: null,

	m_timerInterval: false,

	initialize: function( args )
	{
		this.m_elemContainer = $(args.elemContainer);
		this.m_elemSlideContainer = $(args.elemSlideContainer);
		this.m_elemTicker = $(args.elemTicker);
		this.m_rgImageURLs = $H(args.rgImageURLs);
		
		var Slideshow = this;
		var firstItem = false;
		this.m_rgImageURLs.each( function ( entry ) {
			var id = entry.key;
			var data = entry.value;
			
			var elemImg = new Element( 'img', { src: 'images/blank.gif' } );
			elemImg.className = 'homeSlideImg';
			var elemLink = new Element( 'a', { href: data.url, id: 'img_' + id } );
			elemLink.className = 'homeSlideItem';
			elemLink.appendChild( elemImg );
			Slideshow.m_elemSlideContainer.appendChild( elemLink );
			elemLink.hide();
			if ( !firstItem )
				firstItem = elemLink;
			
			var elemTicker = new Element( 'div', { id: 'ticker_' + id } );
			elemTicker.className = 'ticker';
			Event.observe( elemTicker, 'click', Slideshow.HighlightItem.bind( Slideshow, elemTicker ) );
			Slideshow.m_elemTicker.appendChild( elemTicker );
		} );

		this.m_elemContainer.observe( 'mouseover', this.mouseOver.bindAsEventListener( this ) );
		this.m_elemContainer.observe( 'mouseout', this.mouseOut.bindAsEventListener( this ) );

		this.HighlightItem( firstItem );
	},

	HighlightItem: function( elem )
	{
		this.HighlightScreenshot( this.GetScreenshotId( elem ) );

		// preload the next screenshot in-order
		var nextItem = this.m_activeItem.next( '.homeSlideItem' );
		if ( nextItem )
			this.LoadScreenshot( this.GetScreenshotId( nextItem ) );
	},

	HighlightScreenshot: function( id )
	{
		this.LoadScreenshot( id );

		this.TransitionTo( $('img_' + id) );
		this.HighlightStripItem( 'ticker_' + id );
		
		this.StartTimer();
	},
	
	LoadScreenshot: function( id )
	{
		var target = $( 'img_' + id );
		if ( target )
		{
			var img = target.down( 'img' );
			var url = this.m_rgImageURLs.get( id ).img;
			if ( img.src != url )
				img.src = url;
			
		}
	},

	TransitionTo: function( elem )
	{
		if ( this.m_activeItem )
		{
			//(cross) fade screenshots
			if ( $(this.m_activeItem).effect ) $(this.m_activeItem).effect.cancel();
			$(this.m_activeItem).effect = Effect.Fade( this.m_activeItem, {duration: 0.4 } );
		}
		
		if ( elem.effect ) elem.effect.cancel();
		elem.effect = new Effect.Appear( elem, {duration: 0.4 } );

		this.m_activeItem = elem;
	},

	HighlightStripItem: function( elem )
	{
		var elem = $(elem);
		elem.siblings().invoke( 'removeClassName', 'on' );
		elem.addClassName( 'on' );
	},

	GetScreenshotId: function( elem )
	{
		return elem.id.replace( /(ticker|img)_/, '' );
	},

	Transition: function()
	{
		var nextItem = this.m_activeItem.next( '.homeSlideItem' );
		if ( !nextItem )
		{
			nextItem = this.m_elemSlideContainer.down( '.homeSlideItem' );
		}
		if ( nextItem )
		{
			this.HighlightItem( nextItem );
		}
	},

	StartTimer: function()
	{
		this.ClearInterval();
		this.interval = window.setTimeout( this.Transition.bind( this ), 5000 );
	},

	ClearInterval: function()
	{
		if ( this.interval )
		{
			window.clearInterval( this.interval );
			this.interval = false;
		}
	},

	mouseOver: function( event )
	{
		this.ClearInterval();
	},

	mouseOut: function( event )
	{
    	var reltarget = (event.relatedTarget) ? event.relatedTarget : event.toElement;
    	if ( reltarget && ( $(reltarget).up( this.m_elemContainer.id ) == this.m_elemContainer ) )
    		return;
    	
    	this.StartTimer();
	}
} );