//LabelPanel.js

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

LabelPanel.prototype = new GuiWidget();
LabelPanel.constructor = LabelPanel;
LabelPanel.superclass = GuiWidget.prototype;
 
LabelPanel.prototype.init = function (newId, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility,newLabelControl, newLabelControlId,newMap, newMapId)
{
  LabelPanel.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.labelPanel = this;

  if (newMapId!=null)
  {
    this.map   = document.getGuiControl(newMapId);
    this.mapId = newMapId;
  }
  else
  {
    this.map = newMap;
    this.mapId = this.map.id;
  }
  var ypos = 0;
  this.activeTheme = null;
  this.activeSymbol = null;
  this.activeText = null;
  this.activeLine = null;
  
  this.themeElement = new GuiWidget(this.id+"themeElement", this.element, 0, 0, 0, this.width(), 50, true, "");
  this.themeCaptionElement = new GuiWidget(this.id+"themeCaptionElement", this.themeElement.element, 0, 0, 0, this.width(), 20, true, "themeGroupHeader");
  this.themeCaptionElement.element.cbe.innerHtml("Select Layer");
  this.themeFormContainer = new GuiWidget (this.id+"themeFormContainer", this.themeElement.element, 0, this.themeCaptionElement.height(), 0, this.width(), 30, true, "QueryObjectBottom");
  ypos += this.themeElement.height();

  this.symbolElement = new GuiWidget(this.id+"symbolElement", this.element, 0,ypos, 0, this.width(), 45, true, "");
    this.symbolCaptionElement = new GuiWidget(this.id+"symbolCaptionElement", this.symbolElement.element, 0, 0, 0, this.width(), 20, true, "themeGroupHeader");
      this.symbolCaptionElement.element.cbe.innerHtml("Add Symbol");
    this.symbolFormContainer = new GuiWidget (this.id+"symbolFormContainer", this.symbolElement.element, 0, this.symbolCaptionElement.height(), 0, this.width(), 25, true, "QueryObjectBottom");
      this.symbolNameElement = new GuiWidget(this.id+"symbolNameElement", this.symbolFormContainer.element, 10, 0, 0, this.width(), 25, true, "");
        this.symbolNameElement.element.cbe.innerHtml('<input id="'+this.id+'symbolNameInput" type="text" size="30">');
        this.symbolNameInput = document.getElementById(this.id+'symbolNameInput');
  ypos += this.symbolElement.height();

  this.textElement = new GuiWidget(this.id+"textElement", this.element, 0,ypos, 0, this.width(), 50, true, "");
  this.textCaptionElement = new GuiWidget(this.id+"textCaptionElement", this.textElement.element, 0, 0, 0, this.width(), 20, true, "themeGroupHeader");
  this.textCaptionElement.element.cbe.innerHtml("Add Text");
  this.textFormContainer = new GuiWidget (this.id+"textFormContainer", this.textElement.element, 0, this.textCaptionElement.height(), 0, this.width(), 30, true, "QueryObjectBottom");
  this.textFormInput = new GuiWidget(this.id+"textFormInput", this.textFormContainer.element, 10, 0, 0, this.width(), 25, true, "");
  this.textFormInput.element.cbe.innerHtml('<input id="'+this.id+'textFormInputBox" type="text" size="30">'); 
  this.textInput = document.getElementById(this.id+'textFormInputBox');
  ypos += this.textElement.height();
  
  ypos =370;  // why is this so off w/o?
  this.lineElement = new GuiWidget(this.id+"lineElement", this.element, 0,ypos, 0, this.width(), 55, true, "");
    this.lineCaptionElement = new GuiWidget(this.id+"lineCaptionElement", this.lineElement.element, 0, 0, 0, this.width(), 20, true, "themeGroupHeader");
      this.lineCaptionElement.element.cbe.innerHtml("Add Line");
    this.lineFormContainer = new GuiWidget (this.id+"lineFormContainer", this.lineElement.element, 0, this.lineCaptionElement.height(), 0, this.width(), 35, true, "QueryObjectBottom");
      this.lineNameElement = new GuiWidget(this.id+"lineNameElement", this.lineFormContainer.element, 10, 0, 0, this.width(), 25, true, "");
        this.lineNameElement.element.cbe.innerHtml('<input id="'+this.id+'lineNameInput" type="text" size="30">');
        this.lineNameInput = document.getElementById(this.id+'lineNameInput');
  ypos += this.lineElement.height()+35;

  this.height(ypos);
};

