/**
* jspsych-resize
* Steve Chao
*
* plugin for controlling the real world size of the display
*
* documentation: docs.jspsych.org
*
**/

jsPsych.plugins["resize"] = (function() {

  var plugin = {};

  plugin.info = {
    name: 'resize',
    description: '',
    parameters: {
      item_height: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Item height',
        default: 1,
        description: 'The height of the item to be measured.'
      },
      item_width: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Item width',
        default: 1,
        description: 'The width of the item to be measured.'
      }, 
      prompt: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Prompt',
        default: '',
        description: 'The content displayed below the resizable box and above the button.'
      },
      pixels_per_unit: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Pixels per unit',
        default: 100,
        description: 'After the scaling factor is applied, this many pixels will equal one unit of measurement.'
      },
      starting_size: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Starting size',
        default: 100,
        description: 'The initial size of the box, in pixels, along the larget dimension.'
      },
      button_label: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Button label',
        default: 'Done',
        description: 'Label to display on the button to complete calibration.'
      },
    }
  }

  plugin.trial = function(display_element, trial) {

    var aspect_ratio = trial.item_width / trial.item_height;

    // variables to determine div size
    if(trial.item_width >= trial.item_height){
      var start_div_width = trial.starting_size;
      var start_div_height = Math.round(trial.starting_size / aspect_ratio);
    } else {
      var start_div_height = trial.starting_size;
      var start_div_width = Math.round(trial.starting_size * aspect_ratio);
    }

    // create html for display
    var html ='<div id="jspsych-resize-div" style="border: 2px solid steelblue; height: '+start_div_height+'px; width:'+start_div_width+'px; margin: 7px auto; background-color: lightsteelblue; position: relative;">';
    html += '<div id="jspsych-resize-handle" style="cursor: nwse-resize; background-color: steelblue; width: 10px; height: 10px; border: 2px solid lightsteelblue; position: absolute; bottom: 0; right: 0;"></div>';
    html += '</div>';
    html += trial.prompt;
    html += '<a class="jspsych-btn" id="jspsych-resize-btn">'+trial.button_label+'</a>';

    // render
    display_element.innerHTML = html;

    // listens for the click
    document.getElementById("jspsych-resize-btn").addEventListener('click', function() {
      scale();
      end_trial();
    });

    var dragging = false;
    var origin_x, origin_y;
    var cx, cy;

    var mousedownevent = function(e){
      e.preventDefault();
      e.stopPropagation();
      dragging = true;
      origin_x = e.pageX;
      origin_y = e.pageY;
      cx = parseInt(scale_div.style.width);
      cy = parseInt(scale_div.style.height);
    }

    display_element.querySelector('#jspsych-resize-handle').addEventListener('mousedown', mousedownevent);

    var mouseupevent = function(e){
      dragging = false;
    }

    document.addEventListener('mouseup', mouseupevent);

    var scale_div = display_element.querySelector('#jspsych-resize-div');

    var resizeevent = function(e){
      if(dragging){
        var dx = (e.pageX - origin_x)*2;
        var dy = (e.pageY - origin_y)*2;

        if(dx >= dy){
          scale_div.style.width = Math.max(10, cx+dx) + "px";
          scale_div.style.height = Math.round(Math.max(10, cx+dx) / aspect_ratio ) + "px";
        } else {
          scale_div.style.height = Math.max(10, cy+dy) + "px";
          scale_div.style.width = Math.round(aspect_ratio * Math.max(10, cy+dy)) + "px";
        }
      }
    }

    document.addEventListener('mousemove', resizeevent);

    // scales the stimulus
    var scale_factor;
    var final_height_px, final_width_px;
    function scale() {
      final_width_px = scale_div.offsetWidth;
      final_height_px = scale_div.offsetHeight;

      var pixels_unit_screen = final_width_px / trial.item_width;

      scale_factor = pixels_unit_screen / trial.pixels_per_unit;
      document.getElementById("jspsych-content").style.transform = "scale(" + scale_factor + ")";
    };


    // function to end trial
    function end_trial() {

      // clear document event listeners
      document.removeEventListener('mousemove', resizeevent);
      document.removeEventListener('mouseup', mouseupevent);

      // clear the screen
      display_element.innerHTML = '';

      // finishes trial

      var trial_data = {
        'final_height_px': final_height_px,
        'final_width_px': final_width_px,
        'scale_factor': scale_factor
      }

      jsPsych.finishTrial(trial_data);
    }
  };

  return plugin;
})();

@@ -662,17 +662,16 @@
       %7D,
- 
 %0A      p
@@ -3034,35 +3034,8 @@
 ();%0A
-      e.stopPropagation();%0A
     
@@ -3600,18 +3600,16 @@
 rigin_x)
-*2
 ;%0A      
@@ -3643,10 +3643,8 @@
 n_y)
-*2
 ;%0A%0A 
@@ -3657,17 +3657,37 @@
  if(
+Math.abs(
 dx
+)
  %3E= 
+Math.abs(
 dy)
+)
 %7B%0A  
@@ -3714,24 +3714,35 @@
 yle.width = 
+Math.round(
 Math.max(10,
@@ -3738,25 +3738,25 @@
 ath.max(
-1
+2
 0, cx+dx
 ) + %22px%22
@@ -3747,16 +3747,19 @@
 0, cx+dx
+*2)
 ) + %22px%22
@@ -3819,17 +3819,17 @@
 max(
-1
+2
 0, cx+dx
 ) / 
@@ -3824,16 +3824,18 @@
 0, cx+dx
+*2
 ) / aspe
@@ -3901,24 +3901,35 @@
 le.height = 
+Math.round(
 Math.max(10,
@@ -3925,25 +3925,25 @@
 ath.max(
-1
+2
 0, cy+dy
 ) + %22px%22
@@ -3934,16 +3934,19 @@
 0, cy+dy
+*2)
 ) + %22px%22
@@ -4020,17 +4020,17 @@
 max(
-1
+2
 0, cy+dy
 )) +
@@ -4025,16 +4025,18 @@
 0, cy+dy
+*2
 )) + %22px
@@ -4282,24 +4282,26 @@
 idth;%0A      
+//
 final_height

fix abs() issue with shrinking box