/// <reference path="master.js" />

$(function() {
    var uploader = function(type, description){
      var context = this;
      var editor = $$("div.editor");

      $("<h2>Upload <strong>" + type.titleize() + "</strong></h2>").appendTo(editor);
      
      if (description){
        editor.append(description);
      }
      
      var form = $$("form.upload", $$('input', {value: ListingEditor.authToken, type: 'hidden', name: 'authenticity_token'}), {
        encoding: 'multipart/form-data',
        method: 'post',
        action: '/images?callback=' + type,
        target: 'uploader'
      });
      
      var input = $$("input.upload", {type: 'file', name: 'image[image]'})
      
      form.append(input);
      editor.append(form);
      
      var buttons = EditorFormatter.dialogButtons(function() {
        form.submit(); 
        ModalPopup.show("<h2>Uploading image...</h2><div><img src='/images/icons/loading.gif'/> Please wait</div>");
      }, function () {
          ModalPopup.hide();           
      }).appendTo(editor);
      
      var listing = ListingEditor.workingListing();
      if (listing[type + '_id']){
        buttons.find('button.save').after($$('button', 'Delete Image').click(function(){
          ListingEditor.updateSubmission(type + '_id', null);
          ModalPopup.hide();
          refresher(type, 'thumb');
        }));
      }
      
      ModalPopup.show(editor);
    };
    
    var refresher = function(type, preview_type){
      var listing = ListingEditor.workingListing();
      var el = $('#' + type + ' img');
      
      if (listing[type + "_id"]) {
        el.attr('src', '/images/' + listing[type + '_id'] + '?preview=' + preview_type);
      }
      else{
        if (type == 'logo') {
          el.attr('src', '/images/placeholders/uploadlogo.png');
        }else{
          if (type == 'banner'){
            el.attr('src', '/images/placeholders/upload_banner.png');
          }
          else{
            el.attr('src', '/images/placeholders/upload_photo.jpg');
          }
        }
      }
    }
  
    ListingEditor.register('logo', {
        fields: ['logo_id'],
        show: function(callback) {
            uploader('logo');
        },
        refresh: function() {
          refresher('logo', 'medium')
        }
    });
    ListingEditor.register('photo_1', {
      fields: ['photo_1_id'],
        show: function(callback) {
            uploader('photo_1');
        },
        refresh: function() {
          refresher('photo_1', 'photothumb')
        }
    });
    ListingEditor.register('photo_2', {
      fields: ['photo_2_id'],
        show: function(callback) {
            uploader('photo_2');
        },
        refresh: function() {
          refresher('photo_2', 'photothumb')
        }
    });
    ListingEditor.register('photo_3', {
      fields: ['photo_3_id'],
        show: function(callback) {
            uploader('photo_3');
        },
        refresh: function() {
          refresher('photo_3', 'photothumb')
        }
    });
    ListingEditor.register('banner', {
      fields: ['banner_id'],
        show: function(callback) {
            uploader('banner', "<p>Image should be <strong>800</strong> pixels wide by <strong>130</strong> high. <br/> Contact us for different sizes.</p>");
        },
        refresh: function() {
          refresher('banner', 'large')
        }
    });
});