Image focus on CSS cropped image thumbnails

index.html

<div class="image-editable">
  <img src="http://lorempixel.com/700/400" />
  <a class="focus"></a>
</div>

<div class="image-display">
  <img src="http://lorempixel.com/700/400" alt="">
  <span class="focus"></span>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

jquery-ui.css

.ui-resizable {
  position: relative;
}
.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}
.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}
.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}
.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}
.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}
.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}
.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}
.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}
.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

main.css

* {
  box-sizing: border-box;
}
img {
  vertical-align: bottom;
}
.image-editable {
  position:relative;
  float: left;
  margin: 20px;
  width: 700px;
}
.image-editable img {
  max-width: 100%;
}
.focus {
  display: block;
  position:absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border:3px solid #fff;
  border-radius:12px;
  margin: -12px 0 0 -12px;
  cursor:move;
  background:rgba(255, 255, 255, .5);
  z-index: 1;
  opacity: 0.5;
}
.focus:hover {
  opacity: 1;
}

.image-display {
  width: 306px;
  height: 306px;
  float: left;
  border: 3px solid red;
  position: relative;
  overflow: hidden;
  background: salmon;
  margin: 20px;
}
.image-display img {
  position: absolute;
}

main.js

// Image focus on CSS cropped image thumbnails
// Inspired by Squarespace
//
// Copyright 2013 Nic Aitch
// License MIT

$(window).load(function() {
  var $focus = $('.focus');

  var setImageAlignment = function(position) {
    var $container = $('.image-display'),
        $target    = $container.find('img'),
        height     = $container.height(),
        width      = $container.width(),
        boundry    = {},
        center     = {},
        scale      = 1,
        x, y;

    position.left /= scale
    position.top /= scale

    center = {
      x: width / 2,
      y: height / 2
    }

    console.log(position, center)

    boundry = {
      left: center.x,
      top: center.y,
      right: $target.width() - center.x,
      bottom: $target.height() - center.y
    }

    x = -position.left + center.x;
    y = -position.top  + center.y;

    if (position.left < boundry.left) {
      x = 0;
    }
    if (position.left > boundry.right) {
      x = width - $target.width();
    }

    if (position.top < boundry.top) {
      y = 0;
    }
    if (position.top > boundry.bottom) {
      y = height - $target.height();
    }

    $target.css({
      left: x,
      top: y,
    });
  }

  var findPosition = function (e) {
    var position = $(e.target).position();
    setImageAlignment(position)
  }

  $('.image-editable .focus').draggable({
    containment: "parent",
    drag: findPosition,
    create: findPosition
  });

  $('.image-display').resizable({
    maxHeight: $('.image-display img').height(),
    maxWidth: $('.image-display img').width(),
    resize: function(e, ui) {
      findPosition({ target: ".image-editable .focus" })
    }
  });
});