/*
    tested with IE 6 7 8, FF3, O9
*/

function TabSet(containerId) {
    var cssActive = "tabActive";
    var cssInactive = "tabInactive";
    var cssOver = "inactiveTabOver";

    var activeTab = 0;
    var maxTabs = 5;

    var tabRowPane = '';

    var tabContainer = $(containerId);
    var tabPages = new Array();
    var tabLeaves = new Array();


    this.setTabBackgroundImage = function(tabId, imagePath) {
        $(tabId).writeAttribute('tabimage', imagePath); ;
    };


    this.setActiveStyle = function(activeStyle) {
        cssActive = activeStyle;
    };


    this.setInactiveStyle = function(inactiveStyle) {
        cssInactive = inactiveStyle;
    };


    this.setOverStyle = function(overStyle) {
        cssOver = overStyle;
    };


    this.init = function() {
        tabPages = $$('#' + tabContainer.id + ' fieldset[class=tabPage]');

        if (tabPages.length > maxTabs) {
            alert("Too many tabs");
            return;
        }

        tabRowPane = new Element('div', { 'class': 'tabSet_TabPane', 'id': tabContainer.id + 'TabSet' });

        for (var i = 0; i < tabPages.length; i++) {
            var leaf = buildTabLeaf(tabPages[i], i);

            Element.wrap(leaf, tabRowPane);
            tabLeaves.push(leaf);
        }

        Element.insert(tabContainer, { top: tabRowPane });
    };



    this.createTab = function(title, content) {
        if (maxTabsReached()) return;

        var newPage = new Element('fieldset', { 'class': 'tabPage' });
        newPage.update(content);
        var legend = new Element('legend');
        legend.update(title);

        Element.insert(newPage, { top: legend });

        var newLeaf = buildTabLeaf(newPage, tabPages.length);

        tabPages.push(newPage);
        tabLeaves.push(newLeaf);

        Element.insert(tabRowPane, { bottom: newLeaf });
        Element.insert(tabContainer, { bottom: newPage });
    };


    this.addTab = function(newPage) {
        if (maxTabsReached()) return;

        var newLeaf = buildTabLeaf(newPage, tabPages.length);

        tabPages.push(newPage);
        tabLeaves.push(newLeaf);

        Element.insert(tabRowPane, { bottom: newLeaf });
        Element.insert(tabContainer, { bottom: newPage });
    };



    var buildTabLeaf = function(tabPage, index) {
        var tabLable = tabPage.firstDescendant();
        tabLable.setStyle({
            display: 'none',
            margin: '5px 5px 5px 5px',
            padding: '2px 2px 2px 2px'
        });
        var tabDivTitle = tabLable.innerHTML;

        var tabImg = tabLable.getAttribute('tabimage');

        var tabStyle = cssInactive;
        tabPage.setStyle({ display: 'none' });

        if (index == activeTab) {
            tabStyle = cssActive;
            tabPage.setStyle({ display: 'block' });
        }

        var tabDiv = new Element('div', { 'class': tabStyle, 'index': index, 'id': tabContainer.id + 'Tab' + index });

        if (tabImg) {
            tabDiv.setStyle({
                backgroundImage: "url(" + tabImg + ")"
            });
        }

        tabDiv.update(tabDivTitle);

        tabDiv.observe('mouseover', function(e) {
            if (this.className.indexOf(cssInactive) >= 0) {
                this.className = cssOver;
            }
        });


        tabDiv.observe('mouseout', function(e) {
            if (this.className.indexOf(cssOver) >= 0) {
                this.className = cssInactive;
            }
        });


        tabDiv.observe('click', function(e) {
            if (this.className.indexOf(cssActive) <= 0) {

                var oldTab = tabLeaves[activeTab];
                oldTab.className = cssInactive;
                tabPages[activeTab].setStyle({ display: 'none' });

                this.className = cssActive;
                activeTab = this.getAttribute('index');
                tabPages[activeTab].setStyle({ display: 'block' });
            }
        });

        return tabDiv;
    };


    var maxTabsReached = function() {
        if (tabPages.length + 1 > maxTabs) {
            alert("Unable to add tab as it would exceed the maximum allowed (" + maxTabs + ")");
            return true;
        }
        return false;
    };

}