var images_global_path = "../static/themes/theme_tadpole/images_global/";
var images_product_path = "../static/themes/theme_tadpole/images_analyzer/";

///////////////////   ToolbarButton   ///////////////////

function ToolbarButton(props) {
  this.init(props);
}

ToolbarButton.newInstance = function(props) {
  return new ToolbarButton(props);
}

ToolbarButton.prototype.init = function(props) {
  if (props == null) {
    props = {};
  }
  this.id = props.id;
  this.visible = (props.visible == undefined) ? true : props.visible;
  this.enabled = (props.enabled == undefined) ? true : props.enabled;
  this.label = props.label;
  this.tooltip = props.tooltip;
  this.image = props.image;
  this.href = props.href;
  this.onClick = props.onClick;
  this.target = props.target;
}

ToolbarButton.prototype.getElement = function() {
  var node = null;
  if (!this.visible) {
    node = null;
  } else {
    node = document.createElement("a");
    if (this.id) {
      node.id = this.id;
    }
    if (this.enabled && this.href) {
      node.href = this.href;
    }
    if (this.enabled && this.onClick) {
      node.setAttribute("onClick", this.onClick);
      node.href = "javascript:void(0)";
    }
    node.title = this.tooltip;
    if (this.target) {
      node.target = this.target;
    }
    var img = document.createElement("img");
    img.border = 0;
    node.appendChild(img);
    if (this.enabled) {
      img.src = images_product_path + this.image + "_active.gif";
      node.setAttribute("onMouseOver", "this.childNodes[0].src=\"" + images_product_path + this.image + "_active.gif\";this.childNodes[0].style.border=\"1px outset ThreeDHighlight\"");
      node.setAttribute("onMouseOut", "this.childNodes[0].src=\"" + images_product_path + this.image + "_active.gif\";this.childNodes[0].style.border=\"none\"");
      node.setAttribute("onMouseDown", "this.childNodes[0].src=\"" + images_product_path + this.image + "_active.gif\";this.childNodes[0].style.border=\"1px inset ThreeDHighlight\"");
    } else {
      img.src = images_product_path + this.image + "_disabled.gif";
      img.style.border = "none";
    }
  }
  return node;
}

///////////////////   ToolbarSeparator   ///////////////////

ToolbarSeparator.prototype = new ToolbarButton(); 
ToolbarSeparator.prototype.constructor = ToolbarSeparator;
ToolbarSeparator.superclass = ToolbarButton.prototype;

function ToolbarSeparator(props) {
  this.init(props);
}

ToolbarSeparator.newInstance = function(props) {
  return new ToolbarSeparator(props);
}

ToolbarSeparator.prototype.init = function(props) {
  ToolbarSeparator.superclass.init.call(this, props);
}

ToolbarSeparator.prototype.getElement = function() {
  var img = document.createElement("img");
  img.border = 0;
  img.src = images_global_path + "toolbar_sep.gif";
  img.className = "toolbar_sep";
  return img;
}

///////////////////   Toolbar   ///////////////////

function Toolbar(btns) {
  this.btns = btns;
}

Toolbar.prototype.getElement = function() {
  var table = document.createElement("table");
  table.cellSpacing = 0;
  table.cellPadding = 0;
  table.border = 0;

  var tr = document.createElement("tr");
  for (var i=0; i<this.btns.length; i++) {
    var btn = this.btns[i];
    if (!btn.visible) {
      continue;
    }
    var td = document.createElement("td");
    if (btn instanceof ToolbarSeparator) {
      td.className = "toolbar_sep";
    }
    var btnNode = btn.getElement();
    if (btnNode != null) {
      td.appendChild(btnNode);
    }
    tr.appendChild(td)
  }
  table.appendChild(tr);

  var span = document.createElement("span");
  span.className = "toolbar";
  span.appendChild(table);
  return span;
}

Toolbar.prototype.toString = function() {
  var node = document.createElement("span");
  node.appendChild(this.getElement());
  return node.innerHTML;
}

Toolbar.newInstance = function(btns) {
  return new Toolbar(btns);
}

Toolbar.newInstanceOut = function(btns) {
  var toolbar = Toolbar.newInstance(btns);
  document.write(toolbar);
}

///////////////////   ProcessStep   ///////////////////

function ProcessStep(props) {
  this.init(props);
}

