// ********** Form **********
function tdsUiForm(id, left, top, width, height)
{
  var me = this;

  // Objects
  me.children = new Array();

  // Properties
  me.id     = id;
  me.left   = left;
  me.top    = top;
  me.width  = width;
  me.height = height;

  // Methods
  me.write = function()
  {
    var i = 0;
    var id = ' id="'+ me.id +'"';

    document.write('<div' + id + '>');
    for (i = 0; i < me.children.length; i++) {me.children[i].write();}
    document.write('</div>');

    me.setDom();
  }

  me.setDom = function()
  {
    setPosition(me.id, 'absolute');
    setLeft    (me.id, me.left);
    setTop     (me.id, me.top);
    setWidth   (me.id, me.width);
    setHeight  (me.id, me.height);
  }
}




// ********** Form Title **********
function tdsUiFormTitle(parent, id, value, title, toolTip, editable)
{
  var me = this;

  // Objects
  me.parent   = parent;

  // Properties
  me.id       = id;
  me.value    = value;
  me.title    = title;
  me.toolTip  = toolTip;
  me.editable = editable;

  //Color
  me.colorBackground = 'rgb(240,240,240)';
  me.colorTitle      = 'rgb( 55,105,180)';
  me.colorBdrLight   = 'rgb(255,255,255)';
  me.colorBdrDark    = 'rgb(205,205,205)';

  //Text
  me.color      = 'white';
  me.font       = 'arial';
  me.fontSize   = '11pt';
  me.fontWeight = 'bold';

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var idIn  = ' id="'+ me.id +'In"';
    var idOut = ' id="'+ me.id +'Out"';
    var tt    = getToolTip(me.toolTip);

    if (me.editable == true)
    {
      document.write('<div' + idOut + '><div' + idIn + tt + '></div></div>');
      addCaption(me.id+'In', me.value);
    }
    else document.write('<div' + idOut + '><div' + idIn + tt + '>' + me.value + '</div></div>');

    me.setDom();
  }

  me.setDom = function()
  {
    var bColor = me.colorBdrLight + ' ' + me.colorBdrDark + ' ' + me.colorBdrDark + ' ' + me.colorBdrLight;

    setBackgroundColor(me.id+'In',  me.colorTitle);
    setBackgroundColor(me.id+'Out', me.colorBackground);

    setPadding(me.id+'In',  '1px 1px 1px 4px');
    setPadding(me.id+'Out', '3px');

    setBorderStyle(me.id+'Out', 'solid');
    setBorderColor(me.id+'Out', bColor);
    setBorderWidth(me.id+'Out', '1px');

    setWhiteSpace(me.id+'In', 'nowrap');
    setCursor    (me.id+'In', 'default');
    setColor     (me.id+'In', me.color);

    setFont      (me.id+'In', me.font);
    setFontSize  (me.id+'In', me.fontSize);
    setFontWeight(me.id+'In', me.fontWeight);

    setTitle(me.id+'In', me.title);

    if (me.editable == true) setCaption(me.id+'In', me.value);
  }

  me.setValue = function(x)
  {
    if (me.editable == true) 
    {
      me.value = x;
      setCaption(me.id+'In', me.value);
    }
    else alert(me.id + ' is not editable.');
  }
}




// ********** Form Body **********
function tdsUiFormBody(parent, id, height)
{
  var me = this;

  // Objects
  me.parent = parent;
  me.children = new Array();

  // Properties
  me.id     = id;
  me.height = height;

  //Color
  me.colorBackground = 'rgb(240,240,240)';
  me.colorBdrLight   = 'rgb(255,255,255)';
  me.colorBdrDark    = 'rgb(205,205,205)';

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var i = 0;
    var id = 'id="'+ me.id +'"';

    document.write('<div ' + id + '>');
    for (i = 0; i < me.children.length; i++) {me.children[i].write();}
    document.write('</div>');

    me.setDom();
  }

  me.setDom = function()
  {
    var bColor = me.colorBdrLight + ' ' + me.colorBdrDark + ' ' + me.colorBdrDark + ' ' + me.colorBdrLight;    

    setHeight         (me.id, me.height);
    setBackgroundColor(me.id, me.colorBackground);
    setPadding        (me.id, '0px');
    setBorderStyle    (me.id, 'solid');
    setBorderColor    (me.id, bColor);
    setBorderWidth    (me.id, '1px');
  }
}




// ********** Fieldset **********
function tdsUiFieldset(parent, id, value, left, top, width, height, title, toolTip, editable)
{
  var me = this;

  // Objects
  me.parent   = parent;
  me.children = new Array();

  // Properties
  me.id       = id;
  me.value    = value;
  me.left     = left;
  me.top      = top;
  me.width    = width;
  me.height   = height;
  me.title    = title;
  me.toolTip  = toolTip;
  me.editable = editable;

  //Color
  me.colorBackground = 'rgb(240,240,240)';
  me.colorBdrLight   = 'rgb(255,255,255)';
  me.colorBdrDark    = 'rgb(190,190,190)';

  //Text
  me.color      = 'black';
  me.font       = 'arial';
  me.fontSize   = '9pt';
  me.fontWeight = 'normal';

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var i = 0;
    var id    = ' id="'+ me.id +'"';
    var idIn  = ' id="'+ me.id +'In"';
    var idOut = ' id="'+ me.id +'Out"';
    var tt    = getToolTip(me.toolTip);

    if (me.editable == true)
    {
      document.write('<div' + idOut + '><div' + idIn + '><div' + id + tt + '></div>');
      addCaption(me.id, me.value);
    }
    else document.write('<div' + idOut + '><div' + idIn + '><div' + id + tt + '>' + me.value + '</div>');

    for (i = 0; i < me.children.length; i++) {me.children[i].write();}

    document.write('</div></div>');
    me.setDom();
  }

  me.setDom = function()
  {
    var bInColor  = me.colorBdrLight + ' ' + me.colorBdrDark + ' ' + me.colorBdrDark + ' ' + me.colorBdrLight;
    var bOutColor = me.colorBdrDark + ' ' + me.colorBdrLight + ' ' + me.colorBdrLight + ' ' + me.colorBdrDark;

    setWhiteSpace(me.id, 'nowrap');
    setCursor    (me.id, 'default');
    setColor     (me.id, me.color);

    setFont      (me.id, me.font);
    setFontSize  (me.id, me.fontSize);
    setFontWeight(me.id, me.fontWeight);

    setBackgroundColor(me.id,       me.colorBackground);
    setBackgroundColor(me.id+'In',  me.colorBackground);
    setBackgroundColor(me.id+'Out', me.colorBackground);

    setPadding(me.id,       '0px 4px 0px 4px');
    setPadding(me.id+'In',  '0px');
    setPadding(me.id+'Out', '0px');

    setBorderStyle(me.id+'In',  'solid');
    setBorderStyle(me.id+'Out', 'solid');

    setBorderColor(me.id+'In',  bInColor);
    setBorderColor(me.id+'Out', bOutColor);

    setBorderWidth(me.id+'In',  '1px');
    setBorderWidth(me.id+'Out', '1px');

    setPosition(me.id,       'absolute');
    setPosition(me.id+'In',  'relative');
    setPosition(me.id+'Out', 'absolute');

    setLeft (me.id, 4);
    setTop  (me.id, -10);

    setLeft   (me.id+'Out', me.left);
    setTop    (me.id+'Out', me.top);
    setWidth  (me.id+'Out', me.width);
    setHeight (me.id+'In',  me.height - 2);

    setTitle(me.id, me.title);

    if (me.editable == true) setCaption(me.id, me.value);
  }

  me.setValue = function(x)
  {
    if (me.editable == true) 
    {
      me.value = x;
      setCaption(me.id, me.value);
    }
    else alert(me.id + ' is not editable.');
  }

  me.hide = function()
  {
    setVisibility(me.id, 'hidden');
  }

  me.show = function()
  {
    setVisibility(me.id, 'visible');
  }
}




