/**
########################################################################
# VISUAL SEARCH SCRIPT FOR ERIC 1.5
# copyright 2006 BMW AG
# @author s.adam
########################################################################
*/
// the search items containing SearchItems with ALL possible SearchOptions
var searchItems = new Object();

/**
 TYPES OF SEARCH ITEMS:
 - large image (Model / Series) = 0
 - color item with overlib div that contains label (colors) = 1
 - text divs (fuel type / gear type) = 2
 - image divs small (mileage / price) = 3
 - image divs de-selectable with overText(options) = 4
 - city div images = 5
 - distance circle image divs = 6
*/
var ITEM_TYPE_LARGE_IMG = 0;
var ITEM_TYPE_LARGE_IMG_NOTEXT = 7;
var ITEM_TYPE_COLOR_ITEM = 1;
var ITEM_TYPE_TEXT_ITEM = 2;
var ITEM_TYPE_SMALL_IMG = 3;
var ITEM_TYPE_CONFIG_ITEM = 4;
var ITEM_TYPE_CITY_ITEM = 5;
var ITEM_TYPE_CIRCLE_ITEM = 6;

var IMG_BASE_PATH = "static/images/";

var DEFAULT_IMAGE_NAME = "/Filter.none.gif";
var DEFAULT_LARGE_IMAGE_NAME = "/Filter.none.jpg";
var DEFAUL_CONFIGURATION_IMAGE_NAME = "/CarFeatureCategory.default.gif";

/**
 * browse one item up or down
 * @param itemKey - the key where the searchItem to be browsed can be found
 * @param isUp - browse up or down?
*/
function doPage(itemKey, isUp, isInitial)
{
  var itemToBrowse = searchItems[itemKey];
  itemToBrowse.scrollPos(isUp);
  itemToBrowse.updateView(isInitial);
}

/**
* Object used when submitting the values
*/
function jSelectedItemsDO(reqParamName, optionValues, formIndex)
{
  this.formIndex = formIndex;
  if(formIndex != null) 
  {
    this.formIndex = formIndex;
  }

  this.reqParamName = reqParamName;
  this.optionValues = optionValues;
}

/**
 * construct the request
 */
function submitTheFormValues(formIndex)
{
  if(formIndex == null) formIndex = 0;
  itemsForSubmit = new Array();
  var itemCount = 0;
  for (var prop in searchItems)
  {
    var tmpOptions = searchItems[prop].searchOptions;
    var tmpValues = new Array();
    for(optCount = 0; optCount < tmpOptions.length; optCount++)
    {
      if(tmpOptions[optCount].isSelected)
      {
        tmpValues.push(tmpOptions[optCount].clickedValue);
      }
    }
    if(tmpValues.length > 0)
    {
      itemsForSubmit[itemCount] = new jSelectedItemsDO(searchItems[prop].formFieldName, tmpValues, searchItems[prop].formIndex);
      itemCount ++;
    }
    
  }
  
  // here we either fill hidden form fields or we build an url to submit
  // every searchItem
  var hiddenContainer = document.getElementById("hiddenContainer");
  for(pcount = 0;pcount < itemsForSubmit.length; pcount ++)
  {
    // every option
    for(valCount = 0; valCount < itemsForSubmit[pcount].optionValues.length; valCount ++)
    {
      createHiddenField(itemsForSubmit[pcount].reqParamName, itemsForSubmit[pcount].optionValues[valCount], itemsForSubmit[pcount].formIndex);
    }

  }
  // show the layer that prevents selecting multiple options / start multiple requests at once
  showLayer("transSearchBlocker");
  document.forms[formIndex].submit();
}
/**
 * creates a hidden field and attachs it to the form on the page
 * 
 */
function createHiddenField(name, value, formIndex)
{
        var hField = document.createElement("input");
        hField.type = 'hidden';
        hField.name = name;
        hField.value = value;
        document.forms[formIndex].appendChild(hField);
}

