LabelIndexPanel = function (newId, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility, newLabelControl, newLabelControlId)
{
  if (arguments.length > 0)
    this.init(newId, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility, newLabelControl, newLabelControlId);
};

LabelIndexPanel.prototype   = new GuiWidget();
LabelIndexPanel.constructor = LabelPanel;
LabelIndexPanel.superclass  = GuiWidget.prototype;
 
LabelIndexPanel.prototype.init = function (newId, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility, newLabelControl, newLabelControlId)
{
  LabelIndexPanel.superclass.init.call(this, newId, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility, "LabelPanel");
  this.id = newId;
  if (newLabelControlId!=null)
  {
    this.labelControl = document.getGuiControl(newLabelControlId);
    this.labelControlId = newLabelControlId;
  }
  else
  {
    this.labelControl = newLabelControl;
    this.labelControlId = this.labelControl.id;
  }
  this.labelControl.indexPanel = this;

  this.captionElement = new GuiWidget(this.id+"captionElement", this.element, 0, 0, 0, this.width(), 20, true, "themeGroupHeader");
    this.captionElement.element.cbe.innerHtml("Label Index");
  this.listForm = new GuiWidget(this.id+"listForm", this.element, 0, 20, 4, this.width(), 100, true, "");  
  this.height(200);
};

LabelIndexPanel.prototype.draw = function()
{
  //draws (or redraws as the case may be) the index of user added labels
  // based on the data in the labelControl object.
  //structurally similar to bookmarks, but organized by theme
  var htmlString = '<table id="'+this.id+'indexTable" class="labelList" cellpadding="0" cellspacing="0" width="100%" style="margin-right: 10px">';
  var allEmpty = true;
  var listHeight = 0;

  for (var i in this.labelControl.labelList)  //loop through theme lists
  {
    themeListEmpty = true;
    themeListString = '';
    if (this.labelControl.labelList[i].length > 0)
    {
      themeListString = '<tr><td colspan = "2" class="labelListThemeHeader">'
                        +this.labelControl.mapObject.config.themes[i].themeName
                        +'</td></tr>';
      listHeight += 50;
      for (var j=0; j<this.labelControl.labelList[i].length; j++)  //loop through label list for a given theme
      {
        if (this.labelControl.labelList[i][j] != false)
        {
          var themeName = i;
          if (this.labelControl.labelList[i][j].type == 'line')
            var lineStyle = this.labelControl.config["lineLabels"][this.labelControl.labelList[i][j].style];

          allEmpty = false;
          themeListEmpty = false;
          listHeight += 100;
          themeListString = themeListString 
            + '<tr>'
            +'<td class="bookmarkKillButton"><span class="kill" onclick="document.getGuiControl(\''+this.labelControl.id+'\').deleteLabel(\''+i+'\','+j+');"><img src="'+GuiWidget.THEME_PATH+GuiWidget.THEME+'/images/deleteBookmark.png"></span></td>'
            +'<td class="bookmarkTitle"><span class="pseudolink" onclick="'
            +'document.getGuiControl(\''+this.labelControl.id+'\').zoomToLabel(\''+i+'\','+j+');">'
            +((this.labelControl.labelList[i][j].type == 'point')?
              ('<img align="left" src="'+this.labelControl.config.pointLabels[this.labelControl.labelList[i][j].style].sampleURL+'">'):
              (this.labelControl.labelList[i][j].type == 'text')?
              ('<span style="'+this.labelControl.config.textLabels[this.labelControl.labelList[i][j].style].sampleCSS+'">'):
              (this.labelControl.labelList[i][j].type == 'line')?
              ('<img style="vertical-align:middle;background:'+lineStyle["color"]+';" width="20px" height="'+lineStyle["thickness"]+'" src="'+GUI_THEME_PATH+'/'+GUI_THEME+'/images/pixel.gif">&nbsp;<span>'):
              ('')
             )
            +this.labelControl.labelList[i][j].labelName
            +((this.labelControl.labelList[i][j].type == 'point')?
              ('</span>'):
              (this.labelControl.labelList[i][j].type == 'text')?
              (''):
              ('</span>')
             )
            +'</span></td>'
            +'</tr>';
        }
      }
      if (!themeListEmpty)
        htmlString = htmlString + themeListString; 
    }
  }
  htmlString = allEmpty?('<table id="'+this.id+'indexTable" class="labelList" cellpadding="0" cellspacing="0" width="100%" style="margin-right: 10px"><tr><td>No User-Defined Labels Exist.</tr></td></table>'):(htmlString + '</table>');
  this.listForm.height(allEmpty?100:listHeight);
  this.listForm.element.cbe.innerHtml(htmlString);
  this.height(listHeight+120);
};

LabelIndexPanel.prototype.resize = function(newWidth, newHeight)
{
  this.element.cbe.resizeTo(newWidth, this.height());
  this.captionElement.resize(newWidth, this.captionElement.height());
  this.listForm.resize(newWidth, this.listForm.height());
};