/************************************** Splendid *************************************
* Created By:		Steve Doggett
* Creation Date:	4th July 2010
* Edited ----------------------------------------------------------------------------
*	  By:			  On:
*
* Description -----------------------------------------------------------------------
*	  Handles the product rollover on the category page
*	  Uses jQuery.
*   
* Functions --------------------------------------------------------------------
*   initPopup()			 	// Initialises the popup div by wiring up the mouseover/mouseout events
*   initProducts()				// Initialises the products by wiring up the mouseover/mouseout events
*   updatePopup()				// Sets the details in the rollover popup
*   removePopup()				// Removes the popup
*   positionPopup()				// Positions the popup correctly within the browser window
*   
**************************************************************************************/


/********************************** Global Variables *********************************/
var popupID = "#popUp";			// Selector for the popup div
var showPopupTimer = null;
var hidePopupTimer = null;
var timeBeforePopup = 1000;		// The time to wait before showing the popup.
var timeAfterPopup = 250;		// The time to wait before hiding the popup.
var popupMargin = 0;			// The space between the product and the popup
var pageMargin = 15;			// Space between top/bottom of page and the popup.
var isHover = false;

var loadingPopUpDivContent = '<div style="color:#000; border:1px solid #000; background:#fff;><img src="/version-1.75/images/lightbox_loading.gif" /></div>';

$(document).ready(function(){
	initProducts();
	initPopup();
});

/************************************* Functions **************************************/

/****
 * Initialises the popup div by wiring up the mouseover/mouseout events
 */
function initPopup()
{
	$(popupID).hover(
		function(){
			isHover = true;
			clearTimeout(hidePopupTimer);
			hidePopupTimer = null;
		},
		function(){
			isHover = false;
			hidePopupTimer = setTimeout(removePopup, timeAfterPopup);
		}
	);
}

/****
 * Initialises the products by wiring up the mouseover/mouseout events
 */
function initProducts(){
	$(".products a.productBox").hover(
		function() {
			isHover = true;
			removePopup();
			clearTimeout(showPopupTimer);
			showPopupTimer = null;
			chosenProduct = $(this).parent();
			$("#" + chosenProduct.attr('id') + " span").css('background-image', 'url(/version-1.75/images/lightbox_loading.gif)');
			showPopupTimer = setTimeout(updatePopup, timeBeforePopup);
		},
		function() {
			isHover = false;
			clearTimeout(showPopupTimer);
			clearTimeout(hidePopupTimer);
			$("#" + chosenProduct.attr('id') + " span").css('background-image', '');
			hidePopupTimer = null;
			hidePopupTimer = setTimeout(removePopup, timeAfterPopup);
		}
	);
}

/****
 * Sets the details in the rollover popup
 */
function updatePopup() {
	$("#popUp").html(loadingPopUpDivContent);

	// Would need to do something in here to update the popup with the correct product details...
	// The $(chosenProduct).attr("id") could be the product id or something maybe.
	// Would need to set the id attribute on <div class="item contain" id="123"> for that to work though.

	$(popupID).load("/product/popup", { id: chosenProduct.attr('id')}, cbPopupLoaded);

	// Put the popup on the page
	positionPopup();

	// Show the popup.
  	//$(popupID).show();
}

/****
 * Callback of the .load() product
 *
 * If the popup is left hand sided an there is no image to display, we have to
 * put the popup closer to the product and reduce its width
 */
function cbPopupLoaded()
{
	popUpImg = $(popupID + " .popUpImg");
	// If there's no picture
	//if (! popUpImg.is('div')) {
		if ($(chosenProduct).hasClass('left')) {
			// Changes the left position as there is no image
			$(popupID).css('left', parseInt($(popupID).css('left')) - $(popupID).width() - popupMargin + 2);

		}
	//}

	$("#" + chosenProduct.attr('id') + " span").css('background-image', '');
	if (isHover)
	$(popupID).fadeIn('normal');
}

/****
 * Removes the popup
 */
function removePopup()
{
	clearTimeout(hidePopupTimer);
	hidePopupTimer = null;
	//$("#" + chosenProduct.attr('id') + " span").css('background-image', '');
	$(popupID).fadeOut('normal');
}

/**** 
 * Positions the popup correctly within the browser window
 */
function positionPopup() {
	var productOffset = $(chosenProduct).offset(); // offset of the hovered product
	var resultsOffset = $(".products").offset(); // offset of the containing <div>

	// to get top/left of hovered product
	var left = (productOffset.left - resultsOffset.left) + resultsOffset.left;
	var top = (productOffset.top - resultsOffset.top) + resultsOffset.top;

	// also wanna move it up and across a bit too, so the image behind is viewable too...
	// If in first 2 cols, then show to right, else show to left
	if ($(chosenProduct).hasClass("left")) {
		left = left - $(popupID).width() - popupMargin;
		top = top - (($(popupID).height() / 2) - ($(chosenProduct).height() / 2)) - 20;
	} else {
		left = left + $(chosenProduct).width() + popupMargin;
		top = top - (($(popupID).height() / 2) - ($(chosenProduct).height() / 2)) - 20;
	}

	// If off the top of the page, then bring it back into the viewable area.
	var pageOffsetTop = getTopOffset();
	if (top < pageOffsetTop) {
		top = pageOffsetTop + pageMargin;
	}

	// If off the bottom of the page, then bring it back into the viewable area
	if (($(popupID).height() + top) > ($(window).height() + getTopOffset())) {
		top = (($(window).height() + getTopOffset()) - $(popupID).height()) - pageMargin;
	}

	// Actually set the position of the popup
	$(popupID).css({
		left: left,
		top: top,
		zIndex: 560,
		position: 'absolute'
	});

	// Hides the select stuff in filter for ie6 so it doesn't show through the popup.
	if ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0"))
		$(".filter").css("z-index", "-1");
}