// ********** Button **********
function tdsUiButton(parent, id, value, left, top, width, height, onClick, title, toolTip)
{
  var me = this;

  // Objects
  me.parent = parent;

  // Properties
  me.id      = id;
  me.value   = value;
  me.left    = left;
  me.top     = top;
  me.width   = width;
  me.height  = height;
  me.onClick = onClick;
  me.title   = title;
  me.toolTip = toolTip;

  me.disabled = false;

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var id      = ' id="'+ me.id +'"';
    var type    = ' type="button"';
    var onclick = ' onclick="'+ me.onClick +'"'
    var tt      = getToolTip(me.toolTip);

    document.write('<input' + id + type + onclick + tt + '></input>');
    me.setDom();
  }

  me.setDom = function()
  {
    setPosition(me.id, 'absolute');
    setLeft    (me.id, me.left);
    setTop     (me.id, me.top);
    setWidth   (me.id, me.width);
    setHeight  (me.id, me.height);
    setValue   (me.id, me.value);
    setTitle   (me.id, me.title);
    setDisabled(me.id, me.disabled);
  }

  me.hide = function()
  {
    setVisibility(me.id, 'hidden');
  }

  me.show = function()
  {
    setVisibility(me.id, 'visible');
  }
}




// ********** Check Box **********
function tdsUiCheckBox(parent, id, checked, left, top, onClick, title, toolTip)
{
  var me = this;

  // Objects
  me.parent = parent;

  // Properties
  me.id      = id;
  me.checked = checked;
  me.left    = left;
  me.top     = top;
  me.onClick = onClick;
  me.title   = title;
  me.toolTip = toolTip;

  me.disabled = false;

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var id      = ' id="'+ me.id +'"';
    var type    = ' type="checkbox"';
    var onclick = ' onclick="'+ me.onClick +'"'
    var tt      = getToolTip(me.toolTip);

    document.write('<input' + id + type + onclick + tt + '></input>');
    me.setDom();
  }

  me.setChecked = function(checked)
  {
    me.checked = checked;
    setChecked(me.id, me.checked);
  }

  me.setDom = function()
  {
    setPosition(me.id, 'absolute');
    setLeft    (me.id, me.left);
    setTop     (me.id, me.top);
    setChecked (me.id, me.checked);
    setTitle   (me.id, me.title);
    setDisabled(me.id, me.disabled);
  }

  me.setObj = function()
  {
    me.checked = getChecked(me.id);
  }

  me.change = function()
  {
    if (me.checked == true) me.checked = false;
    else me.checked = true;
    setChecked(me.id, me.checked);
    me.setDom();
  }

  me.hide = function()
  {
    setVisibility(me.id, 'hidden');
  }

  me.show = function()
  {
    setVisibility(me.id, 'visible');
  }
}




// ********** Radio **********
function tdsUiRadio(parent, name, id, checked, left, top, onClick, title, toolTip)
{
  var me = this;

  // Objects
  me.parent = parent;

  // Properties
  me.name    = name;
  me.id      = id;
  me.checked = checked;
  me.left    = left;
  me.top     = top;
  me.onClick = onClick;
  me.title   = title;
  me.toolTip = toolTip;

  me.disabled = false;

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var name    = ' name="'+ me.name +'"';
    var id      = ' id="'+ me.id +'"';
    var type    = ' type="radio"';
    var onclick = ' onclick="'+ me.onClick +'"';
    var tt      = getToolTip(me.toolTip);

    document.write('<input' + name + id + type + onclick + tt + '></input>');
    me.setDom();
  }

  me.setChecked = function(x)
  {
    me.checked = x;
    setChecked(me.id, me.checked);
  }

  me.setDom = function()
  {
    setPosition(me.id, 'absolute');
    setLeft    (me.id, me.left);
    setTop     (me.id, me.top);
    setChecked (me.id, me.checked);
    setTitle   (me.id, me.title);
    setDisabled(me.id, me.disabled);
  }

  me.setObj = function()
  {
    me.checked = getChecked(me.id);
  }

  me.hide = function()
  {
    setVisibility(me.id, 'hidden');
  }

  me.show = function()
  {
    setVisibility(me.id, 'visible');
  }
}




