/*

what needs to happen?

user clicks the image
user sees loading icon
image loads
loading icon removed
big image is shown


on click... create new image, attach a callback when image is loaded
show a loading icon


	
		// create the javascript image
		// create an image object
		objImage = new Image();
		   
		// set what happens once the image has loaded 
		objImage.onLoad=imagesLoaded();
		
		
		
		// preload the image file
		objImage.src= bigimage;
		
	// end the function here
	
	
	
function imagesLoade	
	
	
on the callback
remove the loading icon
show the image

*/

	var _global_this;
	var _global_bigimage;
	var _global_settings;
	var _global_event;

(function($j){
	var _hovering = false;
	var _zooming = false;

	
	$j.fn.jqueryzoom = function(options){

	var settings = 
	{
		xzoom: 200,		//zoomed width default width
		yzoom: 200,		//zoomed div default width
		offset: 0,		//zoomed div default offset
		position: "right" ,//zoomed div default position,offset position is to the right of the image
		lens:1, //zooming lens over the image,by default is 1;
		showPreload: true,
		fadeIn: 300,
		fadeOut: 500
	};

	if(options)
	{
		$j.extend(settings, options);
	}
	
	_global_settings = settings;
	
	function show_notice()
	{
		if(_hovering == false && _zooming == false)
		{
			_hovering = true;
			$j(".jqzoom #rollovertozoom").fadeIn(100);
		}
	}
	
	function hide_notice(time)
	{
		if(_hovering == true)
		{
			$j(".jqzoom #rollovertozoom").fadeOut(time, function(){ _hovering=false; } );
		}
	}
	
	$j(".jqzoom").prepend('<div id="rollovertozoom" />');
	$j(".jqzoom #rollovertozoom").animate({opacity:1}, 5000, function(){$j(this).fadeOut(1000);});
	
	var noalt='';
	
	$j('.jqzoom').bind('mouseover', function() { show_notice(); });
	$j('.jqzoom').bind('mouseout', function() { hide_notice(); } );

	_zooming = false;
	
	
	// 	_zooming = true;
	

		
	
	// On hover
	$j(this).mousedown(function(e)
	{
		if(_zooming)
		{
			// Hide the notice instantly
			hide_notice(1);	
			return;
		}
		
		// We are loading the image
		//$j('#info h1').html('loading....');
		$j('#loadingbigimage').css('display', 'block')	
		
		// Determine the name of the large image
		var bigimage = $j(this).children('img').attr('src');
		
		// Last section stylecode-colorcode-1-6.jpg
		bigimage = bigimage.replace(/^.*[\/\\]/g, '');

		// Correct location is /m/1/m1200-100.jpg
		bigimage = BASE_URL + 'media/catalog/product/'+bigimage.substr(0,1)+'/'+bigimage.substr(1,1)+'/'+bigimage;

		_global_this =this;
		_global_bigimage = bigimage;
		_global_event = e;

		// create an image object
		objImage = new Image();
		// set what happens once the image has loaded 
		objImage.onload = imagesLoaded;
		objImage.src= bigimage;
	});
}

})(jQuery);

function MouseEvent(e)
{
	this.x = e.pageX;
	this.y = e.pageY;
}



