var tabTimeout = 100;
var tabTimeoutInterval = 100;
var animationTimeout = 600;


// jquery extensions
$.fn.getIndex = function() {
    var $p = $(this).parent().children();
    return $p.index(this);
}

$(document).ready(function() {

    if ($(".jstTabBar .jstTBsection").length > 0 && $(".jstTabBar .jstTBactive").length <= 0) {
        $(".jstTabBar .jstTBsection").first().addClass(" jstTBactive jstLastClicked");
    }

    $(".jstTabBar .jstTBsection").each(function() {
        // find the position of the current element
        var currentIndex = $(this).getIndex();

        //var titleWidth = $(this).contents(".jstTBtitle").width();
        var titleWidth = $(this).contents(".jstTBtitle").width();
        var contentWidth = $(this).contents(".jstTBcontent").width();

        if (currentIndex > 0)
            $(this).animate({ left: '+=' + (contentWidth + ((currentIndex) * titleWidth)) }, 0);

        $(this).find(".jstTBtitle a").click(function() {
            var sectionElement = $(this).parent().parent();
            var currentLeftPos = sectionElement.position().left;
            var currentIndex = sectionElement.getIndex();
            var tabBarContentsWidth = sectionElement.contents(".jstTBcontent").width();

            if (!sectionElement.hasClass("jstTBactive")) {
                // check to see if previous sections have been opened
                var elementList = sectionElement.parent().children(":lt(" + currentIndex + "):not(.jstTBactive)");
                var timeout = tabTimeout;

                elementList.each(function() {
                    var prevElement = $(this);
                    setTimeout(function() { OpenSection(prevElement, tabBarContentsWidth) }, timeout);
                    timeout += tabTimeoutInterval;
                });

                ClearLastClicked();
                sectionElement.addClass("jstLastClicked");

                setTimeout(function() { OpenSection(sectionElement, tabBarContentsWidth) }, timeout);
            }
            else {
                // close any active right hand sections
                var elementList = sectionElement.parent().children(".jstTBactive:gt(" + currentIndex + ")");
                var timeout = tabTimeoutInterval * elementList.length;

                elementList.each(function() {
                    var nextElement = $(this);
                    setTimeout(function() { CloseSection(nextElement, tabBarContentsWidth) }, timeout);
                    timeout -= tabTimeoutInterval;

                    ClearLastClicked();
                    sectionElement.addClass("jstLastClicked");
                });

            }

            return false;
        });
    });

});


function ClearLastClicked() {
    $(".jstTabBar .jstLastClicked").removeClass("jstLastClicked");
}

function OpenSection(section, tabBarContentsWidth) {
    section.addClass("jstTBactive");
    section.animate({ left: ['-=' + tabBarContentsWidth, "swing"] }, animationTimeout, "swing");
}

function CloseSection(section, tabBarContentsWidth) {
    section.removeClass("jstTBactive");
    section.animate({ left: ['+=' + tabBarContentsWidth, "swing"] }, animationTimeout, "swing");
}