AntJanus/image selector

## image selector
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Image Selector</title>
  <style>
    .centered-row {
      width: 1024px;
      margin: 1.5em 0;
    }

    #image-container {
      position: relative;
    }

    #image {
      position: absolute;
    }

    #image-uploaded {
      position: absolute;
    }

    #image-overlay {
      position: absolute;
      opacity: 0.3;
      background: #333;
      cursor: 'crosshair';
    }

    #image-selector {
      position: absolute;
      cursor: 'default';
      display: none;
      border: 1px dotted #fff;
    }

    #image-handler {
      position: absolute;
      opacity: 0;
      background: #fff;
    }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script>
function crop(img) {

  //initialize EVERYTHING
  var width = img.image.width();
  var height = img.image.height();

  img.container.width(width);
  img.container.height(height);
  img.image.width(width);
  img.image.height(height);
  img.overlay.width(width);
  img.overlay.height(height);
  img.handler.width(width);
  img.handler.height(height);
  img.selector.css({ background: 'url(' + img.image.attr('src') + ') no-repeat'});

    //initialize trackers
  var selection = {};
  selection.exists = false;
  selection.offset = [0,0];
  selection.origin = [0,0];
  selection.min = [0,0];
  selection.position = [0,0];
  selection.width = 0;
  selection.height = 0;

  updateSelection();

  //binder
  img.handler.on('mousedown', startSelection);
  img.selector.on('mousedown', startMoveSelection);

  //libs
  function getMousePosition(event) {
    //position of image
    var imageOffset = img.image.offset();
    var off = [imageOffset.left, imageOffset.top];
    //mouse position - image offset to get image-relative positions
    var x = event.pageX - off[0],
        y = event.pageY - off[1];
        //if negative, 0, if BIGGER than image : image size, outside of that, regular value
    x = (x < 0) ? 0 : (x > width) ? width : x;
    y = (y < 0) ? 0 : (y > height) ? height : y;
    return [x, y];
   };

   //interface updates
   function updateSelection() {

    img.selector.css({
      backgroundPosition: ( -selection.position[0] -2 ) + 'px ' + ( -selection.position[1] - 2) + 'px',
      left: selection.position[0] + 1,
      top: selection.position[1] + 1,
      width: (selection.width - 2 > 0) ? (selection.width - 2) : 0,
      height: (selection.height - 2 > 0) ? (selection.height - 2) : 0
    });

    if(selection.exists === true) {
      img.selector.css({display: 'block'});
    } else {
      img.selector.css({display: 'none'});
    }
   };

   //set selection (on mouse down)
   function startSelection(event) {
    event.preventDefault();
    event.stopPropagation();


    $(document).mousemove(resizeSelection).mouseup(finishSelection);
    //reset selection
    selection.width = 0;
    selection.height = 0;
    selection.exists = true;

    selection.origin = getMousePosition(event);
    selection.position[0] = selection.origin[0];
    selection.position[1] = selection.origin[1];
    //new selection

    updateSelection();
   };

   //resize original selection
   function resizeSelection(event) {
    event.preventDefault();
    event.stopPropagation();

    var mouse = getMousePosition(event);

    selection.width = mouse[0] - selection.origin[0];
    selection.height = mouse[1] - selection.origin[1];


    //set width

    if(selection.width < 0) {
      selection.width = Math.abs(selection.width);
      selection.position[0] = selection.origin[0] - selection.width;
    } else {
      selection.position[0] = selection.origin[0]
    }

    if(selection.height < 0) {
      selection.height = Math.abs(selection.height);
      selection.position[1] = selection.origin[1] - selection.height;
    } else {
      selection.position[1] = selection.origin[1];
    }

    updateSelection();
   };

   //release selection
   function finishSelection(event) {
    event.preventDefault();
    event.stopPropagation();

    //unbind selector
    $(document).unbind('mousemove');
    $(document).unbind('mouseup');

    selection.origin[0] = selection.position[0];
    selection.origin[1] = selection.position[1];

    if(selection.width > selection.min[0] && selection.height > selection.min[1]) {
      selection.exists = true;
    } else {
      selection.exists = false;
    }

    updateSelection();
   };

   function startMoveSelection(event) {
    event.preventDefault();
    event.stopPropagation();

    selection.origin = getMousePosition(event);

    $(document).mousemove(moveSelection).mouseup(finishMoveSelection);

    updateSelection();
   }

   function moveSelection(event) {
    event.preventDefault();
    event.stopPropagation();

    var mouse = getMousePosition(event);

    selection.position[0] += mouse[0] - selection.origin[0];
    selection.position[1] += mouse[1] - selection.origin[1];

    selection.origin[0] += mouse[0] - selection.origin[0];
    selection.origin[1] += mouse[1] - selection.origin[1];

    updateSelection();
   }

   function finishMoveSelection(event) {
    event.preventDefault();
    event.stopPropagation();

    $(document).unbind('mousemove');
    $(document).unbind('mouseup');

    updateSelection();
   }

   img.save.on('submit', function(){
    $('<input />').attr('type', 'hidden').attr('name', 'pos-0').val(selection.position[0]).insertBefore($('input[type=submit]',img.save));
    $('<input />').attr('type', 'hidden').attr('name', 'pos-1').val(selection.position[1]).insertBefore($('input[type=submit]',img.save));
    $('<input />').attr('type', 'hidden').attr('name', 'pos-2').val(selection.width).insertBefore($('input[type=submit]',img.save));
    $('<input />').attr('type', 'hidden').attr('name', 'pos-3').val(selection.height).insertBefore($('input[type=submit]',img.save));
  })
};