//george's rubbish functions
function imagesLoaded()
{
	image = _global_this;
	bigimage = _global_bigimage;
	settings = _global_settings;
	e = _global_event;
	
			//center the stuff here...
		mouse = new MouseEvent(e);
		
	//$j('#info h1').html('loaded.');
	$j('#loadingbigimage').css('display', 'none')
		
		// preload the image file
		
		// find an event that is called when the image fully loaded
		// do the rest of the config in another function

		
		$j(image).children("img").attr("alt",'');

		if($j("div.zoomdiv").get().length == 0)
		{
			$j(image).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");
			
			$j('div.zoomdiv').fadeIn(settings.fadeIn);
			$j(image).append("<div class='jqZoomPup'>&nbsp;</div>");
			$j('div.jqZoomPup').fadeIn(settings.fadeIn);
			
		}
		
		var imageLeft = $j(image).offset().left;
		var imageTop = $j(image).offset().top;
 
		var imageWidth = $j(image).children('img').get(0).offsetWidth;
		var imageHeight = $j(image).children('img').get(0).offsetHeight;

		noalt= $j(image).children("img").attr("alt");
		
		if(settings.position == "right")
		{
			if(imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width)
			{
				leftpos = imageLeft- settings.offset - settings.xzoom;
			}
			else
			{
				leftpos = imageLeft + imageWidth + settings.offset;
			}
		}
		else
		{
			leftpos = imageLeft - settings.xzoom - settings.offset;
			
			if(leftpos < 0)
			{
				leftpos = imageLeft + imageWidth+ settings.offset;
			}
		}

		$j("div.zoomdiv").css({ top: imageTop+1,left: leftpos });
		$j("div.zoomdiv").width(settings.xzoom);
		$j("div.zoomdiv").height(settings.yzoom);
	
		if( !settings.lens )
		{
			$j(image).css('cursor','crosshair');
		}
		
		
		
		//center the stuff here...
		//mouse = new MouseEvent(e);
		
			var bigwidth = $j(".bigimg").get(0).offsetWidth;
			var bigheight = $j(".bigimg").get(0).offsetHeight;
			var scaley ='x';
			var scalex= 'y';
		
			if(isNaN(scalex)|isNaN(scaley))
			{
				var scalex = (bigwidth/imageWidth);
				var scaley = (bigheight/imageHeight);
				
				$j("div.jqZoomPup").width((settings.xzoom)/scalex );
				$j("div.jqZoomPup").height((settings.yzoom)/scaley);
				
				if(settings.lens)
				{
					$j("div.jqZoomPup").css('visibility','visible');
				}
			}
		
			xpos = mouse.x - $j("div.jqZoomPup").width()/2 - imageLeft;
			ypos = mouse.y - $j("div.jqZoomPup").height()/2 - imageTop ;
		
			xpos = mouse.x - $j("div.jqZoomPup").width()/2 - imageLeft;
			ypos = mouse.y - $j("div.jqZoomPup").height()/2 - imageTop;
			
			if(settings.lens)
			{
				xpos = (mouse.x - $j("div.jqZoomPup").width()/2 < imageLeft ) ? 0 : (mouse.x + $j("div.jqZoomPup").width()/2 > imageWidth + imageLeft ) ?(imageWidth -$j("div.jqZoomPup").width() -2): xpos;
				ypos = (mouse.y - $j("div.jqZoomPup").height()/2 < imageTop ) ? 0 : (mouse.y + $j("div.jqZoomPup").height()/2> imageHeight + imageTop ) ?(imageHeight - $j("div.jqZoomPup").height() -2 ) : ypos;
			}
		
			if(settings.lens)
			{
				$j("div.jqZoomPup").css({ top: ypos,left: xpos });
			}
	
			scrolly = ypos;
			$j("div.zoomdiv").get(0).scrollTop = scrolly * scaley;
			scrollx = xpos;	
			$j("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex;
			
			
//==============

		

//===============
		
		$j(document.body).mousemove(function(e)
		{
			mouse = new MouseEvent(e);

			var bigwidth = $j(".bigimg").get(0).offsetWidth;
			var bigheight = $j(".bigimg").get(0).offsetHeight;
			var scaley ='x';
			var scalex= 'y';

			
			if(isNaN(scalex)|isNaN(scaley))
			{
				var scalex = (bigwidth/imageWidth);
				var scaley = (bigheight/imageHeight);
				
				$j("div.jqZoomPup").width((settings.xzoom)/scalex );
				$j("div.jqZoomPup").height((settings.yzoom)/scaley);
				
				if(settings.lens)
				{
					$j("div.jqZoomPup").css('visibility','visible');
					$j("div.jqZoomPup").css('filter','alpha(Opacity=69)');
				}
			}
		
			xpos = mouse.x - $j("div.jqZoomPup").width()/2 - imageLeft;
			ypos = mouse.y - $j("div.jqZoomPup").height()/2 - imageTop ;
		
			xpos = mouse.x - $j("div.jqZoomPup").width()/2 - imageLeft;
			ypos = mouse.y - $j("div.jqZoomPup").height()/2 - imageTop;
			
			if(settings.lens)
			{
				xpos = (mouse.x - $j("div.jqZoomPup").width()/2 < imageLeft ) ? 0 : (mouse.x + $j("div.jqZoomPup").width()/2 > imageWidth + imageLeft ) ?(imageWidth -$j("div.jqZoomPup").width() -2): xpos;
				ypos = (mouse.y - $j("div.jqZoomPup").height()/2 < imageTop ) ? 0 : (mouse.y + $j("div.jqZoomPup").height()/2> imageHeight + imageTop ) ?(imageHeight - $j("div.jqZoomPup").height() -2 ) : ypos;
			}
		
			if(settings.lens)
			{
				$j("div.jqZoomPup").css({ top: ypos,left: xpos });
			}
			
			if( $j.browser.version == '6.0' )
			{
				//IE 6 to hide select box
				$j('#product-options-wrapper select').css('display', 'none')
			}
	
			scrolly = ypos;
			$j("div.zoomdiv").get(0).scrollTop = scrolly * scaley;
			scrollx = xpos;	
			$j("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex;
			
			//unbid if continual clicking
			$j(document.body).click(function(e)
				{
					$j(document.body).unbind("mousemove");					
				});
						
		});
		
		$j(image).bind("mouseleave",function()
		{
			$j(this).children("img").attr("alt",noalt);
			$j(document.body).unbind("mousemove");
			
			if(settings.lens)
			{
				$j("div.jqZoomPup").fadeOut(settings.fadeOut, function ()
				{
					$j(this).remove();
				});
			}
			
			if( $j.browser.version == '6.0' )
			{
				//IE 6
				$j('#product-options-wrapper select').css('display', 'block')
			}	
			
			$j('div.zoomdiv').fadeOut(settings.fadeOut, function ()
			{
				_zooming = false;
				$j(this).remove();
			});
   		});
}