document.onmousemove = setPreviewPosition;

var windowWidth = 0;
var windowHeight = 0;
var mouseX = 0;
var mouseY = 0;
//var yOffset = 0;
//var xOffset = 0;
var imageWidth = 0;
var imageHeight = 0;
var hide_timeout = '';
var type = 0;

// STICKS ON SCREEN WITH CLICK
function showCartItem(rawHTML, src, width, height){
	imageWidth = width;
	imageHeight = Math.round(height);
	var preview;
	preview = rawHTML;
	preview += "<div style='clear:both;'></div>";
	preview += "<img id='preview_image' src='" + src +"'>";
	var previewWindow = document.getElementById('preview');
	previewWindow.innerHTML = preview;
	previewWindow.style.paddingTop = '5px';
	previewWindow.style.background = "#222";
	previewWindow.style.position = "absolute";
	previewWindow.style.zIndex = "10";
	previewWindow.style.display = "block";
	previewWindow.style.border = "5px solid #245";/**/	
	//document.onmouseup = setPreviewPosition;
	document.onmousemove = "";
	//previewWindow.style.height = (imageHeight + 25) + 'px';
	previewWindow.style.left = (windowWidth / 2) - (imageWidth /2) + "px";
	document.all ? previewWindow.style.top = windowHeight + 'px':'';
	!document.all ? previewWindow.style.top = (windowHeight - imageHeight - 200) + 'px':'';
	//setPreviewPosition(window.event);
	type = 'click';
}
// SHOWS WHEN HOVER PREVIEW
function showDetails(rawHTML, src, width, height){
	clearTimeout(hide_timeout);
	imageWidth = 300;
	var percent = (imageWidth/width);
	imageHeight = Math.round(height * percent);
	var preview;
	preview = rawHTML;
	//preview += "<p>"+width+"x"+height+"</p><br>";
	preview += "<img style='width:"+imageWidth+"px' id='preview_image' src='" + src +"'>";
	var previewWindow = document.getElementById('preview');
	previewWindow.innerHTML = preview;
	previewWindow.style.background = "#222";
	previewWindow.style.position = "absolute";
	previewWindow.style.zIndex = "1000";
	previewWindow.style.display = "block";
	previewWindow.style.border = "5px solid #245";/**/
	type = 'hover';
}
function hideDetails(){
	hide_timeout = setTimeout(function(){
			var previewWindow = document.getElementById('preview');
			previewWindow.style.display = "none";
			document.onmousemove = setPreviewPosition;
			}, 750);
}
function hideDetailsCart(){
	var previewWindow = document.getElementById('preview');
	previewWindow.style.display = "none";
	document.onmousemove = setPreviewPosition;
	
}
function getWindowSize(e)
{
	if(!document.all){
		windowHeight = window.outerHeight// + window.pageYOffset;
		windowWidth = window.outerWidth// + window.pageXOffset;
	}else{
		windowHeight = document.documentElement.clientHeight;
		windowWidth = document.documentElement.clientWidth;
	}
		
}
function setPreviewPosition(e){
	getMouseXY(e);
	getWindowSize(e);
	previewWindow = document.getElementById('preview');
	if(previewWindow){
	if(imageWidth > (windowWidth - mouseX - 60)){
		previewWindow.style.left = ((mouseX - imageWidth)-30) + "px";
	}
	else{
		previewWindow.style.left = (mouseX +20)+ "px";
	}
	if(imageHeight < ((windowHeight + yOffset)-(mouseY + yOffset))){
		previewWindow.style.top = (mouseY) + "px";	
		//document.title = "imgH:" + imageHeight + " mouseY:" + mouseY + " windowH:" + windowHeight + " yOffset:" + yOffset;
		}
	document.title = 'availableH:' + ((windowHeight));
	}
}
function getMouseXY(e) {
  if (document.all) { // grab the x-y pos.s if browser is IE
    mouseX = event.clientX //+ document.body.scrollLeft
    mouseY = event.clientY //+ document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    mouseX = e.pageX// + window.pageXOffset;
    mouseY = e.pageY// + window.pageYOffset;
	yOffset = window.pageYOffset;
	xOffset = window.pagexOffset;
  }  
  if (mouseX < 0){mouseX = 0}
  if (mouseY < 0){mouseY = 0}  
  //document.title = "mousX:" + mouseX + "  mouseY:" + mouseY + "  windowHeight:" + windowHeight + "  vSpace: " + (windowHeight-mouseY);
  //document.title = window.pageYOffset;
  return true
}