var itemC, itemN, itmsGrpCode, itmsGrpN, adminTab, input, brandLogo, imageUrl, mfgid, pHistory, ManufURL, checkGroupName, checkPriceInfo, totalStock;

	var pdtDetailsObj = "";
	var imgDetailObj = "";
	var tempW = 0;
	var tempH = 0;

	function pdtDetails()
	{
		var itemC = null;
		var itemN = null;
		var itmsGrpN = null; //brandName		
		var warranty = 0;
		var ManufURL = null;
		var brandLogo = null;
		var imageURL = null;		
		var prodInfo = null;
		var prodDesc = null;
		var mfgId = null;
				
		//below variables are described if there has the related info		
		var adminTab = null;
		var pHistory = null;
	}	
	function imageInfo()
	{
		var imgId = null;
		var imgPath = null;		
		var imgWth = null;
		var imgHgt = null;		
		var defaultImgId = 0;
	}

	$(document).ready(function() {
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
    $("#firstpane p.menu_head").click(function() {
        $(this).css({ backgroundImage: "url(down.png)" }).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("fast");
        $(this).siblings().css({ backgroundImage: "url(left.png)" });
    });
});
//---------------------------------------------------------------------------------------------------------	
function testing(e, num) {
    var el = document.getElementById('menuBodyDIV_' + num);
    if (el.style.display != 'none') {

        $(e).css({ backgroundImage: "url(./images/toggle_expand.png)" }).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("fast");
        $(e).siblings().css({ backgroundImage: "url(left.png)" });
    }
    else {

        $(e).css({ backgroundImage: "url(./images/toggle.png)" }).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideDown("fast");
        $(e).siblings().css({ backgroundImage: "url(left.png)" });
    }
}
//---------------------------------------------------------------------------------------------------------	

var temp, offset, searchText;
var pageLimit = 20;
offset = 0;
var index = 0;

var startElement = 0;
var endElement = 0;

var stockAr = new Array();
var salesAr = new Array();
var priceAr = new Array();

/**** drag and resize div *****/
// Determine browser and version.
//---------------------------------------------------------------------------------------------------------			
function Browser() {
    var ua, s, i;

    this.isIE = false;
    this.isNS = false;
    this.version = null;

    ua = navigator.userAgent;

    s = "MSIE";
    if ((i = ua.indexOf(s)) >= 0) {
        this.isIE = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
    }
    s = "Netscape6/";
    if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
    }
    // Treat any other "Gecko" browser as NS 6.1.		
    s = "Gecko";
    if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = 6.1;
        return;
    }
}

var browser = new Browser();
// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;
//---------------------------------------------------------------------------------------------------					
function dragStart(event, id) {

    var el;
    var x, y;

    // If an element id was given, find it. Otherwise use the element being
    // clicked on.

    if (id)
        dragObj.elNode = document.getElementById(id);
    else {
        if (browser.isIE)
            dragObj.elNode = window.event.srcElement;
        if (browser.isNS)
            dragObj.elNode = event.target;
        // If this is a text node, use its parent element.
        if (dragObj.elNode.nodeType == 3)
            dragObj.elNode = dragObj.elNode.parentNode;
    }

    // Get cursor position with respect to the page.

    if (browser.isIE) {
        x = window.event.clientX + document.documentElement.scrollLeft
		  + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
		  + document.body.scrollTop;
    }
    if (browser.isNS) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
    }

    // Save starting positions of cursor and element.

    dragObj.cursorStartX = x;
    dragObj.cursorStartY = y;
    dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 0);
    dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 0);

    if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = +540  //  +540;  //+700
    if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;

    if (browser.isIE) {
        document.attachEvent("onmousemove", dragGo);
        document.attachEvent("onmouseup", dragStop);
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    if (browser.isNS) {
        document.addEventListener("mousemove", dragGo, true);
        document.addEventListener("mouseup", dragStop, true);
        event.preventDefault();
    }
}
//---------------------------------------------------------------------------------------------------					
function dragGo(event) {

    var x, y;

    // Get cursor position with respect to the page.

    if (browser.isIE) {
        x = window.event.clientX + document.documentElement.scrollLeft
		  + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
		  + document.body.scrollTop;
    }
    if (browser.isNS) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
    }

    // Move drag element by the same amount the cursor has moved.

    dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
    dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";

    if (browser.isIE) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    if (browser.isNS)
        event.preventDefault();
}
//---------------------------------------------------------------------------------------------------					
function dragStop(event) {

    // Stop capturing mousemove and mouseup events.	
    if (browser.isIE) {
        document.detachEvent("onmousemove", dragGo);
        document.detachEvent("onmouseup", dragStop);
    }
    if (browser.isNS) {
        document.removeEventListener("mousemove", dragGo, true);
        document.removeEventListener("mouseup", dragStop, true);
    }
}
//---------------------------------------------------------------------------------------------------			
function nextPage() {
    startElement = endElement;
    //endElement = endElement + pageLimit;
    showSearch(temp, startElement);
    return false;
}
//---------------------------------------------------------------------------------------------------			
function previousPage() {
    startElement = startElement - pageLimit;
    //endElement = endElement - pageLimit;
    showSearch(temp, startElement);
    return false;
}
//---------------------------------------------------------------------------------------------------			
function searchMemCfg(memText, memBrand)
{
	var xmlHttp = ajaxInit();
	xmlHttp.onreadystatechange = function()
	{
		if(xmlHttp.readyState == 4)
		{
			temp = xmlHttp.responseXML;
			loadXML3(temp, startElement);
		}
	}	
	xmlHttp.open("GET", "./search.ashx?function=memconfig&memBrandName=" + memBrand + "&search=" + memText, true);
	xmlHttp.send(null);
}
//---------------------------------------------------------------------------------------------------			
function searchFunction(searchText) {
    var xmlHttp = ajaxInit(); 
	if (searchText.length == 0)
	{	
		var p = document.createElement("p");
		p.setAttribute('style', 'padding:20px;');		
		var spanKeyWord = document.createElement("span");
		spanKeyWord.setAttribute('style', 'color:#74653D; font-weight:bold; font-size:14px; padding:5px;');
		spanKeyWord.appendChild(document.createTextNode("Please enter something in the search box!"));		
		p.appendChild(spanKeyWord);		
		document.getElementById('navBar').appendChild(p);
		return false;
	}
	if (searchText.length < 2)
	{	
		var p = document.createElement("p");
		p.setAttribute('style', 'padding:20px;');		
		var spanKeyWord = document.createElement("span");
		spanKeyWord.setAttribute('style', 'color:#74653D; font-weight:bold; font-size:14px; padding:5px;');
		spanKeyWord.appendChild(document.createTextNode("Search Text is too Short."));		
		p.appendChild(spanKeyWord);		
		document.getElementById('navBar').appendChild(p);
		return false;
	}
	
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 1) {
            document.getElementById("displayDIV").innerHTML = "Loading ...Please wait...";
        }
        if (xmlHttp.readyState == 4) {
            temp = xmlHttp.responseXML;	
//alert(xmlHttp.responseText);
            loadXML3(temp, startElement);
        }
    };
    xmlHttp.open("GET", "./search.ashx?function=searchP&Stext=" + URLDecode(searchText), true);
    xmlHttp.send(null);
    return false;
}
//---------------------------------------------------------------------------------------------------			
function loadXML3(temp, startElement) 
{
//	alert(temp.documentElement.childNodes[0].tagName);
	var searchLength = temp.documentElement.childNodes[1].getAttribute("total");
	var memoryLength = temp.documentElement.childNodes[3].childNodes.length;
	var keyWord = temp.documentElement.childNodes[0].childNodes[0].nodeValue;
	if(searchLength > 0)
	{
		if (document.getElementById('searchDiv'))
		{
			document.getElementById('navBar').removeChild(document.getElementById('searchDiv'));
		}
		var searchDiv = document.createElement('div');
		searchDiv.setAttribute('id', 'searchDiv');
		searchDiv.setAttribute('style', 'padding-top:10px; padding-bottom:10px; float:left;');		
		var span = document.createElement("span");
		span.setAttribute('class', 'buttonStyle');
		span.setAttribute('onclick', 'showSearch(temp, startElement)');
		span.appendChild(document.createTextNode("Search Result"));
		searchDiv.appendChild(span);
		document.getElementById('navBar').appendChild(searchDiv);		
	}		
	if (memoryLength > 0)
	{
		if (document.getElementById('memCfgDiv'))
		{
			document.getElementById('navBar').removeChild(document.getElementById('memCfgDiv'));
		}
		var memCfgDiv = document.createElement('div');
		memCfgDiv.setAttribute('id', 'memCfgDiv');
		memCfgDiv.setAttribute('style', 'padding-top:10px; padding-bottom:10px; float:left;');		
		var span = document.createElement("span");
		span.setAttribute('class', 'buttonStyle');
		span.setAttribute('onclick', 'showMemory(temp, startElement)');
		span.appendChild(document.createTextNode("Memory Configurator Result"));
		memCfgDiv.appendChild(span);
		document.getElementById('navBar').appendChild(memCfgDiv);		
	}
	//below is displaying default results
	if (memoryLength > 0)
	{
		showMemory(temp, startElement);
	}
	if(searchLength > 0)
	{
		showSearch(temp, startElement);
	}
	//no found results for both
	if(searchLength == 0 && memoryLength == 0)
	{
		var p = document.createElement("p");
		p.setAttribute('style', 'padding:20px;');
		var span = document.createElement("span");
		span.setAttribute("style", "padding-top:20px;");
		span.appendChild(document.createTextNode("We are sorry, you searched for"));		
		p.appendChild(span);
		var spanKeyWord = document.createElement("span");
		spanKeyWord.setAttribute('style', 'color:#74653D; font-weight:bold; font-size:14px; padding:5px;');
		spanKeyWord.appendChild(document.createTextNode(" " + URLDecode(keyWord) + " "));		
		p.appendChild(spanKeyWord);
		var span = document.createElement("span");
		span.appendChild(document.createTextNode("does not exist in our system"));	
		p.appendChild(span);
		document.getElementById('navBar').appendChild(p);
	}
}
//---------------------------------------------------------------------------------------------------					
function showMemory(temp, startElement) {	/***** SMemory configurator part *****/

    var div1, tab1, row1, col1, pricevar, resultPN;
    if (document.getElementById('searchMemory'))
        document.getElementById('result').removeChild(document.getElementById('searchMemory'));

    document.getElementById("navDIV1").style.display = "none";
    document.getElementById("navDIV2").style.display = "none";
	searchText = temp.getElementsByTagName("searchOption")[0].childNodes[0].nodeValue;
	  
    div1 = document.createElement("div");
    div1.setAttribute('id', 'searchMemory');

    tab1 = document.createElement('table')
    row1 = document.createElement('tr');
    tab1.appendChild(row1);

    col1 = document.createElement('td');
    col1.setAttribute('colspan', '2');
    col1.setAttribute('style', 'font-weight:bold; padding-bottom:15px;');
    col1.appendChild(document.createTextNode('Memory Configurator Result : '));
	var span = document.createElement("span");
	span.setAttribute("style", "color: #74653D; font-weight:bold; font-size:14px;");
	span.appendChild(document.createTextNode(searchText));
	col1.appendChild(span);
    row1.appendChild(col1);
    tab1.appendChild(row1);

    var y = temp.getElementsByTagName("mem")[0].getElementsByTagName("entry");

    row1 = document.createElement('tr');
    col1 = document.createElement('td');
    row1.appendChild(col1);

    for (var count = 0; count < y.length; count++) {
        var sysId = y[count].getElementsByTagName("SystemID")[0].childNodes[0].nodeValue;

        //table				
        var table = document.createElement('table');
        table.setAttribute('id', 'memCofg');
        var row = document.createElement('tr');

        var col = document.createElement('td');
        col.setAttribute('valign', 'top');

        var aLink = document.createElement('a');
        aLink.setAttribute('href', 'http://www.ec.kingston.com/ecom/configurator_new/modelsinfo.asp?referid=19&SysId=' + sysId);
        aLink.setAttribute('target', '_blank');
        aLink.setAttribute('style', 'text-decoration:none;font-size:10px;color:#0064b5;text-decoration:none;');
        aLink.appendChild(document.createTextNode('More ...'));

        col.appendChild(aLink);
        row.appendChild(col);

        col = document.createElement('td');

        var divM = document.createElement('div');
        divM.setAttribute('id', 'firstpane');
        divM.setAttribute('class', 'menu_list');
        divM.style.width = '600px';

        var pText = document.createElement('p');
        pText.setAttribute('class', 'menu_head');
        pText.setAttribute('style', 'background-image:url(./images/toggle_expand.png);')
        pText.setAttribute('onclick', 'testing(this, ' + count + ');');
        pText.appendChild(document.createTextNode(y[count].getElementsByTagName("SystemName")[0].childNodes[0].nodeValue));

        divM.appendChild(pText);

        //menuBodyDIV_0,1,2,3,... for each part no
        var divBody = document.createElement('div');
        divBody.setAttribute('class', 'menu_body');
        divBody.setAttribute('id', 'menuBodyDIV_' + count);
        divBody.setAttribute('style', 'display:none;');

        var memory = y[count].getElementsByTagName("memory");
        var tabContent = document.createElement('table');

        var groupName, resultPrice, groupName2, resultPrice2, currCode, currCode2, discontinued;
        for (var t = 0; t < memory.length; t++) {
            resultPN = memory[t].getElementsByTagName("PartNo")[0].childNodes[0].nodeValue;
			discontinued = memory[t].getElementsByTagName("discontinued")[0].childNodes[0].nodeValue;
            resultGroup = memory[t].getElementsByTagName("price");
            for (var loopArray = 0; loopArray < resultGroup.length; loopArray++) {
                //end user price
                //groupName = end user price, resultPrice = SGD with price                
                if (resultGroup[loopArray].childNodes[0].childNodes[0].nodeValue == 1) {
                    groupName = resultGroup[loopArray].childNodes[1].childNodes[0].nodeValue;
                    resultPrice = resultGroup[loopArray].childNodes[2].childNodes[0].nodeValue;
                    currCode = resultGroup[loopArray].childNodes[3].childNodes[0].nodeValue;
                }
                //reseller price
                if (resultGroup[loopArray].childNodes[0].childNodes[0].nodeValue == 2) {                    
                    groupName2 = resultGroup[loopArray].childNodes[1].childNodes[0].nodeValue;
                    resultPrice2 = resultGroup[loopArray].childNodes[2].childNodes[0].nodeValue;
                    currCode2 = resultGroup[loopArray].childNodes[3].childNodes[0].nodeValue;
                }               
            }
			
            rowContent = document.createElement('tr');
            colContent = document.createElement('td');
			colContent.setAttribute('style', 'cursor:pointer; padding:3px;');
           // colContent.setAttribute('onmouseover', 'mouseover(this);');
            colContent.setAttribute('class', 'colContent1');
            colContent.setAttribute('onClick', 'LoadDetail("' + resultPN + '", "P", "0")');
            colContent.appendChild(document.createTextNode(resultPN));
			
			var colDiscon = document.createElement('td');
			colDiscon.setAttribute("style", "color:red; font-weight:bold; font-size:10px;");
			//discontinued
			if (discontinued == "True")
			{
				colDiscon.appendChild(document.createTextNode("Discon."));
			}
            colContent2 = document.createElement('td');
            colContent2.setAttribute('class', 'colContent2');
            if (resultPrice2)
                colContent2.appendChild(document.createTextNode(groupName2 + ": " + currCode2 + " " + resultPrice2));

            colContent3 = document.createElement('td');
            colContent3.setAttribute('class', 'colContent3');
            colContent3.appendChild(document.createTextNode(groupName + ": " + currCode + " " + resultPrice));

            rowContent.appendChild(colContent);
			rowContent.appendChild(colDiscon);
            rowContent.appendChild(colContent2);
            rowContent.appendChild(colContent3);
            tabContent.appendChild(rowContent);

            divBody.appendChild(tabContent);
        }
        divM.appendChild(divBody);
        col.appendChild(divM);
        row.appendChild(col);

        table.appendChild(row);

        col1.appendChild(table);
        tab1.appendChild(row1);
    }
    div1.appendChild(tab1);
    document.getElementById('result').appendChild(div1);
}
//---------------------------------------------------------------------------------------------------

