var numberOfRows = 1;
var numberOfColumns = 6;
var totalRecordsPerPage = 0;
var currentCategory = "";	//Category that is active on the page
var currentPageNum = 1;	//Current Page Number for the category details
var currentProductNum = 1;	//Current Selected Product Number on Page
var categories = new Array();	//Array of Product Categories
var productListURL = "";
var titleDiv = "titleImg";
var imageDiv = "imageDiv";		//Large Image Div Id
var iconDiv = "iconList";		//Small Icon Images Div Id
var pageDiv = "iconPages";
var productSelectedStyle = "classForSelectedIcon";
var productNotSelectedStyle = "classForNonselectIcon";
var pageSelectedColor = "#305776";
var pageNotSelectedColor = "white";
var productDetailsURL = "";
var doRetail = true;
var doBorder = true;


/**
* Represents a category
*/
function curCategory(assortmentName, headerImage, headerImageAlt, buttonImage, buttonImageAlt) {
	this.assortmentName = assortmentName;
	this.headerImage = headerImage;
	this.headerImageAlt = headerImageAlt;
	this.buttonImage = buttonImage;
	this.buttonImageAlt = buttonImageAlt;
	this.populated = false;
	this.totalNumPages = 0;
	this.totalNumRcds = 0;
	this.details = new Array();
}
/**
* Object that represent's a category page. 
* A category may have more than 1 page.
*/
function categoryPages(pageNum) {
	this.pageNumber = pageNum + 1;
	this.populated = false;
	this.startingIndex = (pageNum) * totalRecordsPerPage;
	this.pageProducts = new Array();
}
/**
* Contains a record for each product on the page
*/
function product() {
	this.smallImage = "";
	this.smallImageAlt = "";
	this.largeImage = "";
	this.largeImageAlt = "";
	this.shortDescription = "";
	this.retailPrice = "";
	this.salePrice = "";
	this.detailsURL = "";
}

//function which replaces a element's position with another, and put the element to a hidden container
//targetId: id of the item to be hidden
//containerId: id of hidden container which should has only one child node that is similiar to the target item
function replaceElement(targetId, containerId){
	var target = document.getElementById(targetId);
	var container = document.getElementById(containerId);
	var targetParent = target.parentNode;
	
	var temp = targetParent.innerHTML;
	
	targetParent.innerHTML = container.innerHTML;
	container.innerHTML = temp;
}

function onPageLoad(category){
	//Call the Server to get the list of products and populate
	//the primary product details
	currentCategory = category;
	
	
	getCategoryProducts(productListURL, currentCategory, 0, totalRecordsPerPage);
}

//function which change image and icon div according to catetory choice
function changeCategory(imageDivId, iconDivId,targetId,containerId){
	
	//Update the Header Image
	document.getElementById(titleDiv).src = categories[targetId].headerImage;
	document.getElementById(titleDiv).alt = categories[targetId].headerImageAlt;

	//Update the Button Images
	replaceElement(targetId, containerId);
	
	//Reset the Values
	currentCategory = targetId;
	currentPageNum = 1;
	currentProductNum = 1;

	//If we haven't already gotten the products for the first page of a category
	//then get them
	if(!categories[targetId].populated) {
		getCategoryProducts(productListURL, currentCategory, 0, totalRecordsPerPage);
	} else {
		//Now we need to populate the product icon section
		changeChildNodes(iconDiv);						
		updateDetails();
		changePageNumber();
	}	
}


//function which show the previous image
function showNextImg(){

	var activeCat = categories[currentCategory];
	var activeCatPage = activeCat.details[currentPageNum-1];
	var numPrd = activeCatPage.pageProducts.length;
	
	if(currentProductNum < numPrd) {
		currentProductNum++;
	}  else {
		currentProductNum = 1;
	}
	updateDetails();
	
}

//function which show the next image
function showPreImg(){

	var activeCat = categories[currentCategory];
	var activeCatPage = activeCat.details[currentPageNum-1];
	var numPrd = activeCatPage.pageProducts.length;
	
	if(currentProductNum == 1) {
		currentProductNum = numPrd;
	}  else {
		currentProductNum--;
	}
	updateDetails();
}


