$(document).ready(function() {
    $("head").append('<link rel="stylesheet" type="text/css" href="/CSS/ui-lightness/jquery-ui-1.8.7.custom.css" />');
    $("head").append('<link rel="stylesheet" type="text/css" href="/CSS/numericslide.css" />');

    if (state == 'Read') {
        $(".slider").easySlider({
            auto: true,
            continuous: true,
            numeric: true
        });

        $(".slider").removeClass("widget-edit");
    }

    if (state == 'Edit') {
        $(".slider").addClass("widget-edit");
    }

    $(".sortable").live({
        mouseover: function() {
            $(this).sortable({
                axis: "y",
                cursor: "move"
            }).selectable().focus();
        },
        click: function() {
            $(this).addClass('ui-selected');
        }
    });

    $("#sortable").live({
        hover: function() {
            $("#sortable").sortable({ handle: ".handle" })
                .selectable({
                    selected: function(event, ui) {
                        $('input', ui.selected).each(function() {
                            //alert($(this).val()); // Retrieve the selected items.
                        });
                    }
                })
                .find("li[prepended != 'yes']")
                .addClass("ui-corner-all")
                .prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>")
                .attr('prepended', 'yes');
        }
    });

    $("button.remove").live({
        click: function() {
            var count = $('.ui-state-default').length;
            if (count > 1) {
                $(this).parent().fadeOut("slow", function() {
                    $(this).remove();
                });
            }
        }
    });

    $("button.add").live({
        click: function() {
            Add($(this));
        }
    });
});

function Add(button) {
    var item = frame.replace(/\{0\}/g, $("#sortable").children("li").length);
    var li = $(item).hide();
    li.insertAfter(button.parent("li"));
    li.fadeIn("slow");
};

function Save() {
    var slides = $("#sortable").sortable('toArray');
    var list = [];
    $.each(slides, function(index, value) { // value contains the id
        var slide = $('#' + value).children("input");
        var image, title, hyperlink;
        $.each(slide, function() {
            if ($(this).attr("id").search("href") == 0)
                hyperlink = $(this).val();
            if ($(this).attr("id").search("image") == 0)
                image = $(this).val();
            if ($(this).attr("id").search("title") == 0)
                title = $(this).val();
        });
        var item = new Slide(index, image, title, hyperlink);
        list.push(item);
    });
    $(".hidden-field-wrapper input[type=hidden]").val(JSON.stringify(list));
    //alert($(".hidden-field-wrapper input[type=hidden]").val());
};

var Slide = function(index, image, title, hyperlink) {
    this.Index = index;
    this.ImageId = image;
    this.Title = title;
    this.Hyperlink = hyperlink;
}