/**
 * Unobtrusive TabSet
 * Author: John Nunemaker
 * Website: Addicted To New (http://addictedtonew.com)
 * 
 * - Checks url to see if it should activate based on hash (ie: http://somedomain.com/#team)
 * - Ff no hash in url or hash in url is for a different tab set, it activates the first tab
 *   in the set
 * - Tabs can be bookmarked because of the url checking
 * - Sets a class of 'active' on the active tab (li), can be changed with activeClass option
 *
 * Usage:
 * <ul id="some_id">
 *   <li><a href="#about">About</a></li>
 *   <li><a href="#team">Team</a></li>
 *   <li><a href="#contact">Contact</a></li>
 * </ul>
 *
 * <div id="about">Some text...</div>
 * <div id="team">Some text...</div>
 * <div id="contact">Some text...</div>
 *
 * <script type="text/javascript">
 *   new TabSet('some_id');
 *   // new TabSet('some_id', {activeClass: 'current'}); // would change the active class to current
 * </script>
 */
var TabSet = Class.create();
TabSet.Version = '0.1';

/* class methods */
Object.extend(TabSet, {
        areaForTab: function(tab) {
                var tab     = $(tab);
                var area_id = tab.href.split('#')[1];
                return $(area_id);
        },
        
        parseHash: function(href) {
                var str = href.split('#').last();
                return str;
        }
});

/* instance methods */
TabSet.prototype = {
        /* element is the id of the tab set ul */
        initialize: function(element, options) {
                this.options = $H({
                        activeClass: 'active',
                        stopEvent: false
                }).merge(options);
                
                this.element = $(element); // ul with li's that have a's
                this.tabs    = this.element.getElementsBySelector('li a'); // FIXME: this is bombing IE7
                this.areas   = $A([]);
                this.tabs.each(function(tab) { 
                        var area = TabSet.areaForTab(tab);
                        if (area) { this.areas.push(area); }
                }.bind(this));
                this.hideAll();
                this.addObservers();
                this.setInitialTab();
        },
        
        hideAll: function() {
                this.areas.each(function(area) { area.hide(); });
        },
        
        addObservers: function() {
                this.tabs.each(function(tab) {
                        tab.observe('click', this.onClick.bindAsEventListener(this));
                }.bind(this));
        },
        
        setInitialTab: function() {
                var hash                                 = window.location.hash;
                var initialTab         = this.tabs.first();
                if (hash) {
                        this.tabs.each(function(tab) {
                                if (TabSet.parseHash(tab.href) == hash.gsub('#', '')) {
                                        initialTab = tab;
                                }
                        }.bind(hash));
                }
                this.showTab(initialTab);
        },
        
        showTab: function(tab) {
                var tab         = $(tab);
                var area         = TabSet.areaForTab(tab);
                this.hideAll();
                this.setActiveListElement(tab);
                area.show();
        },
        
        setActiveListElement: function(tab) {
                var tab = $(tab);
                var li         = tab.up();
                this.removeActiveClass();
                li.addClassName(this.options.activeClass);
        },
        
        removeActiveClass: function() {
                this.tabs.each(function(tab) {
                        var parent = tab.up();
                        if (parent.hasClassName(this.options.activeClass)) { parent.removeClassName(this.options.activeClass); }
                }.bind(this));
        },
        
        isTab: function(el) {
                return (this.tabs.include($(el))) ? true : false;
        },
        
        isArea: function(el) {
                return (this.areas.include($(el))) ? true : false;
        },
        
        onClick: function(event) {
                var el = Event.findElement(event, 'a');
                this.showTab(el);
                if (this.options.stopEvent) {
                        Event.stop(event);
                }
        }
}