var userFeatured = 0;
$(function() {

    //$('.animationName').fitText({ width: 123, height: 22 });

    for (var i = 0; i < (5 - userFeatured); i++) {
        CreateEmptySlot();
    }

    $("#featuredAnimationsBank > div").each(function() {
        AddBankItemToFeatured($(this).clone());
    })

    $('#sortable').sortable({
        items: 'li:not(.ui-state-disabled)'
    });
    $("#sortable").disableSelection();

    $(".deleter").click(function() {
        $(this).parents("li").remove();
        CreateEmptySlot();
        userFeatured--;
        $("#sortable").sortable('refresh');
    });

    $("#bank .bankItemAnimationAdd").click(function() {
        var a = $("#sortable").sortable('toArray');
        if (userFeatured < 5) {
            AddBankItemToFeatured($(this).parents(".bankItemContainer").find(".bankItem").clone());

        }
    });
    $(".CancelBtn").click(function() {
        window.location = fullAppPath + "/mystuff/portfolio";
    });

    $(".SaveBtn").click(function() {
        var a = $("#sortable").sortable('toArray');
        $.get(fullAppPath + "/UserPortfolio/handlers/SetFeaturedAnimations.ashx", { "featured[]": a });
        alert("Update Done.");
    });
});

function CreateEmptySlot() {
    var liItem = $("#liEmpty").clone(true);
    liItem.appendTo($("#sortable"));
}

function AddBankItemToFeatured(bankItem) {
    var liItem = $("#liTemplate").clone(true);
    liItem.find(".divTemplate").prepend(bankItem);
    liItem.attr("id", bankItem.attr("id"));
    liItem.insertBefore($("#sortable li:eq(" + userFeatured + ")"));
    $("#sortable li:last").remove();
    userFeatured++;
    $("#sortable").sortable('refresh');
    updateAddLinksStatus();
}

function updateAddLinksStatus() {
    if (userFeatured < 5) {

    }
}