cartAddObj = "";
cartAddInnerObj = "";
cartAddHTMLObj = "";
arrowLeftObj = "";
arrowRightObj = "";

opacityTimer = null;
opacityFlag = 0;
opacityCount = 0;
numOfImages = 3;
numOfIterations = 10;
opacityIntervalConstant = 50;
opacityBlinkValueIncreaseConstant = 0.25;
opacityBlinkValueDecreaseConstant = 0.15;

nodeBaseName = "productRowNode";

function increaseOpacityBlink(elementId) {
	this.elementId = elementId;
	this.changeVal = changeVal;
	if (opacityTimer != null) clearTimeout(opacityTimer);
	opacityObj = document.getElementById(elementId);
	if (opacityCount < numOfIterations) {
		if (opacityCount >= 3 && opacityCount <= 5) {
			opacityInterval = 200;
			opacityBlinkValueIncrease = 0.40;
			opacityBlinkValueDecrease = 0.30;
		}
		else {
			opacityInterval = opacityIntervalConstant;
			opacityBlinkValueIncrease = opacityBlinkValueIncreaseConstant;
			opacityBlinkValueDecrease = opacityBlinkValueDecreaseConstant;
		}
		if (opacityFlag == 0) {
			opacityBlinkValue = opacityBlinkValue + opacityBlinkValueIncrease;
			opacityFlag = 1;
			opacityCount++;
		}
		else if (opacityFlag == 1) {
			opacityBlinkValue = opacityBlinkValue - opacityBlinkValueDecrease;
			opacityFlag = 0;
			opacityCount++;
		}
		opacityObj.style.opacity = opacityBlinkValue;
		opacityObj.style.filter = 'alpha(opacity=' + opacityBlinkValue * 100 + ')';
		opacityTimer = setTimeout("increaseOpacityBlink(elementId)",opacityInterval);
	}
	else if (opacityCount == numOfIterations) {
		opacityBlinkValue = 1;
		opacityObj.style.opacity = opacityBlinkValue;
		opacityObj.style.filter = 'alpha(opacity=' + opacityBlinkValue * 100 + ')';
	}
}

productCoordinatesArray = new Array(-115, 150, 416, 680, 945);
var productStart = 1;
var productEnd = 3;
var productBlankLeft = productStart - 1;
var productBlankRight = productEnd + 1;
var productLeft = "Left";
var productRight = "Right";
var productIdStart = nodeBaseName + productStart;
var productIdEnd = nodeBaseName + productEnd;
var productIdBlankRight = nodeBaseName + productBlankRight;
var productIdBlankLeft = nodeBaseName + productBlankLeft;
var productIdRight = nodeBaseName + productRight;
var productIdLeft = nodeBaseName + productLeft;


function setMouseover(productId, leftPos) {
	productObj = document.getElementById(productId);
	listImg = productObj.getElementsByTagName("img");
	imgId = listImg[0].id;
	imgObj = document.getElementById(imgId);
	imgObj.style.left = leftPos;
	imgObj.setAttribute("left",leftPos);
	var imgHTML = '<img src="images/homepage/headset_' + imgId + '.png" alt="" width="150" height="123" border="0" id="' + imgId + '">';
	imgHTMLNew = '<a href="# return true;" onmouseover="getProductAdd(\'' + imgId + '\', \'' + leftPos + '\')" onmouseout="hideProductAdd()">' + imgHTML + '</a>';
	productObj.innerHTML = imgHTMLNew;
}

function unsetProducts(numOfImages, nodeBaseName) {
	for (var i = productStart; i <= productEnd; i++) {
		productId = nodeBaseName + i;
		productObj = document.getElementById(productId);
		var elementPos = productCoordinatesArray[i];
		unsetMouseover(productId, elementPos);
	}
}

function unsetMouseover(productId, leftPos) {
	productObj = document.getElementById(productId);
	listImg = productObj.getElementsByTagName("img");
	imgId = listImg[0].id;
	imgObj = document.getElementById(imgId);
	imgObj.style.left = leftPos;
	imgObj.setAttribute("left",leftPos);
	var imgHTML = '<img src="images/homepage/headset_' + imgId + '.png" alt="" width="150" height="123" border="0" id="' + imgId + '">';
	//imgHTMLNew = '<a href="# return true;" onmouseover="getProductAdd(\'' + imgId + '\', \'' + leftPos + '\')" onmouseout="hideProductAdd()">' + imgHTML + '</a>';
	productObj.innerHTML = imgHTML;
}

