var optionTest = true;
var optionText = new Array(3);

/**
* Sole purpose at this time is to test the ability of the user's browser to manipulate options in selects
* This is a more fine-grained test than simply testing for DOM support, which we also do
* Sets the value of the global var 'optionTest' to false if select options can't be deleted
*
* @return void
*/
function popInit()
{
   var populateThis = document.forms['searchForm'].elements['categoryId2'];
   var lgth = populateThis.options.length - 1;

   //try to remove our warning option
   populateThis.options[lgth] = null;

   if (populateThis.options[lgth])
   {
      this.optionTest = false;
   }
}

/**
* populate a select box. Also calls populateOptions
*
* @return void
* @param  object curSelect The current Select box
* @param  string nextSelectId The element ID of the next select box in the chain
*/
function populate(curSelect, nextSelectId)
{
   //browser can't handle setting options
   if (!this.optionTest) return;

   //Get the parentID from the currently selected element
   var parentID = ""
   if (curSelect.options.length != 0)
   {
      parentID = curSelect[curSelect.selectedIndex].value;
   }

   //get the select
   var sel = document.forms['searchForm'].elements[nextSelectId];

   //Null the new option list
   sel.options.length = 0;

   //if the next select is cattype then we have to hide catsubtype
   if (nextSelectId == 'categoryId2')
   {
      var nextSel = document.forms['searchForm'].elements['categoryId3'];
      nextSel.style.display = "none";
   }

   //set the level and first option
   var level = "";
   sel.options.length = 0;
   if (nextSelectId == 'categoryId2')
   {
      addFirstOption(sel,"Search All Subcategories");
      level="0";
   }
   else
   {
      addFirstOption(sel,"Search All SubTypes");
      level="1";
   }

   //no options for the next select?
   var type = typeof this.allOptions[parentID];
   if (!parentID || ('0' == parentID) || (type == 'undefined'))
   {
      //hide the next select box cause it's empty
      sel.style.display = "none";
   }
   else
   {
      //Set the new option list
      for (var I in this.allOptions[parentID])
      {
         var opt = new Option(this.allOptions[parentID][I],I);
         sel.options[sel.options.length] = opt;
      }
      //Make sure the first (default) item is selected
      sel.options[0].selected=true;

      //show the select box
      sel.style.display = "block";
   }

   //get the options
   populateOptions(parentID, level);
}
function populate2(curSelect, nextSelectId)
{
   //browser can't handle setting options
   if (!this.optionTest) return;

   //Get the parentID from the currently selected element
   var parentID = ""
   if (curSelect.options.length != 0)
   {
      parentID = curSelect[curSelect.selectedIndex].value;
   }

   //get the select
   var sel = document.forms['searchForm'].elements[nextSelectId];

   //Null the new option list
   sel.options.length = 0;

   //if the next select is cattype then we have to hide catsubtype
   if (nextSelectId == 'categoryId2')
   {
      var nextSel = document.forms['searchForm'].elements['categoryId3'];
      nextSel.style.display = "none";
   }

   //set the level and first option
   var level = "";
   sel.options.length = 0;
   if (nextSelectId == 'categoryId2')
   {
      addFirstOption(sel,"Search All Subcategories");
      level="0";
   }
   else
   {
      addFirstOption(sel,"Search All SubTypes");
      level="1";
   }

   //no options for the next select?
   var type = typeof this.allOptions[parentID];
   if (!parentID || ('0' == parentID) || (type == 'undefined'))
   {
      //hide the next select box cause it's empty
      sel.style.display = "none";
   }
   else
   {
      //Set the new option list
      for (var I in this.allOptions[parentID])
      {
         var opt = new Option(this.allOptions[parentID][I],I);
         sel.options[sel.options.length] = opt;
      }
      //Make sure the first (default) item is selected
      sel.options[0].selected=true;

      //show the select box
      sel.style.display = "block";
   }
}
/**
* Adds the first option
*
* @return void
* @param  object sel The select box to add the option to
* @param  string optionText The text for the option
*/
function addFirstOption(sel, optionText)
{
   var opt = new Option(optionText,'',true,true);
   sel.options[sel.options.length] = opt;

   //Make sure the first (default) item is selected
   sel.options[0].selected=true;

}