function showSearch(temp, startElement) {
    /***** General search part *****/

    var x = temp.getElementsByTagName("SEntry");

    var itemCode, score, itemName, itmsGrpCod, itmsGrpNam, searchText, existSap, existEcon, proDesc, proInfo, discontinued, internal;

    var div, tab, row, col, br, span

    if (document.getElementById('searchMemory'))
        document.getElementById('result').removeChild(document.getElementById('searchMemory'));
    //	if(temp.getElementsByTagName("searchText").length < 1)

    if (temp.getElementsByTagName("itemCode").length < 1) {
        searchText = "";
    }
    else {
        /************Show search Result */
        //document.getElementById("sear").style.display = "block";
        document.getElementById("navDIV1").style.display = "block";
        document.getElementById("navDIV2").style.display = "block";
        document.getElementById("displayDIV").innerHTML = "";
        document.getElementById("displayDIV").style.display = "block";
        //document.getElementById("MemDIV").style.display = "none";
        searchText = temp.getElementsByTagName("searchOption")[0].childNodes[0].nodeValue;
    }
    if (startElement < 0) {
        startElement = 0;
    }
    var diff = 0;
    endElement = startElement + pageLimit;

    if (endElement > x.length) {
        endElement = x.length;

        document.getElementById("nextDIV1").style.display = "none";
        document.getElementById("nextDIV2").style.display = "none";
    }
    else {
        document.getElementById("nextDIV1").style.display = "block";
        document.getElementById("nextDIV2").style.display = "block";
    }

    div2 = document.createElement("div");
    div2.setAttribute("id", "searchMemory");
    tab = document.createElement("table");

    span = document.createElement("span");
    span.setAttribute("id", "spanTitle");
	span.setAttribute("style", "font-size:13px;font-weight:bold;");
    span.appendChild(document.createElement('br'));

    if (searchText == "") {
        span.appendChild(document.createTextNode("No Records Found!"));
    }
    else {
        span.appendChild(document.createTextNode("Search result : "));
		div2.appendChild(span);
		
		var spanText = document.createElement("span");
		spanText.setAttribute('style', 'color:#74653D;font-weight:bold;font-size:14px;');
		spanText.appendChild(document.createTextNode(searchText));
		div2.appendChild(spanText);
		
		var span = document.createElement("span");
		span.appendChild(document.createTextNode(" , " + (startElement + 1 ) + " - " +  (endElement ) + " records out of "+x.length));
		
		//insert search box with current search text
		document.getElementById('txtSearch1').value = searchText;
    }
    
    div2.appendChild(span);

    br = document.createElement("br");
    div2.appendChild(br);

    br = document.createElement("br");
    div2.appendChild(br);

    for (var i = startElement; i < endElement; i++) {
		discontinued = ""; //need to reset
		internal = ""; //need to reset
	
        if (x[i].getElementsByTagName("itemCode")[0].childNodes[0] == null) {
            itemCode = "";
        }
        else {
            itemCode = URLDecode(x[i].getElementsByTagName("itemCode")[0].childNodes[0].nodeValue);
            itemCode = itemCode.toUpperCase();
        }

        if (x[i].getElementsByTagName("itemName")[0].childNodes[0] == null) {
            itemName = "";			
        }
        else {
            itemName = URLDecode(x[i].getElementsByTagName("itemName")[0].childNodes[0].nodeValue);
			//if econ info is null, then SAP's info		
        }
        //if pdt from econ, take brandName from econ. otw itmsGrpNam from SAP
        if (x[i].getElementsByTagName("brandName")[0].childNodes[0] == null) {
        //get itmsGrpNam from Sap
            brandName = URLDecode(x[i].getElementsByTagName("itmsGrpNam")[0].childNodes[0].nodeValue);
            brandName = brandName.toUpperCase();
        }
        else {
            brandName = URLDecode(x[i].getElementsByTagName("brandName")[0].childNodes[0].nodeValue);
            brandName = brandName.toUpperCase();
        }
		if (x[i].getElementsByTagName("prodInfo")[0].childNodes[0] == null) {
			proInfo = "";
        }
        else {
            proInfo = URLDecode(x[i].getElementsByTagName("prodInfo")[0].childNodes[0].nodeValue);			
        }
		
        if (x[i].getElementsByTagName("proDesc")[0].childNodes[0] == null) {
			proDesc = "";
        }
        else {
            proDesc = URLDecode(x[i].getElementsByTagName("proDesc")[0].childNodes[0].nodeValue);	
        }
        existSap = URLDecode(x[i].getElementsByTagName("existSap")[0].childNodes[0].nodeValue);
		existEcon = URLDecode(x[i].getElementsByTagName("existEcon")[0].childNodes[0].nodeValue);
		
		//discontinued		
		if (x[i].getElementsByTagName("discontinued")[0].childNodes[0] == null)
		{
			discontinued = "";
		}
		else
		{
			if (x[i].getElementsByTagName("discontinued")[0].childNodes[0].nodeValue == "True")
			{					
				discontinued = "<This product is discontinued.>";
			}
			
		}		
		
		//internal
		if (x[i].getElementsByTagName("internal")[0].childNodes[0] == null)
		{
			internal = "";
		}
		else
		{
			if (x[i].getElementsByTagName("internal")[0].childNodes[0].nodeValue == "True")
			{					
				internal = "<Internal Display Only>";
			}
			
		}		
		currentUser = temp.getElementsByTagName("CurrentUser")[0].childNodes[0].nodeValue;
	
        //drawTable
        row = document.createElement("tr");

        col = document.createElement("td");
        col.setAttribute('width', '30px;');
        col.setAttribute("rowspan", "5");
        col.appendChild(document.createTextNode(i + 1 + ". "));
        row.appendChild(col);

        col = document.createElement("td");
        col.setAttribute('width', '5px');
        col.setAttribute('rowspan', '5');
        col.appendChild(document.createTextNode(""));
        row.appendChild(col);

        col = document.createElement("td");
        col.setAttribute("width", "600px");
        col.setAttribute("style", "font-weight:bold;cursor:pointer;color:#0064b5;text-decoration:none;");
        col.setAttribute("onclick", "LoadDetail('" + URLDecode(itemCode) +"','P'," + Number(i+1) +");");

        col.appendChild(document.createTextNode(URLDecode(itemCode)));
        row.appendChild(col);
        tab.appendChild(row);

        row = document.createElement("tr");       
        col = document.createElement("td");
		col.setAttribute('colspan', '3');
		//display only short info		
		if (itemName.toLowerCase() == proInfo.toLowerCase())
		{			
			col.appendChild(document.createTextNode(proInfo));			
		}
		else
		{
			col.appendChild(document.createTextNode(itemName));
		}
		
        row.appendChild(col);
        tab.appendChild(row);

        row = document.createElement("tr");
        col = document.createElement("td");
        col.setAttribute("style", "font-weight:bold;");
        col.appendChild(document.createTextNode(brandName));
        row.appendChild(col);
        tab.appendChild(row);

        row = document.createElement("tr");		
        col = document.createElement("td");
        col.setAttribute('colspan', '3');
        if (proDesc.length > 0) {
            span = document.createElement("span");
            span.appendChild(document.createTextNode("Description: "));
            col.appendChild(span);
            span = document.createElement("span");
            span.appendChild(document.createTextNode(proDesc));
            col.appendChild(span);
        }
        row.appendChild(col);    
        tab.appendChild(row);
        row = document.createElement("tr");
        col = document.createElement("td");
        col.setAttribute('id', 'existGrpCol');		
        
    //********************************          
	if (currentUser == "True")
	{
		if (existSap == "True")
		{
			var spanSap = document.createElement("span");
			spanSap.setAttribute("style", "color:#5ab20b;font-weight:bold;padding:5px;font-size:10px;");
			spanSap.appendChild(document.createTextNode("This product exist in SAP."))
			col.appendChild(spanSap);
		}
		if(existEcon == "True")
		{
			var spanEcon = document.createElement("span");
			spanEcon.setAttribute("style", "color:#10cfd1;font-weight:bold;padding:5px;font-size:10px;");
			spanEcon.appendChild(document.createTextNode("This product exist in Econ."))
			col.appendChild(spanEcon);
		} 
		row.appendChild(col);
	}
		
		var col = document.createElement('td');
		col.setAttribute('style', 'width:300px; color:red; font-weight:bold; font-size:10px;');
		col.appendChild(document.createTextNode(discontinued));
		row.appendChild(col);
		var col = document.createElement('td');
		col.setAttribute('style', 'width:250px; color:red; font-weight:bold; font-size:10px;');
		col.appendChild(document.createTextNode(internal));
		row.appendChild(col);
		tab.appendChild(row);

		row = document.createElement("tr");
		col = document.createElement("td");
		col.setAttribute("colspan", "2");
		br = document.createElement("br");
		col.appendChild(br);
		row.appendChild(col);
		tab.appendChild(row);
    }
    div2.appendChild(tab);
    document.getElementById('result').appendChild(div2);
}
//*************************************************************************************************
//****  Load XML to Array ********//
function LoadDetail(itemCode, text, randId) {
	if (itemCode.length < 2 || itemCode.length > 40)
	{
		var p = document.createElement("p");
		p.setAttribute('style', 'padding:20px;');		
		var spanKeyWord = document.createElement("span");
		spanKeyWord.setAttribute('style', 'color:#74653D; font-weight:bold; font-size:14px; padding:5px;');
		spanKeyWord.appendChild(document.createTextNode("Part Number length does not match the criteria."));		
		p.appendChild(spanKeyWord);
		document.getElementById('navBar').appendChild(p);
		return false;
	}
	
    if (text == "P") {
        x = temp.getElementsByTagName("SEntry");
    }
    var xmlHttp = ajaxInit();
    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4) {
		//alert(xmlHttp.responseText);
            LoadPopUpDIV(xmlHttp.responseXML, text);
        }
    };
    xmlHttp.open("GET", "./search.ashx?function=getDetails&partNo=" + itemCode + "&rank=" + randId, true);
    xmlHttp.send(null);
    return false;
}
//---------------------------------------------------------------------------------------------------
	
