/*
 *
 * TNButton Class: Extend image-contained div to animated image button by using image portion crop
 * TNButtonSet Class: Set of TNButton -- Can have HOLD state
 * Written by: Karn Sakulsak <karn@thinknet.co.th>
 *
 * Version: 0.1
 * Status: Released
 * Last Update: 2008-04-28 10:06
 *
 * ChangeLog
 * =========
 * Version 0.1
 * -----------
 * - Initial Release
 * 
 *
 */
 
var TN_BUTTON_STATE_NORMAL = 0; 
var TN_BUTTON_STATE_OVER = 1; 
var TN_BUTTON_STATE_DOWN = 2; 
var TN_BUTTON_STATE_HOLD = 3; 

function TNButton(targetElementId, buttonWidth, buttonHeight, imageCount){
	var isie = navigator.userAgent.toLowerCase().match('msie');
	
  if(document.getElementById(targetElementId))
  {
    var eTarget = document.getElementById(targetElementId);
    var i, eChild;
    var img;
    
    // Find image element
    for(i = 0; i < eTarget.childNodes.length; i++)
    {
      eChild = eTarget.childNodes[i];
      if((eChild.nodeType == 1) && (eChild.tagName.toLowerCase() == 'img' || eChild.tagName.toLowerCase() == 'input'))
      {
        img = eChild;
      }
    }
    
    img.style.position = 'absolute';
    img.style.left = '0px';
    
    eTarget.img = img;
    eTarget.imgCount = imageCount;
    eTarget.buttonHeight = buttonHeight;
    eTarget.buttonState = TN_BUTTON_STATE_NORMAL;
    eTarget.isHold = false;
    
    eTarget.onmousemove = function(){
      if(this.buttonState == TN_BUTTON_STATE_NORMAL)
        this.setState(TN_BUTTON_STATE_OVER);
    }
    
    eTarget.onmouseout = function(){
      if((this.buttonState != TN_BUTTON_STATE_NORMAL) && (this.buttonState != TN_BUTTON_STATE_HOLD))
        this.setState(TN_BUTTON_STATE_NORMAL);
    }
    
    eTarget.onmousedown = function(){
      if((this.buttonState != TN_BUTTON_STATE_DOWN) && (this.buttonState != TN_BUTTON_STATE_HOLD))
        this.setState(TN_BUTTON_STATE_DOWN);
    }

    eTarget.onmouseup = function(){
      if(this.buttonState == TN_BUTTON_STATE_DOWN)
        this.setState(TN_BUTTON_STATE_OVER);
    }
    
    eTarget.onclick = function(){
      if(this.haveButtonSet)
      {
        TNButtonSet.Instances[this.buttonSetId].setHoldButton(this.buttonId);
      }
    }
    
    eTarget.setState = function(newState){
      if(newState == TN_BUTTON_STATE_NORMAL)
      {
        this.img.style.top = '0px';
        this.img.style.left = '0px';
        this.buttonState = newState;
      }
      else if(newState == TN_BUTTON_STATE_OVER)
      {
        this.img.style.top = - Math.min(this.imgCount - 1, 1) * this.buttonHeight + 'px';
        this.img.style.left = '0px';
        this.buttonState = newState;
      }
      else if(newState == TN_BUTTON_STATE_DOWN)
      {
        this.img.style.top = - Math.min(this.imgCount - 1, 2) * this.buttonHeight + 'px';
        this.img.style.left = '0px';
        this.buttonState = newState;
      }
      else if(newState == TN_BUTTON_STATE_HOLD)
      {
        this.img.style.top = - Math.min(this.imgCount - 1, 2) * this.buttonHeight + 'px';
        this.img.style.left = '0px';
        this.buttonState = newState;
      }
    }

    return eTarget;
  }
  else
  {
    // May raise some exception!
  }
}

function TNButtonSet(buttonList){
	
	if(!TNButtonSet.Instances)
	{
	  TNButtonSet.Instances = new Array();
	}
	this.id = TNButtonSet.Instances.length;
  TNButtonSet.Instances[this.id] = this;

  for(i = 0; i < buttonList.length; i++)
  {
    buttonList[i].haveButtonSet = true;
    buttonList[i].buttonSetId = this.id;
    buttonList[i].buttonId = i;
  }
  
  this.buttonList = buttonList;
  this.currentHoldButton = -1;
  
  this.setHoldButton = function(newHoldButton) {
    if(this.currentHoldButton >= 0)
    {
      this.buttonList[this.currentHoldButton].setState(TN_BUTTON_STATE_NORMAL);
    }
    this.currentHoldButton = newHoldButton;
    this.buttonList[this.currentHoldButton].setState(TN_BUTTON_STATE_HOLD);
  }
}