/**
 * a Search Item for the visual search
 * represents a number of options that can be clicked
 * @param uniqueItemName - unique Identifier
 * @param formFieldName - request param name to be set
 * @param numVisibleItems - amount of items visible at once
 * @param itemType Constant Type of the item 
 * @param idOfParentElement - id of the container that contains this item when rendered
*/
function SearchItem(uniqueItemName, formFieldName, numVisibleItems, itemType, idOfParentElement, formIndex)
{
  // the request param name
  this.formFieldName = formFieldName;
  // the unique item name that identifies the behaviour and look and feel of the element e.g. MODEL
  this.parentId = idOfParentElement;
  this.uniqueItemName = uniqueItemName;
  // The Seatch Options Array
  this.searchOptions = new Array(); 
  this.numVisibleItems = numVisibleItems;
  // the first visible searchOption
  this.currentStartIndex = 0;
  this.currentEndIndex = this.currentStartIndex + this.numVisibleItems;
  
  this.itemType = itemType;
  // the index of the form on the page in case we are submitting multiple forms
  this.formIndex = 0;
  if(formIndex != null)
  {
    this.formIndex = formIndex;
  }
  // add a searchOption
  this.addOption = function(searchOption)
  {
    searchOption.searchItem = this;
    this.searchOptions.push(searchOption);  
  }
  
  this.scrollPos = function(isUp)
  {
    if(isUp && this.currentEndIndex < this.searchOptions.length)
    {
      this.currentStartIndex ++;
      this.currentEndIndex ++;
    }
    if(!isUp && this.currentStartIndex > 0)
    {
      this.currentStartIndex --;
      this.currentEndIndex --;
    }
    this.updateView(false);
  }
  /** 
   * create the current view of the search item
   * 
   */
  this.updateView = function(isInitial)
  {
    var contentDiv = document.getElementById(this.parentId);
    if(contentDiv.hasChildNodes())
    {
      contentDiv.removeChild(contentDiv.childNodes[0]);
    }
    contentDiv.appendChild(createItemCode(this, isInitial)); 
  }
  
  this.optionSelected = function(selectedValue, searchOption)
  {
    // disable other options only, if no multiselection is allowed

    
    
    if(this.itemType != ITEM_TYPE_CONFIG_ITEM) 
    {
      for (i = 0; i< this.searchOptions.length; i++)
      {
        this.searchOptions[i].isSelected = false;
      }
    }
    searchOption.isSelected = !searchOption.isSelected;
    // here we call the form submit
    // therefore we have to scan all options in this searchitem 
    // for being selected and then submit the form with the params
    // alert("I have been selected with the value: " + selectedValue);  
    submitTheFormValues(this.formIndex);
    // we dont need to update since we submit here evtl. ajax is better.... this.updateView(false);
  }
  
  this.isLast = function()
  {
    return this.currentEndIndex >= this.searchOptions.length;
  }
  this.isFirst = function()
  {
    return this.currentStartIndex <= 0;
  }
    
}


function SearchOption(imgSrc, clickedValue, descText, isSelected, color)
{
  // the image source for the thumbnail to be displayed
  this.imgSrc = imgSrc;
  // the value that is submitted on click
  this.clickedValue = clickedValue; 
  // the text that is displayed in case a mouseover is performed
  this.descText = descText;
  // changes the style if the item has been selected (border)
  this.isSelected = isSelected;
  // the parent search item that triggers the functionality
  this.searchItem = null;
  
  this.color = color;
  
  // creates the html code for this element so it can be appended to the page
  this.createHtmlCode = function(searchItem)
  {
    var optionNode = null;
    switch(searchItem.itemType)
    {
      case ITEM_TYPE_LARGE_IMG:
        optionNode = createLargeImgOption(this);
        break;
      case ITEM_TYPE_LARGE_IMG_NOTEXT:
        optionNode = createLargeImgNoTextOption(this);
        break;
      case ITEM_TYPE_COLOR_ITEM:
        optionNode = createColorItemOption(this);
        break;
      case ITEM_TYPE_TEXT_ITEM:
        optionNode = createTextItemOption(this);
        break;
      case ITEM_TYPE_SMALL_IMG:
        optionNode = createSmallImageOption(this);
        break;
      case ITEM_TYPE_CONFIG_ITEM:
        optionNode = createConfigOption(this);
        break;
      case ITEM_TYPE_CITY_ITEM:
        optionNode = createCityOption(this);
        break;
      case ITEM_TYPE_CIRCLE_ITEM:       
        optionNode = createCircleOption(this);
      default:
        // ERROR NO TYPE DEFINED
        break;
    }

    return optionNode;
  }
  this.select = function(selectedValue)
  {
    this.searchItem.optionSelected(selectedValue, this);
  }
}