//---------------------------------------------------------------------------------------------------
function LoadPopUpDIV(DocXML, text) {
    var i, columnsXML;
    columnsXML = 0;
    //need to reset global variables
    salesAr = new Array();
    stockAr = new Array();
    priceAr = new Array();
    
    //salesAr and stockAr, priceAr declare in global
    var salesData, priceData, stockData;
    stockData = new Array();
    priceData = new Array();
    salesData = new Array();
    //need to check the salesData length and it's node value	
//	if(DocXML.getElementsByTagName("priceInfo"))
//	{
//		alert("yaeee");
//	}

	if(DocXML.getElementsByTagName("salesData"))
	{	
		if (DocXML.getElementsByTagName("salesData").length > 0) {
			if (salesData = DocXML.getElementsByTagName("salesData")[0].getElementsByTagName("entry") == null) {
				salesData = new Array()
			}
			else {
				salesData = DocXML.getElementsByTagName("salesData")[0].getElementsByTagName("entry");
			}
		}
	}
    //else salesData = new Array();
    
    for (i = 0; i < salesData.length; i++) {
        salesAr[i] = new Array();

        salesAr[i][0] = URLDecode(salesData[i].getElementsByTagName("date")[0].childNodes[0].nodeValue);    //date
        salesAr[i][1] = URLDecode(salesData[i].getElementsByTagName("cardcode")[0].childNodes[0].nodeValue); //customer code

        if (salesData[i].getElementsByTagName("cardname")[0].childNodes[0] == null) {
            salesAr[i][2] = "";
        }
        else {
            salesAr[i][2] = URLDecode(salesData[i].getElementsByTagName("cardname")[0].childNodes[0].nodeValue); //customer name
        }

        salesAr[i][3] = URLDecode(salesData[i].getElementsByTagName("quantity")[0].childNodes[0].nodeValue); //quantity
        salesAr[i][4] = URLDecode(salesData[i].getElementsByTagName("price")[0].childNodes[0].nodeValue); // price
        if (salesData[i].getElementsByTagName("currency")[0].childNodes[0] == null) {
            salesAr[i][5] = "";
        }
        else {
            salesAr[i][5] = URLDecode(salesData[i].getElementsByTagName("currency")[0].childNodes[0].nodeValue); // currency
        }
    }  
	
//sales data	
	if(DocXML.getElementsByTagName("salesData"))
	{	
		if (DocXML.getElementsByTagName("stocksData").length > 0) {
			stockData = DocXML.getElementsByTagName("stocksData")[0].getElementsByTagName("stockItem");
			totalStock = DocXML.getElementsByTagName("stocksData")[0].getAttribute("total") //total value 
		}
	}
    for (j = 0; j < stockData.length; j++) {
        stockAr[j] = new Array();
        stockAr[j][0] = URLDecode(stockData[j].getElementsByTagName("whsCode")[0].childNodes[0].nodeValue);  //warehouse 
        stockAr[j][1] = URLDecode(stockData[j].getElementsByTagName("onHand")[0].childNodes[0].nodeValue);  // qty on hand    
		stockAr[j][2] = URLDecode(stockData[j].getElementsByTagName("commited")[0].childNodes[0].nodeValue); // committed		
        stockAr[j][3] = URLDecode(stockData[j].getElementsByTagName("onOrder")[0].childNodes[0].nodeValue); // ordered        		
    }

    if (DocXML.getElementsByTagName("priceInfo").length > 0) {
        priceData = DocXML.getElementsByTagName("priceInfo")[0].getElementsByTagName("price");
    }
      
    for (j = 0; j < priceData.length; j++) {
        priceAr[j] = new Array();
        priceAr[j][0] = URLDecode(priceData[j].getElementsByTagName("customerGrp")[0].childNodes[0].nodeValue);  //customer Group
        priceAr[j][1] = URLDecode(priceData[j].getElementsByTagName("amount")[0].childNodes[0].nodeValue);  // amount
        priceAr[j][2] = URLDecode(priceData[j].getElementsByTagName("currCode")[0].childNodes[0].nodeValue);  // currCode
		//alert(priceAr[j][1]);
    }

	//save product detail to object
	getProdDetailXML(DocXML); 
	
	//single product pop-up box
    if (text == "P") {
		//note: must call the functions as accordingly otw, pop-up box will not show "default tabs"
	    displayProdDetail("box");
        displayProdDtlBox();
		displayDefaultTabs("box");
    } 	
    else 
	{
		//single product per page		
		displayProdDetail("page");
		displayDefaultTabs("page");
    }
}
//---------------------------------------------------------------------------------------------------
function closeDIV() {
    if (document.getElementById('proDetailDIV')) {
        document.getElementById('masterDiv').removeChild(document.getElementById('proDetailDIV'));
    }
}
//---------------------------------------------------------------------------------------------------
//****************************************************************
//Pop Up Box
//****************************************************************
	function displayProdDtlBox()
	{
		if (document.getElementById("proDetailDIV")) {
			document.getElementById("masterDiv").removeChild(document.getElementById("proDetailDIV"));
		}		
		var div, HeaderDIV, AttDIV, stockDIV, tab, row, col, divMoveHandle
		boxDiv = document.createElement('div');
		boxDiv.setAttribute('id', 'proDetailDIV');
		boxDiv.setAttribute('style', 'z-index:12; max-height:600px; overflow:auto;');
		boxDiv.setAttribute('class', 'Searchbox');
		document.getElementById('masterDiv').appendChild(boxDiv);
		
		/*drag header*/
		divMoveHandle = document.createElement('div');
		divMoveHandle.setAttribute('id', 'boxB');
		divMoveHandle.setAttribute('style', 'padding-left:5px;');		
		divMoveHandle.setAttribute('class', 'bar');
		span = document.createElement('span');
		span.setAttribute('id', 'itemCode');
		span.setAttribute('style', 'color:#FFF; font-size:14px; font-weight:bold; padding:5px;');
		divMoveHandle.setAttribute('align', 'center');
		span.appendChild(document.createTextNode(pdtDetailsObj.itemC));
		divMoveHandle.appendChild(span);
		divMoveHandle.setAttribute('onmousedown', 'dragStart(event, "proDetailDIV")');
		boxDiv.appendChild(divMoveHandle);

		/*close DIV**/
		span = document.createElement('span');
		span.setAttribute('id', 'closeSpan2');
		span.setAttribute('style', 'float:right;cursor:pointer;padding-right:5px;color:#FFF;font-weight:bold; padding-top:5px;');

		span.appendChild(document.createTextNode("Close X"));
		span.setAttribute('onclick', 'closeDIV();');

		divMoveHandle.appendChild(span);
		boxDiv.appendChild(divMoveHandle);

		/*Direct Link**/
		var strHref = window.location.href;
		//alert(strHref);
		var strQueryString;
		if (strHref.indexOf("?") > -1) {
			aQueryString = strHref.split("?");
		}

		var partNoUrl;		
		partNoUrl = (aQueryString[0] + "?partNo=" + URLencode(pdtDetailsObj.itemC));
		span = document.createElement('span');		
		span.setAttribute('id', 'DirectSpan');
		span.setAttribute('style', 'float:left;cursor:pointer;padding-right:5px;font-weight:bold;padding-top:5px;');
		var a;
		a = document.createElement('a');
		a.setAttribute('href', partNoUrl);
		a.setAttribute('target', '_parent');
		a.setAttribute('style', 'color:#FFF;');
		a.appendChild(document.createTextNode("Direct Link"));
		span.appendChild(a);
		divMoveHandle.appendChild(span);
		boxDiv.appendChild(divMoveHandle);

		/* URL text */
		divURL = document.createElement('div');
		divURL.setAttribute('id', 'url');
		var inputtxt = document.createElement("Input");
		inputtxt.setAttribute('style', 'width: 455px');
		inputtxt.setAttribute("value", partNoUrl); //part number
		divURL.appendChild(inputtxt)
		boxDiv.appendChild(divURL);

		// *** call the display function and put into "Box Div *** "		
		boxDiv.appendChild(document.getElementById("displayDetail"));
	}
