var zoomMagnify = new Object();
	var activeState = 0;
	
	var windowWidth;
	var windowHeight;
	var imageWidth;
	var imageHeight;
	var baseWidth;
	var baseHeight;
	var shellWidth;
	var shellHeight;
	var startHeight;

// Get total occupied width of element
	var getOffsetWidth = 
		function(obj) {
			return obj.offsetWidth;
		};
// Get total occupied height of element
	var getOffsetHeight = 
		function(obj) { // console.log(obj.offsetHeight);
			return obj.offsetHeight;
		};
		
/***** MOUSE POSITION WITHIN A WINDOW *****/

// X position of mouse
	var getMousePositionX = function(evt) {
		return Event.pointerX(evt);
	}

// Y position of mouse
	var getMousePositionY = function(evt) {
		return Event.pointerY(evt);
	}

/***** MOUSE POSITION WITHIN AN ELEMENT ****/

// X position of mouse
	var getMouseOffsetX = function(obj) {
		var mousePos = getMouseOffset(obj);
		return mousePos.x
		};

// Y position of mouse
	var getMouseOffsetY = function(obj) {
		var mousePos = getMouseOffset(obj);
		return mousePos.y
		};

// Get mouse position within element
	var getMouseOffset = function(obj) {
		var posX = obj.offsetLeft;
		var posY = obj.offsetTop;
		
		while(obj.offsetParent) {
			if(obj == document.getElementsByTagName('body')[0]) {
				break
			} else {
				posX	= posX + obj.offsetParent.offsetLeft;
				posY	= posY + obj.offsetParent.offsetTop;
				obj		= obj.offsetParent;
			}
		}
		var mouseOffset = {
				x: posX,
				y: posY
				};
		return mouseOffset;
	}

/***** GET THE FUNCTIONS STARTED *****/

	zoomMagnify.start = function() {
		
		var zoomBg = $$('#zoom_container #zoom_bg')[0];
		
		var contentFull			= $$('.pictures')[0];
		var contentFullHeight	= getOffsetHeight(contentFull);
		var contentFullWidth	= getOffsetWidth(contentFull);
		
		startHeight = contentFullHeight;
		
		zoomBg.style.height			= startHeight + 'px';
		
		Event.observe($('zoom_base'), 'mouseover', function() { zoomMagnify.windowMonitor(1) } );
		Event.observe($('zoom_base'), 'mousemove', function() { zoomMagnify.windowMonitor(1) } );
	}


/***** SHOW / HIDE THE ZOOM WINDOW BASED ON POSITION *****/

	zoomMagnify.windowMonitor = function(State) {
	// Activate / hide the zoom window based on mouse position
		if(State == 1 && activeState == 0) {
			new Effect.Appear($('zoom_container'), { duration: 0.25, beforeStart: function() {
				activeState = 0.5;
			}, afterFinish: function(e) {
				zoomMagnify.Content();
				activeState = 1;
				zoomMagnify.runWindow;
			}});
		}
		if(State == 0 && activeState == 1) {
			new Effect.Fade($('zoom_container'), { duration: 0.25, beforeStart: function() {
				activeState = 0.5
			}, afterFinish: function() {
				activeState = 0,
				$('zoom_shell').hide();
				$('zoom_window').setStyle({visibility: 'hidden'});
				
				Event.stopObserving($('zoom_mask'), 'mousemove');
				Event.stopObserving($('zoom_window'), 'mousemove');
				Event.stopObserving(document, 'mousemove');
			}});
		}
	}
	
	zoomMagnify.Content = function() {
		$('zoom_window').style.backgroundImage = 'url(' + $('zoom_base').src + ')';
		$('zoom_window').show();
		
		Event.observe(document, 'mousemove', zoomMagnify.runWindow );
		$('zoom_shell').show();

		windowWidth		= getOffsetWidth($('zoom_window'));
		windowHeight	= getOffsetHeight($('zoom_window'));
		imageWidth		= getOffsetWidth($('zoom_image'));
		imageHeight		= getOffsetHeight($('zoom_image'));
		baseWidth		= getOffsetWidth($('zoom_base'));
		baseHeight		= getOffsetHeight($('zoom_base'));
		shellWidth		= getOffsetWidth($('zoom_shell'));
		shellHeight		= getOffsetHeight($('zoom_shell'));
	}

/***** MOVE THE ZOOM WINDOW WITHIN THE BOUNDARIES OF THE SHELL *****/	

	zoomMagnify.runWindow = function(e) {
		
		var theElement 	= Event.element(e);
		
		if(theElement != $('zoom_window') && theElement != $('zoom_mask')) {
			zoomMagnify.windowMonitor(0);
		} else {

		// Calculate ratios
			var ratioWindowX	= windowWidth / 2;
			var ratioWindowY	= windowHeight / 2;
			var ratioX 			= (imageWidth - shellWidth) / (baseWidth - windowWidth);
			var ratioY 			= (imageHeight - shellHeight) / (baseHeight - windowHeight);
	
		// Location and event variables
			var x = getMousePositionX(e) - getMouseOffsetX($('zoom_mask'));
			var y = getMousePositionY(e) - getMouseOffsetY($('zoom_mask'));
			
		// Calculate boundaries for the zoom window
			var maxLeft		= ratioWindowX;
			var maxTop		= ratioWindowY;
			var maxRight	= baseWidth - ratioWindowX;
			var maxBottom	= baseHeight - ratioWindowY;
	
		// Keep the zoom window within the boundaries of the shell
			if(x > maxRight) xPos = baseWidth - windowWidth;
			if(x < maxRight && x > maxLeft) xPos = x - ratioWindowX;
			if(x < maxLeft)  xPos = 0;
	
			if(y < maxTop) yPos = 0;
			if(y > maxTop && y < maxBottom) yPos = y - ratioWindowY;
			if(y > maxBottom) yPos = baseHeight - windowHeight;
			
		// Calculate position of the zoom window
			$('zoom_window').style.left = xPos + 'px';
			$('zoom_window').style.top = yPos + 'px';
			
		// Dynamically change the background image position
			$('zoom_window').style.backgroundPosition = (xPos * -1) + 'px ' + (yPos * -1) + 'px';
			
		// Calculate related positions of the zoom window background content
			var xBackPos = (xPos) * ratioX;
			var yBackPos = (yPos) * ratioY;
	
			$('zoom_image').style.left = (xBackPos * -1) + 'px';
			$('zoom_image').style.top = (yBackPos * -1) + 'px';	
			$('zoom_window').style.visibility = 'visible';
		}
	}

/***** START ON PAGE LOAD *****/

Event.observe(window, 'load', function() { zoomMagnify.start(); });