// ********** Label **********
function tdsUiLabel(parent, id, idFor, value, left, top, width, align, title, toolTip, editable)
{
  var me = this;

  // Objects
  me.parent   = parent;

  // Properties
  me.id       = id;
  me.idFor    = idFor;
  me.value    = value;
  me.left     = left;
  me.top      = top;
  me.width    = width;
  me.title    = title;
  me.toolTip  = toolTip;
  me.editable = editable;

  me.disabled = false;

  //Text
  me.align      = align;
  me.color      = 'black';
  me.font       = 'arial';
  me.fontSize   = '9pt';
  me.fontWeight = 'normal';

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var id    = ' id="' + me.id + '"';
    var idfor = ' for="' + me.idFor + '"';
    var tt    = getToolTip(me.toolTip);

    if (me.editable == true)
    {
      document.write('<label' + id + idfor + tt + '></label>');
      addCaption(me.id, me.value);
    }
    else document.write('<label' + id + idfor + tt + '>' + me.value + '</label>');

    me.setDom();
  }

  me.setDom = function()
  {
    setWhiteSpace(me.id, 'nowrap');
    setCursor    (me.id, 'default');
    setAlign     (me.id, me.align);
    setColor     (me.id, me.color);

    setFont      (me.id, me.font);
    setFontSize  (me.id, me.fontSize);
    setFontWeight(me.id, me.fontWeight);

    setBackgroundColor(me.id, 'transparent');
    setPadding        (me.id,  '0px');

    setPosition(me.id, 'absolute');
    setLeft    (me.id, me.left);
    setTop     (me.id, me.top);
    setWidth   (me.id, me.width);

    setTitle(me.id, me.title);

    if (me.editable == true) setCaption(me.id, me.value);

    if (me.disabled == true) setColor(me.id, 'rgb(180,180,180)');;
  }

  me.setValue = function(x)
  {
    if (me.editable == true) 
    {
      me.value = x;
      setCaption(me.id, me.value);
    }
    else alert(me.id + ' is not editable.');
  }

  me.hide = function()
  {
    setVisibility(me.id, 'hidden');
  }

  me.show = function()
  {
    setVisibility(me.id, 'visible');
  }
}




// ********** Select **********
function tdsUiSelect(parent, id, left, top, width, onChange, title, toolTip)
{
  var me = this;

  // Objects
  me.parent   = parent;
  me.children = new Array();

  // Properties
  me.id       = id;
  me.value    = null;
  me.left     = left;
  me.top      = top;
  me.width    = width;
  me.onChange = onChange;
  me.title    = title;
  me.toolTip  = toolTip;

  //Text
  me.color      = 'black';
  me.font       = 'arial';
  me.fontSize   = '9pt';
  me.fontWeight = 'normal';

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var i = 0;
    var id       = ' id="'+ me.id +'"';
    var type     = ' type="button"';
    var onchange = ' onchange="'+ me.onChange +'"';
    var tt       = getToolTip(me.toolTip);

    document.write('<select' + id + type + onchange + tt + '></select>');
    for (i = 0; i < me.children.length; i++) {me.children[i].write();}
    me.setDom();
    me.setObj();
  }

  me.add = function(index, value, text, selected, title)
  {
    me.children.push(new tdsUiOption(me.id, index, value, text, selected, title));
  }

  me.setDom = function()
  {
    setPosition(me.id, 'absolute');
    setLeft    (me.id, me.left);
    setTop     (me.id, me.top);
    setWidth   (me.id, me.width);
    setTitle   (me.id, me.title);

    setColor     (me.id, me.color);
    setFont      (me.id, me.font);
    setFontSize  (me.id, me.fontSize);
    setFontWeight(me.id, me.fontWeight);
  }

  me.setObj = function()
  {
    me.value = getValue(me.id);
  }

  me.change = function()
  {
    me.value = getValue(me.id);
  }

  me.hide = function()
  {
    setVisibility(me.id, 'hidden');
  }

  me.show = function()
  {
    setVisibility(me.id, 'visible');
  }
}




// ********** Option **********
function tdsUiOption(id, index, value, text, selected, title)
{
  var me = this;

  // Properties
  me.id       = id;
  me.index    = index;
  me.value    = value;
  me.text     = text;
  me.selected = selected;
  me.title    = title;

  // Methods
  me.write = function()
  {
    document.getElementById(me.id).options[me.index] = new Option();
    me.setDom();
  }

  me.setDom = function()
  {
    var o = document.getElementById(me.id).options[me.index];
    o.value    = me.value;
    o.text     = me.text;
    o.selected = me.selected;
    o.title    = me.title;
  }
}




// ********** Text **********
function tdsUiText(parent, id, value, left, top, width, align, title, toolTip)
{
  var me = this;

  // Objects
  me.parent   = parent;

  // Properties
  me.id       = id;
  me.value    = value;
  me.left     = left;
  me.top      = top;
  me.width    = width;
  me.height   = 22;
  me.title    = title;
  me.toolTip  = toolTip;

  me.disabled = false;
  me.readOnly = false;

  //Text
  me.align      = align;
  me.color      = 'black';
  me.font       = 'arial';
  me.fontSize   = '10pt';
  me.fontWeight = 'normal';

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var id   = ' id="' + me.id + '"';
    var type = ' type="text"';
    var tt   = getToolTip(me.toolTip);

    document.write('<input' + id + type + tt + '></input>');
    me.setDom();
  }

  me.setDom = function()
  {
//    setWhiteSpace(me.id, 'nowrap');
    setCursor    (me.id, 'default');
    setAlign     (me.id, me.align);
//    setColor     (me.id, me.color);

    setFont      (me.id, me.font);
    setFontSize  (me.id, me.fontSize);
    setFontWeight(me.id, me.fontWeight);

//    setBackgroundColor(me.id, 'purple');
//    setPadding        (me.id,  '0px');

    setPosition(me.id, 'absolute');
    setLeft    (me.id, me.left);
    setTop     (me.id, me.top);
    setWidth   (me.id, me.width);
    setHeight  (me.id, me.height);

    setValue   (me.id, me.value);
    setTitle   (me.id, me.title);

    setDisabled(me.id, me.disabled);
    setReadOnly(me.id, me.readOnly);
  }

  me.setValue = function(x)
  {
    me.value = x;
    setValue (me.id, me.value);
  }

  me.getValue = function()
  {
    me.value = getValue (me.id);
    return me.value;
  }

  me.hide = function()
  {
    setVisibility(me.id, 'hidden');
  }

  me.show = function()
  {
    setVisibility(me.id, 'visible');
  }
}




