// ----------------------- ProgressBar.js ----------------------------

function ProgressBar (styles) {
  this.id = ProgressBar.cnt;
  ProgressBar.bars[ProgressBar.cnt++] = this;
  if (!styles)
    styles = {};
  var df = ProgressBar.defaults;
  for (var p in df) 
    this[p] = styles[p] ? styles[p] : df[p];
  this.writeHTML();
}
function ProgressBar_writeHTML () {
  this.layerID = 'Bar' + this.id;
  var html = '';
  if (document.all) {
              html += '<SPAN';
    html += ' ID="' + this.layerID + '"';
    html += ' STYLE="';
    if (this.position != 'none')
      html += ' position: ' + this.position + ';'
        + ' left: ' + this.left + ';' 
        + ' top: ' + this.top + ';';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' background-color: ' + this.backgroundColor + ';';
    html += ' border: ' + this.borderWidth + 'px solid' 
      + ' ' + this.borderColor + ';';
    html += '"';
    html += '>';
    html += '<DIV ID="P' + this.layerID + '"';
    html += ' STYLE="';
    html += ' position: absolute;';
    html += 'filter:Glow(Enabled);';
    html += ' width:'+this.width+'px; height:'+this.height+'px;';
    html += ' background-color:blue;';
    html += ' clip: rect(0px, 0px, '+ this.height+'px, 0px)';
    html += '"';
    html += '>';
    html += '<\/DIV>';
    html += '<\/SPAN>';
    }
  else if (document.layers) {
    this.fullWidth = this.width + 2 * this.borderWidth;
    this.fullHeight = this.height + 2 * this.borderWidth;
    html += '<STYLE>';
    html += '#' + this.layerID + ' {';
    if (this.position == 'none')
      html += ' position: relative;'
    else
      html += ' position: ' + this.position + ';'
        + ' left: ' + this.left + 'px;' 
        + ' top: ' + this.top + 'px;';
    html += ' width: ' + (this.fullWidth) + 'px;';
    html += ' height: ' + (this.fullHeight) + 'px;';
    html += ' clip: rect(0 ' + this.fullWidth + ' '
      + this.fullHeight + ' 0);';
    html += ' layer-background-color: ' + this.backgroundColor + ';';
    html += '}';
    html += '#B' + this.layerID + ' {';
    html += ' position: absolute;';
    html += ' width: ' + this.fullWidth + 'px;';
    html += ' height: ' + this.fullHeight + 'px;';
    html += ' clip: rect(0, ' + this.fullWidth + ', '  +  this.fullHeight + ', 0);';
    html += 'layer-background-color: ' + this.borderColor + ';';
    html += '}';
    html += '#I' + this.layerID + ' {';
    html += ' position: absolute;';
    html += ' left: ' + this.borderWidth + 'px;';
    html += ' top: ' + this.borderWidth + 'px;';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' clip: rect(0, ' + this.width + ', ' + this.height + ', 0);';
    html += 'layer-background-color: ' + this.backgroundColor + ';';
    html += '}';
    html += '#P' + this.layerID + ' {';
    html += ' position: absolute;';
    html += ' left: ' + this.borderWidth + 'px;';
    html += ' top: ' + this.borderWidth + 'px;';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' clip: rect(0, 0, ' + this.height + ', 0);';
    html += 'layer-background-color: ' + this.color + ';';
    html += '}';
    html += '<\/STYLE>';
    html += '<SPAN ID="' + this.layerID + '">';
    html += '<DIV ID="B' + this.layerID + '">';
    html += '<\/DIV>';
    html += '<DIV ID="I' + this.layerID + '">';
    html += '<\/DIV>';
    html += '<DIV ID="P' + this.layerID + '">';
    html += '<\/DIV>';
    html += '<\/SPAN>';
  }
  else if (document.getElementById) {
    html += '<DIV';
    html += ' ID="' + this.layerID + '"';
    html += ' STYLE="';
    if (this.position != 'none')
      html += ' position: ' + this.position + ';'
        + ' left: ' + this.left + ';' 
        + ' top: ' + this.top + ';';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' background-color: ' + this.backgroundColor + ';';
    html += ' border: ' + this.borderWidth + 'px solid' 
      + ' ' + this.borderColor + ';';
    html += '"';
    html += '>';
    html += '<DIV ID="P' + this.layerID + '"';
    html += ' STYLE="';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' background-color: ' + this.color + ';';
    html += ' clip: rect(0px, ' + this.width + 'px, auto, 0px);';
    html += ' overflow: hidden;';
    html += '"';
    html += '>';
    html += '<\/DIV>';
    html += '<\/DIV>';
  }
  document.write(html);
}

ProgressBar.prototype.writeHTML = ProgressBar_writeHTML;

function ProgressBar_progressTo (percentage) {
  if (document.all) {
    if (!this.pbar)
      this.pbar = document.all['P' + this.layerID];
    this.pbar.style.clip =
      'rect(0px, ' 
      + Math.floor(percentage * this.width) + 'px,' 
      + this.height+'px, 0px)';
 }
  else if (document.getElementById) {
    if (!this.pbar)
      this.pbar = document.getElementById('P' + this.layerID);
    this.pbar.style.clip = 
      'rect(0px, '
      + Math.floor(this.width - percentage * this.width) + 'px'
      + ', auto, 0px)';
  }
  else if (document.layers) {
    if (!this.pbar)
      this.pbar = document[this.layerID].document['P' + this.layerID];
    this.pbar.clip.width = Math.round(percentage * this.width);
  }
}
function ProgressBar_hide () {
  if (document.layers)
    document[this.layerID].visibility = 'hide';
  else if (document.all)
    document.all[this.layerID].style.visibility = 'hidden';
  else if (document.getElementById)
    document.getElementById(this.layerID).style.visibility = 
      'hidden';
}

ProgressBar.prototype.hide = ProgressBar_hide;
ProgressBar.prototype.progressTo = ProgressBar_progressTo;
ProgressBar.defaults = {
  position: 'none',
  left: 0,
  top: 0,
  width:200,
  height: 25,
  borderColor: 'black',
  borderWidth: 1,
  backgroundColor: 'white',
  color: '#336699'
}
ProgressBar.cnt = 0;
ProgressBar.bars = new Array();