jQuery(document).ready(function($) {
  $('.image-crop img').each(function() {
    this.onload = function() {
      crop({
        container: $('#image-container'),
        image: $('#image'),
        overlay: $('#image-overlay'),
        selector: $('#image-selector'),
        handler: $('#image-handler'),
        save: $('#save')
        });
    }
  });
});
</script>
</head>
<body>
  <div class="centered-row">
    <div id="upload-square">

    </div>
    <div id="image-container" class="image-crop">
      <img src="http://i.imgur.com/NLyGt37.gif" id="image">
      <div id="image-overlay"></div>
      <div id="image-handler"></div>
      <div id="image-selector"></div>
    </div>
    <form method="POST" enctype="multipart/form-data" action="" id="save">
    <input type="file">
    <input type="submit">
    </form>
  </div>

</body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Image Selector</title>
	<style>
	.centered-row {
	width: 1024px;
	margin: 1.5em 0;
	}

	#image-container {
	position: relative;
	}

	#image {
	position: absolute;
	}

	#image-uploaded {
	position: absolute;
	}

	#image-overlay {
	position: absolute;
	opacity: 0.3;
	background: #333;
	cursor: 'crosshair';
	}

	#image-selector {
	position: absolute;
	cursor: 'default';
	display: none;
	border: 1px dotted #fff;
	}

	#image-handler {
	position: absolute;
	opacity: 0;
	background: #fff;
	}
	</style>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<script>
	function crop(img) {

	//initialize EVERYTHING
	var width = img.image.width();
	var height = img.image.height();

	img.container.width(width);
	img.container.height(height);
	img.image.width(width);
	img.image.height(height);
	img.overlay.width(width);
	img.overlay.height(height);
	img.handler.width(width);
	img.handler.height(height);
	img.selector.css({ background: 'url(' + img.image.attr('src') + ') no-repeat'});

	//initialize trackers
	var selection = {};
	selection.exists = false;
	selection.offset = [0,0];
	selection.origin = [0,0];
	selection.min = [0,0];
	selection.position = [0,0];
	selection.width = 0;
	selection.height = 0;

	updateSelection();

	//binder
	img.handler.on('mousedown', startSelection);
	img.selector.on('mousedown', startMoveSelection);

	//libs
	function getMousePosition(event) {
	//position of image
	var imageOffset = img.image.offset();
	var off = [imageOffset.left, imageOffset.top];
	//mouse position - image offset to get image-relative positions
	var x = event.pageX - off[0],
	y = event.pageY - off[1];
	//if negative, 0, if BIGGER than image : image size, outside of that, regular value
	x = (x < 0) ? 0 : (x > width) ? width : x;
	y = (y < 0) ? 0 : (y > height) ? height : y;
	return [x, y];
	};

	//interface updates
	function updateSelection() {

	img.selector.css({
	backgroundPosition: ( -selection.position[0] -2 ) + 'px ' + ( -selection.position[1] - 2) + 'px',
	left: selection.position[0] + 1,
	top: selection.position[1] + 1,
	width: (selection.width - 2 > 0) ? (selection.width - 2) : 0,
	height: (selection.height - 2 > 0) ? (selection.height - 2) : 0
	});

	if(selection.exists === true) {
	img.selector.css({display: 'block'});
	} else {
	img.selector.css({display: 'none'});
	}
	};

	//set selection (on mouse down)
	function startSelection(event) {
	event.preventDefault();
	event.stopPropagation();



	$(document).mousemove(resizeSelection).mouseup(finishSelection);
	//reset selection
	selection.width = 0;
	selection.height = 0;
	selection.exists = true;

	selection.origin = getMousePosition(event);
	selection.position[0] = selection.origin[0];
	selection.position[1] = selection.origin[1];
	//new selection

	updateSelection();
	};

	//resize original selection
	function resizeSelection(event) {
	event.preventDefault();
	event.stopPropagation();

	var mouse = getMousePosition(event);

	selection.width = mouse[0] - selection.origin[0];
	selection.height = mouse[1] - selection.origin[1];


	//set width

	if(selection.width < 0) {
	selection.width = Math.abs(selection.width);
	selection.position[0] = selection.origin[0] - selection.width;
	} else {
	selection.position[0] = selection.origin[0]
	}

	if(selection.height < 0) {
	selection.height = Math.abs(selection.height);
	selection.position[1] = selection.origin[1] - selection.height;
	} else {
	selection.position[1] = selection.origin[1];
	}

	updateSelection();
	};

	//release selection
	function finishSelection(event) {
	event.preventDefault();
	event.stopPropagation();

	//unbind selector
	$(document).unbind('mousemove');
	$(document).unbind('mouseup');

	selection.origin[0] = selection.position[0];
	selection.origin[1] = selection.position[1];

	if(selection.width > selection.min[0] && selection.height > selection.min[1]) {
	selection.exists = true;
	} else {
	selection.exists = false;
	}

	updateSelection();
	};

	function startMoveSelection(event) {
	event.preventDefault();
	event.stopPropagation();

	selection.origin = getMousePosition(event);

	$(document).mousemove(moveSelection).mouseup(finishMoveSelection);

	updateSelection();
	}

	function moveSelection(event) {
	event.preventDefault();
	event.stopPropagation();

	var mouse = getMousePosition(event);

	selection.position[0] += mouse[0] - selection.origin[0];
	selection.position[1] += mouse[1] - selection.origin[1];

	selection.origin[0] += mouse[0] - selection.origin[0];
	selection.origin[1] += mouse[1] - selection.origin[1];

	updateSelection();
	}

	function finishMoveSelection(event) {
	event.preventDefault();
	event.stopPropagation();

	$(document).unbind('mousemove');
	$(document).unbind('mouseup');

	updateSelection();
	}

	img.save.on('submit', function(){
	$('<input />').attr('type', 'hidden').attr('name', 'pos-0').val(selection.position[0]).insertBefore($('input[type=submit]',img.save));
	$('<input />').attr('type', 'hidden').attr('name', 'pos-1').val(selection.position[1]).insertBefore($('input[type=submit]',img.save));
	$('<input />').attr('type', 'hidden').attr('name', 'pos-2').val(selection.width).insertBefore($('input[type=submit]',img.save));
	$('<input />').attr('type', 'hidden').attr('name', 'pos-3').val(selection.height).insertBefore($('input[type=submit]',img.save));
	})
	};

	jQuery(document).ready(function($) {
	$('.image-crop img').each(function() {
	this.onload = function() {
	crop({
	container: $('#image-container'),
	image: $('#image'),
	overlay: $('#image-overlay'),
	selector: $('#image-selector'),
	handler: $('#image-handler'),
	save: $('#save')
	});
	}
	});
	});
	</script>
	</head>
	<body>
	<div class="centered-row">
	<div id="upload-square">

	</div>
	<div id="image-container" class="image-crop">
	<img src="http://i.imgur.com/NLyGt37.gif" id="image">
	<div id="image-overlay"></div>
	<div id="image-handler"></div>
	<div id="image-selector"></div>
	</div>
	<form method="POST" enctype="multipart/form-data" action="" id="save">
	<input type="file">
	<input type="submit">
	</form>
	</div>

	</body>
	</html>