/*
	Purpose:	To generate a horizontal product thumbnail scroller
	Author:		TCW
	Date:		11/20/03
	Notes:		The following javascript variables will need to be defined for each sub-site through asp or another .js file 
				- sSite, sImgPathArrowLeft, sImgPathArrowRight, sImgPathDemo, sLinkClass
				Everything else needed should be handled by jsThumbnailNav_inc.asp
	
	Modified:
	************************
	By:	
	Date:
	Purpose:
	************************
*/

var kMaxImages = 5; 						// Max number of images to display for scrolling, can be redefined in page
var kMaxThumbs = 3;							// Max number of thumbnails to display for scrolling, can be redefined in page
var objProdStart = new Object();			// Loop counter
var objProdEnd = new Object();				// Loop counter
var bDhtml = (bAdvanced); 					// Test for usage of SwapProducts function, !bMac && was included orignally
var aryImageIndex; 	// Houses ordered indexes of product array
var iThumbnailCellWidth = 100;
var sBgColor = '#FFFFFF';
var bArrowsInBackground = true;
var iArrowSpacer = 5;
var iInnerWidth = 0;
var iInnerSpacerWidth = 5;
var iThumbSize = '60';
var sProdLink = '';
var bDisplaySku = false;
var sProductNum;
var sProdNumClass;
var sArrowAlign = 'middle';
var bSwapProducts = true;
var bArrowMouseOvers = false;
var oLeftArrow, oRightArrow = null;
var imgClass = "";
var products = aryProds0;
var thumbnails = aryThumbs0;
var mainImg = aryMedia0;

function Arrow(on, off){
	this.On = on;
	this.Off = off;
}

// Purpose:	Builds html string for scrollable products
function BuildHtmlThumbnailScroller(){
	var iCount = 0;
	var sHtml;
	var objLayer;
	//iInnerWidth = (kMaxImages * iThumbnailCellWidth) + ((kMaxImages - 1) * iInnerSpacerWidth)
	
	if (iProdCount0 > 1){
		sHtml = '<table cellpadding="0" cellspacing="0" border="0">\n';
		sHtml += 	'<tr>\n';
		sHtml += 		'<td align="center">\n';
		sHtml += 			'<table cellpadding="0" cellspacing="0" border="0">\n';
		sHtml += 				'<tr>\n';
		sHtml += 					GenSpacerCell(iArrowSpacer, 1, bArrowsInBackground);
		
		// Left arrow
		if (iProdCount0 > kMaxImages){
			sHtml += 					'<td valign="' + sArrowAlign + '">' +
											'<a';
			if (oLeftArrow != null) {
				sHtml += ' onmouseover="changeImages(\'left\', oLeftArrow.On)"  onmouseout="changeImages(\'left\', oLeftArrow.Off)"';
			}
			
			if (bDhtml){
				sHtml += 					' href="javascript: ScrollImages(\'-\');">';
			}
			else{
				sHtml += 					' href="' + sScriptName + '?prodIndex=' + GetProductIndex('-');
				if (sQueryString.length > 0){
												sHtml += '&' + RemoveIndex(sQueryString);
				}
				sHtml += 					 '">';
			}
			sHtml +=							'<img name="left" src="' + sImgPathArrowLeft + '" border="0">';
			sHtml +=						'</a>';
			sHtml += 					'</td>\n';
			sHtml += 					GenSpacerCell(iArrowSpacer, 1, bArrowsInBackground);
		}
		
		// Products
		sHtml += 					'<td>';
		sHtml += 						'<table cellpadding="0" cellspacing="0" border="0"';
		if (iInnerWidth != 0){
			sHtml +=						' width="' + iInnerWidth + '"';
		}
		sHtml +=						'>';
		sHtml += 							'<tr>';
		for (var i = 0; i < iProdCount0; i++){
			if (i < kMaxImages){
				if (iCount > 0 ){
					sHtml += 							GenSpacerCell(iInnerSpacerWidth, 1, true);
				}
				sHtml +=								BuildThumbnail(i);
				iCount++;
			}
		}
		sHtml +=							'</tr>';
		sHtml += 						'</table>';
		sHtml += 					'</td>';
		
		// Right arrow
		if (iProdCount0 > kMaxImages){
			sHtml += 				GenSpacerCell(iArrowSpacer, 1, bArrowsInBackground);
			sHtml += 				'<td valign="' + sArrowAlign + '">' +
										'<a';
			
			if (oRightArrow != null) {
				sHtml += ' onmouseover="changeImages(\'right\', oRightArrow.On)"  onmouseout="changeImages(\'right\', oRightArrow.Off)"';
			}
			
			if (bDhtml)
				sHtml += 				' href="javascript: ScrollImages(\'+\');">\n';
			else{
				sHtml += 				' href="' + sScriptName + '?prodIndex=' + GetProductIndex('+');
				if (sQueryString.length > 0){
					sHtml += 				'&' + RemoveIndex(sQueryString);
				}
				sHtml += 				'">';
			}
			sHtml += 						'<img name="right" src="' + sImgPathArrowRight + '" border="0">';
			sHtml +=					'</a>';
			sHtml += 				'</td>\n';
		}
		sHtml += 					GenSpacerCell(iArrowSpacer, 1, bArrowsInBackground);
		sHtml += 				'</tr>\n';
		sHtml += 			'</table>\n';
		sHtml += 		'</td>\n';
		sHtml += 	'</tr>\n';
		sHtml += '</table>';
	}
	// test for no data
	if (typeof(sHtml) == 'undefined'){
		sHtml = '';
	}
	
	//return ('<layer id="prods">' + sHtml + '</layer>');
	return (sHtml);
}