//*********************** stock DIV ***********************************/
	function stockTabDisplay(checkPage) {

		if (checkPage == "box" || checkPage == "page") {
			//set current tab color with hover
			document.getElementById('stockCurrent').setAttribute('class', 'buttonStyleBlueHover');
					
			//hides other div, default is showing all div
			if (document.getElementById("infoDivPrice")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivPrice"));
				document.getElementById('priceCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivStock")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivStock"));
			}
			if (document.getElementById("infoDivSales")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivSales"));
				document.getElementById('salesCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivAdmin")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivAdmin"));
				document.getElementById('adminTab').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivGraph")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivGraph"));
				document.getElementById('graphCurrent').setAttribute('class', 'buttonStyleBlue');
			}
		}
		//start stock div
		var stockDIV = document.createElement('div');
		stockDIV.setAttribute('id', 'infoDivStock');
		if (checkPage == "box")    //set for individual tab inside pop-up box
		{
			stockDIV.setAttribute('style', 'float:left;display:block;height:390px;overflow:auto;width:98%; padding:5px;');
		}
		else if (checkPage == "page") //set for individual tab inside page/after click direct link	
		{
			stockDIV.setAttribute('style', 'float:left;display:block;height:750px;overflow:auto;width:98%; padding:5px;');
		}
		else { //set for default
			stockDIV.setAttribute("style", "padding:5px; clear:both;");
		}
		checkPage == '';
		
		var tab = document.createElement('table');
		var row = document.createElement('tr');
		var col = document.createElement('td');
		tab.setAttribute("class", "tableStyle");

		if (totalStock > 0) {
			col.setAttribute('style', 'font-weight:bold; height:25px; padding-left:5px;');
			col.setAttribute('valign', 'middle');
			col.setAttribute('colspan', '6');
			col.appendChild(document.createTextNode("Stock Report"));
			row.appendChild(col);
			tab.appendChild(row);

			row = document.createElement('tr');
			row.setAttribute('style', 'color:#0079c2;font-weight:bold;');
			col = document.createElement('td');
			col.setAttribute("class", "tableStyle");
			col.setAttribute('width', '100px;');
			col.setAttribute('style', 'font-weight:bold; width:175px; padding-left:5px; height:18px; ')
			col.appendChild(document.createTextNode('WHName'));
			row.appendChild(col);

			col = document.createElement('td');
			col.setAttribute("class", "tableStyle");
			col.setAttribute('style', 'font-weight:bold; padding-right:5px;width:175px; padding-left:5px; height:18px; ')
			col.appendChild(document.createTextNode('OnOrder'));
			row.appendChild(col);
			col = document.createElement('td');
			col.setAttribute("class", "tableStyle");
			col.setAttribute('style', 'font-weight:bold; padding-right:5px;width:175px; padding-left:5px; height:18px; ')
			col.appendChild(document.createTextNode('In-Stock'));
			row.appendChild(col);
			col = document.createElement('td');
			col.setAttribute("class", "tableStyle");
			col.setAttribute('style', 'font-weight:bold; padding-right:5px;width:175px; padding-left:5px; height:18px; ')
			col.appendChild(document.createTextNode('Customer Orders'));
			row.appendChild(col);
			col = document.createElement('td');
			col.setAttribute("class", "tableStyle");
			col.setAttribute('style', 'font-weight:bold; padding-right:5px;width:175px; padding-left:5px; height:18px; ')
			col.appendChild(document.createTextNode('Available Now'));
			row.appendChild(col);
			col = document.createElement('td');
			col.setAttribute("class", "tableStyle");
			col.setAttribute('style', 'font-weight:bold; padding-right:5px;width:175px; padding-left:5px; height:18px; ')
			col.appendChild(document.createTextNode('Available Future'));
			row.appendChild(col);
			tab.appendChild(row);
			var count = 0;
			for (var i = 0; i < stockAr.length; i++) {
				var qty = parseInt(stockAr[i][1]) + parseInt(stockAr[i][2]) + parseInt(stockAr[i][3]);
				var total = parseInt(stockAr[i][1]) - parseInt(stockAr[i][2]) + parseInt(stockAr[i][3]);
				//stockAr[i][1] = Onhand/ In-Stock
				//stockAr[i][2] = Commited/ Customer orders
				//stockAr[i][3] = OnOrder
				//col.appendChild(document.createTextNode(stockAr[i][1] + " - " + stockAr[i][2] + " + " + stockAr[i][3] + " = " + (total)));
				if ((qty) > 0) {
					row = document.createElement('tr');

					if (count % 2 == 0) {
						row.setAttribute('style', 'background-color:#FFF;');
					}
					else {
						row.setAttribute('style', 'background-color:#dfecfe;');
					}
					col = document.createElement('td');
					col.setAttribute("class", "tableStyle");
					col.appendChild(document.createTextNode(stockAr[i][0]));
					col.setAttribute("style", "padding-left:5px; height:18px; ");
					row.appendChild(col);
					//on-order
					col = document.createElement('td');
					col.setAttribute("class", "tableStyle");
					col.setAttribute('align', 'left');
					col.setAttribute("style", "padding-left:5px; height:18px; ");
					col.appendChild(document.createTextNode(stockAr[i][3]));
					row.appendChild(col);
					//in-stock
					col = document.createElement('td');
					col.setAttribute("class", "tableStyle");
					col.setAttribute('align', 'left');
					col.setAttribute("style", "padding-left:5px; height:18px; ");
					col.appendChild(document.createTextNode(stockAr[i][1]));
					row.appendChild(col);
					//customer orders
					col = document.createElement('td');
					col.setAttribute("class", "tableStyle");
					col.setAttribute('align', 'left');
					col.setAttribute("style", "padding-left:5px; height:18px; ");
					col.appendChild(document.createTextNode(stockAr[i][2]));
					row.appendChild(col);
					//availabe now, In-stock - customer orders
					col = document.createElement('td');
					col.setAttribute("class", "tableStyle");
					col.setAttribute('align', 'left');
					col.setAttribute("style", "padding-left:5px; height:18px; ");
					if ((stockAr[i][1] - stockAr[i][2]) <= 0) {
						col.setAttribute("style", "padding-left:5px; height:18px; font-size:9px; color:red;");
						col.appendChild(document.createTextNode("Currently out of stock"));
					}
					else {
						col.appendChild(document.createTextNode(stockAr[i][1] - stockAr[i][2]));
					}
					row.appendChild(col);
					//available futrue, On-order + In-stock - customer orders
					col = document.createElement('td');
					col.setAttribute("class", "tableStyle");
					col.setAttribute('align', 'left');
					col.setAttribute("style", "padding-left:5px; height:18px; ");
					//it assumes '0' as string and plus as a string. so we have to use parseInt()
					var onOrder = parseInt(stockAr[i][3]);
					var inStock = parseInt(stockAr[i][1]);
					var customerOrder = parseInt(stockAr[i][2]);
					col.appendChild(document.createTextNode(onOrder + inStock - customerOrder));
					row.appendChild(col);
					tab.appendChild(row);
					count++;
				}
			}
			if (count == 0)  // all qty<0 
			{
				row = document.createElement('tr');
				col = document.createElement('td');
				col.setAttribute("style", "padding-left:5px;");
				col.appendChild(document.createTextNode("-"));
				col.setAttribute('align', 'left');
				row.appendChild(col);

				col = document.createElement('td');
				col.setAttribute("style", "padding-left:5px;");
				col.setAttribute('align', 'left');

				col.appendChild(document.createTextNode("-"));
				row.appendChild(col);
				tab.appendChild(row);
			}
		}
		//total stock is <= 0
		else {

			var col = document.createElement('td');
			col.setAttribute('style', 'font-weight:bold; height:25px; padding-left:5px;');
			col.setAttribute('valign', 'middle');
			col.appendChild(document.createTextNode("Stock Report: "));
			row.appendChild(col);
			var col = document.createElement('td');
			col.setAttribute('style', 'font-weight:bold; width:150px; height:18px; padding-left:5px; color:#0079c2;');
			col.setAttribute('align', 'left');
			col.setAttribute('valign', 'middle');
			col.appendChild(document.createTextNode("Out of Stock")); //stock total
			
			row.appendChild(col);
				   
			tab.appendChild(row);
		}
		
		stockDIV.appendChild(tab);
		document.getElementById('displayDiv').appendChild(stockDIV);

	} 

