//ImageButton.js
//a clickable button using a set of images.
//assumes the image names are based on a standard naming convention
// ex:  button.png
//      buttonHover.png
//      buttonDown.png
//onclickFunction is a function executed when the button is clicked;
//  including any parameters required.
//------------------------------------------
//Dependancies:
//  ImageButton.js-|->Button.js->GuiWidget.js-><CBE libraries>

ImageButton = function(newID, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility, newimageName, newTooltip)
{
  if (arguments.length > 0)
    this.init(newID, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility, newimageName, newTooltip);
};
ImageButton.prototype = new Button();
ImageButton.prototype.constructor = ImageButton;
ImageButton.superclass = Button.prototype;

ImageButton.prototype.init = function(newID, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility, newImageName, newTooltip)
{
  ImageButton.superclass.init.call(this, newID, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility);
  this.imageName = newImageName;
  this.tooltip = newTooltip;
  this.buttonImage = new Image;
  this.buttonImage.src = GuiWidget.THEME_PATH+'/'+GuiWidget.THEME+'/images/'+this.imageName;
  this.tooltip=newTooltip;
  
  this.imageNode = document.createElement("IMG");
  this.imageNode.src = this.buttonImage.src;
  this.imageNode.objectManagerId = this.element.objectManagerId;
  //stop IE from screwing up the image size - seems to default to 25 for new images
  if (xIE4Up)
  {
    xWidth(this.imageNode,newWidth * 3);
    xHeight(this.imageNode,newHeight);
  }
  this.element.appendChild(this.imageNode);

  this.setClass('GuiImageButton');
  this.imageNode.setAttribute(((xIE4Up)?("className"):('class')), "GuiImageButtonImage");
};

ImageButton.prototype.mouseOver = function(e)
{
  xLeft(this.imageNode,0 - this.width());
  this.setClass('GuiImageButtonHover');
  if (this.tooltip != '')
    GuiWidget.showTooltip(e, this.tooltip);
};

ImageButton.prototype.mouseOut = function(e)
{
  xLeft(this.imageNode,0);
  this.setClass('GuiImageButton');
  GuiWidget.hideTooltip();
};

ImageButton.prototype.mouseUp = function(e)
{
  xLeft(this.imageNode,0 - this.width());
  this.setClass('GuiImageButtonHover');
  GuiWidget.hideTooltip();
};

ImageButton.prototype.mouseDown = function(e)
{
  xLeft(this.imageNode,0 - this.width()*2);
  this.setClass('GuiImageButtonDown');
  GuiWidget.hideTooltip();
};

ImageButton.prototype.click = function(e)
{
  xLeft(this.imageNode,0 - this.width());
  this.setClass('GuiImageButtonHover');
  GuiWidget.hideTooltip();
};