jQuery(document).ready(function () {
    var remainder = 0;
    $('.tab-container').each(function (index) {
        if ($(this).attr('settabwidth') == 'true') {
            //alert($(this).find('.tabpanel').width() + ' ' + $(this).find('.tabs > div').length);
            $(this).find('.tabs > div').width((($(this).find('.tabpanel').width() + 2) - ($(this).find('.tabs > div').length * 2)) / $(this).find('.tabs > div').length);  /*set the width of each tab to an equal amount based on the width of the container (2 adjusts for border*/
            remainder = ($(this).find('.tabpanel').width() + 2) - (($(this).find('.tab').width() + 2) * $(this).find('.tabs > div').length); /*Get the remainder pixels from truncation to add to the selected tab*/
        }

        var initTab = $(this).find('.tabs > div').index($(this).find('.tab-selected', '.tabs'));  /*find the initially selected tab and display it.  hide the others*/

        if (initTab == -1) {  //if no tab has tab-selected designation the first one is chosen
            initTab = 0;
            $(this).find('.tabs > div:first-child').removeClass('tab');
            $(this).find('.tabs > div:first-child').addClass('tab-selected');
        }

        if ($(this).attr('settabwidth') == 'true') {
            $(this).find('.tab-selected', '.tabs').width($(this).find('.tab-selected', '.tabs').width() + remainder);
        }

        $(this).find('.panels > .tabpanel').each(function (index) {  //Show the initial tabpanel
            if (index == initTab) {
                $(this).removeClass('hidetab');
                $(this).addClass('showtab');
            }
            else {
                $(this).removeClass('showtab');
                $(this).addClass('hidetab');
            }
        });
    });

    $('.tabs > div').click(function (event) {       //add tab-selected class to the currently selected tab and remove from others (used div because .tabselected and .tab are ambiguous)
        var par = $(this).parent();
        $(this).parent().find('.tab-selected').each(function (index) {
            $(this).removeClass('tab-selected');
            $(this).addClass('tab');
        });

        var tabnum = $(this).parent().find('.tab').index(this);
        $(this).parent().parent().find('.tabpanel').each(function (index) {
            if (index == tabnum) {
                $(this).removeClass('hidetab');
                $(this).addClass('showtab');
            }
            else {
                $(this).removeClass('showtab');
                $(this).addClass('hidetab');
            }
        });


        $(this).removeClass('tab');
        $(this).addClass('tab-selected');

    });
});