/**
*   HTML DOM -- BtkTab
*
* -----------------------------------------\
* This program is written by Man Fung, LO  |
* Copyright reserved.                      |
* -----------------------------------------/
*
*
*
* MODIFIED:
* @version 1.0,     2008/5/21,       Created.
* @author  Man Fung, LO
*
* Sample :
*   <div id="navigationId">
*     <span id="tabId#tabContentId" class="btkTabNavigation">123</span>
*   </div>
*   ......
*   <div id="tabContentId>234</div>
*   <script type="text/javascript">
*       new BtkTab(id, [options]);
*   </script>
*
*  Options :
*       currentTab          :
*           Show the tab content as default by the tab id. If not set, none tab content will show.
*       setHiddenContentClassName  :
*           Set Hidden Tab Content Css Class Name, Default as `hidden`
*       setActiveTabClassName  :
*           Set Active Tab Navigation Css Class Name, Default as `active`
*       setTabNavigationClassName   :
*           Set Tab Navigation Class Name, Default as `btkTabNavigation`
*/

var BtkTab = Class.create();
BtkTab.prototype = {
    initialize: function(tabNavigationId_, options_){
        this.id     = tabNavigationId_;
        options_    = this.initializeTabOptions(options_);

        this.opt    = options_;

        this.tabs   = $$('#'+tabNavigationId_+" ."+options_.tabNavigationClassName);

        var obj = this;
        this.tabs.each(function(tab_){
            var tabContentId_ = obj.getTabContentIdByTabId(tab_.id);

            $(tabContentId_).addClassName(options_.hiddenContentClassName);
            tab_.onclick = obj.selectedTab.bindAsEventListener(obj);
        });

        if( options_.currentTab ){
            if( options_.currentTab != "default" ){
                this.setActiveTabById(options_.currentTab);
            }else{
                this.setActiveTabById(this.tabs[0].id);
            }
        }
    },
    initializeTabOptions: function(options_){
        if( !options_ ){
            options_ = {};
        }
        if( !options_.setHiddenContentClassName ){
            options_.hiddenContentClassName  = 'hidden';
        }else{
            options_.hiddenContentClassName     = options_.setHiddenContentClassName;
        }

        if( !options_.setTabNavigationClassName ){
            options_.tabNavigationClassName     = 'btkTabNavigation';
        }else{
            options_.tabNavigationClassName     = options_.setTabNavigationClassName;
        }

        if( !options_.setActiveTabClassName ){
            options_.activeTabClassName         = 'active';
        }else{
            options_.activeTabClassName         = options_.setActiveTabClassName;
        }

        return options_;
    },
    selectedTab: function(event){
        var tab_                    = Event.element(event);
        var tabId_                  = tab_.id;

        this.setActiveTabById(tabId_);

    },
    setActiveTabById: function(tabId_){
        var strStartPos_            = tabId_.search("#");
        var selectedTabContentId_   = tabId_.substr(strStartPos_+1);    //Skip the #

        var obj = this;
        this.tabs.each(function(tab_){
            if( tab_.hasClassName(obj.opt.activeTabClassName) ){
                tab_.removeClassName(obj.opt.activeTabClassName);
            }
        });
        $(tabId_).addClassName(obj.opt.activeTabClassName);

        var obj = this;
        this.tabs.each(function(tab_){
            var tabContentId_ = obj.getTabContentIdByTabId(tab_.id);

            if( !$(tabContentId_).hasClassName(obj.opt.hiddenContentClassName) ){
                $(tabContentId_).addClassName(obj.opt.hiddenContentClassName);
            }
        });

        $(selectedTabContentId_).removeClassName(obj.opt.hiddenContentClassName);
    },
    getTabContentIdByTabId: function(tabId_){
        var strStartPos_            = tabId_.search("#");
        var tabContentId_   = tabId_.substr(strStartPos_+1);    //Skip the #

        return tabContentId_;
    }
};