// JavaScript Document
	function showHide(layer) // 1 visible, 0 hidden
{
    var myLayer = document.getElementById(layer).style.display;
	if(myLayer=="none"){
document.getElementById(layer).style.display="block";
	} else if(myLayer=="block"){
document.getElementById(layer).style.display="none";
	}
}

function showLayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
}
}
function hideLayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="block"){
document.getElementById(layer).style.display="none";
}
}


//Planogram cascading dropdown code

// declare a global  XMLHTTP Request object
var XmlHttpObj;

// create an instance of XMLHTTPRequest Object, varies with browser type, try for IE first then Mozilla
function CreateXmlHttpObj()
{
if (window.XMLHttpRequest) {
try {
XmlHttpObj = new XMLHttpRequest();
} catch(e) {
XmlHttpObj = false;
} // branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
try {
XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
XmlHttpObj = false;
}
}
	
	
}

// called from onChange or onClick event of the continent dropdown list
function CatListOnChange(Store) 
{
    var catList = document.getElementById("cat");
    
    // get selected continent from dropdown list
    var selectedCat = catList.options[catList.selectedIndex].value;
    
    // url of page that will send xml data back to client browser
    var requestUrl;
	//path to request url
   	requestUrl = "/planograms/query.php" + "?get=subcat&&cat=" + encodeURIComponent(selectedCat) + "&&store=" + encodeURIComponent(Store);
    
	CreateXmlHttpObj();
	
	// verify XmlHttpObj variable was successfully initialized
	if(XmlHttpObj)
	{
        // assign the StateChangeHandler function ( defined below in this file)
        // to be called when the state of the XmlHttpObj changes
        // receiving data back from the server is one such change
		XmlHttpObj.onreadystatechange = StateChangeHandler;
		
		// define the iteraction with the server -- true for as asynchronous.
		XmlHttpObj.open("GET", requestUrl,  true);
		
		// send request to server, null arg  when using "GET"
		XmlHttpObj.send(null);		
	}
}


// this function called when state of  XmlHttpObj changes
// we're interested in the state that indicates data has been
// received from the server
function StateChangeHandler()
{
	// state ==4 indicates receiving response data from server is completed
	if(XmlHttpObj.readyState == 4)
	{
		// To make sure valid response is received from the server, 200 means response received is OK
		if(XmlHttpObj.status == 200)
		{			
			PopulateSubCatList(XmlHttpObj.responseXML.documentElement);
		}
		else
		{
			alert("problem retrieving data from the server, status code: "  + XmlHttpObj.status);
		}
	}
}

// populate the contents of the country dropdown list
function PopulateSubCatList(subCatNode)
{
    var subCat = document.getElementById("subCat");
	// clear the country list 
	for (var count = subCat.options.length-1; count >-1; count--)
	{
		subCat.options[count] = null;
	}

	var subCatNodes = subCatNode.getElementsByTagName('subcategory');
	var idValue;
	var textValue; 
	var optionItem;
	// populate the dropdown list with data from the xml doc
	for (var count = 0; count < subCatNodes.length; count++)
	{
   		textValue = GetInnerText(subCatNodes[count]);
		idValue = subCatNodes[count].getAttribute("id");
		optionItem = new Option( textValue, idValue,  false, false);
		subCat.options[subCat.length] = optionItem;
	}
}

// returns the node text value 
function GetInnerText (node)
{
	 return (node.textContent || node.innerText || node.text) ;
}