var mouseX    = 0;
	var mouseY    = 0;
	var lastid    = 0;
	var lastpic   = 0;
	var size	  = 320;
	var cursorbuff= 10;
	var layerHeadingHeight = 28;
	var loadingpic   = false;	
	var windowHeight = window.innerHeight;
	var img = new Image();
	var bigimage = document.getElementById('BigImage');
	var isIE = false;
	if (navigator.appName.indexOf("Microsoft")!=-1) {
		var isIE = true;
		windowHeight = document.body.clientHeight;
		document.getElementById('BigImageHeading').style.width = '100%';
	}
		
	function movement(evt) {
		mouseX = evt.clientX,
		mouseY = evt.clientY;
	}
	
	function setLayerPosition(wrapper) {
		if (isPageEndLayer(mouseY)) {
			setUpLayer(wrapper);
		} else {
			setDownLayer(wrapper);
		}
	}
	
	function isPageEndLayer(cursorY) {
		// check if layer would reach out of the visible space:
		return (windowHeight <= (cursorY+size+layerHeadingHeight+cursorbuff));
	}
	
	function setUpLayer(wrapper) {
		wrapper.style.left = mouseX-img.width-cursorbuff;
		if (isIE) {
			wrapper.style.top  = document.body.scrollTop+(mouseY-(size+layerHeadingHeight+cursorbuff));
		} else {
			wrapper.style.top  = window.pageYOffset+(mouseY-(size+layerHeadingHeight+cursorbuff));
		}		
	}
	
	function setDownLayer(wrapper) {
		wrapper.style.left = mouseX-img.width-cursorbuff;
		//alert('test');
		//alert(window.pageYOffset);document.body.parentNode.scrollheight; 
		//alert(wrapper.style.top+'-'+mouseY+'-'+cursorbuff+'-'+document.body.parentNode.scrollheight);
		if (isIE) {
			wrapper.style.top  = document.body.scrollTop+(mouseY+cursorbuff);
		} else {
			wrapper.style.top  = window.pageYOffset+(mouseY+cursorbuff);
		}		
	}

	function hoverBigImage(obj, id, pic, heading) {
		if (loadingpic == true) { 
			// exit if a pic is just loading:
			return; 
		}
		var bigsrc = '/thumb.php?t=shop&p='+id+'_'+pic+'&h='+size;
		var wrapper = document.getElementById('BigImageWrapper');
		var bigimgheading = document.getElementById('BigImageHeading');
		
		//bigimage.src = '/img/loading.gif';
		
		// if pic has been loaded already, only move the layer:
		if (id == lastid && pic == lastpic) {
			setLayerPosition(wrapper);
			return;			
		}
		
		lastid  = id;
		lastpic = pic;
		
		// hide layer until pic is loaded:
		wrapper.style.display = 'none';	
		img.src = bigsrc;
		if (isIE) {
			wrapper.style.width 		= img.width;
			bigimgheading.style.width 	= img.width;
			bigimgheading.style.display = 'inline';
		}
				
//		while (!img.complete)  {
//			loadingpic = true;
//		}
		loadingpic = false;
		bigimgheading.innerHTML = heading;
		setLayerPosition(wrapper);
		showBigImage();
	}
	
	function resetPicIds() {
		lastid  = 0;
		lastpic = 0;
	}
	
	function showBigImage() {
		var wrapper = document.getElementById('BigImageWrapper');
		bigimage.src = img.src;	
		wrapper.style.display = 'block';	
	}
	
	function hideBigImage() {
		document.getElementById('BigImageWrapper').style.display = 'none';	
		bigimage.src = '/img/loading.gif';	
	}