// ###########################################################################################################
/*
ITEM AND OPTIONS FOR 
var ITEM_TYPE_LARGE_IMG
var ITEM_TYPE_LARGE_IMG_NOTEXT
var ITEM_TYPE_COLOR_ITEM 
var ITEM_TYPE_TEXT_ITEM
var ITEM_TYPE_SMALL_IMG
var ITEM_TYPE_CIRCLE_ITEM
*/
// ###########################################################################################################
/**
 * Creates the complete HTML Code for a search item passed as a param
 *
 * @return the Node for the Search Item 
*/
function createItemCode(searchItem, isInitial)
{

    if(searchItem.itemType == ITEM_TYPE_CONFIG_ITEM)
    {
      return createConfigItem(searchItem);
    }
    if(searchItem.itemType == ITEM_TYPE_CITY_ITEM)
    {
      return createCityItem(searchItem);
    }
    // we have to scan on initial if an item has been sleected before, this item must be visible !!!
    // this does not work on multiselection -- meaning item config type
    var endIndex = 0;
    if(searchItem.searchOptions.length < searchItem.currentEndIndex)
    {
      endIndex = searchItem.searchOptions.length;
    }
    else
    {
      endIndex = searchItem.currentEndIndex;
    }
    
    if(isInitial && searchItem.itemType != ITEM_TYPE_CONFIG_ITEM)
    {
      for(optC = 0; optC < searchItem.searchOptions.length; optC++)
      {
        if(searchItem.searchOptions[optC].isSelected)
        {
          if(searchItem.currentEndIndex - 1 < optC)
          {
            moveCount = (optC - endIndex) + 1;
            // alert("endIndex was:" + endIndex + " currenEndIndex was:" + searchItem.currentEndIndex + "OPTC IS:" + optC + "currentStartIndex was: " + searchItem.currentStartIndex + " MOVECOUNT: " + moveCount);
            
            endIndex += moveCount;
            searchItem.currentEndIndex = endIndex;
            searchItem.currentStartIndex += moveCount;
            // alert("endIndex is now:" + endIndex + " currenEndIndex is now:" + searchItem.currentEndIndex + "startIndex is now:" + searchItem.currentStartIndex);
            
          }
        }
      }
    }


    // first we create the table
    var tableNode = document.createElement("table");    
    // TBODY IS MANDATORY FOR INTERNET EXPLORER !!! Otherwise no display!
    var tableBody = document.createElement("tbody");
    var tableRowNode = document.createElement("tr");
    
    // then we create the pagin cell on the left, in case it contains a paging image it is added to the cell
    var pagingCellLeft = document.createElement("td");
    pagingCellLeft.style.width = '25px';
    pagingCellLeft.align = 'center';
    if(!searchItem.isFirst())
    {
      // put this in separate function
      var pagingImageLeft = document.createElement("img");
      pagingImageLeft.src = IMG_BASE_PATH + "arrow_left.gif";
      pagingImageLeft.container = searchItem;
      pagingImageLeft.onclick = function()
      {
        doPage(this.container.uniqueItemName, false, false)
      }
      pagingCellLeft.appendChild(pagingImageLeft);
      // left paging cell   
    }
    else
    {
      var textNodeEmpty = document.createTextNode(" ");
      pagingCellLeft.appendChild(textNodeEmpty);
    }
    tableRowNode.appendChild(pagingCellLeft);
    
    // the we create the scrollable images
    // bugfix: if num Elements is smaller than max visible elements we have to catch this here!
    

    

    
    for(i = searchItem.currentStartIndex; i < endIndex;i++)
    {
      tableRowNode.appendChild(searchItem.searchOptions[i].createHtmlCode(searchItem));
    }

    // then we create the pagin cell on the right, in case it contains a paging image it is added to the cell
    var pagingCellRight = document.createElement("td");
    pagingCellRight.style.width = '25px';
    pagingCellRight.align = 'center';
    if(!searchItem.isLast())
    {
      // put this in separate function
      var pagingImageRight = document.createElement("img");
      pagingImageRight.src = IMG_BASE_PATH + "arrow_right.gif";
      pagingImageRight.container = searchItem;
      pagingImageRight.onclick = function()
      {
        doPage(this.container.uniqueItemName, true, false)
      }
      pagingCellRight.appendChild(pagingImageRight);
      // left paging cell   
    }
    else
    {
      var textNodeEmpty = document.createTextNode(" ");
      pagingCellRight.appendChild(textNodeEmpty);
    }
    tableRowNode.appendChild(pagingCellRight);

    tableBody.appendChild(tableRowNode);
    tableNode.appendChild(tableBody);
    // alert("itemDivNode build successfully" + itemDivNode.outerHTML);
    return tableNode;
}

