/*

	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ImageManager %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

*/
	/**
	 *	ImageManager
	 *	This class provides the functionality to zoom and pan a series of images.
	 *
	 *	The class is static, so don’t bother instantiating.
	 *
	 *	@constructor
	 */
	function ImageManager() {
		alert('ImageManager is a static class, do not instantiate');  // Self explanatory
	}
	
	/**
	 *	Allowed magnification factor.  image_width * magnification_factor = maximum_zoom_width
	 */
	ImageManager.zoom_factor = 2;	// 25% of the original size
	
	
	/**
	 *	Whether or not to make the image transparent while a zoom is in progress
	 */
	ImageManager.smooth_zoom = true;
	
	/**
	 *	The width of the display area
	 */
	ImageManager.display_width = 400;
	
	/**
	 *	The height of the display area
	 */
	ImageManager.display_height = 400;
	
	

	/**
	 *	Load a new image into the image manager
	 *
	 *	@param url The URL of the image
	 *	@param minimum_zoom_width (Optional) The minimum number of pixels this image's width can be reduced to
	 *	@param maximum_zoom_width (Optional) The maximum number of pixels this image's width can be expanded to
	 *	@param minimum_zoom_height (Optional) The minimum number of pixels this image's height can be reduced to
	 *	@param maximum_zoom_height (Optional) The maximum number of pixels this image's height can be expanded to
	 *
	 *	@return true
	 */
	ImageManager.loadImage = function(url, minimum_zoom_width, maximum_zoom_width, minimum_zoom_height, maximum_zoom_height) {
		ImageManager.image_url = url;
		ImageManager.image_zoom = 0;
		ImageManager.image_x = 0;
		ImageManager.image_y = 0;
		ImageManager.minimum_zoom_width = minimum_zoom_width;
		ImageManager.maximum_zoom_width = maximum_zoom_width;
		ImageManager.minimum_zoom_height = minimum_zoom_height;
		ImageManager.maximum_zoom_height = maximum_zoom_height;
		ImageManager.i_zoom_cover = document.getElementById('zoom_cover');
		
		if (ImageManager.i_image == undefined) {
			ImageManager.i_image = new Image();	
			ImageManager.i_image.style.position = "relative";
			ImageManager.i_zoom_cover.onselectstart = function() { return false; }
			
			ImageManager.i_zoom_cover.onmousedown = function() {
				var startX = mouseX;
				var startY = mouseY;
				var mvB = document.onmousemove;
				var upB = document.onmouseup;
				
				var startLeft = ImageManager.image_left;
				var startTop = ImageManager.image_top;
			
				document.onmousemove = function(e) {
			
					var diffX = (mouseX - startX);
					var diffY = (mouseY - startY);
					
					ImageManager.image_left = startLeft + diffX;
					ImageManager.image_top = startTop + diffY;
					
					if (ImageManager.image_left > 0) {
						ImageManager.image_left = 0;
					}
					if (ImageManager.image_left < (400 - ImageManager.image_width) && ImageManager.image_width >= 400) {
						ImageManager.image_left = 400 - ImageManager.image_width;
					}
					
					if (ImageManager.image_top > 0) {
						ImageManager.image_top = 0;
					}
					
					if (ImageManager.image_top < (400 - ImageManager.image_height) && ImageManager.image_height >= 400) {
						ImageManager.image_top = 400 - ImageManager.image_height;
					}
					
					
					
					ImageManager.i_image.style.left = ImageManager.image_left + "px";
					ImageManager.i_image.style.top = ImageManager.image_top + "px";

					if (mvB != undefined) {
						mvB.call(this, e);
					}
				}
				document.onmouseup = function(e) {
					
					document.onmousemove = mvB;
					document.onmouseup = upB;

				
					if (upB != undefined) {
						upB.call(this. e);
					}
				}
			}
			
		}
		reset_slide();
		
		ImageManager.i_image.onload = ImageManager.imageLoaded;
		ImageManager.i_image.style.width = "";
		ImageManager.i_image.style.height = "";
		ImageManager.i_image.src = url;
		
		ImageManager.i_zoom_box = document.getElementById('enlarged_image');
		ImageManager.i_zoom_box.className = "enlarged_image";
		
		ImageManager.i_zoom_box.style.width = ImageManager.display_width;
		ImageManager.i_zoom_box.style.height = ImageManager.display_height;
	}
	
	/**
	 *	Handler which is called once the image finishes downloading
	 *
	 *	@return true
	 */
	ImageManager.imageLoaded = function() {
		if (ImageManager.i_init == undefined) {
	
			ImageManager.i_zoom_box.appendChild(ImageManager.i_image);


		}
		ImageManager.i_image.onload = null;
		
		
		
		ImageManager.minimum_zoom_width = parseInt(ImageManager.i_image.offsetWidth);
		ImageManager.minimum_zoom_height = parseInt(ImageManager.i_image.offsetHeight);
		
		ImageManager.maximum_zoom_width = Math.floor(ImageManager.minimum_zoom_width * ImageManager.zoom_factor);
		ImageManager.maximum_zoom_height = Math.floor(ImageManager.minimum_zoom_height * ImageManager.zoom_factor);
		
		ImageManager.image_width = ImageManager.minimum_zoom_width;
		ImageManager.image_height = ImageManager.minimum_zoom_height;
		
		ImageManager.center();
	

	
		return true;
	}
	
	/**
	 *	Center the image in the display area
	 *
	 *	@return true
	 */
	ImageManager.center = function() {
		var l = Math.floor((ImageManager.display_width - ImageManager.image_width) / 2);
		var t = Math.floor((ImageManager.display_height - ImageManager.image_height) / 2);
		

		ImageManager.i_image.style.left = l;
		ImageManager.i_image.style.top = t;
		
		ImageManager.image_top = t;
		ImageManager.image_left = l;
		
		return true;
	}
	
	
	/**
	 *	Change the current zoom.
	 *
	 *	@param zoom_amount The percentage of the (zoom_maximum - zoom_minimum) to increase/decrease the image to. 
	 *			expected values are 1 to 100.
	 *
	 *
	 *	@return true
	 */
	ImageManager.zoomImage = function(zoom_amount) {

		var width_diff = Math.floor((ImageManager.maximum_zoom_width - ImageManager.minimum_zoom_width) * ((zoom_amount / 100) * ImageManager.zoom_factor));
		var height_diff = Math.floor((ImageManager.maximum_zoom_height - ImageManager.minimum_zoom_height) * ((zoom_amount / 100) * ImageManager.zoom_factor));
		
	
		var new_width =  ImageManager.minimum_zoom_width + width_diff
		var new_height = ImageManager.minimum_zoom_height + height_diff;

		var top_adjust = Math.floor((new_height - ImageManager.image_height) / 2);
		var left_adjust = Math.floor((new_width - ImageManager.image_width) / 2);
		

		ImageManager.image_width = new_width;
		ImageManager.image_height = new_height;
		
		ImageManager.image_top = (ImageManager.image_top - top_adjust);
		ImageManager.image_left = (ImageManager.image_left - left_adjust);
		
		if (ImageManager.image_left > 0) {
			ImageManager.image_left = 0;
		}
		if (ImageManager.image_left < (400 - ImageManager.image_width) && ImageManager.image_width >= 400) {
			ImageManager.image_left = 400 - ImageManager.image_width;
		}

		if (ImageManager.image_top > 0) {
			ImageManager.image_top = 0;
		}

		if (ImageManager.image_top < (400 - ImageManager.image_height) && ImageManager.image_height >= 400) {
			ImageManager.image_top = 400 - ImageManager.image_height;
		}

		ImageManager.i_image.style.left = ImageManager.image_left + "px";
		ImageManager.i_image.style.top = ImageManager.image_top + "px";
		ImageManager.i_image.style.width = new_width + "px";
		ImageManager.i_image.style.height = new_height + "px";
		

					
		
	}
	
	
	ImageManager.init = function() {

		zoom_select = document.getElementById('zoom_selector');

		zoom_slide = document.createElement('DIV');
		zoom_slide.innerHTML = "&nbsp;";
		zoom_slide.className = "zoom_slider";
		zoom_select.appendChild(zoom_slide);

		zoom_slide.style.left = "10px"

		zoom_current = 0;
		zoom_left = 0;
		zoom_span = 375;



		zoom_slide.onmousedown = function() {
			var startX = mouseX;
			var mvB = document.onmousemove;
			var upB = document.onmouseup;

			var a_left = zoom_left;
			var doClass = false;

			document.onmousemove = function(e) {

				if (!doClass) {
					ImageManager.i_image.className = "image_zooming";
					ImageManager.i_zoom_box.className = "enlarged_image_zoom";
				}
				doClass = true;

				var newleft = zoom_left;

				newleft+=(mouseX - startX);

				if (newleft > zoom_span) {
					newleft = zoom_span;
				}
				if (newleft < 0) {
					newleft = 0;
				}

				zoom_slide.style.left = (newleft + 10) + "px";
				a_left = (newleft);


				ImageManager.zoomImage((newleft / zoom_span) * 100);

				if (mvB != undefined) {
					mvB.call(this, e);
				}
			}
			document.onmouseup = function(e) {
				document.onmousemove = mvB;
				document.onmouseup = upB;
				zoom_left = a_left;

				ImageManager.i_image.className = "";
				ImageManager.i_zoom_box.className = "enlarged_image";

				if (upB != undefined) {
					upB.call(this. e);
				}
			}
		}
		zoom_slide.onselectstart = zoom_select.onselectstart = function() { window.event.cancelBubble = true; window.event.returnValue = false; return false; }


		move_bck = document.onmousemove;
		mouseX;
		mouseY;
		document.onmousemove = function(e) {
			if (document.all) {
				mouseX = event.clientX + document.body.scrollLeft;
				mouseY = event.clientY + document.body.scrollTop;
			}
			else {
				mouseX = e.pageX;
				mouseY = e.pageY;
			}
			if (move_bck != undefined) {
				move_bck.call(this, e);
			}
			return true;
		}

	}
	
	
	
/*

	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% Init code %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

*/


	var zoom_select;

	var zoom_slide;

	var zoom_current;
	var zoom_left;
	var zoom_span;

	var move_bck;
	var mouseX;
	var mouseY;

	function reset_slide() {
		zoom_left = 0;
		zoom_slide.style.left = "10px";
	}