function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

function showBuynow() {
	var oPageOverlay = $('pageoverlay');
	oPageOverlay.style.visibility = "visible";
	
	var oBuynowBox = $('buynowbox');	
	var xy = getScrollXY();
	oBuynowBox.style.top = (xy[1] + 200) + "px";
	oBuynowBox.style.visibility = "visible";
}

function hideBuynow() {
	var oBuynowBox = $('buynowbox');
	oBuynowBox.style.visibility = "hidden";
	var oPageOverlay = $('pageoverlay');
	oPageOverlay.style.visibility = "hidden";
}

function buynow(e, product_ID, iSubproducts) {
	if (iSubproducts == 0) {
		location.href = "../basket/basket_add.php?product_ID=" + product_ID;
	} else {		
		showBuynow();
		getColours(product_ID);	
	}	
	Event.stop(e);
}

function buynowadd(e) {
	var product_ID = $("product_ID").value;
	if (!product_ID) {
		alert("Please select both a COLOUR and a SIZE");
		return false;
	}
	location.href = "../basket/basket_add.php?product_ID=" + product_ID;
}

function buynowcancel(e) {
	hideBuynow();
	selected_Colour_ID = null;
	selected_Product_ID = null;
}

var selected_Product_ID = null;
function getColours( product_ID )
{
	selected_Product_ID = product_ID;
	$("product_ID").value = "";
	var oSwatches = $('detail-colours');
	oSwatches.innerHTML = "";
	$("in_stock").innerHTML = "?";
	new Ajax.Request('../catalogue/detail.php?action=getColours&product_ID=' + product_ID,
	{
		method:'get',
		onSuccess: function(o){
		  var aColours = JSON.parse(o.responseText);
		  $("colour_ID").disabled = false;
		  $("colour_ID").options.length = 0;
		  $("colour_ID").options[0] = new Option( "[ Select A Colour... ]", "", false, true);
		  $("colour_ID").options[0].style.color = "#999";
		  for (x=0; x<aColours.length; x++) {
			$("colour_ID").options[x+1] = new Option( aColours[x]["colour_Name"] + "\"", aColours[x]["colour_ID"], false, false);
			$("colour_ID").options[x+1].style.backgroundImage = "url('../catalogue/colours_25/" + aColours[x]["colour_Filename"] + "')";
			$("colour_ID").options[x+1].style.backgroundRepeat = "no-repeat";
			$("colour_ID").options[x+1].style.backgroundPosition = "left top";
			
			var oLI = document.createElement("LI");
			oLI.style.backgroundImage = "url('../catalogue/colours_25/" + aColours[x]["colour_Filename"] + "')";
			oLI.style.backgroundRepeat = "no-repeat";
			oLI.style.backgroundPosition = "left top";
			oLI.colour_ID = aColours[x]["colour_ID"];
			oLI.colour_Filename = aColours[x]["colour_Filename"];
			oLI.colour_Name = aColours[x]["colour_Name"];
			oLI.onmouseover = function(e) { 
				showSwatchPopup(this, this.colour_Filename, this.colour_Name);  
				//Event.stop(e); 
				return false;
			};
			/*Event.observe(oLI, 'mouseover', function(event) { 
				alert(this.colour_Filename);
				showSwatchPopup(this, this.colour_Filename, this.colour_Name);  
			});*/ //
			//showSwatchPopup(this, '<?=$cRow["colour_Filename"]?>','<?=$cRow["colour_Name"]?>');
			
			var oA = document.createElement("A");
			oA.href = "#";
			oA.id = "col" + aColours[x]["colour_ID"];
			oA.title = aColours[x]["colour_Name"] + "-" + aColours[x]["colour_ID"];
			oA.colour_ID = aColours[x]["colour_ID"];
			oA.onclick = function(e) { 
				setColour(this.colour_ID); 
				//Event.stop(e); 
				return false;
			};
			
			var oSPAN = document.createElement("SPAN");
			oSPAN.appendChild(document.createTextNode(aColours[x]["colour_Name"]));
			
			oA.appendChild(oSPAN);
			oLI.appendChild(oA);
			oSwatches.appendChild(oLI);			
		  }
		  
		  
		},
		onFailure: function(){  }
	 });
}