/**
 * Creates the complete HTML Code for a search Option of Type ITEM_TYPE_LARGE_IMG passed as a param
 * 
 * @return the Node for the Search Option
*/
function createLargeImgOption(searchOption)
{
  var value = searchOption.clickedValue;
  var cellNode = document.createElement("td");
  cellNode.align = 'center';
  cellNode.valign = 'top';
  cellNode.style.width = '110px';
  cellNode.style.height = '83px';
  cellNode.style.overflowX = "hidden";
  cellNode.style.overflowY = "hidden";  
  var imgDivNode = document.createElement("div");
  imgDivNode.style.position = "relative";
  imgDivNode.style.top = "3px";
  imgDivNode.style.left = "4px";
  imgDivNode.style.zIndex = "400";

  
  var imgNode = document.createElement("img");
  if(searchOption.isSelected)
  {
    imgNode.style.border = "3px solid #336699";
  }
  else
  {
    imgNode.style.border = "none";
  }
  imgNode.src = searchOption.imgSrc;
  var imgPrefix = searchOption.imgSrc.substring(0,searchOption.imgSrc.lastIndexOf("/"));
  imgNode.onerror = function()
  {
  	this.src = imgPrefix + DEFAULT_LARGE_IMAGE_NAME;
  }  
  imgNode.style.cursor = "pointer";
/*  
  imgNode.style.position = "relative";
  imgNode.style.top = "0px;"
  imgNode.style.left = "0px";
  imgDivNode.style.zIndex = "200";  
  */
  cellNode.container = searchOption;
  cellNode.onclick = function() {
    this.container.select(value); 
  }
  
  var divNode = document.createElement("div");
  divNode.style.position = "relative";
  divNode.style.top = "-75px";
  divNode.style.left = "0px";
  divNode.style.textAlign = "center";
  divNode.style.fontSize = "14px";
  divNode.style.fontFamily = "Arial, Helvetica";
  divNode.style.fontWeight = "bold";
  divNode.style.zIndex = "500";
  var txtNode = document.createTextNode(searchOption.descText);
  
  divNode.appendChild(txtNode);

  imgDivNode.appendChild(imgNode);
  imgDivNode.appendChild(divNode);
  
  cellNode.appendChild(imgDivNode);
 

  return cellNode;
  
}

/**
 * Creates the complete HTML Code for a search Option of Type ITEM_TYPE_LARGE_IMG passed as a param
 * 
 * @return the Node for the Search Option
*/
function createLargeImgNoTextOption(searchOption)
{
  var value = searchOption.clickedValue;
  var cellNode = document.createElement("td");
  cellNode.align = 'center';
  cellNode.valign = 'top';
  cellNode.style.width = '110px';
  cellNode.style.height = '83px';
  cellNode.style.overflowX = "hidden";
  cellNode.style.overflowY = "hidden";  
  var imgDivNode = document.createElement("div");
  imgDivNode.style.position = "relative";
  imgDivNode.style.top = "3px";
  imgDivNode.style.left = "4px";
  imgDivNode.style.zIndex = "400";
  
  var imgNode = document.createElement("img");
  if(searchOption.isSelected)
  {
    imgNode.style.border = "3px solid #336699";
  }
  else
  {
    imgNode.style.border = "none";
  }
  imgNode.src = searchOption.imgSrc;
  var imgPrefix = searchOption.imgSrc.substring(0,searchOption.imgSrc.lastIndexOf("/"));
  imgNode.onerror = function()
  {
  	this.src = imgPrefix + DEFAULT_LARGE_IMAGE_NAME;
  }    
  imgNode.style.cursor = "pointer";
  cellNode.container = searchOption;
  cellNode.onclick = function() {
    this.container.select(value); 
  }
  imgDivNode.appendChild(imgNode);  
  cellNode.appendChild(imgDivNode);
 

  return cellNode;
  
}

/**
 * Creates the complete HTML Code for a search Option of Type ITEM_TYPE_COLOR_ITEM passed as a param
 *
 * @return the Node for the Search Option
*/
function createColorItemOption(searchOption)
{
  var value = searchOption.clickedValue;
  var cellNode = document.createElement("td");
  cellNode.align = 'center';
  cellNode.style.width = '58px';
  cellNode.style.height = '23px';
  cellNode.style.overflowX = "hidden";
  cellNode.style.overflowY = "hidden";  
  var divNode = document.createElement("div");
  divNode.style.width = '48px';
  divNode.style.height = '16px';
  divNode.style.backgroundColor = searchOption.color;
  divNode.style.cursor = "pointer";
  if(searchOption.isSelected)
  {
    divNode.style.border = "3px solid #336699";
  }
  else
  {
    divNode.style.border = "1px solid #FFFFFF";
  }
  divNode.container = searchOption;
  divNode.onclick = function() {
    this.container.select(value); 
  }
  divNode.onmouseover = function() {
    return overlib(this.container.descText, WIDTH, 50, OFFSETX, -40, OFFSETY, -40, HAUTO, FGCOLOR, 'CEDEFF', BGCOLOR, '0099FF');
  }
  divNode.onmouseout = function() {
    return nd();
  }
  cellNode.appendChild(divNode);
  return cellNode;

}