ProcessStep.newInstance = function(props) {
  return new ProcessStep(props);
}

ProcessStep.prototype.init = function(props) {
  if (props == null) {
    props = {};
  }
  this.id = props.id;
  this.label = props.label;
  this.tooltip = props.tooltip;
  this.onClick = props.onClick;
  this.enabled = (props.enabled == undefined) ? false : props.enabled;
  this.completed = (props.completed == undefined) ? false : props.completed;
  this.selected = (props.selected == undefined) ? false : props.selected;
}

ProcessStep.prototype.getElement = function() {
  var node = document.createElement("td");
  if (this.id) {
    node.id = this.id;
  }
  if (this.enabled && this.onClick) {
    node.setAttribute("onClick", this.onClick);
  }
  if (this.tooltip) {
    node.title = this.tooltip;
  }
  var className;
  if (this.selected) {
    className = "step selected";
  } else if (this.completed) {
    className = "step completed";
  } else {
    className = "step unselected";
  }
  node.className = className;
  node.setAttribute("onMouseOver", "this.className='step hover'");
  node.setAttribute("onMouseOut", "this.className='" + className + "'");

  var span = document.createElement("span");
  span.innerHTML = this.label;
  node.appendChild(span);
  return node;
}

///////////////////   ProcessLeftEdge   ///////////////////

function ProcessLeftEdge() {}

ProcessLeftEdge.prototype.getElement = function() {
  var td = document.createElement("td");
  td.className = "left_edge";
  var img = document.createElement("img");
  img.border = 0;
  img.src = images_global_path + "spacer.gif";
  img.className = "left_edge";
  td.appendChild(img);
  return td;
}

///////////////////   ProcessSeparator   ///////////////////

function ProcessSeparator() {}

ProcessSeparator.prototype.getElement = function() {
  var td = document.createElement("td");
  td.className = "sep";
  var img = document.createElement("img");
  img.border = 0;
  img.src = images_global_path + "processBar_arrow.gif";
  img.className = "sep";
  td.appendChild(img);
  return td;
}

///////////////////   ProcessBar   ///////////////////

function ProcessBar(btns) {
  this.btns = btns;
}

ProcessBar.prototype.getElement = function() {
  var table = document.createElement("table");
  table.className = "outerTable";
  table.cellSpacing = 0;
  table.cellPadding = 0;
  table.border = 0;

  var leftEdge = new ProcessLeftEdge();
  var sep = new ProcessSeparator();

  var tr = document.createElement("tr");
  tr.className = "outerRow";
  tr.appendChild(leftEdge.getElement());

  for (var i=0; i<this.btns.length; i++) {
    var btn = this.btns[i];
    var btnNode = btn.getElement();
    tr.appendChild(btnNode)
    tr.appendChild(sep.getElement());
  }
  table.appendChild(tr);

  var span = document.createElement("span");
  span.className = "processBar";
  span.appendChild(table);
  return span;
}

ProcessBar.prototype.toString = function() {
  var node = document.createElement("span");
  node.appendChild(this.getElement());
  return node.innerHTML;
}

ProcessBar.newInstance = function(btns) {
  return new ProcessBar(btns);
}

ProcessBar.newInstanceOut = function(btns) {
  var processBar = ProcessBar.newInstance(btns);
  document.write(processBar);
}

///////////////////   FormButton   ///////////////////

function FormButton(props) {
  this.init(props);
}

FormButton.newInstance = function(props) {
  return new FormButton(props);
}

FormButton.prototype.init = function(props) {
  if (props == null) {
    props = {};
  }
  this.id = props.id;
  this.type = props.type;
  this.visible = (props.visible == undefined) ? true : props.visible;
  this.enabled = (props.enabled == undefined) ? true : props.enabled;
  this.label = props.label;
  this.tooltip = props.tooltip;
  this.onClick = props.onClick;
  this.tabIndex = props.tabIndex;
}

