/*
 * image Tab menu class
 * 
 * type : 1 (onclick=>change contents), 2 (onmouseover=>change contents)
 *
 * function
 * 1. switch image Tab menu
 * 2. select button to link or display obj
 *
 * Example code
 <img id="btn_id" src="default_image_path" onImage="on_image_path" outImage="out_image_path" relObj="relObj_id" link="go_url" border="0" />
 <script language="javascript">
	var imageTabMenu1	= new imageTabMenu();
	imageTabMenu1.setTab('btn_id', true);
	imageTabMenu1.onTab('btn_id');
 </script>
 */
function imageTabMenu()
{
	this.m_cursor		= 'pointer';
	this.m_type			= 1;

	this.m_nObjLength	= 0;
	this.m_arrObj		= new Array();
	this.m_onObj		= null;
	
	this.setTab	= function(obj_id, is_default)
	{
		var obj	= ( typeof(obj_id)=='string' ) ? document.getElementById(obj_id) : obj_id ;
		if ( obj==null )	return;

		var this_c		= this;

		var fn_click	= function(){this_c._onClickTab(this);}
		var fn_over		= function(){this_c._onMouseOverTab(this);}
		var fn_out		= function(){this_c._onMouseOutTab(this);}

		// setting event
		if ( this.m_type==1 )
		{
      this._addEvent(obj, 'click', fn_click);
      this._addEvent(obj, 'mouseover', fn_over);
		}
		else if ( this.m_type==2)
		{
      this._addEvent(obj, 'mouseover', fn_click);
		}
    this._addEvent(obj, 'mouseout', fn_out);

		// setting default image
		if ( is_default==true )
			this.onTab(obj);
		else
			obj.src	= obj.getAttribute('outImage');

		// setting style
		obj.style.cursor	= this.m_cursor;

		this.m_arrObj[this.m_nObjLength]	= obj;
		this.m_nObjLength++;
	}

	this.onTab	= function(obj)
	{
		if ( typeof(obj)=='string' )
		{
			obj	= document.getElementById(obj);
		}

		this._onClickTab(obj, false);
	}


	this._onClickTab	= function(obj, is_link)
	{
		var link	= obj.getAttribute('link');
		if ( link!=null && is_link!=false )	location.href	= link;

    if ( obj==this.m_onObj )	return;

		var relObj	= document.getElementById(obj.getAttribute('relObj'));
		if ( relObj!=null )	relObj.style.display	= '';

		// previous tab
		if ( this.m_onObj!=null )
		{
			this.m_onObj.src	= this.m_onObj.getAttribute('outImage');

			var relObj	= document.getElementById(this.m_onObj.getAttribute('relObj'));
			if ( relObj!=null )	relObj.style.display	= 'none';
		}

		// this tab
		obj.src	= obj.getAttribute('onImage');

		// save this tab
		this.m_onObj	= obj;
	}

	this._onMouseOverTab	= function(obj)
	{
		if ( this.m_onObj!=obj )
		{
			if ( this.m_onObj!=null )
				this.m_onObj.src	= this.m_onObj.getAttribute('outImage');

			obj.src	= obj.getAttribute('onImage');
		}
	}

	this._onMouseOutTab	= function(obj)
	{
		if ( this.m_onObj!=obj )
		{
			if ( this.m_onObj!=null )
				this.m_onObj.src	= this.m_onObj.getAttribute('onImage');

			obj.src	= obj.getAttribute('outImage');
		}
	}

  this._addEvent  = function(obj, type, fn)
  {
      if (obj.addEventListener)
          obj.addEventListener(type, fn, false);
      else if (obj.attachEvent)
      {
          obj["e"+type+fn] = fn;
          obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
          obj.attachEvent("on"+type, obj[type+fn]);
      }
  }

}