//*********************** sales DIV ***********************************/
	function salesTabDisplay(checkPage) {
		if (checkPage == "box" || checkPage == "page") {
			//set current tab color with hover
			document.getElementById('salesCurrent').setAttribute('class', 'buttonStyleBlueHover');
		  
			//hides other div, default is showing all div
			if (document.getElementById("infoDivPrice")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivPrice"));
				document.getElementById('priceCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivStock")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivStock"));
				document.getElementById('stockCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivSales")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivSales"));
			}
			if (document.getElementById("infoDivAdmin")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivAdmin"));
				document.getElementById('adminTab').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivGraph")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivGraph"));
				document.getElementById('graphCurrent').setAttribute('class', 'buttonStyleBlue');
			}
		}
		//start sales div    
		
		var salesDIV = document.createElement('div');    
		salesDIV.setAttribute('id', 'infoDivSales');
		if (checkPage == "box") //set for individual tab inside pop-up box
		{
			salesDIV.setAttribute('style', 'float:left;display:block; height:390px;overflow:auto; width:98%; padding:5px;');       
		}
		else if (checkPage == "page") //set for individual tab inside page/after click direct link
		{
			salesDIV.setAttribute('style', 'float:left;display:block; height:750px;overflow:auto; width:98%; padding:5px;');
		}
		else if (checkPage == 2) // set for pop-up box
		{
		   salesDIV.setAttribute('style', 'float:left;display:block; height:110px;overflow:auto; width:98%; padding:5px;');
		}
		else //set for default
		   salesDIV.setAttribute("style", "padding: 5px; height:500px; overflow:auto; clear:both;");
		
		checkPage == '';  
		var tab = document.createElement('table');
		var row = document.createElement('tr');
		var col = document.createElement('td');
		//  tab.setAttribute("style", "border:1px solid green; border-collapse:collapse");
		tab.setAttribute("class", "tableStyle");
		col.setAttribute('style', 'font-weight:bold; height:25px; padding-left:5px;');
		col.setAttribute('valign', 'middle');
		col.setAttribute('colspan', '4');
		col.appendChild(document.createTextNode("Sales Report"));
		row.appendChild(col);
		tab.appendChild(row);

		row = document.createElement('tr');
		row.setAttribute('style', 'color:#0079c2;font-weight:bold;');
		col = document.createElement('td');
		col.setAttribute("class", "tableStyle");
		col.setAttribute('style', 'font-weight:bold; width:100px; height:18px; padding-left:5px;')
		col.appendChild(document.createTextNode('Date'));
		row.appendChild(col);

		col = document.createElement('td');
		col.setAttribute("class", "tableStyle");
		col.setAttribute('style', 'font-weight:bold; width:130px; height:18px; padding-left:5px;');
		col.appendChild(document.createTextNode('Customer Code'));
		row.appendChild(col);
		tab.appendChild(row);

		col = document.createElement('td');
		col.setAttribute("class", "tableStyle");
		col.setAttribute('align', 'left');
		col.setAttribute('style', 'font-weight:bold; width:100px; height:18px; padding-left:5px;');
		col.appendChild(document.createTextNode('Quantity'));
		row.appendChild(col);
		tab.appendChild(row);

		col = document.createElement('td')
		col.setAttribute("class", "tableStyle"); ;
		col.setAttribute('align', 'left');
		col.setAttribute('style', 'font-weight:bold; width:120px; height:18px; padding-left:5px;');
		col.appendChild(document.createTextNode('Unit Price'));
		row.appendChild(col);
		tab.appendChild(row);

		for (var j = 0; j < salesAr.length; j++) {
			row = document.createElement('tr');
			if (j % 2 == 0) {
				row.setAttribute('style', 'background-color:#dfecfe;');
			}
			else {
				row.setAttribute('style', 'background-color:#FFF;');
			}
			//date
			col = document.createElement('td');
			col.setAttribute("class", "tableStyle");
			col.setAttribute('style', 'height:18px; padding-left:5px;');
			col.setAttribute('valign', 'center');
			col.appendChild(document.createTextNode(salesAr[j][0]));
			row.appendChild(col);
			//customer code
			col = document.createElement('td');
			col.setAttribute("class", "tableStyle");
			col.setAttribute('style', 'height:18px; padding-left:5px;');
			col.setAttribute('valign', 'center');
			var textNode = document.createTextNode(salesAr[j][1]);
			col.appendChild(textNode);
			row.appendChild(col);
			//quantity
			col = document.createElement('td');
			col.setAttribute("class", "tableStyle");
			col.setAttribute('style', 'height:18px; padding-left:5px;');
			col.setAttribute('valign', 'center');
			col.setAttribute('align', 'left');
			col.appendChild(document.createTextNode(salesAr[j][3]));
			row.appendChild(col);
			//price
			col = document.createElement('td');
			col.setAttribute("class", "tableStyle");
			col.setAttribute('style', 'height:18px; padding-left:5px;');
			col.setAttribute('valign', 'center');
			col.setAttribute('align', 'left');
			col.appendChild(document.createTextNode(salesAr[j][5] + salesAr[j][4]));
			row.appendChild(col);
			row.setAttribute('title', salesAr[j][2]);
			tab.appendChild(row);
		}
		salesDIV.appendChild(tab);
		document.getElementById('displayDiv').appendChild(salesDIV);
	} 
