/*

    CROWDPARK jQuery PLUGIN - AJAX UPLOAD
    License: BSD license
    
    
    Call:   $('element').AjaxUpload(UrlToFileHandler, Options)
    
    Options object can contain the following settings:
    
    option           default value         description
    ==============================================================================================
    title            "File upload"         title for the dialog
    text             ""                    some explaination text shown in the dialog
    width            'auto'                width of the dialog
    height           'auto'                height of the dialog
    overlay          { backgroundColor: '#000', opacity: 0.25 }
                                           overlay to fade out page
    
    progressImage    'loading.gif'         image shown while upload process
    defaultImage     'default.jpg'         image shown before a image has been uploaded
    
    previewHeight    150                   height of the preview image
    previewWidth     150                   width of the preview image
    
    errorMessages: {
      fileTooLarge: "Your file is to big. Please resize it.",
      noFileUploaded: "Please select a file to upload.",
      genericError: "Your file could not be uloaded. Please try again."
    }
                                           user defined error messages to handle upload errors
                                           
    
    onOk             function(preview, original) {}
                                           function to be called after click on ok button
                                           
    onCancel         function() {}         function to be called after click on cancel or close button
    
*/
jQuery.fn.AjaxUpload = function(uploadscript, options) {

  var response;
  var wasOkPressed = false;

  var settings = jQuery.extend({
      title: langVar_FileUpload.title,
    text: "",
    
    overlay: {
      backgroundColor: '#000',
      opacity: 0.25
    },
    
    errorMessages: {
        fileTooLarge: langVar_FileUpload.fileTooLarge,
        noFileUploaded: langVar_FileUpload.noFileUploaded,
        genericError: langVar_FileUpload.genericError
    },
    
    width: 'auto',
    height: 'auto',

    okButtonLabel: langVar_Global.ok,
    cancelButtonLabel: langVar_Global.cancel,
    
    defaultImage: 'default.jpg',
    progressImage: 'loading_green2.gif',
    errorImage: 'default.jpg',
    
    previewHeight: 150,
    previewWidth: 150,
    
    onOk : function(preview, original) {},
    onCancel : function() {}
  }, options);
  
  var upload = function() {
    // reset messages
    $("#ajaxUploadDialog span.message").text("");
    $("#ajaxUploadDialog span.message").css("display", "none");
    
    // check file format
    if (document.getElementById("uploadinput").value.toLowerCase().match(/jpg|jpeg|gif|png$/) != null) {
      // set preview to loading
      document.getElementById("uploadpreview").style.backgroundImage = "url('" + settings.progressImage + "')";
      
      // upload image
      $("#ajaxUploadDialog form").attr("action", uploadscript);
      $("#ajaxUploadDialog form").submit();
      
      // if iframe is ready read temporary file names
      $('#uploadframe').load(function() {
        response = $('#uploadframe')[0].contentWindow.document.body.getElementsByTagName("pre")[0].innerHTML;
        
        // convert text to object
        response = eval("(" + response + ")");
        
        // check for errors while upload
        if (response.isOk) {
          document.getElementById('uploadpreview').style.backgroundImage = "url('" + response.preview + "')";
        } else {
          // no file transfered
          if ( !response.isFileTransfered ) {
            $("#ajaxUploadDialog span.message").text(settings.errorMessages.noFileUploaded);
          
          // file was too large
          } else if ( response.isFileTooLarge ) {
            $("#ajaxUploadDialog span.message").text(settings.errorMessages.fileTooLarge);
          
          // something else happened
          } else {
            $("#ajaxUploadDialog span.message").text(settings.errorMessages.genericError);
          }
          
          // set error image
          if (typeof settings.errorImage == 'object') {
            localErrorImage = (settings.errorImage.src == undefined) ? settings.errorImage.value : settings.errorImage.src;
          } else {
            localErrorImage = settings.errorImage;
          }
          document.getElementById("uploadpreview").style.backgroundImage = "url('" + localErrorImage + "')";
          
          // show error message
          $("#ajaxUploadDialog span.message").css("display", "block");
        }
      });
    } else {
      // wrong file extension
        $("#ajaxUploadDialog span.message").text(langVar_FileUpload.wrongFileExtension);
      $("#ajaxUploadDialog span.message").css("display", "block");
    }
  };

  var openDialog = function() {

    // create dialog
    var dialog = document.createElement("div");
    dialog.setAttribute("id", "ajaxUploadDialog");
    dialog.setAttribute("class", "dialog");
    dialog.setAttribute("style", "display: none;");
    dialog.setAttribute("title", settings.title);
    
    if (typeof settings.defaultImage == 'object') {
      localDefaultImage = (settings.defaultImage.src == undefined) ? settings.defaultImage.value : settings.defaultImage.src;
    } else {
      localDefaultImage = settings.defaultImage;
    }
    
    // add content
    var content = '<p>' + settings.text + '</p>';
    content += '<iframe id="uploadframe" name="uploadframe" style="display: none;"></iframe>';
    content += '<div id="uploadpreview" style="height: ' + settings.previewHeight + 'px; width: ' + settings.previewWidth + 'px; background-position: center center; background-repeat: no-repeat; background-image: url(' + localDefaultImage + ')"></div>';
    content += '<form action="" method="post" enctype="multipart/form-data" target="uploadframe" class="uploadform">';
    content += '  <input type="hidden" name="previewHeight" value="' + settings.previewHeight + '"/>';
    content += '  <input type="hidden" name="previewWidth" value="' + settings.previewWidth + '"/>';
    content += '  <input type="file" id="uploadinput" name="uploadfile"/>';
    content += '  <span class="message">&nbsp;</span>';
    content += '</form>';
    dialog.innerHTML = content;

    // add dialogbox to foot of the page
    document.body.appendChild(dialog);

    // add event to file input field
    $('#uploadinput').change(upload);


    // use jquery to create and open a dialog
    
    // first create some buttons
    var buttons = {};
    buttons[settings.okButtonLabel] = function() {          
          wasOkPressed = true;
          
          // close dialog
          $(this).dialog('close');
        }
    
    buttons[settings.cancelButtonLabel] = function() {
          // close dialog
          $(this).dialog('close');
        };
    
    // now create the dialog
    $('#ajaxUploadDialog').dialog({
    width: settings.width,
    height: settings.height,
    draggable: false,
    overlay: settings.overlay,
    open: function(){
        $(".ui-dialog .ui-dialog-buttonpane button:eq(1)").addClass("delete");
//         $(".ui-shine").remove();
//         $(".ui-widget-overlay").append("<div class='ui-shine'></div>");
//         var offset = $(this).parent(".ui-dialog").position();
//         $(".ui-shine").css("background-position", "center "+(offset.top-100)+"px");
            $(this).parent().addClass("dialogshadow");
    },
    close: function(event, ui) { 
        $(".ui-shine").remove(); 
    },

      modal: true,
      
      buttons : buttons,
      
      close : function() {
      
        // execute events
        if (wasOkPressed) {
          // execute event onOk(preview, original)
          if (response != null && typeof(response) == 'object') {
            settings.onOk(response.preview, response.original);
          } else {
            // if response was emty user may haved used okay button to close the window
            settings.onCancel();
          }
        } else {
          // execute event onCancel()
          settings.onCancel();
        }
      
        // close and remove dialog
        $(this).dialog('destroy');
        document.getElementById("ajaxUploadDialog").parentNode.removeChild(document.getElementById("ajaxUploadDialog"));
      }
      
    });
  };
  
  
  // bind onclick event
  return this.bind("click", openDialog);
  
};