$(document).ready(function() {

    $("#galleries").sortable({
        placeholder: "placeholder",
        update: function(event, ui) {
            index = '' + ($(this).children().index($(ui.item)) + 1)
            url = $(ui.item).attr("XServerSortAction") + index
            result = ServerAjaxRequest(SERVICE_DIRECTORY + url)
        }
    })

    $("#galleries li").each(function() {
        initGalleryIcon($(this))
    })

})

function initGalleryIcon(icon) {
    
    $(icon).mouseup(function(event) {
        if (!$(this).hasClass("ui-sortable-helper")) {
            url = $(this).attr('XServerAction');
            cbGalleryEdit(ServerAjaxRequest(SERVICE_DIRECTORY + url), $(this))
        }
    })

    $(icon).find(".layer-delete > img").mousedown(function(event) {
        event.stopImmediatePropagation()
    }).mouseup(function(event) {
        event.stopImmediatePropagation()
        url = $(this).attr('XServerAction')
        userconfirm = $(this).attr('XActionConfirm')
        if (confirm(userconfirm)) cbGalleryDelete(ServerAjaxRequest(SERVICE_DIRECTORY + url), $(this).parents("li"))
    })
}

function cbGalleryAdd(result, el) {
    $("#galleries").prepend(result)
    initGalleryIcon($("#galleries").children(":first"))
}

function cbGalleryDelete(result, el) {
    $("#" + $(el).attr("id") + "-editor").remove()
    $(el).remove()
}

function cbGalleryEdit(result, el) {

    $("#gallery-editor").html(result);

    message = ''
    $("#gallery-name").keydown(function() {
        message = $(this).val();
    }).keyup(function() {
        if ($(this).val() != message) $("#gallery-name-save").attr("disabled", false)
        message = ''
    })
    $("#gallery-description").keydown(function() {
        message = $(this).val();
    }).keyup(function() {
        if ($(this).val() != message) $("#gallery-description-save").attr("disabled", false)
        message = ''
    })
    $("#gallery-name-save").click(function() {
        url = $(this).attr('XServerAction')
        attribute = "name=" + $("#gallery-name").val()
        result = ServerAjaxRequest(url + attribute)
        $("#gallery-name").val(result)
        $(el).find("div.layer-name").html(result)
        $(this).attr("disabled", true)
    })
    $("#gallery-description-save").click(function() {
        url = $(this).attr('XServerAction')
        attribute = "description=" + $("#gallery-description").val()
        result = ServerAjaxRequest(url + attribute)
        $("#gallery-description").val(result)
        $(el).attr("title", result)
        $(this).attr("disabled", true)
    })

    $("#gallery-images").sortable({
        placeholder: "placeholder",
        update: function(event, ui) {
            index = '' + ($(this).children().index($(ui.item)) + 1)
            url = $(ui.item).attr("XServerSortAction") + index
            result = ServerAjaxRequest(SERVICE_DIRECTORY + url)
        }
    })

    $("#gallery-images li").each(function() {
        initGalleryImage($(this))
    })

    button = $("#image-uploader")
    button_text = $(button).text()
    action = $(button).attr("XServerAction")

    new AjaxUpload(button, {

        action: action,
        name: 'image',
        li: null,

        onSubmit : function(file, ext) {

            if (ext && /^(jpg|png|jpeg|gif)$/i.test(ext)) {
                this.li = $('<li></li>').appendTo('#image-uploading').html(file)
            } else {
                return false
            }
        },

        onComplete: function(file, response) {
            if (response != 'error') {
                $("#gallery-images").append(response)
                initGalleryImage($("#gallery-images li:last"))
            }
            $(this.li).remove()
        }
    });
}

function initGalleryImage(icon) {

    $(icon).mouseup(function(event) {
        if (!$(this).hasClass("ui-sortable-helper")) {

            url = $(this).attr('XServerAction');
            result = ServerAjaxRequest(SERVICE_DIRECTORY + url)
            $("#gallery-image-editor-container").append(result)

            iBox.showURL("#gallery-image-editor", "", {
                width: 600,
                close_label: 'X',
                fade_in_speed: 150,
                fade_out_speed: 150
            })

            $("#gallery-image-editor").ajaxSubmit(function(response) {
                $("#gallery-image-editor").html($(response).html())
                $(icon).find(".layer-name").html($("#image-name").val())
                $(icon).find("> img").attr("title", $("#image-description").val()).attr("alt", $("#image-name").val())
                $("#gallery-image-editor .notice").fadeOut(5000)
            }, function() {
                return true;
            })
        }
    })

    $(icon).find(".layer-delete > img").mousedown(function(event) {
        event.stopImmediatePropagation()
    }).mouseup(function(event) {
        event.stopImmediatePropagation()
        url = $(this).attr('XServerAction')
        userconfirm = $(this).attr('XActionConfirm')
        if (confirm(userconfirm) && false !== ServerAjaxRequest(SERVICE_DIRECTORY + url)) {
            $(this).parents("li").remove()
        }
    })
}