// Purpose:	Writes initial display
function InitProds(){
	var i;
	var iIndex = 0;
	
			// If there is no scrolling, only product display, use sort order in db
	if (iProdCount0 <= kMaxImages) {
		iStartIndex = 0;
	}
		
	var iStart = iStartIndex;
	
	aryImageIndex = new Array(kMaxImages);
	// 4/27/04 TCW To correctly initialize starting index.
	objProdStart.value = iStartIndex;
	objProdEnd.value = objProdStart.value + kMaxImages;

	
	// Initialize array
	for (i = 0; i < aryImageIndex.length; i++){
		if (iIndex >= products.length - 1){
			iIndex = 0;
			iStart = i - 2 * i;
		}
		else{
			iIndex = iStart + i;
		}
		
		aryImageIndex[i] = iIndex;
	}
	
	document.write(BuildHtmlThumbnailScroller());
	// debug document.title = aryImageIndex + '; prodCount = ' + iProdCount0 + '; ' + objProdStart.value + ' | ' + objProdEnd.value;
}

// Purpose:	Re-writes display
function WriteProds(){
	// Write thumbnails and navigation to browser
	if (bAdvanced){
		document.getElementById("prods").innerHTML = BuildHtmlThumbnailScroller();
	}
	else{
		objLayer = document.layers["prods"];
		objLayer.document.open();
		objLayer.document.write (BuildHtmlThumbnailScroller());
		objLayer.document.close();
	}
}

//	Purpose:		to scroll product thumbnail images
//	Parameters:		sDirection - valid values are '+' and '-'
function ScrollImages(sDirection){
	var i;
	var iImageCount = 0;
	
	// Initialize bound values
	if (objProdStart.value == null || objProdEnd.value == null){
		InitBounds();
	}
		
	// Increment/decrement start and end values amd reset values if beyond bounds
	switch(sDirection){
		case '+':
			objProdStart.value++;
			objProdEnd.value++;
			
			if (objProdEnd.value == iProdCount0){
				objProdEnd.value = objProdEnd.value - iProdCount0;
			}
			
			// Place index values of products to display in aryImageIndex
			for (i = objProdStart.value; i < iProdCount0; i++){
				if (iImageCount == kMaxImages) {break;}
				aryImageIndex[iImageCount] = i;
				iImageCount++;
			}
			for (i = 0; i < objProdEnd.value; i++){
				if (iImageCount == kMaxImages) {break;}
				aryImageIndex[iImageCount] = i;
				iImageCount++;
			}
			break;
		case '-':
			objProdStart.value--;
			objProdEnd.value--;
			
			if (objProdStart.value < 0){
				objProdStart.value = iProdCount0 + objProdStart.value;
			}
			
			// Place index values of products to display in aryImageIndex
			for (i = objProdStart.value; i < iProdCount0; i++){
				if (iImageCount == kMaxImages) {break;}
				aryImageIndex[iImageCount] = Math.abs(i);
				iImageCount++;
			}
			for (i = 0; i < iProdCount0; i++){
				if (iImageCount == kMaxImages) {break;}
				aryImageIndex[iImageCount] = i;
				iImageCount++;
			}
			break;
	}
	// Reset bounds to initial state
	if (aryImageIndex[0] == 0 || aryImageIndex[aryImageIndex.length] == iProdCount0){
		InitBounds();
	}
	WriteProds();
	
	// Debugging
	// document.title = aryImageIndex + '; prodCount = ' + iProdCount0 + '; ' + objProdStart.value + ' | ' + objProdEnd.value;
	
}// 

