var zoomLevel = 1.00;
	var MAX_ZOOM = 3.10;
	var MIN_ZOOM = 1.00;
	
	var width = 386;
	var height = 386;
	
	var zoomWidth = 386;
	var zoomHeight = 386;
	
	var zoomed = false;
	var zooming = false; 
	
	var mouseDown = false;
	
	var pos = new Object();
	pos.x = 0;
	pos.y = 0;
	
 
	function zoomIn(){
		
		zoomLevel += .1;
		
		if (zoomLevel > MAX_ZOOM){
			zoomLevel = MAX_ZOOM;
			zoomed = true;
			zooming = false;
			
			document.getElementById('zoom').style.width = zoomLevel * width;
			document.getElementById('zoom').style.height = zoomLevel * height;
			
			// calculate new left / top
			var newLeft=  ((zoomLevel * width) - width) / 2;
			var newTop =  ((zoomLevel * height) - height) / 2;
			pos.x = newLeft;
			pos.y = newTop;
			document.getElementById('zoom').style.left = newLeft * -1;
			document.getElementById('zoom').style.top = newTop * -1;
 
				
			return;
			
		}
		
		document.getElementById('zoom').style.width = zoomLevel * width;
		document.getElementById('zoom').style.height = zoomLevel * height;
		
		// calculate new left / top
		var newLeft=  ((zoomLevel * width) - width) / 2;
		var newTop =  ((zoomLevel * height) - height) / 2;
		pos.x = newLeft;
		pos.y = newTop;
		document.getElementById('zoom').style.left = newLeft * -1;
		document.getElementById('zoom').style.top = newTop * -1;
 
		setTimeout("zoomIn()",10);
	
	}
	
	function zoomOut(x, y){
		zoomLevel -= .1;
		
		if (zoomLevel < MIN_ZOOM){
			zoomLevel = MIN_ZOOM;
			
			placeImage();
			document.getElementById('zoom').style.left  = 0;
			document.getElementById('zoom').style.top = 0;
			document.getElementById('zoom').style.width = zoomLevel * width;
			document.getElementById('zoom').style.height = zoomLevel * height;
			zoomed = false;
			zooming = false;
			return;
		}
		
		placeImage();
		
		var percent = ( (zoomLevel - MIN_ZOOM) *  47.6190 ) ;
		
		// calculate new left
	
		document.getElementById('zoom').style.left  = x / 100 * (percent );
		document.getElementById('zoom').style.top = y / 100 * (percent );
		
		// calculate new right
		
		setTimeout("zoomOut(" + x * 1.0 + "," + y * 1.0 + ")", 10);
	}
	
	function placeImage(){
		document.getElementById('zoom').style.width = zoomLevel * width;
		document.getElementById('zoom').style.height = zoomLevel * height;
		
	}
	
	function toggleZoom() {
		if (zooming) return;
		
		zooming = true;
		
		if (zoomed){
		
			var left = document.getElementById('zoom').style.left.replace('px','') ;
			var top = document.getElementById('zoom').style.top.replace('px','')  ;
			
			zoomOut(left, top);
			
		} else {
			zoomIn();
		}
		
		
	}
	
	function move(e){
		if (! mouseDown || ! zoomed || zooming) {
			return;
		} 
		
		var newPos = getMousePos(e);
		
		var oldLeft = document.getElementById('zoom').offsetLeft;
		var oldTop = document.getElementById('zoom').offsetTop;
		
		var newLeft = oldLeft + ( newPos.x - pos.x );
		var newTop = oldTop + ( newPos.y - pos.y );
 
		var actualWidth = zoomLevel * width;
		var actualHeight = zoomLevel * height;
		
		if (newLeft <= 0 && ( (newLeft + actualWidth) > (width)) ){
			document.getElementById('zoom').style.left = newLeft;
		}
		
		if (newTop <= 0 && ( (newTop + actualHeight) > (height)) ) {
			document.getElementById('zoom').style.top  = newTop;
		}
		
		
		//zoomLevel * width;
		//zoomLevel * height;
		
		pos = getMousePos(e);
 
	}
	
	function down(e){
		// get mouse position when clicked;
		pos = getMousePos(e);
 
		mouseDown = true;
	}
	
	function up(e){
		
		mouseDown = false;
	}
	
	function getMousePos(e){
	
		if (!e) var e = window.event;
		var pos = Object();
		
		if (e.pageX && e.pageY) {
			pos.x = e.pageX; 
			pos.y = e.pageY;
		}
 
		else if (e.clientX && e.clientY) {
			pos.x = e.clientX;
			pos.y = e.clientY;
		}
		
		return pos;
	}
	
	function log(t){
	
		document.getElementById('log').innerHTML = t;
	}