var TYPE_CLOSE   = "close";
var TYPE_LEFT    = "left";
var TYPE_RIGHT   = "right";
var TYPE_DRIGHT  = "dright";
var TYPE_DLEFT   = "dleft";
var TYPE_UP      = "up";
var TYPE_DOWN    = "down";
var TYPE_BIGGER  = "bigger";
var TYPE_SMALLER = "smaller";

var STATE_DISABLED  = "dis";
var STATE_NORMAL    = "nor";
var STATE_ACTIVE    = "act";



var aButLow = new Array();
aButLow[TYPE_CLOSE]   = "symbols/sym_cross_s.png";
aButLow[TYPE_LEFT]    = "symbols/sym_arr_left_s.png";
aButLow[TYPE_RIGHT]   = "symbols/sym_arr_right_s.png";
aButLow[TYPE_DRIGHT]  = "symbols/sym_doublearr_right_s.png";
aButLow[TYPE_DLEFT]   = "symbols/sym_doublearr_left_s.png";
aButLow[TYPE_UP]      = "symbols/sym_arr_up_s.png";
aButLow[TYPE_DOWN]    = "symbols/sym_arr_down_s.png";
aButLow[TYPE_BIGGER]  = "symbols/sym_bigger_s.png";
aButLow[TYPE_SMALLER] = "symbols/sym_smaller_s.png";

var aButHi = new Array();
aButHi[TYPE_LEFT]    = "symbols/sym_arr_left_sa.png";
aButHi[TYPE_BIGGER]  = "symbols/sym_bigger_sa.png";
aButHi[TYPE_CLOSE]   = "symbols/sym_cross_sa.png";
aButHi[TYPE_SMALLER] = "symbols/sym_smaller_sa.png";
aButHi[TYPE_RIGHT]   = "symbols/sym_arr_right_sa.png";
aButHi[TYPE_UP]      = "symbols/sym_arr_up_sa.png";
aButHi[TYPE_DOWN]    = "symbols/sym_arr_down_sa.png";
aButHi[TYPE_DRIGHT]  = "symbols/sym_doublearr_right_sa.png";
aButHi[TYPE_DLEFT]   = "symbols/sym_doublearr_left_sa.png";

var aButDis = new Array();
aButDis[TYPE_LEFT]    = "symbols/sym_arr_left_sd.png";
aButDis[TYPE_BIGGER]  = "symbols/sym_bigger_sd.png";
aButDis[TYPE_CLOSE]   = "symbols/sym_cross_sd.png";
aButDis[TYPE_SMALLER] = "symbols/sym_smaller_sd.png";
aButDis[TYPE_RIGHT]   = "symbols/sym_arr_right_sd.png";
aButDis[TYPE_UP]      = "symbols/sym_arr_up_sd.png";
aButDis[TYPE_DOWN]    = "symbols/sym_arr_down_sd.png";
aButDis[TYPE_DRIGHT]  = "symbols/sym_doublearr_right_sd.png";
aButDis[TYPE_DLEFT]   = "symbols/sym_doublearr_left_sd.png";


function nop() {
}


//-----------------------------------------------
// constructor (ImgButton)
//   many important values are saved in 
//   additional attributes of the image element
//   (so they are available in the call-back)
//
function ImgButton(id, type, initState, action) {
  this.id        = id;
  this.action    = action;

  var i2 = document.createElement("img");
  i2.setAttribute("id", id);
  
  switch (initState) {
  case STATE_DISABLED:
    sImg = aButDis[type];
    i2.onmouseover=nop;
    i2.onmouseout=nop;
    i2.onclick=nop;
    break;
  case STATE_NORMAL:
    sImg = aButLow[type];
    i2.onmouseover=this.highlight;
    i2.onmouseout=this.lowlight;
    i2.onclick= action;
    break;
  case STATE_ACTIVE:
    sImg = aButHi[type];
    i2.onmouseover=this.highlight;
    i2.onmouseout=this.lowlight;
    i2.onclick= action;
    break;
  }
  i2.setAttribute("src", sImg);

  this.img       = i2;
  this.img.imgtype=type;
  this.img.state=initState;
}

new ImgButton("0", "left", "dis", 0);

ImgButton.prototype.getImg = function () {
  return this.img;
}


ImgButton.prototype.setState = function (newState) {
  if (newState != this.initState) {
    switch (newState) {
    case STATE_DISABLED:
      sImg = aButDis[this.img.imgtype];
      this.img.onmouseover=nop;
      this.img.onmouseout=nop;
      this.img.onclick=nop;
      break;
    case STATE_NORMAL:
      sImg = aButLow[this.img.imgtype];
      this.img.onmouseover=this.highlight;
      this.img.onmouseout=this.lowlight;
      this.img.onclick= this.action;
      break;
    case STATE_ACTIVE:
      sImg = aButHi[this.img.imgtype];
      this.img.onmouseover=this.highlight;
      this.img.onmouseout=this.lowlight;
      this.img.onclick= this.action;
      break;
    }
    this.img.setAttribute("src", sImg);
    this.img.state = newState;
  }
}


ImgButton.prototype.setStyle=function (sStyle) {
  this.img.style.cssText = sStyle;
}


ImgButton.prototype.highlight=function () {
    this.src=aButHi[this.imgtype];
}

ImgButton.prototype.lowlight=function () {
    this.src=aButLow[this.imgtype];
}