Epson.ProGraphics =
{
	image:null,
	temp_image:null,
	description:null,
	products:[],
	transition:false,
	current:0,
	current_item:null,

	setup: function()
	{
		Epson.ProGraphics.description = jQuery( '#ProShowCase .description' );

		// get data
		var x  = 0;
		jQuery( '#ProShowCaseList li' ).each( function()
		{
			var image = this.className.match( /psc-image-([^\s]+)/ );
			var heading = this.className.match( /psc-heading-([^\s]+)/ );
			var caption = this.className.match( /psc-text-([^\s]+)/ );
			var link = this.className.match( /psc-link-([^\s]+)/ );

			if ( image && heading && caption )
			{
				// save data
				var product = { image:image[1], heading:unescape( heading[1] ), caption:unescape( caption[1] ) };
				if ( link ) product.link = link[1];

				Epson.ProGraphics.products.push( product );

				// set up events
				var index = x++;
				jQuery( this ).bind( 'mouseover', function(e) { Epson.ProGraphics.swap( this, index, e) } );
			}
		} );

		// preload images
		Epson.ProGraphics.preload();

		// create image
		Epson.ProGraphics.image = jQuery( '#ProShowCase img.mainImage' );
	},

	swap: function( element, index, e )
	{
		var target = e.target.nodeName == 'LI' ? e.target : jQuery( e.target ).parents( 'li' )[0];
		var related_target = e.relatedTarget.nodeName == 'LI' ? e.relatedTarget : jQuery( e.relatedTarget ).parents( 'li' )[0];
		if ( target == related_target ) return;

		if ( Epson.ProGraphics.transition )
		{
			Epson.ProGraphics.image.stop();
			Epson.ProGraphics.temp_image.stop().animate( { opacity:0, left:-50 }, 200, 'swing', function() { jQuery( this ).remove() } );
		}

		if ( Epson.ProGraphics.current_item ) Epson.ProGraphics.current_item.animate( { opacity:0.5 }, 300, 'swing' );

		Epson.ProGraphics.current = index;

		// clone old image for crossfade
		Epson.ProGraphics.temp_image = jQuery( '<img class="tempImage" />' );
		Epson.ProGraphics.temp_image.bind( 'load', function()
		{
			Epson.ProGraphics.temp_image.css( { display:'block', zIndex:10 } );

			// change image
			Epson.ProGraphics.image.css( { opacity:0, left:'50px', zIndex:11, visibility:'hidden' } );
			if ( Epson.ProGraphics.products[ index ].image.match( /([^\/]+)$/ )[1] != Epson.ProGraphics.image[0].src.match( /([^\/]+)$/ )[1] )
			{
				Epson.ProGraphics.image.bind( 'load', Epson.ProGraphics.notifyLoaded );
				Epson.ProGraphics.image[0].src = Epson.ProGraphics.products[ index ].image;
				if (Epson.ProGraphics.products[ Epson.ProGraphics.current ].link)
				{ Epson.ProGraphics.image.css({cursor:'pointer'}).bind( 'click', function(){ window.location = Epson.ProGraphics.products[ Epson.ProGraphics.current ].link }); }
				else { Epson.ProGraphics.image.css({cursor:'default'}) }
			}
			else Epson.ProGraphics.notifyLoaded();

			// fade in current item
			Epson.ProGraphics.current_item = jQuery( element );
			Epson.ProGraphics.current_item.animate( { opacity:1 }, 300, 'swing' );

			Epson.ProGraphics.transition = true;
		} );
		Epson.ProGraphics.temp_image[0].src = Epson.ProGraphics.image[0].src;
		jQuery( '#ProShowCase' ).append( Epson.ProGraphics.temp_image );
	},

	notifyLoaded: function(e)
	{
		// fade out old image
		Epson.ProGraphics.temp_image.css( { visibility:'visible' } ).animate( { opacity:0, left:-50 }, 200, 'swing', function()
		{
			jQuery( this ).remove();

			// fade in new image
			Epson.ProGraphics.image.animate( { opacity:1, left:0 }, 500, 'swing', Epson.ProGraphics.cleanup );
		} );

		// show image
		Epson.ProGraphics.image.css( { visibility:'visible' } );

		// change text
		Epson.ProGraphics.description.find( 'h1' ).html( Epson.ProGraphics.products[ Epson.ProGraphics.current ].heading );
		Epson.ProGraphics.description.find( 'p' ).html( Epson.ProGraphics.products[ Epson.ProGraphics.current ].caption );
		if ( Epson.ProGraphics.products[ Epson.ProGraphics.current ].link )
		{
			Epson.ProGraphics.description.find( 'a' ).css( { display:'inline-block' } );
			Epson.ProGraphics.description.find( 'a' )[0].href = Epson.ProGraphics.products[ Epson.ProGraphics.current ].link;
		}
		else
		{
			Epson.ProGraphics.description.find( 'a' ).css( { display:'none' } );
		}
	},

	cleanup: function()
	{
		Epson.ProGraphics.transition = false
	},

	preload: function()
	{
		jQuery.each( Epson.ProGraphics.products, function()
		{
			var image = new Image();
			image.src = this.image;
		} );
	}
}