/**
 * Creates the complete HTML Code for a search Option of Type ITEM_TYPE_TEXT_ITEM passed as a param
 *
 * @return the Node for the Search Option
*/
function createTextItemOption(searchOption)
{
  var value = searchOption.clickedValue;
  var cellNode = document.createElement("td");
  cellNode.align = 'center';
  cellNode.style.width = '78px';
  cellNode.style.height = '25px';
  cellNode.style.overflowX = "hidden";
  cellNode.style.overflowY = "hidden";  
  var divNode = document.createElement("div");
  divNode.style.width = '68px';
  divNode.style.height = '18px';
  divNode.style.overflowX = 'hidden';
  divNode.style.color = '#000000';
  divNode.style.fontFamily = 'Arial, Helvetica';
  divNode.style.fontSize = '11px';
  divNode.style.verticalAlign = 'middle';
  divNode.style.cursor = "pointer";

  if(searchOption.isSelected)
  {
    divNode.style.border = "3px solid #336699";
    divNode.style.backgroundColor = '#FFFFFF';
  }
  else
  {
    divNode.style.border = "1px solid #FFFFFF";   
  }
  divNode.container = searchOption;
  divNode.onclick = function() {
    this.container.select(value); 
  }
  var textNode = document.createTextNode(searchOption.descText);
  divNode.appendChild(textNode);
  cellNode.appendChild(divNode);
  
  return cellNode;
  
  
}

/**
 * Creates the complete HTML Code for a search Option of Type ITEM_TYPE_SMALL_IMG passed as a param
 *
 * @return the Node for the Search Option
*/
function createSmallImageOption(searchOption)
{
  var value = searchOption.clickedValue;
  var cellNode = document.createElement("td");
  cellNode.align = 'center';
  cellNode.style.width = '22px';
  cellNode.style.height = '56px';
  cellNode.style.overflowX = "hidden";
  cellNode.style.overflowY = "hidden";  
  var imgNode = document.createElement("img");
  if(searchOption.isSelected)
  {
    imgNode.style.border = "3px solid #336699";
  }
  else
  {
    imgNode.style.border = "none";
  }
  imgNode.src = searchOption.imgSrc;
  var imgPrefix = searchOption.imgSrc.substring(0,searchOption.imgSrc.lastIndexOf("/"));
  imgNode.onerror = function()
  {
  	this.src = imgPrefix + DEFAULT_IMAGE_NAME;
  }    
  imgNode.style.cursor = "pointer";
  cellNode.container = searchOption;
  cellNode.onclick = function() {
    this.container.select(value); 
  }
  cellNode.appendChild(imgNode);
  return cellNode;
}

// ###########################################################################################################
// ############################### CONFIG ITEM AND OPTIONS ###################################################
// ###########################################################################################################
function createConfigItem(searchItem)
{
      // first we create the table
    var tableNode = document.createElement("table");    
    // TBODY IS MANDATORY FOR INTERNET EXPLORER !!! Otherwise no display!
    var tableBody = document.createElement("tbody");
    var tableRowNode = document.createElement("tr");
    
    
    
    // then we create the pagin cell on the left, in case it contains a paging image it is added to the cell
    var pagingCellLeft = document.createElement("td");
    pagingCellLeft.style.width = '30px';
    pagingCellLeft.style.height = '160px';
    pagingCellLeft.align = 'center';
    var pagingCellInnerTable = document.createElement("table");
    pagingCellInnerTable.width = "30";
    var pagingCellInnerBody = document.createElement("tbody");
    var paginCellInnerRow1 = document.createElement("tr");
    var pagingCellInnerTd = document.createElement("td");
    
    
    if(!searchItem.isFirst())
    {
      // put this in separate function
      var pagingImageLeft = document.createElement("img");
      pagingImageLeft.src = IMG_BASE_PATH + "arrow_left.gif";
      pagingImageLeft.container = searchItem;
      pagingImageLeft.onclick = function()
      {
        doPage(this.container.uniqueItemName, false, false)
      }
      pagingCellInnerTd.appendChild(pagingImageLeft);
      // left paging cell   
    }
    else
    {
      var pagingImageEmpty = document.createElement("img");
      pagingImageEmpty.src = IMG_BASE_PATH + "trans.gif";
      pagingImageEmpty.style.width = "15px";
      pagingImageEmpty.style.height = "15px";
      pagingCellInnerTd.appendChild(pagingImageEmpty);
    }
    paginCellInnerRow1.appendChild(pagingCellInnerTd);
    
    
    var paginCellInnerRow2 = document.createElement("tr");
    var pagingCellInnerTd2 = document.createElement("td");
    
    
    if(!searchItem.isLast())
    {
      // put this in separate function
      var pagingImageRight = document.createElement("img");
      pagingImageRight.src = IMG_BASE_PATH + "arrow_right.gif";
      pagingImageRight.container = searchItem;
      pagingImageRight.onclick = function()
      {
        doPage(this.container.uniqueItemName, true, false)
      }
      pagingCellInnerTd2.appendChild(pagingImageRight);
      // left paging cell   
    }
    else
    {
      var pagingImageEmpty = document.createElement("img");
      pagingImageEmpty.src = IMG_BASE_PATH + "trans.gif";
      pagingImageEmpty.style.width = "15px";
      pagingImageEmpty.style.height = "15px";
      pagingCellInnerTd2.appendChild(pagingImageEmpty);
    }
    
    paginCellInnerRow2.appendChild(pagingCellInnerTd2);
    pagingCellInnerBody.appendChild(paginCellInnerRow1);
    pagingCellInnerBody.appendChild(paginCellInnerRow2);
    pagingCellInnerTable.appendChild(pagingCellInnerBody);
    pagingCellLeft.appendChild(pagingCellInnerTable);
    tableRowNode.appendChild(pagingCellLeft);
    
    var mainContentCell = document.createElement("td");

    
    // now we iterate over the rows
    
    var options = searchItem.searchOptions.slice(searchItem.currentStartIndex, searchItem.currentEndIndex);
    
    var endIndex = 0;
    if(searchItem.searchOptions.length < searchItem.currentEndIndex)
    {
      endIndex = searchItem.searchOptions.length;
    }
    else
    {
      endIndex = searchItem.currentEndIndex;
    }
    
    var spalten = 7;
    var numLines = Math.ceil(options.length/spalten);
    var spaltenArray = new Array();
    var optionCount = 0;
    for(i = 0; i < spalten ; i++)
    {
        var spaltArray = new Array();
        for(x = 0 ; x < numLines; x++)
        {
          if(optionCount < options.length)
          {
            spaltArray[x] = options[optionCount];
          }
          else
          {
            spaltArray[x] = null;
          }
          optionCount ++;
        }
        spaltenArray[i] = spaltArray;
    }
    
    var innerTableNode = document.createElement("table");
    var innerTableBody = document.createElement("tbody");
    
    
    

    
    
    
    for(row = 0; row<numLines; row++)
    {
      var innerRowNode = document.createElement("tr");
      for(col = 0;col < spalten; col ++)
      {
        var innerColNode = createConfigOption(spaltenArray[col][row]);
        innerRowNode.appendChild(innerColNode);
      }
      innerTableBody.appendChild(innerRowNode);
    }
    innerTableNode.appendChild(innerTableBody);
    
    mainContentCell.appendChild(innerTableNode);
    tableRowNode.appendChild(mainContentCell);
    tableBody.appendChild(tableRowNode);
    tableNode.appendChild(tableBody);
    

    return tableNode;
  
  
}