function setStyle(objId, style, value){
   document.getElementById(objId).style[style]= value;
}


/**
* Fetches and adds search options to a preidentifed table cell
*
* @return void
* @param  int categoryId The category with which these options are associated
* @param  int level The category level (0 == Category, 1 == subCategory, 2 == subType)
*/

function populateOptions(categoryId, level) {
   //load the Search options into the approriate level
   this.optionText[level] = setOptionText(categoryId);
   //get the table cell to populate
   var optionCell = document.getElementById("sOptionsData");

   //load up the table cell by concatenating the options from all levels
   var optionText = "";
   for (var count = 0; count <= level; count++){
      if (((typeof this.optionText[count]) != 'undefined')){
         optionText += this.optionText[count];
      }
   }
   //if after all that there's no text
   if (!optionText){
      optionCell.innerHTML = "No Options";	  
	  setStyle('sOptions', 'visibility','hidden');
	  setStyle('sOptions', 'display','none');
   }
   //set the cell text
   else {
      optionCell.innerHTML = optionText;
	  setStyle('sOptions', 'visibility','visible');
	  setStyle('sOptions', 'display','');
   }
}

/**
* Builds the innerHTML from the supplied arrays of options
*
* @return string cellText The innerHTML
* @param  int categoryId The category with which these options are associated
*/

function setOptionText(categoryId) {
   //bail if there are no search options
   var type = typeof this.searchOptions[categoryId];
   if (!categoryId || (type == 'undefined'))
   {
      return
   }

   var cellText = "";
   var name = "";
   var value = "";

   //get the number of option groups at this level
   var levelCount = this.searchOptions[categoryId].length;
   for (var lCount = 0; lCount < levelCount; lCount++){
      //set the label
      cellText += '<fieldset class="oGroupLabel"><legend>' + searchOptions[categoryId][lCount]['label'] + '</legend>';
      //get the number of options
      var optionCount = this.searchOptions[categoryId][lCount].length;
      //populate the text for the innerhtml of the cell
	  if(optionCount >=5)
	   {
			  cellText += '<select name="'+searchOptions[categoryId][lCount][0]['name']+'" MULTIPLE size=5>';
			  cellText += '<option value="" />Any '+searchOptions[categoryId][lCount]['label']+'</option>';
			  for (var oCount = 0; oCount < optionCount; oCount++){
					 value = searchOptions[categoryId][lCount][oCount]['value'];
					 name = searchOptions[categoryId][lCount][oCount]['name'];
					 //this is where you would change the innerHTML.
					 //It's not entirely clear that innerHTML is as universally supported as the DOM
					 //this might need to be replaced with a set of DOM createElements
					 cellText += '<option value="'+value+'" />'+searchOptions[categoryId][lCount][oCount]['label']+'</option>';
			  }
			  cellText += '</select>';
	   }
	   else
	   {
			 for (var oCount = 0; oCount < optionCount; oCount++){
				 value = searchOptions[categoryId][lCount][oCount]['value'];
				 name = searchOptions[categoryId][lCount][oCount]['name'];
				 //this is where you would change the innerHTML.
				 //It's not entirely clear that innerHTML is as universally supported as the DOM
				 //this might need to be replaced with a set of DOM createElements
				 cellText += '<input type="checkbox" class="checkbox" id="'+value+'" name="'+name+'" value="'+value+'" />&nbsp;<label for="'+value+'">'+searchOptions[categoryId][lCount][oCount]['label']+'</label><br />';
			}		 
	   }
	   cellText += '</fieldset>';
   }
   return cellText;
}

window.onload="popInit";