/*********************** Admin DIV ***********************************/
	function adminTabDisplay(checkPage) {
		if (checkPage == "box" || checkPage == "page") {
			//set current tab color with hover
			document.getElementById('adminTab').setAttribute('class', 'buttonStyleBlueHover');
		   
			//hides other div, default is showing all div
			if (document.getElementById("infoDivPrice")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivPrice"));
				document.getElementById('priceCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivStock")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivStock"));
				document.getElementById('stockCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivSales")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivSales"));
				document.getElementById('salesCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivAdmin")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivAdmin"));
			}

			if (document.getElementById("infoDivGraph")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivGraph"));
				document.getElementById('graphCurrent').setAttribute('class', 'buttonStyleBlue');
			}
		} 
		//start admin div
		var adminDIV = document.createElement('div');    
		adminDIV.setAttribute('id', 'infoDivAdmin');
		if (checkPage == "box")    //set for individual tab inside pop-up box
		{
			adminDIV.setAttribute('style', 'float:left;display:block;height:390px;overflow:auto;width:98%; padding:5px;');
		}
		else if (checkPage == "page") //set for individual tab inside page/after click direct link		
		{
			adminDIV.setAttribute('style', 'float:left;display:block;height:750px;overflow:auto;width:98%; padding:5px;');
		}
		else { //set for default
			adminDIV.setAttribute('style', 'padding:5px; clear:both;');
		}
		checkPage == '';       
		var tab = document.createElement('table');
		var row = document.createElement('tr');
		var col = document.createElement('td');
		tab.setAttribute("class", "tableStyle");
		col.setAttribute('style', 'font-weight:bold; height:25px;padding:5px;');
		col.setAttribute('valign', 'center');
		col.appendChild(document.createTextNode("Admin"));
		row.appendChild(col);
		tab.appendChild(row);

		row = document.createElement('tr');
		col = document.createElement('td');
		var tryFrame = document.createElement('iframe');
		tryFrame.setAttribute('style', 'border:none; font-color:#0064b5;');
		tryFrame.setAttribute('src', './adminTab.aspx?productId=' + itemC);
		col.appendChild(tryFrame);
		row.appendChild(col);
		tab.appendChild(row);

		adminDIV.appendChild(tab);
		document.getElementById('displayDiv').appendChild(adminDIV);

	}
/*********************** Graph DIV ***********************************/
	function graphTabDisplay(checkPage, graphData) {
		if (checkPage == "box" || checkPage == "page") {
			//set current tab color with hover
			document.getElementById('graphCurrent').setAttribute('class', 'buttonStyleBlueHover');               
			//hides other div, default is showing all div
			if (document.getElementById("infoDivPrice")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivPrice"));
				document.getElementById('priceCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivStock")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivStock"));
				document.getElementById('stockCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivSales")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivSales"));
				document.getElementById('salesCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivAdmin")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivAdmin"));
				document.getElementById('adminTab').setAttribute('class', 'buttonStyleBlue');
			}

			if (document.getElementById("infoDivGraph")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivGraph"));
			}
		}
		//start graph div
		var graphDiv = document.createElement('div');
		graphDiv.setAttribute('id', 'infoDivGraph');
		graphDiv.setAttribute('style','padding:50px;');
	  //  graphDiv.setAttribute("class", "tableStyle");
		if (checkPage == "box") //set for individual tab inside pop-up box
		{
			graphDiv.setAttribute('style', 'float:left;display:block;height:390px; width:98%; padding:5px;');        
		}
		else if (checkPage == "page") //set for individual tab inside page/after click direct link		
		{
			graphDiv.setAttribute('style', 'float:left;display:block;height:530px;overflow:auto; width:98%; padding:5px;');
		}
		else { //set for default
			graphDiv.setAttribute('style', 'padding:5px; clear:both;padding:5px;');
		}
		checkPage == '';   
		var tab = document.createElement('table');
		var row = document.createElement('tr');
		var col = document.createElement('td');
		
		col.setAttribute('style', 'font-weight:bold; height:25px;padding:5px;');
		col.setAttribute('valign', 'center');
		col.appendChild(document.createTextNode("Graph"));
		row.appendChild(col);
		tab.appendChild(row);
		graphDiv.appendChild(tab);

		//draw price graph within div    
				var canv = document.createElement('canvas');
				canv.setAttribute('id', 'cvs');
				canv.setAttribute('width', '450px');
				canv.setAttribute('height', '170px');

				var div = document.createElement('div');
				div.setAttribute('style', 'float:left; position: relative;');
				div.appendChild(canv);
				graphDiv.appendChild(div);

				document.getElementById('displayDiv').appendChild(graphDiv);

				var Obj1 = JSON.parse(graphData);
				price = new RGraph.Line('cvs', Obj1.avgPriceSGD);
				price.Set('chart.hmargin', 25);
				//myGraph.Set('chart.filled', true);
				price.Set('chart.tickmarks', 'endcircle');
				price.Set('chart.tooltips', Obj1.avgPriceSGD);
				price.Set('chart.labels', Obj1.week);
				price.Set('chart.labels.above', 'Graph');
				//price.Set('chart.title', 'Part Number: '+Obj1.partNo);
				price.Set('chart.title.color', 'blue');
				price.Set('chart.ylabels.inside', true);
				price.Set('chart.title.yaxis', 'Price');
				price.Set('chart.ymin', parseInt(Obj1.ymin));
				//price.Set('chart.ymax', parseInt(Obj1.ymax));			
				price.Set('chart.title.xaxis', 'Week No.');
				price.Draw();

				//draw quantity graph
				var canv2 = document.createElement('canvas');
				canv2.setAttribute('id', 'cvs2');
				canv2.setAttribute('width', '450px');
				canv2.setAttribute('height', '170px');

				var div2 = document.createElement('div');
				div2.setAttribute('style', 'float:left; position: relative; padding:5px;');
				div2.appendChild(canv2);
				graphDiv.appendChild(div2);

				document.getElementById('displayDiv').appendChild(graphDiv);

				quantity = new RGraph.Line('cvs2', Obj1.QtySold);
				quantity.Set('chart.hmargin', 25);
				quantity.Set('chart.tickmarks', 'endcircle');
				quantity.Set('chart.tooltips', Obj1.QtySold);
				quantity.Set('chart.labels', Obj1.week);
				quantity.Set('chart.labels.above', 'Graph');
				quantity.Set('chart.ylabels.inside', true);
				quantity.Set('chart.title.yaxis', 'Quantity');
				//quantity.Set('chart.ymin', Obj1.ymin);
				//quantity.Set('chart.ymax', Obj1.ymax);	
				quantity.Set('chart.title.xaxis', 'Week No.');
				quantity.Set('chart.colors', ['rgb(0,153,0)']);
				quantity.Set('chart.gutter', 25);
				quantity.Draw();
		return false;
	}
//---------------------------------------------------------------------------------------------------       
/*********************** Price DIV ***********************************/
	function priceTabDisplay(checkPage) {
		if (checkPage == "box" || checkPage == "page") {
			//set current tab color with hover
			document.getElementById('priceCurrent').setAttribute('class', 'buttonStyleBlueHover');            
			
			//hides other div, default is showing all div
			if (document.getElementById("infoDivPrice")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivPrice"));
			}
			if (document.getElementById("infoDivStock")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivStock"));
				document.getElementById('stockCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivSales")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivSales"));
				document.getElementById('salesCurrent').setAttribute('class', 'buttonStyleBlue');
			}
			if (document.getElementById("infoDivAdmin")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivAdmin"));
				document.getElementById('adminTab').setAttribute('class', 'buttonStyleBlue');
			}

			if (document.getElementById("infoDivGraph")) {
				document.getElementById("displayDiv").removeChild(document.getElementById("infoDivGraph"));
				document.getElementById('graphCurrent').setAttribute('class', 'buttonStyleBlue');
			}
		}
		//start price div
		var priceDIV = document.createElement('div');
		priceDIV.setAttribute('id', 'infoDivPrice');
		if (checkPage == "box") //set for individual tab inside pop-up box
		{
			priceDIV.setAttribute('style', 'float:left;display:block; height:390px;overflow:auto; width:98%; padding:5px;');
		}
		else if (checkPage == "page") //set for individual tab inside page/after click direct link
		{
			priceDIV.setAttribute('style', 'float:left;display:block; height:750px;overflow:auto; width:98%; padding:5px;');
		}
		else { //set for default
			priceDIV.setAttribute('style', 'clear:both;padding:5px; clear:both;');
		}
		checkPage == '';
		var tab = document.createElement('table');
		tab.setAttribute("class", "tableStyle");	
		if (priceAr.length > 0) {
		//single page			
			if(priceAr.length == 1)
			{
				var row = document.createElement('tr');
				var col = document.createElement('td');
				col.setAttribute('style', 'font-weight:bold; height:25px; padding-left:5px;');
				col.setAttribute('valign', 'middle');
				col.appendChild(document.createTextNode("Price Info: "));
				row.appendChild(col);
				var col = document.createElement('td');
				col.setAttribute('style', 'font-weight:bold; width:150px; height:18px; padding-left:5px; color:#0079c2;');
				col.setAttribute('align', 'left');
				col.setAttribute('valign', 'middle');
				col.appendChild(document.createTextNode(priceAr[0][2] + " " + priceAr[0][1])); //price       
				row.appendChild(col);
				tab.appendChild(row);
			}
			else {
				var row = document.createElement('tr');
				var col = document.createElement('td');
				tab.setAttribute("class", "tableStyle");
				col.setAttribute('style', 'font-weight:bold; height:25px; padding-left:5px;');
				col.setAttribute('colspan', '2');
				col.setAttribute('valign', 'middle');
				col.appendChild(document.createTextNode("Price Report"));
				row.appendChild(col);
				tab.appendChild(row);

				row = document.createElement('tr');
				row.setAttribute('style', 'color:#0079c2;font-weight:bold;');
				col = document.createElement('td');
				col.setAttribute("class", "tableStyle");
				col.setAttribute('style', 'font-weight:bold; width:150px; height:18px; padding-left:5px;');
				col.appendChild(document.createTextNode('Customer Group'));
				row.appendChild(col);

				col = document.createElement('td');
				col.setAttribute("class", "tableStyle");
				col.setAttribute('style', 'font-weight:bold; width:150px; height:18px; padding-left:5px;');
				col.setAttribute('align', 'left');
				col.appendChild(document.createTextNode('Price ' + priceAr[0][2]));
				row.appendChild(col);
				tab.appendChild(row);

				for (var j = 0; j < priceAr.length; j++) {
					row = document.createElement('tr');
					if (j % 2 == 0) {
						row.setAttribute('style', 'background-color:#dfecfe;');
					}
					else {
						row.setAttribute('style', 'background-color:#FFF;');
					}
					//customer group
					col = document.createElement('td');
					col.setAttribute("class", "tableStyle");
					col.setAttribute('style', 'height:18px; padding-left:5px;');
					col.setAttribute('valign', 'center');
					col.appendChild(document.createTextNode(priceAr[j][0]));
					row.appendChild(col);
					//price
					col = document.createElement('td');
					col.setAttribute("class", "tableStyle");
					col.setAttribute('style', 'height:18px; padding-left:5px;');
					col.setAttribute('valign', 'center');
					col.appendChild(document.createTextNode(priceAr[j][1]));
					row.appendChild(col);
					tab.appendChild(row);
				}
			}
		}
		priceDIV.appendChild(tab);
		document.getElementById('displayDiv').appendChild(priceDIV);
	}
//---------------------------------------------------------------------------------------------------
	function changeImage(div, image) {
		document.getElementById(div).style.backgroundImage = image;
	}
//--------------------------Once click direct link (single product per page)--------------------------------------------------------
	function getProdDetailXML(DocXML)
	{
	
		if(DocXML.documentElement.childNodes[0].tagName == "errorList")
		{
		//	alert("This product doesn't exit");
		}
		
		var tempName;
		//pdtDetailsObj variable is declared as global
		pdtDetailsObj = new pdtDetails();
		
		//itemCode
		if (DocXML.getElementsByTagName("itemCode")[0].childNodes[0]) 
		{
			pdtDetailsObj.itemC = URLDecode(DocXML.getElementsByTagName("itemCode")[0].childNodes[0].nodeValue);        
		} 
		
		//item name
		if (DocXML.getElementsByTagName("itemName")[0].childNodes[0] == null) 
		{
			tempName = "";
		}
		else 
		{
			tempName = URLDecode(DocXML.getElementsByTagName("itemName")[0].childNodes[0].nodeValue);
		}
		//warranty
		if (DocXML.getElementsByTagName("warranty")[0].childNodes[0] == null) 
		{
			pdtDetailsObj.warranty = 0; //if there is no decription, use as "item name", item name is SAP
		}
		else 
		{
			pdtDetailsObj.warranty = DocXML.getElementsByTagName("warranty")[0].childNodes[0].nodeValue;
		}			
		//product description
		if (DocXML.getElementsByTagName("prodDesc")[0].childNodes[0] == null) 
		{
			pdtDetailsObj.prodDesc = tempName; //if there is no decription, use as "item name", item name is SAP
		}
		else 
		{
			pdtDetailsObj.prodDesc = URLDecode(DocXML.getElementsByTagName("prodDesc")[0].childNodes[0].nodeValue);
		}	
		
		//product information
		if (DocXML.getElementsByTagName("prodInfo")[0].childNodes[0] == null) 
		{
			pdtDetailsObj.prodInfo = tempName; //if there is no information, use as "item name", item name is SAP
		}
		else 
		{
			pdtDetailsObj.prodInfo = URLDecode(DocXML.getElementsByTagName("prodInfo")[0].childNodes[0].nodeValue);
		}
		
		//if pdt from econ, take brandName from econ. otw itmsGrpNam from SAP    
		if (DocXML.getElementsByTagName("brandName")[0].childNodes[0] == null) 
		{
			//get itmsGrpNam from Sap
			pdtDetailsObj.itmsGrpN = URLDecode(DocXML.getElementsByTagName("itmsGrpNam")[0].childNodes[0].nodeValue);
			pdtDetailsObj.itmsGrpN = pdtDetailsObj.itmsGrpN.toUpperCase();
		}
		else 
		{
			pdtDetailsObj.itmsGrpN = URLDecode(DocXML.getElementsByTagName("brandName")[0].childNodes[0].nodeValue);
			pdtDetailsObj.itmsGrpN = pdtDetailsObj.itmsGrpN.toUpperCase();
		}   

		//manufacture id
		if (DocXML.getElementsByTagName("mfgId").length > 0) {		
			if (DocXML.getElementsByTagName("mfgId")[0].childNodes[0] == null) 
			{
				pdtDetailsObj.mfgId = "Same as PN";
			}
			else
			{
				pdtDetailsObj.mfgId = URLDecode(DocXML.getElementsByTagName("mfgId")[0].childNodes[0].nodeValue);
			}
		}
		//manufacture url
		if (DocXML.getElementsByTagName("ManufURL")[0].childNodes[0] == null) 
		{
			pdtDetailsObj.ManufURL = "-";
		}
		else 
		{
			pdtDetailsObj.ManufURL = URLDecode(DocXML.getElementsByTagName("ManufURL")[0].childNodes[0].nodeValue);		
		}		
		//logo2
		if (DocXML.getElementsByTagName("brandLogo")[0].childNodes[0] == null) 
		{
			pdtDetailsObj.brandLogo = "/images/logo.jpg";
		}
		else {
			pdtDetailsObj.brandLogo = URLDecode(DocXML.getElementsByTagName("brandLogo")[0].childNodes[0].nodeValue);
		}									
		
		//image or brand logo
		if (DocXML.getElementsByTagName("brandLogo")[0].childNodes[0] == null) 
		{
			pdtDetailsObj.brandLogo = "/images/logo.jpg";
		}
		else {
			pdtDetailsObj.brandLogo = URLDecode(DocXML.getElementsByTagName("brandLogo")[0].childNodes[0].nodeValue);
		}				

		// ************** image array object *************						
		//imgDetailObj variable is declared as global
		var tempImgId = 0;
		imgDetailObj = new Array();		
		var imgLength = DocXML.getElementsByTagName("imagesInfo")[0].childNodes.length;						
		tempImgId = DocXML.getElementsByTagName("imagesInfo")[0].getAttribute("defaultId");
		
		if (imgLength > 0)
		{
			for (var counter=0; counter < imgLength; counter++)
			{
				imgDetailObj[counter] = new imageInfo();
				imgDetailObj[counter].imgId = DocXML.getElementsByTagName("imagesInfo")[0].childNodes[counter].childNodes[0].childNodes[0].nodeValue;
				imgDetailObj[counter].imgPath = DocXML.getElementsByTagName("imagesInfo")[0].childNodes[counter].childNodes[1].childNodes[0].nodeValue;
				imgDetailObj[counter].imgWth = DocXML.getElementsByTagName("imagesInfo")[0].childNodes[counter].childNodes[2].childNodes[0].nodeValue;
				imgDetailObj[counter].imgHgt = DocXML.getElementsByTagName("imagesInfo")[0].childNodes[counter].childNodes[3].childNodes[0].nodeValue;
				//define default image id for all images
				if (tempImgId == imgDetailObj[counter].imgId)
				{
					imgDetailObj[counter].defaultImgId = tempImgId;
				}
				else
				{
					imgDetailObj[counter].defaultImgId = 0;
				}
			}
		}
		// ----------------- getting info for displaying tab ---------------------		
		//get the Admin tab and price history tab for checking whether price tab display or not
		//other price, sales , stock not need to check. All these three is checking by their array length		
		//price history - "graph tab"		
		if (DocXML.getElementsByTagName("priceHistory").length > 0) 
		{		
			if(DocXML.getElementsByTagName("priceHistory")[0].childNodes[0].childNodes[0].nodeValue > 0) //result tag is greater than 0 
			{			
				pdtDetailsObj.pHistory = DocXML.getElementsByTagName("priceHistory")[0].getElementsByTagName("graph")[0].childNodes[0].nodeValue;
			}
			else
			{
				pdtDetailsObj.pHistory = "null";
			}
		}		
		//get the admin info and to check whether "admin tab" display or not
		if (DocXML.getElementsByTagName("adminTab").length > 0)
		{
			if (DocXML.getElementsByTagName("adminTab")[0].childNodes[0] == null) 
			{
				pdtDetailsObj.adminTab = "";
			}
			else 
			{
				pdtDetailsObj.adminTab = DocXML.getElementsByTagName("adminTab")[0].childNodes[0].nodeValue;
			}
		}
	}
//----------------------------------------------------------------------------------------------------------
//this function is worked for both pop-up box and single product per page
//it is only display
	function displayProdDetail(pageName)
	{	
		proDetailDIV = document.createElement('div');
		proDetailDIV.setAttribute('id', 'displayDetail');

		HeaderDIV = document.createElement('div');
		HeaderDIV.setAttribute('id', 'detailHeaderDIV');
		HeaderDIV.setAttribute('style', 'padding-left:5px;');
		//if it is called by box then reduce the font size
		if(pageName == "box")
		{
			HeaderDIV.setAttribute('style', 'font-size:11px;');
		}
		tab = document.createElement('table');
		row = document.createElement('tr');
		col = document.createElement('td');
		col.setAttribute('style', 'padding:5px; width:120px;');

		col.appendChild(document.createTextNode('Part Number:'));
		row.appendChild(col);

		col = document.createElement('td');
		col.setAttribute('style', 'padding:5px; font-weight:bold; width:290px;');
		col.appendChild(document.createTextNode(pdtDetailsObj.itemC));
		row.appendChild(col);

		/* Image Large Size */
		//rowspan=4 for part number, name, manuf Url, Manuf website, info, description. if there any row added, change rowspan 
		col = document.createElement('td');
		col.setAttribute('rowspan', '7');
		col.setAttribute('align', 'center');
		col.setAttribute('style', 'width:200px; padding:5px;');
		
		//brand or company logo
		//display brand logo for every products	var span = document.createElement('span');
		var blDiv =  document.createElement("div");
		blDiv.setAttribute('style', 'padding:5px');
			var spanBLogo = document.createElement("span");			
			var img = document.createElement('img');
			img.style.width = "100px";
			
			// *** default is brand logo for both "box" and "page" cases
			img.setAttribute('src', pdtDetailsObj.brandLogo);
			
			//*** only for "box" case and there is default image, show the product image
			if(pageName == "box" && imgDetailObj.length > 0) 
			{ 
				for (var counter =0; counter < imgDetailObj.length; counter++)
				{
					if(imgDetailObj[counter].defaultImgId > 0)
					{
						var definedW = 100;
						var definedH = 130;		
						//resize the image with defined width and height, and assign to global varriable
						resizeImg(imgDetailObj[counter].imgWth, imgDetailObj[counter].imgHgt, definedW, definedH);						
						img.style.width = tempW + "px";
						img.style.height = tempH + "px";
						img.setAttribute('src', imgDetailObj[counter].imgPath);
					}
				}
			}	
			spanBLogo.appendChild(img);			
		blDiv.appendChild(spanBLogo);
		col.appendChild(blDiv);
			
		//if there is no product images, hide it
		//if any image frame is moving, check this
		// **** only for "page" case
		if (imgDetailObj.length > 0 && pageName != "box")
		{
			var fixedDiv = document.createElement("div");
			fixedDiv.setAttribute("style", "min-height:200px; min-width:210px; max-width:210px;");
				var borderDiv = document.createElement("div");
				borderDiv.setAttribute('style', 'border:1px solid #74653c');				
					p = document.createElement("p");
					p.setAttribute('align', 'left');
					p.setAttribute("id", "smallImg");	
					p.setAttribute("style", "padding:5px");
					borderDiv.appendChild(p);				
					var p = document.createElement("p");				
					p.setAttribute('id', 'largeImg');
					borderDiv.appendChild(p);				
			fixedDiv.appendChild(borderDiv);
			col.appendChild(fixedDiv);		
		}
		row.appendChild(col);
		tab.appendChild(row);
		
		/* Name */
		row = document.createElement('tr');
		col = document.createElement('td');
		col.setAttribute('style', 'padding:5px;');
		col.appendChild(document.createTextNode('Brand:'));
		row.appendChild(col);
		col = document.createElement('td');
		col.setAttribute('style', 'width:250px; padding:5px;');
		col.appendChild(document.createTextNode(pdtDetailsObj.itmsGrpN));
		row.appendChild(col);
		tab.appendChild(row);

		/*Manuf PN */
		row = document.createElement('tr');
		col = document.createElement('td');
		col.setAttribute('style', 'padding:5px;');
		col.appendChild(document.createTextNode('Manuf PN:'));
		row.appendChild(col);
		col = document.createElement('td');
		col.setAttribute('style', 'width:250px; padding:5px;');		
		col.appendChild(document.createTextNode(pdtDetailsObj.mfgId));		
		row.appendChild(col);
		tab.appendChild(row);

		/* Manuf website */
		var checkHttp = pdtDetailsObj.ManufURL;
		row = document.createElement('tr');
		col = document.createElement('td');
		col.setAttribute('style', 'padding:5px;');
		col.appendChild(document.createTextNode('Manuf. website:'));
		row.appendChild(col);
		col = document.createElement('td');
		col.setAttribute('style', 'padding:5px;');
		var a = document.createElement('a');
		a.setAttribute('href', "http://" + pdtDetailsObj.ManufURL);	
		
		if(checkHttp.indexOf('h', 0) != -1 && checkHttp.indexOf('t', 1) != -1 && checkHttp.indexOf('t', 2) != -1 && checkHttp.indexOf('t', 3) != -1)
		{ //if the link with http, not need to insert
			a.setAttribute('href', pdtDetailsObj.ManufURL);
		}
		else
		{	//must put http:// to go through website link 
			a.setAttribute('href', "http://" + pdtDetailsObj.ManufURL);
		}
		a.setAttribute('target', '_blank');
		a.appendChild(document.createTextNode(pdtDetailsObj.ManufURL));
		col.appendChild(a);
		row.appendChild(col);
		tab.appendChild(row);
		
		//warranty
		//-2 for db null case
		//0 for No Warranty, if there is no warranty, it won't display		
		if (pdtDetailsObj.warranty != -2 && pdtDetailsObj.warranty != 0)
		{
			row = document.createElement('tr');
			col = document.createElement('td');
			col.setAttribute('style', 'padding:5px;');
			col.appendChild(document.createTextNode('Warranty:'));
			row.appendChild(col);
			col = document.createElement('td');
			col.setAttribute('style', 'padding:5px;');	
			if(pdtDetailsObj.warranty == -1)
			{
				col.appendChild(document.createTextNode("Lifetime"));
			}			
			if(pdtDetailsObj.warranty > 0)
			{	
				if (pdtDetailsObj.warranty >= 12)
				{
					//db saved as months, so convert to year			
					col.appendChild(document.createTextNode((pdtDetailsObj.warranty/12) + " year(s)"));
				}
				else
				{
					col.appendChild(document.createTextNode(pdtDetailsObj.warranty + " month(s)"));
				}
			}
			row.appendChild(col);
			tab.appendChild(row);
		}
		
		//prodInfo
		if (pdtDetailsObj.prodInfo != "")
		{
			row = document.createElement('tr');
			col = document.createElement('td');
			col.setAttribute('style', 'padding:5px;');
			col.appendChild(document.createTextNode('Info:'));
			row.appendChild(col);
			col = document.createElement('td');
			col.setAttribute('style', 'padding:5px;');
			if(pageName == "box")
			{
				col.setAttribute('colspan', '2');
			}
			col.appendChild(document.createTextNode(pdtDetailsObj.prodInfo));
			row.appendChild(col);
			tab.appendChild(row);
		}
		row = document.createElement('tr');
		col = document.createElement('td');
		col.setAttribute('style', 'padding:5px;');
		
		//product Description
		col.appendChild(document.createTextNode('Description:'));
		row.appendChild(col);
		col = document.createElement('td');
		col.setAttribute('style', 'padding:5px;');
		if(pageName == "box")
		{
			col.setAttribute('colspan', '2');
		}
		col.appendChild(document.createTextNode(pdtDetailsObj.prodDesc.replace(/(\n)/g, "<br />")));
		row.appendChild(col);
		tab.appendChild(row);
		
		//spacing
		row = document.createElement("tr");
		col = document.createElement('td');
		col.setAttribute('style', 'height:1px;');
		col.setAttribute('colspan', '2');
		col.appendChild(document.createTextNode(""));
		row.appendChild(col);
		tab.appendChild(row);

		tabB = document.createElement('table');
		row = document.createElement('tr');
		col = document.createElement('td');
		col.appendChild(tab);
		col.setAttribute('style', 'float:left');
		row.appendChild(col);
		col = document.createElement('td');
		row.appendChild(col);
		tabB.appendChild(row);
		HeaderDIV.setAttribute('align', 'left');
		HeaderDIV.appendChild(tabB);
		HeaderDIV.appendChild(document.createElement('br'));
		
		proDetailDIV.appendChild(HeaderDIV);
		document.getElementById('masterDiv').appendChild(proDetailDIV);
		
		//display tab
		//create table tab for stockDIV & salesDIV & priceDIV
		tabDIV = document.createElement('div');
		tabDIV.setAttribute('id', 'tabDIV');
		tabDIV.setAttribute('style', 'float:left;padding-left:5px;padding-bottom:5px;');
		tabDIV.setAttribute('align', 'left');
		tab = document.createElement('table');
		row = document.createElement('tr');
		col = document.createElement('td');
		//it there only one end user price will be saved int priceAr. so we cannot check by ' >0 ' ***
		//because this tab will display over one price.
		if(priceAr.length > 1)
		{  		
			//col.setAttribute('onclick', 'priceTabDisplay(' + 5 + ')');
			col.setAttribute('onclick', 'priceTabDisplay("' + pageName + '")');
			col.setAttribute('class', 'buttonStyleBlue');
			col.setAttribute('id', 'priceCurrent');
			col.setAttribute('style', 'cursor:pointer;font-family:Arial;font-size:14px;font-weight:bold;padding:5px;');
			col.appendChild(document.createTextNode('Price'));     
		}  
		row.appendChild(col);
		tab.appendChild(row);     
		  
		col = document.createElement('td');
		if(stockAr.length > 0)
		{		   
				col.setAttribute('class', 'buttonStyleBlue');
				col.setAttribute('id', 'stockCurrent');
				col.appendChild(document.createTextNode('Stock'));
				col.setAttribute('style', 'cursor:pointer;font-family:Arial; font-size:14px;font-weight:bold;padding:5px;');
				//col.setAttribute('onclick', 'stockTabDisplay(' + 5 + ')');
				col.setAttribute('onclick', 'stockTabDisplay("' + pageName + '")');
		}
		row.appendChild(col);
		
		col = document.createElement('td');		
		if(salesAr.length > 0)
		{
			col.setAttribute('class', 'buttonStyleBlue');
			col.setAttribute('id', 'salesCurrent');
			//col.setAttribute('onclick', 'salesTabDisplay(' + 5 + ')');			
			col.setAttribute('onclick', 'salesTabDisplay("' + pageName + '")');
			col.setAttribute('style', 'cursor:pointer;font-family:Arial;font-size:14px;font-weight:bold;padding:5px;');
			col.appendChild(document.createTextNode('Sales'));
		}
		row.appendChild(col);
		tab.appendChild(row);		
		col = document.createElement('td');	
		//only Admin can see
		if (pdtDetailsObj.adminTab == "Yes" && pdtDetailsObj.pHistory != "null")
		{	
			col.setAttribute('class', 'buttonStyleBlue');
			col.setAttribute('id', 'graphCurrent');
			//col.setAttribute('onclick', 'graphTabDisplay(' + 5 + ',pdtDetailsObj.pHistory)');
			col.setAttribute('onclick', 'graphTabDisplay("' + pageName + '",pdtDetailsObj.pHistory)');
			col.setAttribute('style', 'cursor:pointer;font-family:Arial;font-size:14px;font-weight:bold;padding:5px;');
			col.appendChild(document.createTextNode('Graph'));			
		}
		row.appendChild(col);
		tab.appendChild(row);
		col = document.createElement('td');		
		if (pdtDetailsObj.adminTab == "Yes") 
		{
			col.setAttribute('class', 'buttonStyleBlue');
			//col.setAttribute('onclick', 'adminTabDisplay(' + 5 + ')');
			col.setAttribute('onclick', 'adminTabDisplay("' + pageName + '")');
			col.setAttribute('id', 'adminTab');
			col.setAttribute('style', 'cursor:pointer;font-family:Arial;font-size:14px;font-weight:bold;padding:5px;');
			col.appendChild(document.createTextNode('Admin'));
		}
		row.appendChild(col);       
		tab.appendChild(row);
		tabDIV.appendChild(tab);
		proDetailDIV.appendChild(tabDIV);

		//create static div for below tab name
		var displayDiv = document.createElement('div');
		displayDiv.setAttribute('id', 'displayDiv');
		proDetailDIV.appendChild(displayDiv);

		proDetailDIV.appendChild(document.createElement("br"));
		proDetailDIV.appendChild(document.createElement("br"));	
	}
	function displayDefaultTabs(pageName)
	{
		//display all DIVs as default
		if(priceAr.length > 0)
		{
			priceTabDisplay("dftDisplay");
		}
		if (stockAr.length > 0)
		{
		  //  if (DocXML.getElementsByTagName("stocksData")[0].getAttribute("total") > 0)
			stockTabDisplay("dftDisplay");
		}		
		if (salesAr.length > 0)
		{
			salesTabDisplay("dftDisplay");
		}
		//pop up box div, will not display
		if (imgDetailObj.length > 0 && pageName != "box")
		{
			displayImages();
		}
	}
//----------------------------------------------------------------------------------------------------------
	function displayImages()
	{			
		if (document.getElementById('spanLarge'))
            document.getElementById('largeImg').removeChild(document.getElementById('spanLarge'));
		//if (document.getElementById('spanSmall'))
            //document.getElementById('smallImg').removeChild(document.getElementById('spanSmall'));		
	
			for(var counter = 0; counter < imgDetailObj.length ; counter++)
			{
				if(imgDetailObj[counter].defaultImgId > 0)
				{
					var spanLarge = document.createElement("span");
					spanLarge.setAttribute("id", "spanLarge");		
					
					var img = document.createElement('img');
					var definedW = 200;
					var definedH = 230;		
					//resize the image with defined width and height, and assign to global varriable
					resizeImg(imgDetailObj[counter].imgWth, imgDetailObj[counter].imgHgt, definedW, definedH);						
					img.style.width = tempW + "px";
					img.style.height = tempH + "px";
					img.style.border = "1px solid #74653d";
					img.setAttribute('src', imgDetailObj[counter].imgPath);
					tempId = counter;		
				}
			}
			spanLarge.appendChild(img);
			document.getElementById("largeImg").appendChild(spanLarge);	
	
		//small images
		//if there is only one product image, hide it
		if (imgDetailObj.length > 1)
		{
		if (document.getElementById('spanSmall'))
            document.getElementById('smallImg').removeChild(document.getElementById('spanSmall'));	
			
			var spanSmall = document.createElement("span");
			spanSmall.setAttribute("id", "spanSmall");		
			
			//below for all images displaying as small
			for(var counter = 0; counter < imgDetailObj.length ; counter++)
			{			
				var span = document.createElement('span');
				span.setAttribute('style', 'padding:2px; cursor:pointer');
				var img = document.createElement('img');
				var definedW = 55;
				var definedH = 60;				
				resizeImg(imgDetailObj[counter].imgWth, imgDetailObj[counter].imgHgt, definedW, definedH);								
				img.style.width = tempW + "px";
				img.style.height = tempH + "px";
				img.style.border = "1px solid #626262";
				img.setAttribute("id", imgDetailObj[counter].imgId);
				img.setAttribute('src', imgDetailObj[counter].imgPath);			
				img.setAttribute("onclick", "imageOnclick("+ counter + "," + imgDetailObj[counter].imgId + "," + tempId +");");
				
				span.appendChild(img);
				spanSmall.appendChild(span);
			}	
			document.getElementById("smallImg").appendChild(spanSmall);
		}		
	}
//--------------------------------------------------------------------------------------------------
	function imageOnclick(counter, setImgId, tempId)
	{		
		//remove original default id as '0'
		imgDetailObj[tempId].defaultImgId = 0;
		//assign with new dfaultImg Id
		imgDetailObj[counter].defaultImgId = setImgId;
		//reload image 
		displayImages();
	}
//--------------------------------------------------------------------------------------------------
	function resizeImg(originalW, originalH, definedW, definedH)
	{
		//if originalW and originalH is less than or equal to definedW and H, not need to go through resize calculation
		tempW = originalW;
		tempH = originalH;
		
		if(originalW > definedW || originalH > definedH)
		{
			if(originalW > originalH)
			{	
				while (originalW > definedW)
				{
				
					tempSize = originalW/definedW;
					originalW = originalW / tempSize;
					originalH = originalH / tempSize;					
				}			
				tempW = originalW;
				tempH = originalH;				
			}
			else
			{			
				while (originalH > definedH)
				{
					tempSize = originalH/definedW;
					originalW = originalW / tempSize;
					originalH = originalH / tempSize;								
				}			
				tempW = originalW;				
				tempH = originalH;
			}		
		}
	}
//--------------------------------------------------------------------------------------------------