// ********** TextArea **********
function tdsUiTextArea(parent, id, value, left, top, width, height, align, title, toolTip)
{
  var me = this;

  // Objects
  me.parent   = parent;

  // Properties
  me.id       = id;
  me.value    = value;
  me.left     = left;
  me.top      = top;
  me.width    = width;
  me.height   = height;
  me.title    = title;
  me.toolTip  = toolTip;

  me.disabled = false;

  //Text
  me.align      = align;
  me.color      = 'black';
  me.font       = 'arial';
  me.fontSize   = '9pt';
  me.fontWeight = 'normal';

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var id    = ' id="' + me.id + '"';
    var tt    = getToolTip(me.toolTip);

    document.write('<textarea' + id + tt + '>' + me.value + '</textarea>');

    me.setDom();
  }

  me.setDom = function()
  {
//    setWhiteSpace(me.id, 'nowrap');
    setCursor    (me.id, 'default');
    setAlign     (me.id, me.align);
//    setColor     (me.id, me.color);

    setFont      (me.id, me.font);
    setFontSize  (me.id, me.fontSize);
    setFontWeight(me.id, me.fontWeight);

//    setBackgroundColor(me.id, 'purple');
//    setPadding        (me.id,  '0px');

    setPosition(me.id, 'absolute');
    setLeft    (me.id, me.left);
    setTop     (me.id, me.top);
    setWidth   (me.id, me.width);
    setHeight  (me.id, me.height);

    setValue   (me.id, me.value);
    setTitle   (me.id, me.title);

    setDisabled(me.id, me.disabled);
    setReadOnly(me.id, me.readOnly);
  }

  me.setValue = function(x)
  {
    me.value = x;
    setValue (me.id, me.value);
  }

  me.getValue = function()
  {
    me.value = getValue (me.id);
    return me.value;
  }

  me.hide = function()
  {
    setVisibility(me.id, 'hidden');
  }

  me.show = function()
  {
    setVisibility(me.id, 'visible');
  }
}




// ********** Table **********
function tdsUiTable(parent, id, left, top)
{
  var me = this;

  // Objects
  me.parent = parent;
  me.row    = new Array();

  // Properties
  me.id   = id;
  me.left = left;
  me.top  = top;

  //Color
  me.colorBdrLight = 'rgb(255,255,255)';
  me.colorBdrDark  = 'rgb(190,190,190)';

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var i  = 0;
    var id = ' id="'+ me.id +'"';

    document.write('<table' + id + 'cellspacing=0>');
    for (i = 0; i < me.row.length; i++) {me.row[i].write();}
    document.write('</table>');
    me.setDom();
  }

  me.addRow = function(index)
  {
    me.row.push(new tdsUiTableRow(me, index));
  }

  me.setDom = function()
  {
    var bColor = me.colorBdrDark + ' ' + me.colorBdrLight + ' ' + me.colorBdrLight + ' ' + me.colorBdrDark;

    setPadding    (me.id, '0px');
    setBorderStyle(me.id, 'solid');
    setBorderColor(me.id, bColor);
    setBorderWidth(me.id, '1px');

    setPosition(me.id, 'absolute');
    setLeft    (me.id, me.left);
    setTop     (me.id, me.top);
  }

  me.hide = function()
  {
    setVisibility(me.id, 'hidden');
  }

  me.show = function()
  {
    setVisibility(me.id, 'visible');
  }
}




// ********** Table Row **********
function tdsUiTableRow(parent, index)
{
  var me = this;

  // Objects
  me.parent = parent;
  me.cell  = new Array();

  // Properties
  me.id    = me.parent.id + 'R' + index;
  me.index = index;

  // Methods
  me.write = function()
  {
    var i  = 0;
    var id = ' id="'+ me.id +'"';

    document.write('<tr' + id + '>');
    for (i = 0; i < me.cell.length; i++) {me.cell[i].write();}
    document.write('</tr>');
  }

  me.addCell = function(index, type, editable, align, value, width, colSpan, rowSpan, title, toolTip)
  {
    me.cell.push(new tdsUiTableRowCell(me, index, type, editable, align, value, width, colSpan, rowSpan, title, toolTip));
  }
}




// ********** Table Row Cell **********
function tdsUiTableRowCell(parent, index, type, editable, align, value, width,  colSpan, rowSpan, title, toolTip)
{
  var me = this;

  // Objects
  me.parent = parent;

  // Properties
  me.id       = me.parent.id + 'C' + index;
  me.type     = type;
  me.editable = editable;
  me.colSpan  = colSpan;
  me.rowSpan  = rowSpan;
  me.value    = value;
  me.width    = width;
  me.title    = title;
  me.toolTip  = toolTip;

  //Color
  me.colorBackground = 'rgb(255,255,255)';
  me.colorBdrLight   = 'rgb(255,255,255)';
  me.colorBdrDark    = 'rgb(190,190,190)';

  //Text
  me.align      = align;
  me.color      = 'black';
  me.font       = 'arial';
  me.fontSize   = '10pt';
  me.fontWeight = 'normal';

  // Methods
  me.write = function()
  {
    var id = ' id="'+ me.id +'"';
    var tt = getToolTip(me.toolTip);

    if (me.editable == true)
    {
      document.write('<td' + id + tt + '></td>');
      addCaption(me.id, me.value);
    }
    else document.write('<td' + id + tt + '>' + me.value + '</td>');

    me.setDom();
  }

  me.setDom = function()
  {
    setWidth   (me.id, me.width);
    setTitle   (me.id, me.title);

    if (me.type == 0) me.colorBackground = 'rgb(240,240,240)';
    if (me.type == 1) me.colorBackground = 'rgb(255,255,255)';

    var bColor = me.colorBdrLight + ' ' + me.colorBdrDark + ' ' + me.colorBdrDark + ' ' + me.colorBdrLight;    

    setBackgroundColor(me.id, me.colorBackground);
    setPadding        (me.id, '1px');
    setBorderStyle    (me.id, 'solid');
    setBorderColor    (me.id, bColor);
    setBorderWidth    (me.id, '1px');

    setWhiteSpace(me.id, 'nowrap');
    setCursor    (me.id, 'default');
    setAlign     (me.id, me.align);
    setColor     (me.id, me.color);

    setFont      (me.id, me.font);
    setFontSize  (me.id, me.fontSize);
    setFontWeight(me.id, me.fontWeight);

    setColSpan(me.id, me.colSpan);
    setRowSpan(me.id, me.rowSpan);
  }

  me.setValue = function(x)
  {
    if (me.editable == true) 
    {
      me.value = x;
      setCaption(me.id, me.value);
    }
    else alert(me.id + ' is not editable.');
  }
}