function getSizes( colour_ID ) 
{
	$("product_ID").value = "";
	$("in_stock").innerHTML = "?";
	if (colour_ID=="") {
		$("size_ID").value = "";
		$("size_ID").disabled = true;
		// clear selected colour
		//if (selected_Colour_ID) $("col" + selColID).className = "";
		//selected_Colour_ID = null;
		return true;
	}
	//$("col" + colour_ID).className = "current";
	//selected_Colour_ID = colour_ID;
	new Ajax.Request('../catalogue/detail.php?action=getSizes&product_ID=' + selected_Product_ID + '&colour_ID=' + colour_ID,
	{
		method:'get',
		onSuccess: function(o){
		  var aSizes = JSON.parse(o.responseText);
		  $("size_ID").disabled = false;
		  $("size_ID").options.length = 0;
		  $("size_ID").options[0] = new Option( "[ Select A Size... ]", "", false, true);
		  $("size_ID").options[0].style.color = "#999";
		  for (x=0; x<aSizes.length; x++) {
			$("size_ID").options[x+1] = new Option( aSizes[x]["size_Name"] + "\"", aSizes[x]["size_ID"], false, false);
		  }
		},
		onFailure: function(){  }
	 });
}

function getStock( colour_ID, size_ID ) 
{
	if (size_ID=="") {
		$("in_stock").innerHTML = "?";
		return true;
	}
	new Ajax.Request('../catalogue/detail.php?action=getStock&product_ID=' + selected_Product_ID + '&colour_ID=' + colour_ID + "&size_ID=" + size_ID,
	{
		method:'get',
		onSuccess: function(o){
		  var oResult = JSON.parse(o.responseText);
		  if (oResult.inStock) {
			$("in_stock").innerHTML = "In Stock";
			//updatePrices(oResult);
			$("product_ID").value = oResult.product_ID;
		  } else {
			$("in_stock").innerHTML = "Out Of Stock";
			$("product_ID").value = "";
		  }
		},
		onFailure: function(){  }
	 });
}

function checkStock() {
	if ($("product_ID").value) { 
		return true;
	} else {
		alert('Please select both a COLOUR and a SIZE.'); 
		return false;
	}
}

var selected_Colour_ID = null;
function setColour( colour_ID ) 
{
	// Clear Existing
	if (selected_Colour_ID) {
		if ($("col" + selected_Colour_ID)) $("col" + selected_Colour_ID).className = "";
	}
	// Set colour
	if (colour_ID) $("col" + colour_ID).className = "current";
	$("colour_ID").value = colour_ID;
	selected_Colour_ID = colour_ID;		
	// update sizes
	getSizes( colour_ID );	
	return false;		
}

function showSwatchPopup( oElement, sColourFilename, sColourName ) 
{				
	var oSwatchPopup = $('swatchPopup');
	Event.observe(oElement, 'mouseout', function(event) {
		var oSwatchPopup = $('swatchPopup');
		oSwatchPopup.setOpacity(0);
		//Effect.Fade(oSwatchPopup, { duration: 0.4, from: 1, to: 0 });
		oSwatchPopup.style.display = "none";
	});
	
	var oImage = oSwatchPopup.getElementsByTagName("IMG")[0];
	var oText = oSwatchPopup.getElementsByTagName("H5")[0];
	
	oImage.src = "../catalogue/colours_100/" + sColourFilename;
	oText.innerHTML = sColourName;
	
	var oPos = Position.positionedOffset( oElement );
	oSwatchPopup.style.left = oPos[0] + "px";
	oSwatchPopup.style.top = (oPos[1] - 143) + "px";
	oSwatchPopup.setOpacity(0);
	oSwatchPopup.style.display = "block";
	
	Effect.Fade(oSwatchPopup, { duration: 0.2, from: 0, to: 1 });
}