LayerControl = function(htmlTargetEle)
{
  var layerInput =  {};           //assoc array of layer ids; each entry is an array of checkboxes
  var groupToggleEles = []; //array of checkboxes for group toggles.  first element is always null.
  var groupContentEles = []; //array of group table elements
  var groupConfigLookup = []; //array of 
  this.mapObject = (arguments.length>1)?arguments[1]:document.mapObject;
  if(this.mapObject){
    this.config = this.mapObject.config.themeGroups;
    this.mapObject.layerControl = this;
  }
  
  for (var currentTheme in this.mapObject.config['themes']){
    if(currentTheme=='toJSONString')continue;
    layerInput[currentTheme] = [];
  }
  this.drawPanel = function()
  {
    var $_this = this;
    var htmlString = this.getGroupHTML(this.config,0);
    htmlTargetEle.innerHTML = htmlString;
    //set up event handlers
    var inputEles = htmlTargetEle.getElementsByTagName('input');
    var attachLayerClick = function(ele,layerid){xAddEventListener(ele,'click',function(){$_this.toggleTheme(layerid);});};
    var attachGroupClick = function(ele){xAddEventListener(ele,'click',function(){$_this.toggleGroup(parseInt(ele.getAttribute('FREEANCE_GROUP_INDEX')),ele.checked);});};
    for (var i=0;i<inputEles.length;i++)
    {
      switch(inputEles[i].getAttribute('FREEANCE_TYPE'))
      {
        case 'LAYER_TOGGLE':
          var layerid = inputEles[i].getAttribute('FREEANCE_LAYER_ID');
          if(!layerInput[layerid])
            layerInput[layerid] = [];
          layerInput[layerid].push(inputEles[i]);
          attachLayerClick(inputEles[i],layerid);
          break;
        case 'GROUP_TOGGLE':
          attachGroupClick(inputEles[i]);
          groupToggleEles[parseInt(inputEles[i].getAttribute('FREEANCE_GROUP_INDEX'))] = inputEles[i];
          break;
      }
    }
    
    //SET UP COLLAPSABLE GROUP HEADINGS
    var attachHeaderClick=function(spanEle,trEle){xAddEventListener(spanEle,'click',function(){trEle.style.display=(trEle.style.display=='none')?('block'):'none'});};
    var headers = [];  //array of header spans
    var rows = []; //array of group container rows
    var spanEles = htmlTargetEle.getElementsByTagName('span');
    var divEles = htmlTargetEle.getElementsByTagName('div');
    for (var i=0;i<spanEles.length;i++)
      if(spanEles[i].getAttribute('FREEANCE_TYPE')=='GROUP_LABEL')
        headers[parseInt(spanEles[i].getAttribute('FREEANCE_GROUP_INDEX'))]=spanEles[i];
    for (var i=0;i<divEles.length;i++)
      if(divEles[i].getAttribute('FREEANCE_TYPE')=='LAYER_GROUP_CONTENTS')
        rows[parseInt(divEles[i].getAttribute('FREEANCE_GROUP_INDEX'))]=divEles[i];
    for (var i=0;i<rows.length;i++)
      if((rows[i]!=null)&&(headers[i]!=null))
        attachHeaderClick(headers[i],rows[i]);
  };

  this.toggleTheme = function (themeId)
  {
    if (_MAP_INITIALIZED){
      this.mapObject.setThemeState(themeId,!this.mapObject.config["themes"][themeId]["visibility"]);
      this.update();
    }
  };
  
  this.toggleGroup = function(groupIndex,newState)
  {
    var activeGroup = groupConfigLookup[groupIndex];
    if (activeGroup)
      this.setGroupState(activeGroup,newState);
    this.update();
  };
  
  this.setGroupState = function(groupConfig,newState)
  {
    //contains layers and groups  if a layer, set state to match.  if a group, recursive call 
    for (var i=0;i<groupConfig.length;i++)
    {
      switch(groupConfig[i].type)
      {
        case 'layer':
          this.mapObject.setThemeState(groupConfig[i].layerid,newState);
          for (var j=0;j<layerInput[groupConfig[i].layerid].length;j++)
            layerInput[groupConfig[i].layerid][j].checked = newState;
          break;
        case 'group':
          if(groupConfig[i].children.length>0)
            this.setGroupState(groupConfig[i].children,newState);
          break;
      }
    }
  };
  
  this.getGroupHTML = function(groupConfig,groupIndex)
  {
    //groupConfig is an array of groupItems. groupIndex is the current index of the group in the lookup table.
    groupConfigLookup[groupIndex] = groupConfig;
    groupConfig.groupIndex = groupIndex;
    var newGroupIndex=groupIndex+1;
    var htmlString = ['<div FREEANCE_TYPE="LAYER_GROUP_CONTENTS" FREEANCE_GROUP_INDEX="'+groupIndex+'"><table width="100%" cellpadding="0" cellspacing="0">'];
    for (var i=0;i<groupConfig.length;i++)
    {
      switch(groupConfig[i].type)
      {
        case 'label':
          htmlString.push('<tr><td colspan="2" class="rightPanelFormHeaderActive" style="margin-bottom: 0px;cursor:default;">'+groupConfig[i].name+'</td></tr>');
          break;
        case 'layer':
          htmlString.push('<tr><td width="25px" class="layerControlLeftColumn">');
          if(groupConfig[i].toggle)
            htmlString.push('<input type="checkbox"  FREEANCE_TYPE="LAYER_TOGGLE" FREEANCE_LAYER_ID="'+groupConfig[i].layerid+'" />');
          htmlString.push('&nbsp;</td><td class="layerControlLayerName">'+
            this.mapObject.config['themes'][groupConfig[i].layerid]['themeName']+'</td></tr>');
          break;
        case 'group':
          htmlString.push('<tr><td width="25px" class="layerControlLeftColumn">');
          if(groupConfig[i].toggle)
            htmlString.push('<input type="checkbox" FREEANCE_TYPE="GROUP_TOGGLE" FREEANCE_GROUP_INDEX="'+(newGroupIndex)+'" />');
          htmlString.push('&nbsp;</td><td class="rightPanelFormHeaderActive"><span FREEANCE_TYPE="GROUP_LABEL" FREEANCE_GROUP_INDEX="'+(newGroupIndex)+'">'+groupConfig[i].name+'</span></td><tr>');
          htmlString.push('<tr><td width="25px" class="layerControlLeftColumn"></td><td>');
          htmlString.push(this.getGroupHTML(groupConfig[i].children,newGroupIndex));
          htmlString.push('</td></tr>');
          newGroupIndex++;
          break;
      }
    }
    htmlString.push('</table></div>');
    return htmlString.join('');
  };
  
  this.update = function()
  {
    //set checkboxes for all layers
    for (var currentTheme in this.mapObject.config['themes'])
    {
      if(currentTheme=='toJSONString')continue;
      if(layerInput[currentTheme]){
        var newvis=this.mapObject.config['themes'][currentTheme]['visibility'];
        for (var i=0;i<layerInput[currentTheme].length;i++)
        {
          layerInput[currentTheme][i].checked = newvis;
        }
      }
    }
  };
  this.drawPanel();
};