// ********** Tab **********
function tdsUiTab(parent, id, left, top, width, height)
{
  var me = this;

  // Objects
  me.parent = parent;
  me.row    = new Array();

  // Properties
  me.id     = id;
  me.left   = left;
  me.top    = top;
  me.width  = width;
  me.height = height;
  me.rowA   = 0;
  me.tabA   = 0;

  me.parent.children.push(me);

  // Methods
  me.write = function()
  {
    var i  = 0;
    var id = ' id="'+ me.id +'"';

    document.write('<div' + id + '>');
    for (i = 0; i < me.row.length; i++) {me.row[i].write();}
    document.write('</div>');
    me.setDom();
    me.row[me.rowA].tab[me.tabA].activate();
  }

  me.addRow = function(index)
  {
    me.row.push(new tdsUiTabRow(me, index));
  }

  me.hide = function()
  {
    var i  = 0;
    for (i = 0; i < me.row.length; i++) {me.row[i].hide();}
    setVisibility(me.id, 'hidden');
  }

  me.show = function()
  {
    var i  = 0;
    for (i = 0; i < me.row.length; i++) {me.row[i].show();}
    setVisibility(me.id, 'visible');
    me.row[me.rowA].tab[me.tabA].activate();
  }

  me.setDom = function()
  {
    setBackgroundColor(me.id, 'transparent');
    setPadding        (me.id, '0px');

    setPosition(me.id, 'absolute');
    setLeft    (me.id, me.left);
    setTop     (me.id, me.top);
    setWidth   (me.id, me.width);
    setHeight  (me.id, me.height);
  }

  me.setIndexA = function()
  {
    var i = 0;
    for (i = 0; i < me.row.length; i++) {me.row[i].setIndexA();}
  }

  me.deactivate = function()
  {
    var i = 0;
    for (i = 0; i < me.row.length; i++) {me.row[i].deactivate();}
  }
}




// ********** Tab Row **********
function tdsUiTabRow(parent, index)
{
  var me = this;

  // Objects
  me.parent = parent;
  me.tab  = new Array();

  // Properties
  me.id    = me.parent.id + 'R' + index;
  me.index = index;
  me.indexA= index;

  // Methods
  me.write = function()
  {
    var i  = 0;
    for (i = 0; i < me.tab.length; i++) {me.tab[i].write();}
  }

  me.addTab = function(index, editable, value, width, title, toolTip)
  {
    me.tab.push(new tdsUiTabRowTab(me, index, editable, value, width, title, toolTip));
  }

  me.hide = function()
  {
    var i  = 0;
    for (i = 0; i < me.tab.length; i++) {me.tab[i].hide();}
  }

  me.show = function()
  {
    var i  = 0;
    for (i = 0; i < me.tab.length; i++) {me.tab[i].show();}
  }

  me.deactivate = function()
  {
    var i = 0;
    for (i = 0; i < me.tab.length; i++) {me.tab[i].deactivate();}
  }

  me.setIndexA = function()
  {
    if (me.index == me.parent.rowA) me.indexA = me.parent.row.length - 1;
    else if (me.index <  me.parent.rowA) me.indexA = me.index;
    else if (me.index >  me.parent.rowA) me.indexA = me.index - 1;
  }
}