function getProductAdd(listId, elementPos) {
	this.listId = listId;
	this.elementPos = elementPos;
	imgObj = document.getElementById(listId);
	var offset = $("#productSlide").offset();
	elementPos = parseInt(offset.left) + parseInt(elementPos) + 100;
	ajaxCall(listId);
	moveProductAdd(elementPos);
	showProductAdd();
}

function moveProductAdd(elementPos) {
	if (cartAddObj != '')
	{
	cartAddObj.style.left = elementPos;
	}
}

function showProductAdd() {

	if (cartAddObj != '')
	{
	cartAddObj.style.visibility = "visible";
	cartAddInnerObj.style.visibility = "visible";
	cartAddHTMLObj.style.visibility = "visible";
	}
	
}

function hideProductAdd() {

	if (cartAddObj != '')
	{
	cartAddObj.style.visibility = "hidden";
	cartAddInnerObj.style.visibility = "hidden";
	cartAddHTMLObj.style.visibility = "hidden";
	}	
}

opacityArrowsTimer = null;

function ajaxCall(listId) {
	// Note: This will be replaced by actual AJAX or JSON call
	if (listId == "gold") {
		cartAddHTMLObj.innerHTML = '<div class="logoPopup"><img src="/images/homepage/logo_popup.gif" alt="" width="83" height="16" vspace="3" border="0"></div><div class="productColorPopup">RAMBLING ROS&Eacute;</div><div class="productDetailsPopup"></div><div class="viewDemoPopup"><a href="/demo.aspx">VIEW DEMO</a></div><div class="cartPopup"><a href="/store/addtocart.aspx?ProductID=166&VariantID=180&Quantity=1&returnurl=/products.aspx"><img src="images/homepage/cart_popup.gif" alt="cart" width="16" height="33" border="0"></a></div><div class="buynowPopup"><a href="/store/addtocart.aspx?ProductID=166&VariantID=217&Quantity=1&returnurl=/products.aspx">BUY NOW</a></div>';
		//cartAddHTMLObj.innerHTML = '<div class="logoPopup"><img src="/images/homepage/logo_popup.gif" alt="" width="83" height="16" vspace="3" border="0"></div><div class="productColorPopup">GOLDY LIPS</div><div class="productDetailsPopup">PRODUCT DETAILS</div><div class="viewDemoPopup"><a href="/demo.aspx">VIEW DEMO</a></div><div class="cartPopup"><a href="#"><img src="images/homepage/cart_popup.gif" alt="cart" width="16" height="33" border="0"></a></div><div class="buynowPopup"><a href="/store/addtocart.aspx?ProductID=166&VariantID=217&Quantity=1&returnurl=/products.aspx">COMING SOON</a></div>';
	}
	else if (listId == "black") {
		//cartAddHTMLObj.innerHTML = '<div class="logoPopup"><img src="/images/homepage/logo_popup.gif" alt="" width="83" height="16" vspace="3" border="0"></div><div class="productPopup">SKIN</div><div class="productTMPopup">&trade;</div><div class="productColorPopup">BLAH BLAH BLACK</div><div class="productDetailsPopup">PRODUCT DETAILS</div><div class="viewDemoPopup">VIEW DEMO</div><div class="cartPopup"><a href="/store/addtocart.aspx?ProductID=90&VariantID=101&Quantity=1&returnurl=/products.aspx"><img src="images/homepage/cart_popup.gif" alt="cart" width="16" height="33" border="0"></a></div><div class="buynowPopup">BUY NOW</div>';
		cartAddHTMLObj.innerHTML = '<div class="logoPopup"><img src="/images/homepage/logo_popup.gif" alt="" width="83" height="16" vspace="3" border="0"></div><div class="productColorPopup">BLAH BLAH BLACK</div><div class="productDetailsPopup"></div><div class="viewDemoPopup"><a href="/demo.aspx">VIEW DEMO</a></div><div class="cartPopup"><a href="/store/addtocart.aspx?ProductID=166&VariantID=179&Quantity=1&returnurl=/products.aspx"><img src="images/homepage/cart_popup.gif" alt="cart" width="16" height="33" border="0"></a></div><div class="buynowPopup"><a href="/store/addtocart.aspx?ProductID=166&VariantID=179&Quantity=1&returnurl=/products.aspx">BUY NOW</a></div>';
	}
	else if (listId == "silver") {
		//cartAddHTMLObj.innerHTML = '<div class="logoPopup"><img src="/images/homepage/logo_popup.gif" alt="" width="83" height="16" vspace="3" border="0"></div><div class="productPopup">SKIN</div><div class="productTMPopup">&trade;</div><div class="productColorPopup">SILVER TONGUE</div><div class="productDetailsPopup">PRODUCT DETAILS</div><div class="viewDemoPopup">VIEW DEMO</div><div class="cartPopup"><a href="#"><img src="images/homepage/cart_popup.gif" alt="cart" width="16" height="33" border="0"></a></div><div class="buynowPopup">COMING SOON</div>';
		cartAddHTMLObj.innerHTML = '<div class="logoPopup"><img src="/images/homepage/logo_popup.gif" alt="" width="83" height="16" vspace="3" border="0"></div><div class="productColorPopup">BABBLING BLUE</div><div class="productDetailsPopup"></div><div class="viewDemoPopup"><a href="/demo.aspx">VIEW DEMO</a></div><div class="cartPopup"><a href="/store/addtocart.aspx?ProductID=166&VariantID=178&Quantity=1&returnurl=/products.aspx"><img src="images/homepage/cart_popup.gif" alt="cart" width="16" height="33" border="0"></a></div><div class="buynowPopup"><a href="/store/addtocart.aspx?ProductID=166&VariantID=216&Quantity=1&returnurl=/products.aspx">BUY NOW</a></div>';
	}
	else if (listId == "charger") {
	    cartAddHTMLObj.innerHTML = '<div class="logoPopup"><img src="/images/homepage/logo_popup.gif" alt="" width="83" height="16" vspace="3" border="0"></div><div class="productColorPopup">CAR CHARGER</div><div class="productDetailsPopup"></div><div class="viewDemoPopup"></div><div class="cartPopup"><a href="/store/addtocart.aspx?ProductID=174&VariantID=206&Quantity=1&returnurl=/products.aspx"><img src="images/homepage/cart_popup.gif" alt="cart" width="16" height="33" border="0"></a></div><div class="buynowPopup"><a href="/store/addtocart.aspx?ProductID=174&VariantID=206&Quantity=1&returnurl=/products.aspx">BUY NOW</a></div>';
	
	}
}