FormButton.prototype.getElement = function() {
  var node = null;
  if (!this.visible) {
    node = null;
  } else {
    node = document.createElement("td");
    if (this.id) {
      node.id = this.id;
    }
    if (this.enabled && this.onClick) {
      node.setAttribute("onClick", this.onClick);
    }
    if (this.tooltip) {
      node.title = this.tooltip;
    }
    if (this.tabIndex) {
      node.tabIndex = this.tabIndex;
    }
    node.height = 18;
    if (this.enabled) {
      node.className = this.type + "Active";
      node.setAttribute("onMouseOver", "this.className='" + this.type + "Rollover'");
      node.setAttribute("onMouseOut", "this.className='" + this.type + "Active'");
      node.setAttribute("onMouseDown", "this.className='" + this.type + "Rollover " + this.type + "Clicked'");
      node.setAttribute("onMouseUp", "this.className='" + this.type + "Rollover'");
    } else {
      node.className = this.type + "Disabled";
    }
    var span = document.createElement("span");
    span.innerHTML = this.label;
    node.appendChild(span);
  }
  return node;
}

///////////////////   FormButtonUsingInput   ///////////////////

function FormButtonUsingInput(props) {
  this.init(props);
}

FormButtonUsingInput.newInstance = function(props) {
  return new FormButtonUsingInput(props);
}

FormButtonUsingInput.prototype.init = function(props) {
  if (props == null) {
    props = {};
  }
  this.id = props.id;
  this.type = props.type;
  this.submit =  (props.submit == undefined) ? false : props.submit;
  this.visible = (props.visible == undefined) ? true : props.visible;
  this.enabled = (props.enabled == undefined) ? true : props.enabled;
  this.label = props.label;
  this.onClick = props.onClick;
  this.tabIndex = props.tabIndex;
}

FormButtonUsingInput.prototype.getElement = function() {
  var node = null;
  if (!this.visible) {
    node = null;
  } else {
    node = document.createElement("td");
    if (this.id) {
      node.id = this.id;
    }
    node.height = 18;

    var input = document.createElement("input");
    if (this.submit) {
      input.type = "submit";
    } else {
      input.type = "button";
    }
    if (this.name) {
      input.name = this.name;
    }
    input.value = this.label;
    
    if (this.tabIndex) {
      input.tabIndex = this.tabIndex;
    }
    if (this.enabled) {
      if (this.onClick) {
        input.setAttribute("onClick", this.onClick);
      }
      input.className = "button " + this.type + "Active";
      input.setAttribute("onMouseOver", "this.className='button " + this.type + "Rollover'");
      input.setAttribute("onMouseOut", "this.className='button " + this.type + "Active'");
    } else {
      input.className = "button " + this.type + "Disabled";
    }

    node.appendChild(input);
  }
  return node;
}

///////////////////   FormButtonBarSpacer   ///////////////////

FormButtonBarSpacer.prototype = new FormButton(); 
FormButtonBarSpacer.prototype.constructor = FormButtonBarSpacer;
FormButtonBarSpacer.superclass = FormButton.prototype;

function FormButtonBarSpacer(props) {
  this.init(props);
}

FormButtonBarSpacer.newInstance = function(props) {
  return new FormButtonBarSpacer(props);
}

FormButtonBarSpacer.prototype.init = function(props) {
  FormButtonBarSpacer.superclass.init.call(this, props);
}

FormButtonBarSpacer.prototype.getElement = function() {
  var node = document.createElement("td");
  node.width = "100%";
  node.innerHTML = "&nbsp;";
  return node;
}

///////////////////   FormButtonBar   ///////////////////

function FormButtonBar(btns) {
  this.btns = btns;
}

FormButtonBar.prototype.getElement = function() {
  var table = document.createElement("table");
  table.cellSpacing = 4;
  table.cellPadding = 0;
  table.border = 0;

  var tr = document.createElement("tr");
  for (var i=0; i<this.btns.length; i++) {
    var btn = this.btns[i];
    if (!btn.visible) {
      continue;
    }
    var btnNode = btn.getElement();
    if (btnNode != null) {
      tr.appendChild(btnNode)
    }
  }
  table.appendChild(tr);

  var span = document.createElement("span");
  if (this.btns.length > 0) {
    if (this.btns[0] instanceof FormButtonUsingInput) {
      span.className = "button";
    } else {
      span.className = "htmlButtons";
    }
  }
  span.appendChild(table);
  return span;
}

FormButtonBar.prototype.toString = function() {
  var node = document.createElement("span");
  node.appendChild(this.getElement());
  return node.innerHTML;
}

FormButtonBar.newInstance = function(btns) {
  return new FormButtonBar(btns);
}

FormButtonBar.newInstanceOut = function(btns) {
  var btnBar = FormButtonBar.newInstance(btns);
  document.write(btnBar);
}