// ********** Tab Row Tab **********
function tdsUiTabRowTab(parent, index, editable, value, width, title, toolTip)
{
  var me = this;

  // Objects
  me.parent = parent;
  me.children = new Array();

  // Properties
  me.index = index;
  me.id   = me.parent.id + 'T' + me.index;
  me.idI  = me.id +'I';
  me.idO  = me.id +'O';
  me.idIA = me.id +'IA';
  me.idOA = me.id +'OA';

  me.editable = editable;
  me.value    = value;
  me.title    = title;
  me.toolTip  = toolTip;

  me.height  = 0;
  me.heightT = 20;
  me.heightTA= 23;

  me.width  = 0;
  me.widthT = width;
  me.widthTA= width + 8;

  me.left  = 0;
  me.leftT = 0;
  me.leftTA= 0;

  me.top  = 0;
  me.topT = 0;
  me.topTA= 0;


  //Color
  me.colorBackground = 'rgb(255,255,255)';
  me.colorBdrLight   = 'rgb(255,255,255)';
  me.colorBdrDark    = 'rgb(190,190,190)';

  //Text
  me.color      = 'black';
  me.font       = 'arial';
  me.fontSize   = '10pt';
  me.fontWeight = 'normal';

  // Methods
  me.write = function()
  {
    var o = me.parent.parent.id + '.row[' + me.parent.index + '].tab[' + me.index + ']';
    var i = 0;
    var id   = ' id="'+ me.id   +'"';
    var idi  = ' id="'+ me.idI  +'"';
    var ido  = ' id="'+ me.idO  +'"';
    var idia = ' id="'+ me.idIA +'"';
    var idoa = ' id="'+ me.idOA +'"';
    var omOver  = 'onmouseover="' + o + '.setOver();"';
    var omOut   = 'onmouseout ="' + o + '.setOut();"';
    var onClick = 'onclick    ="' + o + '.activate();"';
    var tt = getToolTip(me.toolTip);

    if (me.editable == true)
    {
      document.write('<div'+ido+omOver+omOut+onClick+'><div'+idi+tt+'></div></div>');
      document.write('<div'+idoa+'><div'+idia+tt+'></div></div>');

      addCaption(me.idI,  me.value);
      addCaption(me.idIA, me.value);
    }
    else
    {
      document.write('<div'+ido+omOver+omOut+onClick+'><div'+idi+tt+'>'+ me.value +'</div></div>');
      document.write('<div'+idoa+'><div'+idia+tt+'>'+ me.value +'</div></div>');
    }
    document.write('<div' + id + '>');
    for (i = 0; i < me.children.length; i++) {me.children[i].write();}
    document.write('</div>');

    me.setLeftT();
    me.setLeftTA();
    me.setTopT();
    me.setTopTA();
    me.setLocation();

    me.setDom();
  }

  me.setDom = function()
  {
    setTitle(me.idI,  me.title);
    setTitle(me.idIA, me.title);

    setAlign(me.idI, 'center');
    setAlign(me.idIA,'center');

    setColor(me.idI, 'black');
    setColor(me.idIA,'black');

    setFont(me.idI, 'arial');
    setFont(me.idIA,'arial');

    setFontSize(me.idI, '9pt');
    setFontSize(me.idIA,'9pt');

    setWhiteSpace(me.idI, 'nowrap');
    setWhiteSpace(me.idIA,'nowrap');

    setCursor(me.idI, 'default');
    setCursor(me.idIA,'default');

    setBackgroundColor(me.id,  'rgb(252,252,252)');
    setBackgroundColor(me.idI, 'rgb(245,245,245)');
    setBackgroundColor(me.idO, 'rgb(245,245,245)');
    setBackgroundColor(me.idIA,'rgb(252,252,252)');
    setBackgroundColor(me.idOA,'rgb(252,252,252)');

    setPadding(me.id,  '0px');
    setPadding(me.idI, '0px');
    setPadding(me.idO, '0px');
    setPadding(me.idIA,'0px');
    setPadding(me.idOA,'0px');

    setBorderStyle(me.id,  'solid');
    setBorderStyle(me.idI, 'solid');
    setBorderStyle(me.idO, 'solid');
    setBorderStyle(me.idIA,'solid');
    setBorderStyle(me.idOA,'solid');

    setBorderColor(me.id,  'rgb(145,155,155)');
    setBorderColor(me.idI, 'rgb(250,250,250) rgb(230,230,230) rgb(240,240,240) rgb(240,240,240)');
    setBorderColor(me.idO, 'rgb(145,165,180) rgb(145,165,180) rgb(235,235,235) rgb(145,165,180)');
    setBorderColor(me.idIA,'rgb(255,200, 60) rgb(245,245,245) rgb(252,252,252) rgb(245,245,245)');
    setBorderColor(me.idOA,'rgb(230,140, 45) rgb(145,155,155) rgb(  0,  0,  0) rgb(145,155,155)');

    setBorderWidth(me.id,  '1px');
    setBorderWidth(me.idI, '2px 1px 1px 1px');
    setBorderWidth(me.idO, '1px');
    setBorderWidth(me.idIA,'2px 1px 1px 1px');
    setBorderWidth(me.idOA,'1px 1px 0px 1px');

    setPosition(me.id,  'absolute');
    setPosition(me.idO, 'absolute');
    setPosition(me.idOA,'absolute');

    setLeft(me.id,  me.left);
    setLeft(me.idO, me.leftT);
    setLeft(me.idOA,me.leftTA);

    setTop(me.id,  me.top);
    setTop(me.idO, me.topT);
    setTop(me.idOA,me.topTA);

    setWidth(me.id,  me.width);
    setWidth(me.idO, me.widthT);
    setWidth(me.idOA,me.widthTA);

    setHeight(me.id,  me.height);
    setHeight(me.idO, me.heightT);
    setHeight(me.idOA,me.heightTA);
  }

  me.setValue = function(x)
  {
    if (me.editable == true) 
    {
      me.value = x;
      setCaption(me.idI,  me.value);
      setCaption(me.idIA, me.value);
    }
    else alert(me.id + ' is not editable.');
  }

  me.setLeftT = function()
  {
    var i = me.index - 1
    if (me.index ==  0) me.leftT = 2;
    else me.leftT = 3 + me.parent.tab[i].leftT + me.parent.tab[i].widthT;
  }

  me.setLeftTA = function()
  {
    var i = me.parent.tab.length - 1;
         if (me.index ==  0) me.leftTA = 0;
    else if (me.index ==  i) me.leftTA = me.leftT - 6;
    else                     me.leftTA = me.leftT - 4;
  }

  me.setTopT = function()
  {
    var i = me.parent.parent.row.length;
    if (i == 1) me.topT = 2;
    else if (i >  1) me.topT = 20 * me.parent.indexA;
  }

  me.setTopTA = function()
  {
    var i = me.parent.parent.row.length;
         if (i == 1) me.topTA = 0;
    else if (i >  1) me.topTA = 20 * (i - 1) - 2;
  }

  me.setLocation = function()
  {
    var i = me.parent.parent.row.length;
    if (i == 1) 
    {
      me.top    = 22;
      me.height = me.parent.parent.height - 24;
    }
    else if (i > 1) 
    {
      me.top    = 20 * i;
      me.height = me.parent.parent.height - me.top - 2;
    }
    me.width = me.parent.parent.width - 2;
  }

  me.setOver = function()
  {
    setBorderColor(me.idI, 'rgb(255,200,60) rgb(230,230,230) rgb(240,240,240) rgb(240,240,240)');
    setBorderColor(me.idO, 'rgb(230,140,45) rgb(157,177,187) rgb(235,235,235) rgb(157,177,187)');
  }

  me.setOut = function()
  {
    setBorderColor(me.idI, 'rgb(250,250,250) rgb(230,230,230) rgb(240,240,240) rgb(240,240,240)');
    setBorderColor(me.idO, 'rgb(145,165,180) rgb(145,165,180) rgb(235,235,235) rgb(145,165,180)');
  }

  me.activate = function()
  {
    me.parent.parent.rowA = me.parent.index;
    me.parent.parent.tabA = me.index;
    me.parent.parent.setIndexA();
    me.parent.parent.deactivate();

    setZ(me.id,  me.parent.indexA + 1);
    setZ(me.idOA,me.parent.indexA + 2);

    setVisibility(me.id,   'visible');
    setVisibility(me.idOA, 'visible');

    for (i = 0; i < me.children.length; i++) {me.children[i].show();}
  }

  me.deactivate = function()
  {
    me.setTopT();
    setTop(me.idO, me.topT);
    setZ  (me.idO, me.parent.indexA);
    setVisibility(me.id,   'hidden');
    setVisibility(me.idOA, 'hidden');

    for (i = 0; i < me.children.length; i++) {me.children[i].hide();}
  }

  me.hide = function()
  {
    var i  = 0;
    for (i = 0; i < me.children.length; i++) {me.children[i].hide();}
    setVisibility(me.id,   'hidden');
    setVisibility(me.idO,  'hidden');
    setVisibility(me.idOA, 'hidden');
  }

  me.show = function()
  {
    var i  = 0;
    for (i = 0; i < me.children.length; i++) {me.children[i].show();}
    setVisibility(me.id,   'visible');
    setVisibility(me.idO,  'visible');
    setVisibility(me.idOA, 'visible');
  }
}




