// JavaScript Document
jQuery.ImageWidget = {
	options : {
		additional_Parent	: "#additionalImages", 		// additional images container
		main_Parent			: "#mainImageContainer",	// main image container
		additional_toggle	: ".toggleAdditional",		// object to toggle showing of additional images - class to all for multiple toggle buttons
		additional_Blowup	: "/images/additional/products/blowup/",
		additional_Main		: "/images/additional/products/main/",
		additional_Thumb	: "/images/additional/products/thumbs/",
		additional_Images	: new Array(),
		additional_Index	: -1,
		main_Blowup			: "/images/products/blowup/",
		main_Main			: "/images/products/main/",
		loaderImg			: "/images/imageWidget/loader.gif",
		additional_Open 	: "/imageWidget/closeMoreImages.jpg",
		additional_Closed	: "/imageWidget/viewMoreImages.jpg",
		prev_Image_Btn		: ".prevImage",
		next_Image_Btn		: ".nextImage",
		main_Image_Btn		: ".mainImage",
		move_Speed			: "500"
	},
	init : function ( options )
	{
		if ( options )
			jQuery.extend(jQuery.ImageWidget.options, options);
			jQuery.extend(jQuery.ImageWidget.options, 
						  	{ 
						  		current_Image		: jQuery( jQuery.ImageWidget.options.main_Parent ).find("img:first"),
								main_Image_Path		: jQuery( jQuery.ImageWidget.options.main_Parent ).find("img:first").attr("src")
							} 
			);
		
		jQuery( jQuery.ImageWidget.options.additional_Parent ).find("img")
			.each( function()
				{
					src = jQuery( this ).attr("src")
					jQuery.ImageWidget.options.additional_Images.push( 
						new Array(
							src.replace(
								jQuery.ImageWidget.options.additional_Thumb, 
								jQuery.ImageWidget.options.additional_Main
							),
							src.replace(
								jQuery.ImageWidget.options.additional_Thumb, 
								jQuery.ImageWidget.options.additional_Blowup
							)
						)
					);
				}
		);
		
		jQuery( jQuery.ImageWidget.options.additional_toggle )
			.each( function()
				{
					elToggle = jQuery( this );
					elToggle.bind( "click", function()
					  {
						  jQuery.ImageWidget.toggleAdditionalImages();
					  }
					);
				}
			);
		
		jQuery( jQuery.ImageWidget.options.prev_Image_Btn )
			.each( function()
				{
					elPrev = jQuery( this );
					elPrev.bind( "click", function()
						{
							jQuery( jQuery.ImageWidget.options.loader ).toggle();
							jQuery( jQuery.ImageWidget.options.current_Image ).animate(
								{
									//position	: "relative",
									//left		: jQuery( jQuery.ImageWidget.options.main_Parent ).css("width"),
									opacity		: "toggle"
								}, jQuery.ImageWidget.options.move_Speed, "linear", function()
									{
										jQuery.ImageWidget.changeImage(-1);
									}
							);
						}
					);
				}
			);
		
		jQuery( jQuery.ImageWidget.options.main_Image_Btn )
			.each( function()
				{
					elMain = jQuery( this );
					elMain.bind( "click", function()
						{
							jQuery( jQuery.ImageWidget.options.loader ).toggle();
							jQuery( jQuery.ImageWidget.options.current_Image )
								.fadeOut( 
									jQuery.ImageWidget.options.move_Speed, 
									function()
									{
										jQuery.ImageWidget.changeImage(0);
									}
								);
						}
					);
				}
			);
		
		jQuery( jQuery.ImageWidget.options.next_Image_Btn )
			.each( function()
				{
					elNext = jQuery( this );
					elNext.bind( "click", function()
						{
							jQuery( jQuery.ImageWidget.options.loader ).toggle();
							jQuery( jQuery.ImageWidget.options.current_Image ).animate(
								{
									//position	: "relative",
									//left		: parseInt(jQuery( jQuery.ImageWidget.options.main_Parent ).css("width"))*-1,
									opacity		: "toggle"
								}, jQuery.ImageWidget.options.move_Speed, "linear", function()
									{
										jQuery.ImageWidget.changeImage(1);
									}
							);
						}
					);
				}
			);
			
	},
	
	toggleAdditionalImages : function()
	{
		jQuery( jQuery.ImageWidget.options.additional_Parent ).slideToggle(500, function()
			{
				if ( jQuery( this ).css("display") == "block")
					elToggle.attr ( "src", jQuery.ImageWidget.options.additional_Open);
				else 
					elToggle.attr ( "src", jQuery.ImageWidget.options.additional_Closed);
			});
	},
	
	changeImage : function(moveDirection)
	{	
		blowupImageStr = "";
		newImage = new Image(); //preload image whilst fading out
		newImage.onload = function() {	
			jQuery( jQuery.ImageWidget.options.loader ).toggle();
			jQuery( jQuery.ImageWidget.options.current_Image ).animate(
				{
					//position	: "relative",
					//left		: "0px",
					opacity		: "toggle"
				}, jQuery.ImageWidget.options.move_Speed/*, "easeout",*/
			);
			newImage.onload = function(){} //clear for IE
		}
		
		if ( jQuery.ImageWidget.options.additional_Index == -1) //on main image
			jQuery.ImageWidget.options.additional_Index = 0;
					
		if (moveDirection == 0) 
		{ // if to show main image
			newImage.src = jQuery.ImageWidget.options.main_Image_Path;
			blowupImageStr = jQuery.ImageWidget.options.main_Image_Path.replace(
								jQuery.ImageWidget.options.main_Main, 
								jQuery.ImageWidget.options.main_Blowup
			);
			jQuery.ImageWidget.options.additional_Index = -1;
		} 
		else 
		{
			if ( moveDirection == 1 )
			{
				if ( (jQuery.ImageWidget.options.additional_Index + 1) > jQuery.ImageWidget.options.additional_Images.length-1 )
					jQuery.ImageWidget.options.additional_Index = 0;
				else
					jQuery.ImageWidget.options.additional_Index++;
			}
			else if ( moveDirection == -1 )
			{
				if ( (jQuery.ImageWidget.options.additional_Index - 1) < 0 )
					jQuery.ImageWidget.options.additional_Index = jQuery.ImageWidget.options.additional_Images.length-1;
				else
					jQuery.ImageWidget.options.additional_Index--;
			}
			
			if ( jQuery.ImageWidget.options.additional_Index == -1 )
				jQuery.ImageWidget.options.additional_Index = 0;
			
			newImage.src = jQuery.ImageWidget.options.additional_Images[ jQuery.ImageWidget.options.additional_Index ][0];
			blowupImageStr = jQuery.ImageWidget.options.additional_Images[ jQuery.ImageWidget.options.additional_Index ][1];
		}
		
		//jQuery.ImageWidget.options.current_Image_Src = newImage.src;
		
		jQuery( jQuery.ImageWidget.options.current_Image )
			.attr( "src", newImage.src);
			
		jQuery( jQuery.ImageWidget.options.current_Image ).parent()
			.attr( "href", blowupImageStr);
		//alert("done");
		//newImage = null;
	},
	
	setImageContainerDims : function()
	{
		newImage = new Image(); //preload image whilst fading out
		newImage.onload = function() {	
			jQuery( jQuery.ImageWidget.options.main_Parent )
				.css (
					{
						 height	: jQuery( jQuery.ImageWidget.options.current_Image ).css("height") || document.getElementById( jQuery( jQuery.ImageWidget.options.current_Image ).attr("id") ).height,
						 width	: jQuery( jQuery.ImageWidget.options.current_Image ).css("width")  || document.getElementById( jQuery( jQuery.ImageWidget.options.current_Image ).attr("id") ).width
					}
				);
		}
		newImage.src =  jQuery.ImageWidget.options.main_Image_Path;
	}
};