//function which updates product details
function updateDetails(){

	var activeCat = categories[currentCategory];
	var activeCatPage = activeCat.details[currentPageNum-1];
	
	var activeProduct = null;
	if(activeCatPage != null) {
		activeProduct = activeCatPage.pageProducts[currentProductNum-1];
	} else {
		activeProduct = new product();
	}
	
	document.getElementById("proBigImg").src = activeProduct.largeImage;
	document.getElementById("proBigImg").alt = activeProduct.largeImageAlt;
	document.getElementById("proName").innerHTML = activeProduct.shortDescription;
	
	if(doRetail) {
		if(activeProduct.retailPrice != "" && activeProduct.retailPrice != "$0.00"){
			document.getElementById("retailPriceText").innerHTML = "Retail Price";
			document.getElementById("retailPriceText1").innerHTML = ":&nbsp;";
			document.getElementById("proRPrice").innerHTML = activeProduct.retailPrice;
		}else{
			document.getElementById("retailPriceText").innerHTML = "";
			document.getElementById("retailPriceText1").innerHTML = "";
			document.getElementById("proRPrice").innerHTML = "";
		}
	}
	document.getElementById("proDiaPrice").innerHTML = activeProduct.salePrice;
	if(doBorder) {
		highlightIcon();
	}
}



//function which redirect user to product detail page
function showProDetails(){
	var activeProduct = categories[currentCategory].details[currentPageNum-1].pageProducts[currentProductNum-1];
	location.href=productDetailsURL + "?productCode="+activeProduct.detailsURL;
}

//function which replace image src with given src array for children nodes of the parent node
function changeChildNodes(parentId){

	var childrenNodes = document.getElementById(parentId).getElementsByTagName("img");
	
	var totalRcds = 0;
	var products = null;
	var selectedCategory = categories[currentCategory].details;
	if(selectedCategory.length >= currentPageNum) {
		products = selectedCategory[currentPageNum-1].pageProducts;
		totalRcds = products.length;
	} 
	for(i=0; i < totalRecordsPerPage; i++){
		if(i < totalRcds){
			childrenNodes[i].src = products[i].smallImage;
			childrenNodes[i].alt = products[i].smallImageAlt;
			childrenNodes[i].style.visibility = "visible";
			childrenNodes[i].parentNode.style.visibility = "visible";
		}else{
			childrenNodes[i].style.visibility = "hidden";
			childrenNodes[i].parentNode.style.visibility = "hidden";
			childrenNodes[i].src = "";
		}
	}
}

//function which show product details according to selected icon
function changeProduct(proIndex){
	currentProductNum = proIndex;
	updateDetails();
}

//function which changes icon page
function changePage(pIndex){
	currentProductNum = 1;
	currentPageNum = pIndex;
//should be a 0 based	
	var startingIndex = categories[currentCategory].details[currentPageNum].startingIndex;
	getCategoryProducts(productListURL, currentCategory, startingIndex, totalRecordsPerPage);
}

function setSelectedPageColor() {
	var pages = document.getElementById(pageDiv).getElementsByTagName("span");
	var selectedPage = currentPageNum -1;
	for(i=0; i< pages.length; i++){
		if(i != selectedPage){
			pages[i].style.color = pageNotSelectedColor;
		}else{
			pages[i].style.color = pageSelectedColor;
		}
	}
}

//function which change icon page numbers shown under icon list
function changePageNumber(){
	var str = "";
	
	var activeCat = categories[currentCategory];

	for(i = 0; i < activeCat.totalNumPages; i++){
		var index = i + 1;
		if( i > 0) {	
			str += "<span style=\"padding-left: 5px;padding-right: 5px;\"> | </span>";
		} 			
		str += "<span onclick='changePage("+i+")' onmouseover='this.style.cursor=\"pointer\";'>"+index+"</span>";
	}
	
	document.getElementById(pageDiv).innerHTML = str;
	setSelectedPageColor();
}

//function which highlight selected icon
function highlightIcon(){
	var icons = document.getElementById(iconDiv).getElementsByTagName("img");
	
	var selectedIndex = currentProductNum -1;
	for(i=0; i < icons.length; i++){
		var ic = icons[i];
		var p1 = ic.parentNode;
		if(i != selectedIndex){
			p1.className = productNotSelectedStyle;
		}else{
			p1.className = productSelectedStyle;
		}
	}
}

function CreateReqObject(url){
	if (typeof XMLHttpRequest != "undefined") {
	   req = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	   req = new ActiveXObject("Microsoft.XMLHTTP");
	}

}