// ********** Tool Tip **********
function tdsUiToolTip(id, shadow, width, height, timeDisplay, caption, text)
{
  var me = this;

  // Objects
  me.shadow = shadow;

  // Properties
  me.id  = id;
  me.idC = id + 'C';
  me.idT = id + 'T';

  me.caption        = caption;
  me.text           = text;
  me.textAreaHeight = height;
  me.textAreaWidth  = width;

  me.isOver = false;
  me.opacity     = 90;
  me.timeWait    = 500;
  me.timeDisplay = timeDisplay;
  me.timeFadeIn  = 300;
  me.timeFadeOut = 300;
  me.timeIsOver  = 0;
  me.timeElapsed = 0;

  me.top    = 0;
  me.left   = 0;
  me.height = height + 24;
  me.width  = width  + 5;

  me.winX = 0;
  me.winY = 0;
  me.mouseX = 0;
  me.mouseY = 0;

  write();

  // Methods Private
  function write()
  {
    var id  = ' id="' + me.id  + '"';
    var idC = ' id="' + me.idC + '"';
    var idT = ' id="' + me.idT + '"';

    document.write('<table'+id+'><tr><td'+idC+'>'+me.caption+'</td></tr><tr><td'+idT+'>'+me.text+'</td></tr></table>');

    setBorder     (me.id, 0);
    setCellPadding(me.id, 0);
    setCellSpacing(me.id, 0);

    setPosition    (me.id, 'absolute');
    setVisibility  (me.id, 'hidden');
    setTop         (me.id, me.top);
    setLeft        (me.id, me.left);
    setHeight      (me.id, me.height - 5);
    setWidth       (me.id, me.width - 5);

    setWhiteSpace     (me.idC, 'nowrap');
    setCursor         (me.idC, 'default');
    setBackgroundColor(me.idC, 'rgb(55,105,180)');
    setBorderColor    (me.idC, 'rgb(55,105,180)');
    setBorderStyle    (me.idC, 'solid');
    setBorderWidth    (me.idC, '1px');
    setPadding        (me.idC, '0px 2px 0px 4px');
    setOpacity        (me.idC, 0);
    setFont           (me.idC, 'arial');
    setFontSize       (me.idC, '10pt');
    setFontWeight     (me.idC, 'bold');
    setColor          (me.idC, 'white');

    setCursor         (me.idT, 'default');
    setBackgroundColor(me.idT, 'rgb(235,240,250)');
    setBorderColor    (me.idT, 'rgb( 55,105,180)');
    setBorderStyle    (me.idT, 'solid');
    setBorderWidth    (me.idT, '1px');
    setPadding        (me.idT, '0px 2px 0px 4px');
    setOpacity        (me.idT, 0);
    setFont           (me.idT, 'arial');
    setFontSize       (me.idT, '8pt');
    setFontWeight     (me.idT, 'normal');
    setColor          (me.idT, 'rgb(15,65,120)');
    setHeight         (me.idT, me.textAreaHeight);

    setZ(me.id, 100000);
    setZ(me.shadow.id, 100000);
  }

  // Methods Public
  me.show = function(e)
  {
    me.isOver = true;
    me.mouseX = getMouseX(e);
    me.mouseY = getMouseY(e);
    me.winX = getWinWidth()  - 21;
    me.winY = getWinHeight() - 21;
    me.timeIsOver = new Date().getTime();
    
    setTimeout(me.id + '.show1()', me.timeWait);
  }

  me.show1 = function()
  {
    if (me.isOver == true)
    {
      var t = me.mouseY + me.height + 10;
      var l = me.mouseX + me.width  + 10;

           if (t >  me.winY) me.top = me.mouseY - me.height - 15;
      else if (t <= me.winY) me.top = me.mouseY + 20;
           if (l >  me.winX) me.left = me.winX - me.width;
      else if (l <= me.winX) me.left = l - me.width;
    
      setTop        (me.id, me.top);
      setLeft       (me.id, me.left);
      setVisibility (me.id, 'visible');

      me.shadow.setTop   (me.top);
      me.shadow.setLeft  (me.left);
      me.shadow.setHeight(me.height-14);
      me.shadow.setWidth (me.width-14);
      me.shadow.show();

      fade(me.idC, 0, me.opacity, me.timeFadeIn);
      fade(me.idT, 0, me.opacity, me.timeFadeIn);

      if (me.timeDisplay > 0) setTimeout(me.id + '.hideExpire()', me.timeFadeIn + me.timeDisplay);
    }
  }

  me.hide = function()
  {
    if (me.isOver == true)
    {
      me.timeIsOver  = 0;
      me.timeElapsed = 0;

      me.shadow.hide();
      fade(me.idC, me.opacity, 0, me.timeFadeOut);
      fade(me.idT, me.opacity, 0, me.timeFadeOut);
      setTimeout(me.id + '.hide1()', me.timeFadeOut);
    }
    me.isOver = false;
  }

  me.hide1 = function()
  {
    me.top  = 0;
    me.left = 0;
    setTop       (me.id, me.top);
    setLeft      (me.id, me.left);
    setVisibility(me.id, 'hidden');
    setOpacity   (me.idC, 0);
    setOpacity   (me.idT, 0);
  }

  me.hideExpire = function()
  {
    me.timeElapsed = new Date().getTime() - me.timeIsOver;
    if (me.timeElapsed >= (me.timeFadeIn + me.timeDisplay)) me.hide();
  }
}



