﻿$('form.sequential').ready(function() {
    var form = $(this); //Form to be processed.
    var previous = 0; //Constant.
    var next = 1; //Constant.

    initialise();
    showFirstError();

    //Attach event actions to tabs.
    form.find('div.tabs.sequential ul li').click(
        function() {
            var fieldsetName = $(this).attr('class').replace(' selected', '').replace(' error', '');
            var requiredFieldsetIndex = 0;
            var fielsetsCount = form.find('div.fieldset').length;
            for (var x = 0; x < fielsetsCount; x++) {
                var current = form.find('div.fieldset').eq(x);
                if (current.hasClass(fieldsetName)) {
                    requiredFieldsetIndex = x;
                    break;
                }
            }
            navigate(null, requiredFieldsetIndex);
        }
    );

    //Attach event actions to navigation buttons.
    form.find('div.navigation.sequential ul li.previous').click(
        function() {
            navigate(previous, null);
        }
    );
    form.find('div.navigation.sequential ul li.next').click(
        function() {
            navigate(next, null);
        }
    );

    function initialise() {
        //Show first fieldset section, hide the rest.
        form.find('div.fieldset:not(:first)').hide();

        //Hide submit button (as not required on load).
        form.find('div.submit').hide();

        //Show form tabs/navigation.
        form.find('div.sequential').show();

        //Disable previous navigation button (as not required on load).
        form.find('div.navigation.sequential ul li:first').hide();

        //Set first tab to be selected.
        form.find('div.tabs.sequential ul li:first').addClass("selected");
    }

    //If errors have occured on the form, then activate the first fieldset on which on error exists.
    function showFirstError() {
        var requiredFieldsetIndex = -1;
        var fielsetsCount = form.find('div.fieldset').length;
        for (var x = 0; x < fielsetsCount; x++) {
            var current = form.find('div.tabs.sequential ul li').eq(x);
            if (current.hasClass('error')) {
                requiredFieldsetIndex = x;
                break;
            }
        }
        if (requiredFieldsetIndex != -1) navigate(null, requiredFieldsetIndex);
    }

    //The following function handles all the form navigation.
    function navigate(action, index) {
        //Identify which fieldset is currently selected.
        var selectedFieldsetIndex = 0;
        var requiredFieldsetIndex = 0;
        var fielsetsCount = form.find('div.fieldset').length;
        for (var x = 0; x < fielsetsCount; x++) {
            var current = form.find('div.fieldset').eq(x);
            if (current.is(':visible')) {
                selectedFieldsetIndex = x;
                break;
            }
        }

        //Identify which fieldset is required to be displayed.
        if (index) {
            requiredFieldsetIndex = index;
        }
        else {
            if (action == previous) {
                requiredFieldsetIndex = (selectedFieldsetIndex == 0) ? selectedFieldsetIndex : (selectedFieldsetIndex - 1);
            }
            else if (action == next) {
                requiredFieldsetIndex = (selectedFieldsetIndex == (fielsetsCount - 1)) ? selectedFieldsetIndex : (selectedFieldsetIndex + 1);
            }
        }

        //Show the required fieldset, if not already displayed, and in turn enable/disable tab/navigation/submit actions.
        var selectedSection = form.find('div.fieldset:visible');
        if (selectedFieldsetIndex != requiredFieldsetIndex) {
            //Show/hide relevant fieldsets.
            selectedSection.hide();
            form.find('div.fieldset').eq(requiredFieldsetIndex).show();

            //Show/hide submit button if needed.
            if (requiredFieldsetIndex == (fielsetsCount - 1)) {
                form.find('div.submit').show();
            }
            else {
                form.find('div.submit').hide();
            }

            //Set selected state on required tab.
            form.find('div.tabs.sequential ul li').removeClass("selected");
            form.find('div.tabs.sequential ul li').eq(requiredFieldsetIndex).addClass("selected");

            //Show relevant navigation actions.
            form.find('div.navigation.sequential ul li').show();
            if (requiredFieldsetIndex == 0) form.find('div.navigation.sequential ul li.previous').hide();
            if (requiredFieldsetIndex == (fielsetsCount - 1)) form.find('div.navigation.sequential ul li.next').hide();
        }
    }
});
