var RedactorPlugins = RedactorPlugins || {};

RedactorPlugins.images = {

  init: function() {
    this.opts.modal_image_edit = this.createHtml();
  },

  createHtml: function() {
    return '' +
          '<div id="redactor_modal_content">' +
          '<label>Caption</label>' +
          '<input id="redactor_file_caption" class="redactor_input" />' +
          '<label>' + RLANG.title + '</label>' +
          '<input id="redactor_file_alt" class="redactor_input" />' +
          '<label>' + RLANG.link + '</label>' +
          '<input id="redactor_file_link" class="redactor_input" />' +
          '<label>' + RLANG.image_position + '</label>' +
          '<select id="redactor_form_image_align">' +
            '<option value="none">' + RLANG.none + '</option>' +
            '<option value="left">' + RLANG.left + '</option>' +
            '<option value="right">' + RLANG.right + '</option>' +
          '</select>' +
          '</div>' +
          '<div id="redactor_modal_footer">' +
            '<a href="javascript:void(null);" id="redactor_image_delete_btn" class="redactor_modal_btn">' + RLANG._delete + '</a>&nbsp;&nbsp;&nbsp;' +
            '<a href="javascript:void(null);" class="redactor_modal_btn redactor_btn_modal_close">' + RLANG.cancel + '</a>' +
            '<input type="button" name="save" class="redactor_modal_btn" id="redactorSaveBtn" value="' + RLANG.save + '" />' +
          '</div>';
  },

  imageEdit: function(e) {
    var $el = $(e.target),
        parent = $el.parent(),
        callback;

    callback = $.proxy(function() {
      $('#redactor_image_edit_src').attr('href', $el.attr('src'));

      $('#redactor_file_alt').val($el.attr('alt'));
      $('#redactor_form_image_align').val($el.css('float'));
      $('#redactor_file_caption').val($el.attr('data-caption'));

      if ($(parent).get(0).tagName === 'A') {
        $('#redactor_file_link').val($(parent).attr('href'));
      }

      $('#redactor_image_delete_btn').click($.proxy(function() {
        this.imageDelete($el);
      }, this));

      $('#redactorSaveBtn').click($.proxy(function() {
        this.imageSave($el);
      }, this));

    }, this);

    this.modalInit(RLANG.image, this.opts.modal_image_edit, 380, callback);

  },

  imageSave: function(el) {
    var parent = $(el).parent(),
        floating = $('#redactor_form_image_align').val(),
        link = $.trim($('#redactor_file_link').val());

    $(el).attr('alt', $('#redactor_file_alt').val());
    $(el).attr('data-caption', $('#redactor_file_caption').val());

    // Cleanup style
    $(el).removeAttr('style');

    if (floating === 'left') {
      $(el).removeClass('align-right');
      $(el).addClass('align-left');

    } else if (floating === 'right') {
      $(el).removeClass('align-left');
      $(el).addClass('align-left');

    } else {
      $(el).removeClass('align-left align-right');
    }

    // as link
    if (!link) {
      if ($(parent).get(0).tagName !== 'A') {
        $(el).replaceWith('<a href="' + link + '">' + this.outerHTML(el) + '</a>');
      } else {
        $(parent).attr('href', link);
      }
    } else {
      if ($(parent).get(0).tagName === 'A') {
        $(parent).replaceWith(this.outerHTML(el));
      }
    }

    this.modalClose();
    this.observeImages();
    this.syncCode();

  }
};