// ********** Shadow **********
function tdsUiShadow(id, left, top, width, height)
{
  // Objects
  var me = this;

  // Properties
  me.id     = id;
  me.left   = left;
  me.top    = top;
  me.width  = width;
  me.height = height;

  tS();
   rS();
    c('C1', 7, 7);
    c('C2', 5, 1, '', '', '', 4);
   rE();
   rS();
    c('TR11', 2, 1, 'rgb(80,80,80)', 10);
    c('TR12', 3, 1);
   rE();
   rS();
    c('TR21', 1, 1, 'rgb(60,60,60)', 20);
    c('TR22', 3, 1, 'rgb(80,80,80)', 10);
    c('TR23', 1, 1);
   rE();
   rS();
    c('TR31', 1, 1, 'rgb(40,40,40)', 30);
    c('TR32', 2, 1, 'rgb(60,60,60)', 20);
    c('TR33', 1, 1, 'rgb(80,80,80)', 10);
    c('TR34', 1, 1);
   rE();
   rS();
    c('TR41', 1, 1, 'rgb(20,20,20)', 40);
    c('TR42', 1, 1, 'rgb(40,40,40)', 30);
    c('TR43', 1, 1, 'rgb(60,60,60)', 20);
    c('TR44', 2, 1, 'rgb(80,80,80)', 10);
   rE();
   rS();
    c('TR51', 1, 1, 'rgb( 0, 0, 0)', 50);
    c('TR52', 1, 1, 'rgb(20,20,20)', 40);
    c('TR53', 1, 1, 'rgb(40,40,40)', 30);
    c('TR54', 1, 1, 'rgb(60,60,60)', 20);
    c('TR55', 1, 1, 'rgb(80,80,80)', 10);
   rE();
   rS();
    c('R1', 1, 1, 'rgb( 0, 0, 0)', 50, '', 1);
    c('R2', 1, 1, 'rgb(20,20,20)', 40);
    c('R3', 1, 1, 'rgb(40,40,40)', 30);
    c('R4', 1, 1, 'rgb(60,60,60)', 20);
    c('R5', 1, 1, 'rgb(80,80,80)', 10);
   rE();
   rS();
    c('C3', 1, 5, '', '', 4);
    c('BL11', 1, 1, 'rgb(80,80,80)', 10, 1);
    c('BL12', 1, 1, 'rgb(60,60,60)', 20, 1);
    c('BL13', 1, 1, 'rgb(40,40,40)', 30, 1);
    c('BL14', 1, 1, 'rgb(20,20,20)', 40, 1);
    c('BL15', 1, 1, 'rgb( 0, 0, 0)', 50, 1);
    c('B1',   1, 1, 'rgb( 0, 0, 0)', 50, 1);
    c('BR11', 1, 1, 'rgb( 0, 0, 0)', 50, 1);
    c('BR12', 1, 1, 'rgb(20,20,20)', 40, 1);
    c('BR13', 1, 1, 'rgb(40,40,40)', 30, 1);
    c('BR14', 1, 1, 'rgb(60,60,60)', 20, 1);
    c('BR15', 1, 1, 'rgb(80,80,80)', 10, 1);
   rE();
   rS();
    c('BL21', 2, 1, 'rgb(80,80,80)', 10);
    c('BL22', 1, 1, 'rgb(60,60,60)', 20);
    c('BL23', 1, 1, 'rgb(40,40,40)', 30);
    c('B2',   3, 1, 'rgb(20,20,20)', 40);
    c('BR21', 1, 1, 'rgb(40,40,40)', 30);
    c('BR22', 1, 1, 'rgb(60,60,60)', 20);
    c('BR23', 2, 1, 'rgb(80,80,80)', 10);
   rE();
   rS();
    c('BL31', 1, 1);
    c('BL32', 1, 1, 'rgb(80,80,80)', 10);
    c('BL33', 2, 1, 'rgb(60,60,60)', 20);
    c('B3',   3, 1, 'rgb(40,40,40)', 30);
    c('BR31', 2, 1, 'rgb(60,60,60)', 20);
    c('BR32', 1, 1, 'rgb(80,80,80)', 10);
    c('BR33', 1, 1);
   rE();
   rS();
    c('BL41', 1, 1);
    c('BL42', 3, 1, 'rgb(80,80,80)', 10);
    c('B4',   3, 1, 'rgb(60,60,60)', 20);
    c('BR41', 3, 1, 'rgb(80,80,80)', 10);
    c('BR42', 1, 1);
   rE();
   rS();
    c('BL51', 3, 1);
    c('B5',   5, 1, 'rgb(80,80,80)', 10);
    c('BR51', 3, 1);
   rE();
  tE();

  setPosition  (me.id, 'absolute');
  setVisibility(me.id, 'hidden');
  setLeft      (me.id, 0);
  setTop       (me.id, 0);

  // Methods Private
  function tS() {document.write('<table id="' + me.id + '" border=0 cellspacing=0 cellpadding=0>');}
  function tE() {document.write('</table>');}

  function rS() {document.write('<tr>');}
  function rE() {document.write('</tr>');}

  function c(id, CS, RS, C, O, W, H)
  {
    var idc = me.id + id;
    document.write('<td id="' + idc + '" ></td>');
    setColSpan        (idc, CS);
    setRowSpan        (idc, RS);
    setBackgroundColor(idc, C);
    setOpacity        (idc, O);
    setWidth          (idc, W);
    setHeight         (idc, H);
  }

  // Methods Public
  me.setHeight = function(x)
  {
    me.height = x;
    setHeight(me.id + 'R1', me.height);
  }
  me.setWidth = function(x)
  {
    me.width = x;
    setWidth(me.id + 'B1', me.width);
  }
  me.setLeft = function(x)
  {
    me.left = x;
    setLeft(me.id, me.left);
  }
  me.setTop = function(x)
  {
    me.top = x;
    setTop(me.id, me.top);
  }

  me.hide = function()
  {
    setVisibility(me.id, 'hidden');

    me.setHeight(25);
    me.setWidth(25);
    me.setTop(0);
    me.setLeft(0);
  }
  me.show = function()
  {
    setVisibility(me.id, 'visible');
  }
}