var Tab = Class.create();

Tab.prototype = {
    
    initialize: function(container, options) {
        Object.extend(this, options || { });

        this.items = $(container).getElementsByTagName('li');

        for(var i = 0; i < this.items.length; i++) {
            this.initItem(this.items[i]);
        }
    },

    initItem: function(el) {
        if(Element.hasClassName(el, 'active')) {
            this.activeItem = el;
        }
        
        Event.observe(el, 'click', this.click.bind(this));
        Event.observe(el, 'mouseover', this.mouseover.bind(this));
        Event.observe(el, 'mouseout', this.mouseout.bind(this));
    },

    mouseover: function(e) {
        Element.addClassName(Event.findElement(e, 'li'), 'hover');
    },

    mouseout: function(e) {
        Element.removeClassName(Event.findElement(e, 'li'), 'hover');
    },

    click: function(e) {
        var li = Event.findElement(e, 'li');

        // IE 9 appears to not work properly with the up/down methods and tag name.
        // in that case, we need to go up manually
        while (li && !li.tagName.match(/LI/)) {
            li = li.up();
        }
        if (!li) {
            return(false);
        }
        this.setActive(li);
        li.fire('mb:navigate');
    },

    setActive: function(li) {
        Element.removeClassName(this.activeItem, 'active');
        Element.addClassName(li, 'active');

        // First hide/show the custom image and custom text areas (these are closest
        // to the nav bar, so deal with on-screen elements first). These calls will fail
        // silently on old Platinums. If there's no custom image for the desired tab,
        // the image container will be hidden too. This prevents vertical spacing issues
        // with the custom image area. 
        try {
            // Hide old custom image.
            Element.hide(this.activeItem.id + '-image-container');
            // If the new custom image exists, show it. If not, hide the image area.
            var newImage;
            if ( newImage = $(li.id + '-image-container') ) {
                Element.show('custom-image-area');
                Element.show(newImage);
            } else {
                Element.hide('custom-image-area');
            }
        } catch (e) {
        }

        // Hide/show the custom text areas separately because they exist independently
        // of custom images.
        try {
            Element.hide(this.activeItem.id + '-custom-text');
            Element.show(li.id + '-custom-text');
        } catch (e) {
        }

        // Next hide/show the tab panel contents.
        try {
            Element.hide(this.activeItem.id + '-content');
        } catch (e) {
            // alert('1:' + e.message + ' ' + this.activeItem.id);
        }

        try {
            Element.hide(this.activeItem.id + '-custom-container');
        } catch (e) {
            // alert('hide custom: ' + e.message + ' ' + this.activeItem.id);
        }

        try {
            Element.show(li.id + '-content');
        } catch (e) {
            // alert('2:' + e.message + ' ' + li.id);
        }

        try {
            Element.show(li.id + '-custom-container');
        } catch (e) {
            // alert('show custom: ' + e.message + ' ' + li.id);
        }

        this.activeItem = li;
    }
}