function showModal(url, callback)
{
    modal = $("#modal")
    content = $('#modal_content')

    content.html('<img src="img/modal_loading.gif" class="modal_loading" alt="Loading...">')
    content.load(url, callback)
    modal.addClass("active")
    modal.height($(document).height())
    modal.fadeIn("medium")
    
    return false
}

function hideModal(url)
{
    modal = $("#modal")
    
    modal.fadeOut("medium", function() {
        modal.removeClass("active")
    })
}


$(function () {
    $("#modal").css("display", "none")
    
    $(document).keydown(function(e) {
        if (e.which == 27) //ESC
        {
            hideModal()
        }
    })
    
    $("#modal").click(function(e) {
        if (e.target == this)
        {
            hideModal()
        }
    })
    
    submitURL = "gallery/submit/"
    
    function submitCallback()
    {
        flattenVisible()
        data_url = $('#flatten_canvas')[0].toDataURL()
        $("#submit_preview").attr("src", data_url)
        $("#id_image").val(data_url)
        
        $("#modal_content .close_modal").click(function() {
            hideModal()
            return false
        })
        
        $("#submit_button").click(function() {
            $("#submit_button").html("Submitting...")
            $("#submit_button").attr("disabled", "disabled")
            $.post(submitURL, $("#submit_form form").serialize(), function(data) {
                $("#modal_content").html(data)
                submitCallback()
            })
            
            return false
        })
    }
    
    $("#submit_link a").click(function() {
        showModal(submitURL, submitCallback)
        return false
    })
})