$(document).ready(function() {

    function ShowColorSelection(e) {
        //restore defaults
        $(".CartColor").each(
                function(i) {
                    $(this).find('img').attr('src', $(this).find('img').attr('src').replace("-off", "-on"));
                    $(this).find('img').removeClass('SelectedColorVariation');
                });
        $(".cartsize").removeClass('Active');
        $("." + $(e).find('img').attr('id')).addClass('Active');
        $(e).find('img').addClass('SelectedColorVariation');
    };

    function ShowSizeSelection(e) {
        //restore defaults
        $(".cartsize").addClass('Active');
        $(".cartsize").removeClass('SelectedSizeVariation');
        $(".CartColor").each(
                function(i) {
                    $(this).find('img').attr('src', $(this).find('img').attr('src').replace("-on", "-off"));
                });
        //Apply Rules
        $("." + $(e).attr('id')).each(
                function(i) {
                    $(this).attr('src', $(this).attr('src').replace("-off", "-on"));
                });
        $(e).addClass('SelectedSizeVariation');
    };

    function SetSelection(Mode) {
        if (Mode == 0) {
            $("#ErrorInSelection").hide();
            $("#hasSelected").show();
            $(".CartColor").each(
                function(i) {
                    $(this).find('img').attr('src', $(this).find('img').attr('src').replace("-off", "-on"));
                    $(this).find('img').removeClass('SelectedColorVariation');
                });
            $(".cartsize").removeClass('Active');
            $("." + $('input[id$=txtColor]').attr('value')).addClass('Active');
            $("#" + $('input[id$=txtColor]').attr('value')).addClass('SelectedColorVariation');
            if ($('input[id$=txtSize]').attr('value') != '' &&
                    $("#" + $('input[id$=txtSize]').attr('value')).hasClass($('input[id$=txtColor]').attr('value'))) {
                $("#" + $('input[id$=txtSize]').attr('value')).addClass('SelectedSizeVariation');
            }
            else {
                $(".cartsize").removeClass('SelectedSizeVariation');
                $('input[id$=txtSize]').attr('value', '');
                $("#SelectedSize").text('');
            }
        }
        else if (Mode == 1) {
            $("#ErrorInSelection").hide();
            $("#hasSelected").show();
            $(".cartsize").removeClass('SelectedSizeVariation');
            $(".cartsize").removeClass('Active');
            $(".cartsize").addClass('Active');

            $(".CartColor").each(
                function(i) {
                    $(this).find('img').attr('src', $(this).find('img').attr('src').replace("-on", "-off"));
                    $(this).find('img').removeClass('SelectedColorVariation');
                });

            $("." + $('input[id$=txtSize]').attr('value')).each(
                function(i) {
                    $(this).attr('src', $(this).attr('src').replace("-off", "-on"));
                });
            $("#" + $('input[id$=txtSize]').attr('value')).addClass('SelectedSizeVariation');
            if ($('input[id$=txtColor]').attr('value') != '' &&
                    $("#" + $('input[id$=txtColor]').attr('value')).hasClass($('input[id$=txtSize]').attr('value'))) {
                $("#" + $('input[id$=txtColor]').attr('value')).addClass('SelectedColorVariation');
                $(".cartsize").removeClass('Active');
                $("." + $('input[id$=txtColor]').attr('value')).addClass('Active');
            }
            else {
                $('input[id$=txtColor]').attr('value', '');
                $("#SelectedColor").text('')
            }
        }
        else if (Mode == 2) {
            $(".CartColor").each(
                function(i) {
                    $(this).find('img').attr('src', $(this).find('img').attr('src').replace("-on", "-off"));
                    $(this).find('img').removeClass('SelectedColorVariation');
                });
            $(".cartsize").removeClass('Active');
            $(".cartsize").removeClass('SelectedSizeVariation');

            $("#hasSelected").hide();

            //Check if a color has already been selected
            if ($('input[id$=txtColor]').attr('value') != '') {
                $("#" + $('input[id$=txtColor]').attr('value')).addClass('SelectedColorVariation');
                $("." + $('input[id$=txtColor]').attr('value')).addClass('Active');
                $("#ErrorInSelection").hide();
                $("#hasSelected").show();
            }
            else {
                $(".cartsize").addClass('Active');
            }

            if ($('input[id$=txtSize]').attr('value') != '') {
                $("." + $('input[id$=txtSize]').attr('value')).each(
                        function(i) {
                            $(this).attr('src', $(this).attr('src').replace("-off", "-on"));
                        });
                $("#" + $('input[id$=txtSize]').attr('value')).addClass('SelectedSizeVariation');
                $("#hasSelected").show();
                $("#ErrorInSelection").hide();
            }
            else {
                $(".CartColor").each(
                function(i) {
                    $(this).find('img').attr('src', $(this).find('img').attr('src').replace("-off", "-on"));
                });
            }
        }
    };
    /************************************************************/
    /************************************************************/
    /************************************************************/
    $("#colorchips span a").hover(
        function() {
            ShowColorSelection(this);
        }
        , function() {
            SetSelection(2);
        });

    $("#sizes span a").hover(
        function() {
            ShowSizeSelection(this);
        }
        , function() {
            SetSelection(2);
        });
    /***********************************************************************/
    /***********************************************************************/
    /***********************************************************************/

    $('#colorchips span a').click(function() {
        $('input[id$=txtColor]').attr('value', $(this).find('img').attr('id'));
        $("#SelectedColor").text($(this).find('img').attr('id'));
        SetSelection(0);
    });
    $('#sizes span a').click(function() {

        $('input[id$=txtSize]').attr('value', $(this).attr('id'));
        $("#SelectedSize").text($(this).attr("innerHTML"));
        SetSelection(1);
    });

});