$("#calculate").on("click", function() {
  
  //old value variables
  var widthOld = +$('#width-old').val();
  var heightOld = +$('#height-old').val();
  var bleedOld = +$('#bleed-old').val();
  var marginOld = +$('#margin-old').val();
  var artboardWidthOld = widthOld + bleedOld*2;
  var artboardHeightOld = heightOld + bleedOld*2;
  var finishedWidthOld = widthOld;
  var finishedHeightOld = heightOld;
  var contentWidthOld = widthOld-(marginOld*2);
  var contentHeightOld = heightOld-(marginOld*2);
  var bleedX1Old = bleedOld;
  var bleedX2Old = artboardWidthOld - bleedOld;
  var bleedY1Old = bleedOld;
  var bleedY2Old = artboardHeightOld - bleedOld;
  var marginX1Old = bleedX1Old + marginOld;
  var marginX2Old = bleedX2Old - marginOld;
  var marginY1Old = bleedY1Old + marginOld;
  var marginY2Old = bleedY2Old - marginOld;
  
  var ratio = heightOld/widthOld;

  //new value variables
  var widthNew = +$('#width-new').val();
  var heightNew = ratio*widthNew;
  var bleedNew = bleedOld;
  var marginNew = marginOld;
  var artboardWidthNew = widthNew + bleedNew*2;
  var artboardHeightNew = heightNew + bleedNew*2;
  var finishedWidthNew = widthNew;
  var finishedHeightNew = heightNew;
  var contentWidthNew = widthNew-(marginNew*2);
  var contentHeightNew = heightNew-(marginNew*2);
  var bleedX1New = bleedNew;
  var bleedX2New = artboardWidthNew - bleedNew;
  var bleedY1New = bleedNew;
  var bleedY2New = artboardHeightNew - bleedNew;
  var marginX1New = bleedX1New + marginNew;
  var marginX2New = bleedX2New - marginNew;
  var marginY1New = bleedY1New + marginNew;
  var marginY2New = bleedY2New - marginNew;
  
  
  //old dimentions
  $("#artboard-width-old").html(artboardWidthOld);
  $("#artboard-height-old").html(artboardHeightOld);
  $("#finished-width-old").html(finishedWidthOld);
  $("#finished-height-old").html(finishedHeightOld);
  $("#content-width-old").html(contentWidthOld);
  $("#content-height-old").html(contentHeightOld);
  //old guides
  $("#bleed-x1-old").html(bleedX1Old);
  $("#bleed-x2-old").html(bleedX2Old);
  $("#bleed-y1-old").html(bleedY1Old);
  $("#bleed-y2-old").html(bleedY2Old);
  $("#margin-x1-old").html(marginX1Old);
  $("#margin-x2-old").html(marginX2Old);
  $("#margin-y1-old").html(marginY1Old);
  $("#margin-y2-old").html(marginY2Old);
  
  //new dimentions
  $("#height-new").val(heightNew.toFixed(3));
  $("#bleed-new").val(bleedNew);
    //TASK - add option of resizing bleed if > than .125, else leave at minimum of .125
    //var bleedRatio = widthOld/bleedOld;
    //var bleedNew = bleedRatio*widthNew;
  $("margin-new").val(marginNew);
  $("#artboard-width-new").html(artboardWidthNew.toFixed(3));
  $("#artboard-height-new").html(artboardHeightNew.toFixed(3));
  $("#finished-width-new").html(finishedWidthNew.toFixed(3));
  $("#finished-height-new").html(finishedHeightNew.toFixed(3));
  $("#content-width-new").html(contentWidthNew.toFixed(3));
  $("#content-height-new").html(contentHeightNew.toFixed(3));
  //new guides
  $("#bleed-x1-new").html(bleedX1New.toFixed(3));
  $("#bleed-x2-new").html(bleedX2New.toFixed(3));
  $("#bleed-y1-new").html(bleedY1New.toFixed(3));
  $("#bleed-y2-new").html(bleedY2New.toFixed(3));
  $("#margin-x1-new").html(marginX1New.toFixed(3));
  $("#margin-x2-new").html(marginX2New.toFixed(3));
  $("#margin-y1-new").html(marginY1New.toFixed(3));
  $("#margin-y2-new").html(marginY2New.toFixed(3));
  
});


$("#reset").on("click", function() {
    $(this).find("input[type=text], textarea").val("");
});