<%# encoding: utf-8 %>
var image_added; // Global callback
(function($) {
  var reset_functionality, open_image_caption, reindex_images,
      template_li, wysiwyg_enabled, input_type;
  $(document).ready(function(){
    var picker = $('#page_image_picker');
    input_type = picker.data('input-type');
    wysiwyg_enabled = input_type == 'wym';

    $('#custom_images_tab a').click(function(){
      if (!picker.data('size-applied') && wysiwyg_enabled){
        var wym_box = $('.page_part:first .wym_box'),
            iframe = $('.page_part:first iframe');
        picker.css({
          height: wym_box.height()
          , width: wym_box.width()
        }).data('size-applied', true).corner('tr 5px').corner('bottom 5px').find('.wym_box').css({
          backgroundColor: 'white'
          , height: iframe.height() + $('.page_part:first .wym_area_top').height() - parseInt($('.wym_area_top .label_inline_with_link a').css('lineHeight'))
          , width: iframe.width() - 20
          , 'border-color': iframe.css('border-top-color')
          , 'border-style': iframe.css('border-top-style')
          , 'border-width': iframe.css('border-top-width')
          , padding: '0px 10px 0px 10px'
        });
      }
    });

    // Webkit browsers don't like the textarea being moved around the DOM,
    // they ignore the new contents. This is fixed below by adding a hidden
    // field that stays in place.
    $('#page_images li textarea:hidden').each(function(index) {
      var old_name = $(this).attr('name'),
          $this = $(this);
      $this.attr('data-old-id', $this.attr('id'));
      $this.attr('name', 'ignore_me_' + index);
      $this.attr('id', 'ignore_me_' + index);

      var hidden = $('<input>')
                    .addClass('caption')
                    .attr('type', 'hidden')
                    .attr('name', old_name)
                    .attr('id', $this.attr('data-old-id'))
                    .val($this.val());

      $this.parents('li').first().append(hidden);
    });

    reset_functionality();


    // Once the plugin has init'd everything, remove the template UI
    $('.page-images-caption-modal').hide();
    template_li = $('#page_images .js-page-images-template').detach();
  });

  reset_functionality = function() {
    if(wysiwyg_enabled) {
      WYMeditor.onload_functions.push(function(){
        $('.wym_box').css({'width':null});
      });
    }

    $("#page_images").sortable({
      'tolerance': 'pointer'
      , 'placeholder': 'placeholder'
      , 'cursor': 'drag'
      , 'items': 'li'
      , stop: reindex_images
    });

    $('#page_images').on('mouseenter mouseleave', 'li', function(e) {
      var $this = $(this),
          image_actions = $this.find('.image_actions');
      if (e.type == 'mouseenter') {
        if (image_actions.length == 0) {
          image_actions = $("<div class='image_actions'></div>");
          var img_delete = $("<img src='<%= image_path('refinery/icons/delete.png') %>' width='16' height='16' />");
          img_delete.appendTo(image_actions);
          img_delete.click(function() {
            $(this).parents('li').first().remove();
            reindex_images();
          });

          if ($this.find('textarea.page_caption').length > 0) {
            var img_caption = $("<img src='<%= image_path('refinery/icons/user_comment.png') %>' width='16' height='16' class='caption' />");
            img_caption.appendTo(image_actions);
            img_caption.click(open_image_caption);
          } else {
            image_actions.addClass('no_captions');
          }

          image_actions.appendTo($this);
        }

        image_actions.show();
      } else if (e.type == 'mouseleave') {
        image_actions.hide();
      }
    });

    reindex_images();
  };

  image_added = function(image) {
    var current_list_item = template_li.clone(),
        image_id = $(image).attr('id').replace('image_', '');
    current_list_item.find('input:hidden:first').val(image_id);

    $("<img />").attr({
      title: $(image).attr('title')
      , alt: $(image).attr('alt')
      , src: $(image).attr('data-grid') // use 'grid' size that is built into Refinery CMS (135x135#c).
    }).appendTo(current_list_item);

    current_list_item.attr('id', 'image_' + image_id).removeClass('empty');

    current_list_item.appendTo($('#page_images'));
    reset_functionality();
  };

  open_image_caption = function(e) {
    var list_item = $(this).closest('li'),
        textarea = list_item.find('.page-images-caption-modal > textarea'),
        textarea_wrapper = textarea.parent(),
        modal_size = {
          textarea: { width: 400, height: 'auto' },
          wym: { width: 928, height: 530 }
        };

    textarea_wrapper.find('.js-page-images-done').on('click', function() {
      textarea_wrapper.dialog("close");
    });

    var close_handler = function() {
      if(wysiwyg_enabled) {
        textarea.data('wymeditor').update();
      }

      $('li.current_caption_list_item').removeClass('current_caption_list_item');
      $('#' + textarea.attr('data-old-id')).val(textarea.val());
      textarea_wrapper.dialog('destroy');
    };

    // move the textarea out of the list item, and then move the textarea back into it when we click done.
    list_item.addClass('current_caption_list_item');
    textarea_wrapper.dialog({
      title: "<%= I18n.t('refinery.js.admin.page_images.add_caption') %>"
      , modal: true
      , resizable: false
      , autoOpen: true
      , width: modal_size[input_type].width
      , height: modal_size[input_type].height
      , close: close_handler
    });

    if(wysiwyg_enabled) {
      textarea.addClass('wymeditor active_rotator_wymeditor widest').wymeditor(wymeditor_boot_options);
    }
    else {
      textarea.show();
    }
  };

  reindex_images = function() {
    $('#page_images li textarea:hidden').each(function(i, input){
      // make the image's name consistent with its position.
      var parts = $(input).attr('name').split('_');
      parts[2] = ('' + i);
      $(input).attr('name', parts.join('_'));

      // make the image's id consistent with its position.
      $(input).attr('id', $(input).attr('id').replace(/_\d/, '_' + i));
      $(input).attr('data-old-id', $(input).attr('data-old-id').replace(/_\d_/, '_'+i+'_').replace(/_\d/, '_' + i));
    });
    $('#page_images li').each(function(i, li){
      $('input:hidden', li).each(function() {
        var $this = $(this);
        // make the image's name consistent with its position.
        var parts = $this.attr('name').split(']');
        parts[1] = ('[' + i);
        $this.attr('name', parts.join(']'));

        // make the image's id consistent with its position.
        $this.attr('id', $this.attr('id').replace(/_\d_/, '_'+i+'_').replace(/_\d/, '_'+i));
      });
    });
  }
})(jQuery);