/**
 * Enhancement to the imagecache_scale9 UI to preview the effects of the parameters
 */

/**
 * map the imput fields to the values we need to use
 */
var preview_inputs = {
  'left'   : '#edit-data-scale9-left',
  'right'  : '#edit-data-scale9-right',
  'top'    : '#edit-data-scale9-top',
  'bottom' : '#edit-data-scale9-bottom',
};

/**
 * Capture form changes and trigger a preview update when things change
 * (IE may not capture form.onChange?)
 * Behaviors get triggered on pageload
 */
Drupal.behaviors.imagecache_scale9_preview = function (context) {
  create_preview();
  $('#imagecache-ui-action-form').change(function () {
    // Any time the form changes, collate the form values 
    // and update the image with those parameters
    update_preview();
  });
  for (key in preview_inputs) {
    apply_nudger(preview_inputs[key]);
  }
};



/**
 * Draw the preview table on the page
 */
function create_preview() {
  $('#imagecache-ui-action-form')
    .css({position : 'relative'})
    .prepend('<div id="preview-box"></div>');
  var preview_box = $('#preview-box')

  $(preview_box)
    .css({position : 'absolute', top : 0, right : 0})
    .append('<table class="table"><tbody></tbody></table>')
    .append('<img class="image" style="display:none" />')
    .append('<div class="info" ></div>')

  // Set up a bunch of rows, cells and divs
  for (var y = 0; y<3 ; y++){
    var row = $(".table tbody", preview_box).append('<tr id="row-'+ y +'"></tr>');
    for (var x = 0; x<3 ; x++){
      $(".table #row-"+ y, preview_box).append('<td><div class="cell"></div></td>');
    }
  }

  var spacing = 10
  $('.table', preview_box)
    .css({'background-color' : '#EEDDDD'});
  $('.table td', preview_box)
    .css({border : spacing +'px solid white', padding : 0});

  update_preview();
}

/**
 * Transfer values from the form to the preview element
 */
function update_preview() {
  var filepath = Drupal.settings.basePath + Drupal.settings.file_directory_path +"/"+ $('#edit-data-path').val();
  var preview_box = $('#preview-box')
  var spacing = 10
  $('.image', preview_box).attr('src', filepath);
  var samplewidth = $('.image', preview_box).width();
  var sampleheight = $('.image', preview_box).height();
  $('.info', preview_box).html(""+ samplewidth +" x "+ sampleheight)

  // now read some values from the form
  // note the values work best later when cast to an int!
  var left = parseInt($('#edit-data-scale9-left').val());
  var right = parseInt($('#edit-data-scale9-right').val());
  var top = parseInt($('#edit-data-scale9-top').val());
  var bottom = parseInt($('#edit-data-scale9-bottom').val());

  var widths = new Array(left, right-left, samplewidth-right);
  var heights = new Array(top, bottom-top, sampleheight-bottom);
  offsetsx = new Array(0, left, right)
  offsetsy = new Array(0, top, bottom)

  // Apply size and bg to the div WITHIN the cell. Box model is tricky and unreliable otherwise
  $('.table td .cell', preview_box)
    .css({'background-image' : "url("+ filepath +")"})
  // TODO Is there a race condition here? 
  // Am I sure the image is loaded and has dimensions before I continue?

  // Set values on the 9 cells
  for (var y = 0; y<3 ; y++){
    for (var x = 0; x<3 ; x++){
      $('.table tr:eq('+ y +') td:eq('+ x +') .cell', preview_box)
        .html("<small>"+ widths[x] +" x "+ heights[y] +"</small>")
        .width(widths[x])
        .height(heights[y])
        .css({'background-position' : "-"+ offsetsx[x] +"px -"+ offsetsy[y] +"px"})
    }
  }
}

/**
 * Attach a +/1 widget to a form element
 * Not heavily tested, makes some assumptions about the form render structure.
 */
function apply_nudger(element) {
  $(element).after("<div class='nudger' style='display:inline-block; padding-left:0.5em; font-size:0.7em; text-align:center; vertical-align:bottom;'></div>");
  $('.nudger', $(element).parent())
    .append("<div class='plus' style='width:1em; border:1px outset;'>+</div>")
    .append("<div class='minus' style='width:1em; border:1px outset;'>-</div>")
  $('.nudger .plus', $(element).parent()).click(function() {
    var field = $('input' , $(this).parent().parent() );
    field.val(parseInt(field.val())+1);
    $('form').change();
  })
  $('.nudger .minus', $(element).parent()).click(function() {
    var field = $('input' , $(this).parent().parent() );
    field.val(parseInt(field.val())-1);
    $('form').change();
  })
}