gfi.tabs = new Class ({
    Implements: [Options,Events],
    options: {
        startIndex: 0,
        duration: 'normal',
        fixedHeight: true,
        checkHash: true,
        onShowTab: function(tabIndex) {
            this.tabs.removeClass('active');
			this.tabs[tabIndex].addClass('active');
		}
    },

    initialize: function (tabs, tabAreas, options) {
        this.setOptions(options);
        // check we have tabs and areas
        this.tabs = $$(tabs);
        this.tabAreas = $$(tabAreas);
        if (!this.tabs || !this.tabAreas) return;
        // we get the parent so we can set the height on it
        if (!this.options.fixedHeight) this.tabAreaContainer = this.tabAreas[0].getParent();
        // set the tabs and areas up
        this.createTabs();
        // set our effects
//        this.createTabFx();
        // check the hash to see if its a mark for one of the tabs
        this.checkHash();
        // show the first area
        this.showArea(this.options.startIndex);
    },

    createTabs: function() {
        this.tabs.each(function(tab, index){
            tab.addEvent('click', function(e) {
                e.preventDefault();
                this.showArea(index);
            }.bind(this));
        }, this);
    },

    createTabFx: function() {
//        this.tabAreas.set('tween', {property:'opacity',duration:this.options.duration,link:'cancel'}).setStyles({'opacity':'0'});
//        if (!this.options.fixedHeight) this.tabAreaContainer.set('tween', {property:'height',duration:this.options.duration,link:'cancel'});
    },

    checkHash: function() {
        if (this.options.checkHash && window.location.hash) {
			var hash = window.location.hash.substring(1);
            this.tabs.each(function(el, index) {
                if (el.get('id') == hash) {
                    this.options.startIndex = index;
                    this.currentIndex = index;
                }
            }, this);
        }
    },

    showArea: function(tabIndex) {
        //if (tabIndex == this.currentIndex) return this;
        this.fireEvent('onShowTab', tabIndex);
        if (this.currentIndex === undefined) this.currentIndex = tabIndex;
        this.currentIndex = tabIndex;
        this.tabAreas.removeClass('active');
        this.tabAreas[this.currentIndex].addClass('active');
        //this.tabAreaContainer.setStyle('height', this.tabAreas[this.currentIndex].offsetHeight);
        return this;
    }
});