LabelPanel.prototype.draw = function()
{
  this.themeFormHTML = '<select id="'+this.id+'themeSelectFormInput" onchange="document.getWidgetById(\''+this.id+'\').setActiveTheme(this.value);">';
  var firstTheme = true;
  for (var i in this.labelControl.mapObject.config.themes)
  {
    if (firstTheme)
      this.setActiveTheme(i);
    firstTheme = false;
    this.themeFormHTML += ('<option value="'+i+'">'+this.labelControl.mapObject.config.themes[i].themeName+'</option>');
  }
  this.themeFormHTML += '</select>';
  this.themeFormContainer.element.cbe.innerHtml(this.themeFormHTML);
  this.activeThemeInput = document.getElementById(this.id+'themeSelectFormInput');

  /* symbols */
  this.symbolControls = new Object();
  var symbolCount = 0;
  var firstSymbol = true;
  for (i in this.labelControl.config["pointLabels"])
  {
    this.symbolControls[i] = new GuiWidget(this.id+"symbolControls["+i+"]", this.symbolFormContainer.element, 5,20*symbolCount+25, 0, this.width(), 25, true, "");
    this.symbolControls[i].labelPanel = this;
    this.symbolControls[i].inactiveHTML = '<span class="pseudolink"><img src="'+this.labelControl.config["pointLabels"][i]["sampleURL"]+'" align="left">'+escapeHTML(this.labelControl.config["pointLabels"][i]["description"])+'</span>';
    this.symbolControls[i].activeHTML = '<span class="pseudolink"><img src="'+this.labelControl.config["pointLabels"][i]["sampleURL"]+'" align="left"><b>'+escapeHTML(this.labelControl.config["pointLabels"][i]["description"])+' <i>(Active)</i></b></span>';
    this.symbolControls[i].element.cbe.innerHtml(firstSymbol?this.symbolControls[i].activeHTML:this.symbolControls[i].inactiveHTML);
    this.symbolControls[i].element.cbe.addEventListener('click',EVENT_LISTENER, false);
    this.symbolControls[i].labelName = i;
    if (firstSymbol)
    {
      this.setActiveSymbol(i);
      firstSymbol = false;
    }
    this.symbolControls[i].clickEvent = function(e)
    {
      this.labelPanel.setActiveSymbol(this.labelName);
    };
    symbolCount++;
  }
      
  this.symbolFormButton = new RadioButton(this.id+"symbolFormButton", this.symbolFormContainer.element, 10, 20*symbolCount+25, 0, 100,20,true,'placeSymbol','',this.map.mapPanel.toolbarRadioButtonGroup);
  this.symbolFormButton.labelPanel = this;
  this.symbolFormButton.clickEvent = function(e)
  {
    this.labelPanel.map.mapPanel.clickMode = 'LabelPointAdd'; 
  };
  this.symbolFormContainer.height(20*symbolCount+50);
  this.symbolElement.height(this.symbolCaptionElement.height()+this.symbolFormContainer.height());
  
  /* text */
  this.textElement.setPosition(0,this.themeElement.height()+this.symbolElement.height());
  this.textControls = new Object;
  var textCount = 0;
  firstSymbol = true;
  for (i in this.labelControl.config["textLabels"])
  {
    this.textControls[i] = new GuiWidget(this.id+"textControls["+i+"]", this.textFormContainer.element, 10,20*textCount+25, 0, this.width(), 25, true, "");
    this.textControls[i].labelPanel = this;

    this.textControls[i].inactiveHTML = '<span class="pseudolink" style="'+this.labelControl.config["textLabels"][i]["sampleCSS"]+'">'+escapeHTML(this.labelControl.config["textLabels"][i]["sampleText"])+'</span>';
    this.textControls[i].activeHTML = '<span class="pseudolink" style="'+this.labelControl.config["textLabels"][i]["sampleCSS"]+'">'+escapeHTML(this.labelControl.config["textLabels"][i]["sampleText"])+' <span class="pseudolink"><i>(Active)</i></span></span>';

    this.textControls[i].element.cbe.innerHtml(firstSymbol?this.textControls[i].activeHTML:this.textControls[i].inactiveHTML);
    this.textControls[i].element.cbe.addEventListener('click',EVENT_LISTENER, false);
    this.textControls[i].labelName = i;
    if (firstSymbol)
    {
      this.setActiveText(i);
      firstSymbol = false;
    }
    this.textControls[i].clickEvent = function(e)
    {
      this.labelPanel.setActiveText(this.labelName);
    };
    textCount++;
  }
  this.textFormButton = new RadioButton(this.id+"textFormButton", this.textFormContainer.element, 10, 20*textCount+25, 0, 100,20,true,'placeText','',this.map.mapPanel.toolbarRadioButtonGroup);
  this.textFormButton.labelPanel = this;
  this.textFormButton.clickEvent = function(e)
  {
    this.labelPanel.map.mapPanel.clickMode = 'LabelTextAdd'; 
  };
  this.textFormContainer.height(20*textCount+50);
  this.textElement.height(this.textCaptionElement.height()+this.textFormContainer.height());
  
  /* lines:START */
  this.lineControls = new Object();
  var lineCount = 0;
  var firstLine = true;
  for (styleName in this.labelControl.config["lineLabels"])
  {
    this.lineControls[styleName] = new GuiWidget(this.id+"lineControls["+styleName+"]", this.lineFormContainer.element, 5,20*lineCount+25, 0, this.width(), 25, true, "");
    this.lineControls[styleName].labelPanel = this;

    this.lineControls[styleName].inactiveHTML = '<span class="pseudolink"><img style="vertical-align: middle; background:'+this.labelControl.config["lineLabels"][styleName]["color"]+';" width="20px" height="'+this.labelControl.config["lineLabels"][styleName]["thickness"]+'" src="'+GUI_THEME_PATH+'/'+GUI_THEME+'/images/pixel.gif"><span>&nbsp;'+escapeHTML(this.labelControl.config["lineLabels"][styleName]["description"])+'</span></span>';
    this.lineControls[styleName].activeHTML = '<span class="pseudolink"><img style="vertical-align: middle; background:'+this.labelControl.config["lineLabels"][styleName]["color"]+';" width="20px" height="'+this.labelControl.config["lineLabels"][styleName]["thickness"]+'" src="'+GUI_THEME_PATH+'/'+GUI_THEME+'/images/pixel.gif"><span>&nbsp;'+escapeHTML(this.labelControl.config["lineLabels"][styleName]["description"])+'</span>&nbsp;<span class="pseudolink"><i>(Active)</i></span></span>';

    this.lineControls[styleName].element.cbe.innerHtml(firstLine?this.lineControls[styleName].activeHTML:this.lineControls[styleName].inactiveHTML);
    this.lineControls[styleName].element.cbe.addEventListener('click',EVENT_LISTENER, false);
    this.lineControls[styleName].labelName = styleName;
    if (firstLine)
    {
      this.setActiveLine(styleName);
      firstLine = false;
    }
    this.lineControls[styleName].clickEvent = function(e)
    {
      this.labelPanel.setActiveLine(this.labelName);
    };
    lineCount++;
  }
  /* line:Radio Button */
  this.lineFormButton = new RadioButton(this.id+"lineFormButton", this.lineFormContainer.element, 10, 20*lineCount+25, 0, 100,20,true,'placeLine','',this.map.mapPanel.toolbarRadioButtonGroup);
  this.lineFormButton.labelPanel = this;
  this.lineFormButton.clickEvent = function(e)
  {
    this.labelPanel.map.mapPanel.clickMode = 'LabelLineAdd'; 
  };
  lineCount++;
  /* line:Save Line Button */
  this.lineFormSaveButton = new ImageButton(this.id+"lineFormSaveButton", this.lineFormContainer.element, 10, 20*lineCount+25, 0, 100,20,true,'lineFormSaveButton','');
  this.lineFormSaveButton.LabelPanel = this;
  this.lineFormSaveButton.clickEvent = function(e)
  {
    this.LabelPanel.labelControl.saveLine();
  };
  lineCount++;
  /* line:Clear Line Button */
  this.lineFormClearButton = new ImageButton(this.id+"lineFormClearButton", this.lineFormContainer.element, 10, 20*lineCount+25, 0, 100,20,true,'lineFormClearButton','');
  this.lineFormClearButton.LabelPanel = this;
  this.lineFormClearButton.clickEvent = function(e)
  {
    this.LabelPanel.labelControl.clearLine();
  };
  lineCount++;
  /* line:put section together */
  this.lineFormContainer.height(20*lineCount+25);
  this.lineElement.height(this.lineCaptionElement.height()+this.lineFormContainer.height());
  /* lines:END */
  
  /* put them all together */
  this.height(this.themeElement.height()+this.symbolElement.height()+this.textElement.height()+this.lineElement.height());
};

