function xyBound(min,max){
  this._min = min || 0;
  this._max = max || 100;
  this._value = this._min;
}
xyBound.prototype.setValue = function(n){
  var retval = false;
  if( this._min <= n && this._max >= n && n != this._value){
    this._value = n;
    if("function" == typeof this.onValueChanged){
      this.onValueChanged();
    }
    retval = true;
  }
  return retval;
}

xyBound.prototype.getPercentage = function(){
  var l = this._max - this._min;
  if(0 < l ){
    return (this._value - this._min) / l * 100;
  }
}

xyBound.prototype.getValue = function(){
  return this._value;
}

xyBound.prototype.getMax = function(){
  return this._max;
}
xyBound.prototype.getMin = function(){
  return this._min;
}

xyBound.prototype.onValueChanged = null;

function xyProgressBar(o, cn,min, max, minPixel){
  this.xyBound = xyBound;
  this.readyState = 1;
  this.minPixel = minPixel || 1;
  this.xyBound(min, max);
  this.element = o;
  this.leftElement = document.createElement("DIV");
  this.centerElement = document.createElement("DIV");
  this.rightElement = document.createElement("DIV");
  this.moveElement = document.createElement("DIV");
  this.centerElement.appendChild(this.moveElement);
  this.leftElement.className = cn + "Left";
  this.moveElement.className = cn + "Move";
  this.centerElement.className = cn + "Center";
  this.rightElement.className = cn + "Right";
  this.element.appendChild(this.centerElement);
  this.element.appendChild(this.leftElement);
  this.element.appendChild(this.rightElement);
  this.cb = 0;
  this.className = cn;
}
xyProgressBar.prototype = new xyBound;

xyProgressBar.prototype.init = function(){
    this.blockCount = Math.ceil(this.centerElement.offsetWidth / this.minPixel);
    this.readyState = 4;
}
xyProgressBar.prototype.onValueChanged = function(){
  if(4 == this.readyState){
    var l = Math.ceil(this.getPercentage() * this.blockCount / 100);
    if(l != this.cb){
      this.moveElement.style.left = l * this.minPixel;
      this.cb = l;
    }
  }else{
    this.init();
  }
}