TabStack = function()
{
    var tabstack = $(this);
    
    var control = $('<div class="control"/>').prependTo(tabstack);
    var left = $('<div class="left"/>').appendTo(control);
    
    tabstack.find('li').each(function(i)
    {
        var li = $(this);
        var selector = $('<div class="selector"/>').appendTo(control);
        selector.click(function()
        {
            tabstack.find('li.active').removeClass('active');
            tabstack.find('li:visible').each(function(index){
                $(this).hide();
            });
            control.find('.selector').removeClass('active');
            li.addClass('active').show();
            $(this).addClass('active');
        });
        
        if (li.hasClass('active')) {
            selector.addClass('active');
        }
    });
    
    var right = $('<div class="right"/>').appendTo(control);
    
    left.click(function()
    {
        var active = tabstack.find('li.active');
        var selector = control.find('.active');
        if (active.prev('li').length == 0) return;
        tabstack.find('li:visible').each(function(index){
            $(this).hide();
        });
        active.removeClass('active').prev().addClass('active');
        active.prev('li').show();
        selector.removeClass('active').prev('.selector').addClass('active');
    });
    
    right.click(function()
    {
        var active = tabstack.find('li.active');
        var selector = control.find('.active');
        if (active.next('li').length == 0) return;
        tabstack.find('li:visible').each(function(index){
            $(this).hide();
        });
        active.removeClass('active').next().addClass('active');
        active.next('li').show();
        selector.removeClass('active').next('.selector').addClass('active');
    })
}

$(function()
{
    $('.tab-header a').click(function()
    {
        var name = "." + $(this).attr('rel');
        
        $('.tab-container div').removeClass('active');
        $('.tab-header div').removeClass('active');
        
        $('.tab-container').find(name).addClass('active');
        $('.tab-header').find(name).addClass('active');
    });
    
    $('ul.tabstack').each(TabStack);
    
    $('#carousel').carousel({'overlay': true, 'delay_seconds': 8000, 'btns': true, 'paginate': false});
    $('#middlesection .tabstack').carousel({'overlay': false, 'delay_seconds': 5000, 'btns': false, 'paginate': true});
})