LabelPanel.prototype.setActiveSymbol = function(newActiveSymbol)
{
  if (this.activeSymbol)
    this.symbolControls[this.activeSymbol].element.cbe.innerHtml(this.symbolControls[this.activeSymbol].inactiveHTML); 
  this.activeSymbol = newActiveSymbol;
  this.symbolControls[newActiveSymbol].element.cbe.innerHtml(this.symbolControls[newActiveSymbol].activeHTML); 
  this.labelControl.activeSymbol = newActiveSymbol;
};

LabelPanel.prototype.setActiveText = function(newActiveText)
{
  if (this.activeText)
    this.textControls[this.activeText].element.cbe.innerHtml(this.textControls[this.activeText].inactiveHTML); 
  this.activeText = newActiveText;
  this.textControls[newActiveText].element.cbe.innerHtml(this.textControls[newActiveText].activeHTML); 
  this.labelControl.activeText = newActiveText;
};

LabelPanel.prototype.setActiveLine = function(newActiveLine)
{
  if (this.activeLine)
    this.lineControls[this.activeLine].element.cbe.innerHtml(this.lineControls[this.activeLine].inactiveHTML);
  this.activeLine = newActiveLine;
  this.lineControls[newActiveLine].element.cbe.innerHtml(this.lineControls[newActiveLine].activeHTML);
  this.labelControl.activeLine = newActiveLine;
  this.labelControl.setLineType(this.labelControl.config["lineLabels"][newActiveLine],newActiveLine);
};

LabelPanel.prototype.setActiveTheme = function(newActiveTheme)
{
  this.labelControl.activeTheme = newActiveTheme;
};

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