// keep track of which products' quicklooks have been already loaded
var shownQuicklooks = {};

// set up timers to pad the response of user interactions
var quicklookLoadTimers = {};
var quicklookHideTimers = {};

// if a user hovers for a second, load the quicklook (triggered on mouseover)
function quicklookHandler(productId, offsetX, offsetY, nodeId) {
	quicklookLoadTimers[productId] = setTimeout("loadQuicklook("+productId+","+offsetX+","+offsetY+","+nodeId+")", 1000);
	// ensure that we don't accidentally hide it...
	if(null!=quicklookHideTimers[productId]){
		clearTimeout(quicklookHideTimers[productId]);
	}
}

// hide the quicklook (triggered on mouse-out)
function cancelQuicklook(productId) {
	// clear the timeout so we don't accidentally call load again
	if(null!=quicklookLoadTimers[productId]){
		clearTimeout(quicklookLoadTimers[productId]);
	}
	quicklookHideTimers[productId] = setTimeout("hideQuicklook("+productId+")", 500);
}

// self explanatory (triggered by timer)
function hideQuicklook(productId) {
	$("#quicklook_"+productId).css("display","none");
}

// load a quicklook if it hasn't been already (triggered by timer)
function loadQuicklook(productId, offsetX, offsetY, nodeId){
	var divId = "#quicklook_"+productId;
  // get the offset of the product's <li> and position accordingly
  var productOffset = $("#product_"+productId).offset();
	var scrollTop = $(window).scrollTop();
	var scrollBottom = $(window).scrollTop()+$(window).height();

	if(nodeId==undefined){
		nodeId="";
	}

  if ( !shownQuicklooks[divId]  ){

  	$.ajax({
	    url: quicklookAJAXUrl,
	    type: "POST",
	    data: 'productId='+productId+'&nodeId='+nodeId,
	    dataType: "text",
	    success: function(result){
	      // create a new div and add it to the DOM, and then position it
				var newDiv = '<div id="quicklook_'+productId+'" class="quicklook" style="display:none;position:absolute;z-index:130;width:444px;height:510px;padding:0px;" onmouseover="clearTimeout(quicklookHideTimers['+productId+'])" onmouseout="cancelQuicklook('+productId+')"></div>';
				// TODO: spin here?
				$(newDiv).appendTo(document.body).html(result);
				
				// position X axis, check whether it's offscreen on right side, then left
				// browse products: x == 140 || x == -445
				// wishlist: x == 610
				if((productOffset.left+offsetX+$(divId).width()) >= $(window).width()){
					$(divId).css('left',$(window).width()-$(divId).width());
				}else if(productOffset.left+offsetX < 0){
					$(divId).css('left',0);
				}else{
					$(divId).css('left',productOffset.left+offsetX);
				}
				
				// position Y axis
				// browse products: y == -85
				// wishlist: y == -145
				if(productOffset.top+offsetY < scrollTop){
					$(divId).css('top',scrollTop);
				}else if((productOffset.top+offsetY+$(divId).outerHeight()) <= scrollBottom){
					$(divId).css('top',productOffset.top+offsetY);
				}else{
					$(divId).css('top',scrollBottom-$(divId).outerHeight());					
				}
				
				$(divId).show();
	      shownQuicklooks[divId] = true;
	      }
	   });
	  }else{
			// quicklook is already loaded, just show it
			$(divId).show();

			// check positioning for X axis
			if((productOffset.left+offsetX+$(divId).width()) >= $(window).width()){
				$(divId).css('left',($(window).width()-$(divId).width()));
			}else if(productOffset.left+offsetX < 0){
				$(divId).css('left',0);
			}else{
				$(divId).css('left',productOffset.left+offsetX);
			}
			
			// check positioning for Y axis
			if(productOffset.top+offsetY < scrollTop){
				$(divId).css('top',scrollTop);
			}else if((productOffset.top+offsetY+$(divId).outerHeight()) <= scrollBottom){
				$(divId).css('top',productOffset.top+offsetY);				
			}else{
				$(divId).css('top',scrollBottom-$(divId).outerHeight());
			}

	 	}
 
 }