$(function () {

function handler(e, inside) {
  var insideLeft = zeroOneZero(inside.left),
      insideTop  = zeroOneZero(inside.top);

  $('.value').text(inside.left.toFixed(1) + " / " + inside.top.toFixed(1));

  $(this).toggleClass('overlap', insideLeft>=0 && insideLeft<=1 && insideTop>=0 && insideTop<=1);

  $('meter.horizontal').val(100 * insideLeft);
  $('meter.vertical').val(100 * insideTop);
}

$('#bar')
  .draggable()
  .resizable()
  .bind('inside', {
    ancestor: '#foo',
    frequency: 1000 / 15
  }, handler);

(function resize() {
  $('meter.vertical').width($(window).height());
}());
$(window).resize(resize);

// Helper

function zeroOneZero(zeroToOne) {
  return -1 * Math.abs((zeroToOne - .5) * 2) + 1;
}

});