var maxNumCovers = 10;

function getNumCovers ()
{
    var numCovers = 0;

    for (var i = 1; i <= 10; i++)
    {
        if (! $("#cover_"+i).hasClass('hidden'))
            numCovers++;
    }

    return numCovers;
}

$(document).ready(function () {
    $("#addanothercoverlink > a").click(function (evt) {
        evt.stopPropagation();
        evt.preventDefault();

        var numCovers = getNumCovers();

        if (numCovers == maxNumCovers)
            return;

        var nextcovernum = numCovers + 1;

        var $theDiv = $("#cover_" + nextcovernum);

        $theDiv.removeClass('hidden');

        if (nextcovernum == maxNumCovers)
            $("#addanothercoverlink").hide();
    });

    $("tr.colorcontainer > td > a").click(function (evt) {
        evt.stopPropagation();
        evt.preventDefault();

        // Get cover number
        var covernum = parseInt($(this).parents("td:eq(0)").attr('id').replace(/[^0-9]/g, ""));
        var colorname = $(this).parents("td:eq(0)").attr('id').replace(/color/, "").replace(/\_/, "").replace(/[0-9]/g, "");

        // Set val
        $("#color_"+covernum).val(colorname);

        // Set class
        $("td#color"+colorname+"_"+covernum).addClass("color_selected");

        var theColors = new Array();
        theColors[0] = "black";
        theColors[1] = "blue";
        //theColors[2] = "navyblue";
        theColors[2] = "gray";
        theColors[3] = "vinyl";
        theColors[4] = "marine";

        // Set all other colors to not selected
        for (var i = 0; i < theColors.length; i++)
        {
            if (theColors[i] == colorname)
                continue;
            
            $("td#color"+theColors[i]+"_"+covernum).removeClass("color_selected").removeClass('color_hover');
        }
    });

    // Hovers
    $("tr.colorcontainer > td").hover(function () {
        var covernum = $(this).attr('id').replace(/[^0-9]/g, "");
        var colorname = $(this).attr('id').replace(/color/, "").replace(/\_/, "").replace(/[0-9]/g, "");

        var selectedColor = $("#color_"+covernum).val();

        if (colorname != selectedColor)
            $(this).addClass('color_hover');
    },
    function () {
        var covernum = $(this).attr('id').replace(/[^0-9]/g, "");
        var colorname = $(this).attr('id').replace(/color/, "").replace(/\_/, "").replace(/[0-9]/g, "");

        var selectedColor = $("#color_"+covernum).val();

        if (colorname != selectedColor)
            $(this).removeClass('color_hover');
    });
});