function getCategoryProducts(pURL, pCategoryCode, pStartingIndex, pRecordsPerPage) {

	CreateReqObject(pURL);
	
	var delim = "?";
	if(pURL.indexOf("?") > -1) {
		delim = "&";
	}
	
 	 pURL = pURL + delim + "assortmentName=" + pCategoryCode + "&baseIndex=" + pStartingIndex + "&maxRows=" + pRecordsPerPage;
	 req.onreadystatechange = processReturnedProductList;

	 req.open("POST", pURL, true);
	 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");	 
	 req.send("&assortment=" + pCategoryCode + "&startingIndex=" + pStartingIndex + "&rcdPerPage=" + pRecordsPerPage);
}

function processReturnedProductList(){

   if (req.readyState == 4) {
        if (req.status == 200) {
       
        	var browser = 'ie';
			if (document.implementation && document.implementation.createDocument)
			{
				browser = 'firefox';
			}
	
		    var xmlDoc = req.responseXML;
			
			var x = xmlDoc.getElementsByTagName('assortment_products');
			if(x != null) {

				if(xmlDoc.getElementsByTagName("totalnumrecords")[0] != null && xmlDoc.getElementsByTagName("totalnumrecords")[0].firstChild.nodeValue != null) {
	
					//If this is the first time the category is being selected
					//then we need to populate the number of pages and the page place holders
					if(!categories[currentCategory].populated) {
						categories[currentCategory].populated = true;
						categories[currentCategory].totalNumPages = 
							xmlDoc.getElementsByTagName("totalnumpages")[0].firstChild.nodeValue;
						categories[currentCategory].totalNumRcds = 
							xmlDoc.getElementsByTagName("totalnumrecords")[0].firstChild.nodeValue;
					
						//Set the total Number of pages
						var numPages = categories[currentCategory].totalNumPages;
						categories[currentCategory].totalNumPages = numPages;
						
						for (var i=0; i<numPages; i++) {
							categories[currentCategory].details[i] = new categoryPages(i);
						}		
					}
					
					document.getElementById(titleDiv).src = categories[currentCategory].headerImage;
					document.getElementById(titleDiv).alt = categories[currentCategory].headerImageAlt;
					
					
					currentPageNum = xmlDoc.getElementsByTagName("currentpage")[0].firstChild.nodeValue;
					
					//Process the returned products
					
					if(categories[currentCategory].totalNumPages > 0) {
						var catDetails = categories[currentCategory].details[currentPageNum - 1];
						catDetails.populated = true;	
					
						var prds = xmlDoc.getElementsByTagName('product');
						var numPrds = prds.length;
						var newProduct = null;
						for (var i=0; i<numPrds; i++) {
						
							newProduct = new product();
							if(prds[i].getElementsByTagName('smallimage')[0].firstChild != null) {
								newProduct.smallImage = prds[i].getElementsByTagName('smallimage')[0].firstChild.nodeValue;
							}
							if(prds[i].getElementsByTagName('smallimagealt')[0].firstChild != null) {
								newProduct.smallImageAlt = prds[i].getElementsByTagName('smallimagealt')[0].firstChild.nodeValue;
							}
							if(prds[i].getElementsByTagName('largeimage')[0].firstChild != null) {
								newProduct.largeImage = prds[i].getElementsByTagName('largeimage')[0].firstChild.nodeValue;
							}
							if(prds[i].getElementsByTagName('largeimagealt')[0].firstChild != null) {
								newProduct.largeImageAlt = prds[i].getElementsByTagName('largeimagealt')[0].firstChild.nodeValue;
							}
							if(prds[i].getElementsByTagName('shortdescription')[0].firstChild != null) {
								newProduct.shortDescription = prds[i].getElementsByTagName('shortdescription')[0].firstChild.nodeValue;
							}
							if(doRetail && prds[i].getElementsByTagName('retailprice')[0].firstChild != null) {
								newProduct.retailPrice = prds[i].getElementsByTagName('retailprice')[0].firstChild.nodeValue;
							}
							if(prds[i].getElementsByTagName('salepriceamt')[0].firstChild != null) {
								newProduct.salePrice = prds[i].getElementsByTagName('salepriceamt')[0].firstChild.nodeValue;
							}
							if(prds[i].getElementsByTagName('productcode')[0].firstChild != null) {
								newProduct.detailsURL = prds[i].getElementsByTagName('productcode')[0].firstChild.nodeValue;
							}
							catDetails.pageProducts[i] = newProduct;
						}
					}
						
					//Now we need to populate the product icon section
					changeChildNodes(iconDiv);						
					
					//Select the default product and its details
					updateDetails();
						
					//Update the paging
					changePageNumber();
				}
			}
		}
	}
}