// Purpose:	Reset bounds
function InitBounds(){
	objProdStart.value = 0;
	objProdEnd.value = objProdStart.value + kMaxImages;
}

// Purpose:		Generates a <td> cell with a spacer image of specified dimension
// Parameters:	iWidth - desired width
//				iHeight - desired height
function GenSpacerCell(iWidth, iHeight, bBgColor){
	var sHtml = '';
	
	if (iWidth > 0 && iHeight > 0) {
		sHtml = '<td';
		if (bBgColor){
			sHtml += ' bgcolor="' + sBgColor + '"';
		}
		sHtml += '><img src="/img/s.gif" width="' + iWidth + '" height="' + iHeight + '" border="0"></td>';
	}
	
	return (sHtml);
}

// Purpose:		Display a thumbnail cell
// Parameters:	iIndex - 
function BuildThumbnail(iIndex){
	var sHtml;
	var iProdIndex = aryImageIndex[iIndex];
	var sLink;
	
	var sOnMouseOver = "window.status = '" + CleanStatus(products[iProdIndex][kProdBar]) + "'; return true;";
	var sOnMouseOut = "window.status = '" + CleanStatus(sGlobalStatusBar) + "'; return true;";
	
	if (sProdLink.length == 0){
		sProdLink = sPath + 'products/product.asp';
	}
	
	if (bDhtml && sScriptName.indexOf('product.asp') != -1 && sScriptName.indexOf('linkadoos') == -1 && bSwapProducts){
		sLink = 'javascript: SwapProducts(' + products[iProdIndex][kProdID] + ');"';
	}
	else{
		if (sProdLink.indexOf('?') == -1){
			sLink = sProdLink + '?prodIndex=' + iProdIndex + '&section=' + sSection + '&id=' + products[iProdIndex][kProdID] + '&name=' + escape(products[iProdIndex][kProdName]);
		} else {
			sLink = sProdLink + '&prodIndex=' + iProdIndex + '&section=' + sSection + '&id=' + products[iProdIndex][kProdID] + '&name=' + escape(products[iProdIndex][kProdName]);
		}
	}
	
	sHtml = '<td align="center" valign="top" bgcolor="' + sBgColor + '">';
	sHtml += 	'<table cellpadding="0" cellspacing="0" width="' + iThumbnailCellWidth + '" border="0">\n';
	sHtml += 		'<tr>\n';
	sHtml += 			'<td align="center">\n';
	
	// Display product image
	sHtml += 				'<a href="' + sLink + '" onmouseover="' + sOnMouseOver + '" onmouseout="' + sOnMouseOut + '" onclick="SetArrays(0);">';
	sHtml +=					'<img name="prod' + iIndex + '" class="' + imgClass + '" src="' + ReplaceImageSize(products[iProdIndex][kProdImg], '_' + iThumbSize + '_') + '" alt=""';
	
	if (imgClass =='') {
		sHtml += ' border="0"';
	}
	
	sHtml +=					'>';
	sHtml += 				'</a>';
	sHtml += 			'</td>\n';
	sHtml += 		'</tr>\n';
	
	// Display demo button
	if (products[iProdIndex][kProdHasDemo] && typeof(sImgPathDemo) != 'undefined'){
		sHtml += 	'<tr>\n';
		sHtml += 		GenSpacerCell(1, 2);
		sHtml += 	'</tr>\n';
		sHtml += 	'<tr>\n';
		sHtml += 		'<td align="center" valign="middle">\n';
		sHtml += 			'<a href="javascript:OpenNew(\'/' + sSite + '/products/demo_track.asp?ProdID=' + products[iProdIndex][kProdID] + '&Sku=' + products[iProdIndex][kProdSku] + '&ProdName=' + escape(products[iProdIndex][kProdName]) + '\')" onmouseover="' + sOnMouseOver + '" onmouseout="' + sOnMouseOut + '"><img src="' + sImgPathDemo + '" alt="" border="0"></a>';
		sHtml += 		'</td>\n';
		sHtml += 	'</tr>\n';
	}
	
	// Display product name
	if (products[iProdIndex][kProdName] != null && products[iProdIndex][kProdName] != ''){
		sHtml += 		GenSpacerCell(1, 5);
		sHtml += 		'<tr>\n';
		sHtml += 			'<td align="center">';
		sHtml += 				'<a href="' + sLink + '" class="' + sLinkClass + '" onmouseover="' + sOnMouseOver + '" onmouseout="' + sOnMouseOut + '">';
		sHtml +=					products[iProdIndex][kProdName];
		sHtml += 				'</a>';
		sHtml += 			'</td>\n';
		sHtml += 		'</tr>\n';
	}
	
	// Display Product number
	if (bDisplaySku){
		sHtml += 		'<tr>\n';
		sHtml += 			'<td align="center" class="' + sProdNumClass + '">';
		sHtml += 				sProductNum + products[iProdIndex][kProdSku];
		sHtml += 			'</td>\n';
		sHtml += 		'</tr>\n';
	}
	sHtml += 	'</table>\n';
	sHtml += '</td>\n';
	
	return sHtml;
}

