/*
<div id="MyTab">
    <ul class="tab-items">
        <li><a href="#tab1"><span>General</span></a></li>
        <li><a href="#tab2"><span>Links</span></a></li>
        <li><a href="#tab3"><span>Tab 3</span></a></li>
    </ul>

    <div id="tab1">
      <p>Page 1</p>
      <input name="f1" value="1"/>
      <input name="f1" value="2"/>
      <select name="sel1">
          <option>item 1</option>
          <option>item 1</option>
          <option>item 1</option>
      </select>
    </div>

    <div id="tab2">
      <p>Page 2</p>
    </div>

    <div id="tab3">
      <p>Page 3</p>
      <input name="f1" value="3 1"/>
      <input name="f1" value="3 2"/>
    </div>
</div>
*
* Requires:
<script type="text/javascript" src="/js/yui/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="/js/yui/event/event-min.js" ></script>
<script type="text/javascript" src="/js/yui/dom/dom-min.js" ></script>
<link rel="stylesheet" type="text/css" href="/js/tabview/tabview.css" />
*/

OKOBE.widgets.TabView = function(cfg) {
	this.init(cfg);
}

OKOBE.widgets.TabView.prototype = {

    curTabId: null,
    itemsDiv: null,
	domNode: null,
	
    init: function(cfg) {
    	this.domNode = $id(cfg.id);
    	
        // Get the tab view element.
        //
        var e = this.domNode;

        // Now get the element that has the tab-items class.
        // This is the ul element for the tab strip.
        //
        var elems = arpt.getElementsByClass('tab-items',e); 
        this.itemsDiv = elems[0];

        // Get the tab anchor elements of the tab strip.
        //
        var nodes = this.itemsDiv.getElementsByTagName("li");

        // Set event handlers on the items on the tab strip.
        //
        for (var i = 0; i < nodes.length; i++) {
			YAHOO.Event.addListener(nodes[i], 'click', this.tabClick, this, true );
			YAHOO.Event.addListener(nodes[i], 'mouseout', this.tabOut, this, true );
			YAHOO.Event.addListener(nodes[i], 'mouseover', this.tabOver, this, true );
        }
        // Activate the default tab.
        //
        this.selectTab(this.domNode.getAttribute('activeTab'));
    },

    tabOut: function(e) {
        var elem = this._getTarget(e);
		if (elem.className!='item-disabled') {
			elem.className = elem.getAttribute('tabId')==this.curTabId ? 'item-active' : 'item';
		}    
	},
	
    tabOver: function(e) {
        var elem = this._getTarget(e);
		if (elem.className!='item-disabled' && elem.className!='item-active') {
			elem.className = 'item-over';
		}    
	},
	
    tabClick: function(e) {
        var elem = this._getTarget(e);
		if (elem.className!='item-disabled') 
	        this.selectTab(elem.getAttribute('tabId'));
    },

    _getTarget: function(ev) {
		var t = YAHOO.util.Event.getTarget(ev);
		if (t.tagName.toLowerCase()=="li")
			return t;
		else
			return $parent( t, "li" );
    },
    
    getTabItemNode: function(id) {
        // Get all the anchor elements for this tab view.
        //
        var nodes = this.itemsDiv.getElementsByTagName("li");
        
        for (var i = 0; i < nodes.length; i++) {
            // Now find the anchor that has the requested id in the href.
            // When then return it's parent which is the li element.
            //
            var s = nodes[i].getAttribute('tabId');
            if (s==id)
                return nodes[i];
        }
        return null;
    },

    /** Activates the tab associated with the id.
     * Hides the current tab, and displays the div associated with the specified tab.
     */
    selectTab: function(id) {
        // Activate the tab by displaying the tag page and setting the classname
        // of li to "current".
        //
        var page = $id(id);
        
		if (page) {
	        if (this.curTabId != null) {
	            // Hide the current tab & set the classname of the li to ""
	            //
	            var cpage = $id(this.curTabId);
	            cpage.style.display = 'none'

	            // Change the classname to empty incase css rules are defined for the
	            // active tab.
	            //
	            this.getTabItemNode(this.curTabId).className="item";
	            this.curTabId = null;
	        }

	        // Show the div associated with the tab.
	        //
	        page.style.display = 'block'
		
	        // Set the classname of the tabnode incase it has css rules.
    	    //
	        this.getTabItemNode(id).className='item-active';

        	// Make this id the active tab.
        	//
        	this.curTabId = id;
    	}
    }
};