calloutTopPos = -0;
calloutBottomPos = 0;
calloutMaxHeight = 120;
calloutMinHeight = 62;
slideTop = 0;
expandCalloutFlag = 1;
slideTimerExpand = null;
slideTimerContract = null;
contractCalloutTimer = null;

function expandCallout(element) {
	if (slideTimerExpand != null) clearTimeout(slideTimerExpand);
	if (expandCalloutFlag == 1) {
		calloutObj = document.getElementById(element);
		calloutObj.style.height = calloutMaxHeight;
		this.element = element;
		// slide up starting at slideTop and ending at calloutTopPos, incrementing by slideAmount
		if (slideTop > calloutTopPos) {
			calloutObj = document.getElementById(element);
			topCoordinateNew = parseInt(slideTop);
			calloutObj.style.top = topCoordinateNew;
			slideTop = slideTop - slideAmount;
			slideTimerExpand = setTimeout("expandCallout(element)",slideInterval);
		}
		else {
			expandCalloutFlag = 0;
			slideTop = calloutTopPos;
			calloutObj = document.getElementById(element);
			calloutObj.style.top = calloutTopPos;
		}
	}
}

function contractCallout(element) {
	if (slideTimerContract != null) clearTimeout(slideTimerContract);
	if (contractCalloutTimer != null) clearTimeout(contractCalloutTimer);
	if (expandCalloutFlag == 0) {
		calloutObj = document.getElementById(element);
		this.element = element;
		// slide down starting at calloutBottomPos and ending at slideTop, incrementing by slideAmount
		if (slideTop < calloutBottomPos) {
			calloutObj = document.getElementById(element);
			topCoordinateNew = parseInt(slideTop);
			calloutObj.style.top = topCoordinateNew;
			slideTop = slideTop + slideAmount;
			slideTimerContract = setTimeout("contractCallout(element)",slideInterval);
		}
		else {
			expandCalloutFlag = 1;
			slideTop = calloutBottomPos;
			calloutObj = document.getElementById(element);
			calloutObj.style.top = slideTop;
			calloutObj.style.height = calloutMinHeight;
		}
	}
	else {
		slideTimerContract = setTimeout("contractCallout(element)",1000);
	}
}
function initiateContractCallout(element) {
	if (contractCalloutTimer != null) clearTimeout(contractCalloutTimer);
	this.element = element;
	contractCalloutTimer = setTimeout("contractCallout(element)",1000);
}
function setContractCalloutFlag() {
	expandCalloutFlag = 1;
}
function unsetContractCalloutFlag() {
	expandCalloutFlag = 0;
}