// Purpose:		To swap product display to new product and change w2b link if available
// Parameters:	lProdId - product id to switch data to
// Notes:		function BuildHtmlProductData() must  be stored in another js specific to the sub-site b/c it generates the sub-site specific html for the product page
function SwapProducts(id, prods, thumbs){
	var bHasAwards = false;
	
	lProdId = id;
	if (document.getElementById("w2b")){
		document.getElementById("w2b").href = '/' + sSite + '/locator/default.asp?pid=' + lProdId;
	}
	// Test for award button swap
	if (document.getElementById("awdWnr")){
		for(i = 0; i < products.length; i++){
			if (products[i][kProdID] == lProdId){
				if (products[i][kProdHasAwards]){
					bHasAwards = true
				}
			}
		}
		// only for littlepeople
		if (sScriptName.indexOf("littlepeople") != -1){
			if (bHasAwards){
				document.getElementById("awdWnr").innerHTML = '<a href="javascript: awardsPopUp(' + lProdId + ', 10, 10, false, \'' +  sSite  + '\')"><img src="/' + sSite + '/content/littlepeople/img/button_award.gif" width="90" height="30" border="0"></a>';
			}
			else{
				document.getElementById("awdWnr").innerHTML = '<img src="/img/s.gif" width="1" height="1" border="0">';
			}
		}
	}
	document.getElementById("ProductData").innerHTML = BuildHtmlProductData(lProdId);
}

// Purpose:	Determines index of product to start scroller from
function GetProductIndex(sDirection){
	var iReturn = 0;
	
	if (sDirection == '+'){
		if (iStartIndex >= aryImageIndex[aryImageIndex.length - 1]){
			iReturn = 0;
		}
		else{
			iReturn = aryImageIndex[0] + 1;
		}
	}
	else{
		if (iStartIndex == 0){
			iReturn = products.length - 1;
		}
		else{
			iReturn = iStartIndex - 1;
		}
	}
	
	return iReturn;
}

// Purpose:	Removes original index passed in so we don't get two
function RemoveIndex(sQueryString){
	var iStart = sQueryString.indexOf('prodIndex=');
	var iEnd = sQueryString.indexOf('&') + 1;
	var sSubString = sQueryString.substring(iStart, iEnd)
	
	if (iStart != -1) {
		sQueryString = sQueryString.replace(sSubString, '');
	}
	
	return (sQueryString);
}

// Purpose:	Sets the working arrays for this file
function SetArrays(index) {
	products = eval("aryProds" + index);
	thumbnails = eval("aryThumbs" + index);
	mainImg = eval("aryMedia" + index);
}