(function($) {
  var getHTML = function() {
    return $('<form action="/previews" class="new_preview" id="new_preview" method="post"><input class="live-upload" id="preview_image" name="preview[image]" size="30" type="file" /></form>');
  }

  function sendImage() {
    var loading = $('<strong> Uploading your image...</strong>')
      .attr({ id: 'upload-indicator' })
      .prepend($('<img/>').attr({ src: '/images/uploading.gif' }))

    $(this).hide().after(loading);

    var form = $('<form></form>').attr({
      action: '/previews',
      target: 'upload-frame',
      method: 'POST',
      enctype: "multipart/form-data"
    });
    
    // For IE
    form.attr("encoding", "multipart/form-data");

    $(document.body).append(form);

    form.append(this);
    
    form.trigger('submit');
  }
  
  $.liveUpload = {
    init: function() {
      $('#nested-form-target').html(getHTML());
      $('.live-upload').bind('change', sendImage);
    },
    
    restore: function() {
      $('#nested-form-target').append(getHTML());
      $('.live-upload').bind('change', sendImage);
    }
  }

  $(document).ready(function() {
    $.liveUpload.init();
  });
})(jQuery);