﻿window.addEvent('load', function() {
    var selectedTabId = location.hash.length > 0 ? location.hash.substring(1, location.hash.length) : '';
    $$('.navigationContainer').each(function(navContainer, navContainerIndex) {
        navContainer.setStyle('width', navContainer.width);

        var navTabContainer = navContainer.getElement('ul.navigationTabContainer');
        var tabs = navTabContainer.getChildren();

        var contentDiv = new Element('div', { 'class': 'navigationTabContent' });

        var tabWidth = Math.floor(navContainer.width / tabs.length) - 11;
        var widthRemainder = navContainer.width % tabs.length + 1;

        tabs.each(function(navTab, index) {
            if (selectedTabId != "" && navTab.id == selectedTabId) {
                navContainer.activeTabIndex = index;
            }
            var innerUL = navTab.getElement('ul');
            var innerLI = innerUL.getElement('li');
            navTab.addClass("navigationTab");
            navTab.addEvent('click', function() {
                if (index != navContainer.activeTabIndex) {
                    TransferChildren(contentDiv, tabs[navContainer.activeTabIndex].getElement('ul').getElement('li'));
                    TransferChildren(innerLI, contentDiv);
                    tabs[navContainer.activeTabIndex].removeClass('navigationTabSelected');
                    navTab.addClass('navigationTabSelected');
                    navContainer.activeTabIndex = index;
                }
            });
            innerUL.setStyle('display', 'none');
            if (index == 0) {
                navTab.setStyle('width', tabWidth + widthRemainder);
                navTab.addClass("noBorder");
            }
            else {
                navTab.setStyle('width', tabWidth);
            }
        });
        tabs[navContainer.activeTabIndex].addClass('navigationTabSelected');
        TransferChildren(tabs[navContainer.activeTabIndex].getElement('ul').getElement('li'), contentDiv);
        contentDiv.injectAfter(navTabContainer);
    });
});

function TransferChildren(source, destination) {
    source.getChildren().each(function(child) {
        child.injectInside(destination);
    });
}