/**
 * Creates the complete HTML Code for a search Option of Type ITEM_TYPE_CONFIG_ITEM passed as a param
 *
 * @return the Node for the Search Option
*/
function createConfigOption(searchOption)
{
  
  
  var cellNode = document.createElement("td");
  cellNode.align = 'center';
 
  if(searchOption != null)
  {
    var value = searchOption.clickedValue;
    var imgNode = document.createElement("img");
    var overDivYPos = "-68px"; 
    if(searchOption.isSelected)
    {
      imgNode.style.border = "3px solid #336699";
      overDivYPos = "-71px"; 
    }
    else
    {
      imgNode.style.border = "none";
    }
    imgNode.src = searchOption.imgSrc;
    imgNode.style.width = '90px';
    imgNode.style.height = '68px';
    imgNode.style.cursor = "pointer";
    
    imgNode.container = searchOption;
    imgNode.onmouseover = function() {
     showLayer(this.container.imgSrc);
     // return overlib(this.container.descText, WIDTH, 50, OFFSETX, -40, OFFSETY, -40, HAUTO, FGCOLOR, 'CEDEFF', BGCOLOR, '0099FF');
    }
    imgNode.onmouseout = function() {
      hideLayer(this.container.imgSrc);
      //return nd();
    }
    imgNode.onclick = function() {
      this.container.select(value); 
    }
    var imgPrefix = searchOption.imgSrc.substring(0,searchOption.imgSrc.lastIndexOf("/"));
    imgNode.onerror = function()
    {
  	  this.src = imgPrefix + DEFAUL_CONFIGURATION_IMAGE_NAME;
    }      
    
    // do the div with the description
    overDivNode = document.createElement("div");
    overDivNode.style.backgroundColor = "white";
    overDivNode.style.textAlign = "center";
    overDivNode.style.width = "90px";
    overDivNode.style.height = "30px";
    overDivNode.style.filter = "alpha (opacity=70)";
    overDivNode.style.color = "black";
    overDivNode.style.font = "7pt Arial";
    overDivNode.style.fontWeight = "bold";
    overDivNode.style.cursor = "pointer";
    overDivNode.style.overflowX = "hidden";
    overDivNode.style.overflowY = "visible";
    overDivNode.style.zIndex = "3";   
    overDivNode.style.position = "relative";
    overDivNode.style.top = overDivYPos;
    overDivNode.style.visibility = "hidden";
    overDivNode.style.marginBottom = overDivYPos;
    overDivNode.id = searchOption.imgSrc;
    var textNode = document.createTextNode(searchOption.descText);
    overDivNode.appendChild(textNode);
    
    
    cellNode.appendChild(imgNode);
    cellNode.appendChild(overDivNode);    
  cellNode.style.width = '98px';
  cellNode.style.height = '76px';
  cellNode.style.overflowX = "hidden";
  cellNode.style.overflowY = "hidden";     
  }
  else
  {
    var textNode = document.createTextNode(" ");
    cellNode.appendChild(textNode);
  }
  return cellNode;
  

}
// ###########################################################################################################
// ############################### CITY ITEM AND OPTIONS
// ###########################################################################################################
function createCityItem(searchItem)
{
      // first we create the table
    var tableNode = document.createElement("table");    
    // TBODY IS MANDATORY FOR INTERNET EXPLORER !!! Otherwise no display!
    var tableBody = document.createElement("tbody");
    var tableRowNode = document.createElement("tr");
    
    
    
    // then we create the pagin cell on the left, in case it contains a paging image it is added to the cell
    var pagingCellLeft = document.createElement("td");
    pagingCellLeft.style.width = '30px';
    pagingCellLeft.style.height = '170px';
    pagingCellLeft.align = 'center';
    var pagingCellInnerTable = document.createElement("table");
    pagingCellInnerTable.width = "30";
    var pagingCellInnerBody = document.createElement("tbody");
    var paginCellInnerRow1 = document.createElement("tr");
    var pagingCellInnerTd = document.createElement("td");
    
    
    if(!searchItem.isFirst())
    {
      // put this in separate function
      var pagingImageLeft = document.createElement("img");
      pagingImageLeft.src = IMG_BASE_PATH + "arrow_left.gif";
      pagingImageLeft.container = searchItem;
      pagingImageLeft.onclick = function()
      {
        doPage(this.container.uniqueItemName, false, false)
      }
      pagingCellInnerTd.appendChild(pagingImageLeft);
      // left paging cell   
    }
    else
    {
      var pagingImageEmpty = document.createElement("img");
      pagingImageEmpty.src = IMG_BASE_PATH + "trans.gif";
      pagingImageEmpty.style.width = "15px";
      pagingImageEmpty.style.height = "15px";
      pagingCellInnerTd.appendChild(pagingImageEmpty);
    }
    paginCellInnerRow1.appendChild(pagingCellInnerTd);
    
    
    var paginCellInnerRow2 = document.createElement("tr");
    var pagingCellInnerTd2 = document.createElement("td");
    
    
    if(!searchItem.isLast())
    {
      // put this in separate function
      var pagingImageRight = document.createElement("img");
      pagingImageRight.src = IMG_BASE_PATH + "arrow_right.gif";
      pagingImageRight.container = searchItem;
      pagingImageRight.onclick = function()
      {
        doPage(this.container.uniqueItemName, true, false)
      }
      pagingCellInnerTd2.appendChild(pagingImageRight);
      // left paging cell   
    }
    else
    {
      var pagingImageEmpty = document.createElement("img");
      pagingImageEmpty.src = IMG_BASE_PATH + "trans.gif";
      pagingImageEmpty.style.width = "15px";
      pagingImageEmpty.style.height = "15px";
      pagingCellInnerTd2.appendChild(pagingImageEmpty);
    }
    
    paginCellInnerRow2.appendChild(pagingCellInnerTd2);
    pagingCellInnerBody.appendChild(paginCellInnerRow1);
    pagingCellInnerBody.appendChild(paginCellInnerRow2);
    pagingCellInnerTable.appendChild(pagingCellInnerBody);
    pagingCellLeft.appendChild(pagingCellInnerTable);
    tableRowNode.appendChild(pagingCellLeft);
    
    var mainContentCell = document.createElement("td");

    
    // now we iterate over the rows
    
    var options = searchItem.searchOptions.slice(searchItem.currentStartIndex, searchItem.currentEndIndex);
    
    var endIndex = 0;
    if(searchItem.searchOptions.length < searchItem.currentEndIndex)
    {
      endIndex = searchItem.searchOptions.length;
    }
    else
    {
      endIndex = searchItem.currentEndIndex;
    }
    
    var spalten = 3;
    var numLines = Math.ceil(options.length/spalten);
    var spaltenArray = new Array();
    var optionCount = 0;
    for(i = 0; i < spalten ; i++)
    {
        var spaltArray = new Array();
        for(x = 0 ; x < numLines; x++)
        {
          if(optionCount < options.length)
          {
            spaltArray[x] = options[optionCount];
          }
          else
          {
            spaltArray[x] = null;
          }
          optionCount ++;
        }
        spaltenArray[i] = spaltArray;
    }
    
    var innerTableNode = document.createElement("table");
    var innerTableBody = document.createElement("tbody");
    
    
    

    
    
    
    for(row = 0; row<numLines; row++)
    {
      var innerRowNode = document.createElement("tr");
      for(col = 0;col < spalten; col ++)
      {
        var innerColNode = createCityOption(spaltenArray[col][row]);
        innerRowNode.appendChild(innerColNode);
      }
      innerTableBody.appendChild(innerRowNode);
    }
    innerTableNode.appendChild(innerTableBody);
    
    mainContentCell.appendChild(innerTableNode);
    tableRowNode.appendChild(mainContentCell);
    tableBody.appendChild(tableRowNode);
    tableNode.appendChild(tableBody);
    
    return tableNode;
  
  
}


