//Todo: update this to a modal dialog
function showUserMessage(message) {
    alert(message);
}

function createImageUploadForm() {

    var formMarkup =
    '<div id="image-upload-dialog" class="jqmWindow">' +
    '<h3 id="image-upload-dialog-title">Select image file to upload.</h3>' +
    '<form id="image-upload-form" enctype="multipart/form-data" method="post">' +
    '<p><input type="file" id="uploadFile" name="uploadFile" /></p>' +
    '<p><input type="submit" value="Upload File" /><button id="image-upload-cancel" >Cancel</button></p>' +
    '</form>' +
    '<div id="image-upload-progress-bar" class="progress" >' +
    '<img src="/content/images/loading.gif" />' +
    '</div>';
    
    if ($("#image-upload-dialog").length == 0) {
        $("body").append($(formMarkup));
        var dialogOptions = {
            modal: true
        };
        $("#image-upload-dialog").jqm(dialogOptions);
        $("#image-upload-dialog").jqmAddClose("#image-upload-cancel");

    }
}



/* var options={
title: "Select and image file to upload",
imageUrlTarget: "#imageUrl",
imageContainer: "#imageContainer",
maxWidth: 300,
maxHeight: 300,
success: goodUploadComplete
}
*/

var _currentImageFileOptions;

function showImageUploadDialog(options) {
    createImageUploadForm();
    //setup the form for upload
    var defaultOptions = {
        title: "Select an image file to upload",
        maxWidth: 300,
        maxHeight: 300
    };
    _currentImageFileOptions = $.extend(defaultOptions, options || {});

    $("#image-upload-dialog-title").text(_currentImageFileOptions.title);
    var formOptions = {
        beforeSubmit: beginImageUpload,
        success: processImageUpload,
        url: "/File.mvc/UploadImage?maxWidth=" + _currentImageFileOptions.maxWidth + "&maxHeight=" + _currentImageFileOptions.maxHeight,
        type: "POST",
        dataType: "json",
        iframe: true,
        clearForm: true,
        resetForm: true
    };
    $("#image-upload-form").ajaxForm(formOptions)
    $("#image-upload-dialog").jqmShow();
    $("#image-upload-progress-bar").css("visibility", "hidden");
}

function beginImageUpload(formData, jqForm, options) {

    $("#image-upload-form").css("display", "none");
    $("#image-upload-progress-bar").css("visibility", "visible");
    $("#image-upload-dialog-title").text("Uploading file...");

}

function processImageUpload(data) {
    hideUploadForm();
    if (data.error == true) {
        alert(data.message);

    }
    else {
        //set the value of the ImageUrl item to the url
        if (_currentImageFileOptions.imageUrlTarget) {
            var urlTarget = $(_currentImageFileOptions.imageUrlTarget);
            if (urlTarget.length > 0) {
                urlTarget.attr("value", data.url);
            }
        }
        if (_currentImageFileOptions.imageContainer) {
            var imageContainer = $(_currentImageFileOptions.imageContainer);
            if (imageContainer.length > 0) {
                var newImage = $("<img></img>").attr("src", data.url);
                imageContainer.empty().append(newImage);
            }
        }

        if (_currentImageFileOptions.success && typeof _currentImageFileOptions.success == 'function') {
            _currentImageFileOptions.success(data);
        }

    }
}

function hideUploadForm() {
    $("#image-upload-form").css("display", "block");
    $("#image-upload-progress-bar").css("visibility", "hidden");
    $("#image-upload-dialog").jqmHide();
}