/**
 * Creates the complete HTML Code for a search Option of Type ITEM_TYPE_CITY_ITEM passed as a param
 *
 * @return the Node for the Search Option
*/
function createCityOption(searchOption)
{
  var cellNode = document.createElement("td");
  cellNode.align = 'center';
  cellNode.style.width = '149px';
  cellNode.style.height = '24px';
  cellNode.style.overflowX = "hidden";
  cellNode.style.overflowY = "hidden";  
  if(searchOption != null)
  {
    var value = searchOption.clickedValue;
  
  
    var divNode = document.createElement("div");
    divNode.style.width = '139px';
    divNode.style.height = '14px';
    divNode.style.overflowX = 'hidden';    
    divNode.style.color = '#000000';
    divNode.style.fontFamily = 'Arial, Helvetica';
    divNode.style.fontWeight = 'bold';
    divNode.style.fontSize = '11px';
    divNode.style.verticalAlign = 'middle';
    divNode.style.cursor = "pointer";
  
    if(searchOption.isSelected)
    {
      divNode.style.border = "3px solid #336699";
      // divNode.style.backgroundColor = '#FFFFFF';
    }
    else
    {
      divNode.style.border = "2px solid #FFFFFF";   
    }
    divNode.container = searchOption;
    divNode.onclick = function() {
      this.container.select(value); 
    }
    var textNode = document.createTextNode(searchOption.descText);
    divNode.appendChild(textNode);
    cellNode.appendChild(divNode);
  }
  else
  {
   var textNode = document.createTextNode(" ");
   cellNode.appendChild(textNode);
  }
  return cellNode;
  
  
}
/**
 * Creates the complete HTML Code for a search Option of Type ITEM_TYPE_CIRCLE_ITEM passed as a param
 *
 * @return the Node for the Search Option
*/
function createCircleOption(searchOption)
{
 var value = searchOption.clickedValue;
  var cellNode = document.createElement("td");
  cellNode.align = 'center';
  cellNode.valign = 'top';
  cellNode.style.width = '70px';
  cellNode.style.height = '70px';
  cellNode.style.overflowX = "hidden";
  cellNode.style.overflowY = "hidden";  
  cellNode.style.color = '#000000';
  cellNode.style.fontFamily = 'Arial, Helvetica';
  cellNode.style.fontSize = '10px';
  
  var imgDivNode = document.createElement("div");
  imgDivNode.style.position = "relative";

  
  var imgNode = document.createElement("img");
  imgNode.style.cursor = "pointer";
  var imgPrefix = searchOption.imgSrc.substring(0,searchOption.imgSrc.lastIndexOf("/"));
  if(searchOption.isSelected)
  {
    var imgPostFix = searchOption.imgSrc.substring(searchOption.imgSrc.lastIndexOf("/") + 1, searchOption.imgSrc.length);
    imgNode.src = imgPrefix + "/selected" + imgPostFix;
  }
  else
  {
    imgNode.src = searchOption.imgSrc;
  }
  imgNode.onerror = function()
  {
  	  this.src = imgPrefix + DEFAULT_IMAGE_NAME;
  }  
  imgDivNode.container = searchOption;
  imgDivNode.onclick = function() {
    this.container.select(value); 
  }
  imgDivNode.appendChild(imgNode);  
  var descTextNode = document.createTextNode(searchOption.descText);
  cellNode.appendChild(descTextNode);
  cellNode.appendChild(imgDivNode);
 

  return cellNode;
}

/**
 * adds a number to the current value of the zip code field
*/
function enterZipCode(val)
{
  var field = document.getElementById("zipTextField");
  var currentVal = field.value;
  currentVal += val;
  field.value = currentVal;
}
/**
* clears the ztip code field
*/
function remZipCode()
{
  var field = document.getElementById("zipTextField");
  field.value = "";
}