<?php 
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);

	require "models/rivermedia.php";
	$rivermedia = new RIVERMEDIA;
	$rivermedia->auth();
	$rivermedia->image_upload();
	$guid = $_GET['guid'];
	$edit = "n";
	if (isset($_GET['edit'])) {
		$edit = $_GET['edit'];
	};
	$date = date_create();
    $cacheKiller = date_timestamp_get($date);
?>
<!doctype html>
<html lang="en">
<head>
<?php include_once('includes/head.php'); ?>
<link href="public/stylesheets/fileinput.css" rel="stylesheet" type="text/css">
</head>
<body style="background:#ffffff!important;">
  <div class="col-md-4 col-sm-4 col-lg-4">
  	<form name="file_upload" id="file_upload" enctype="multipart/form-data" action="upload?upload_guid=<?php echo $guid; ?>" method="post">
        <label for="image_upload" class="control-label">Select File</label>
        <input id="image_upload" name="image_upload" type="file" class="file">  
    </form>
  </div>
  <div class="col-md-4 col-sm-4 col-lg-4">
    <div id="thumbwrapper">
      <?php
      if (file_exists("public/media/product_images/tn_".strtolower($guid).".jpg")) {
          ?>
          <img src="public/media/product_images/<?php echo "tn_".strtolower($guid); ?>.jpg?<?php echo $cacheKiller; ?>" />
          <br /><br />
          <?php if ($edit === 'y') { ?>
          <button id="animateselbutton" class="btn btn-success btn-sm" onclick="window.location.reload();">Image Processing&nbsp;&nbsp;<i class="fa fa-picture-o" aria-hidden="true"></i></button>
		  <?php }; ?>
		  <?php
      }
      else {
          echo "Missing image!";	
      };
      ?>
    </div>
  </div>
  <?php include_once('includes/javascript.php'); ?>
  <script src="public/scripts/js/fileinput.min.js"></script>
  <script>
  
	function animateSel() {
		if (!ias.getSelection().width)
			ias.setOptions({ show: true, x1: 199, y1: 149, x2: 200, y2: 200 });
		ias.animateSelection(10, 10, 500, 500, 'slow');
	};

  function initializeResize() {
		window.parent.$('#modalImageProcess').modal('show');
		window.parent.$.extend(window.parent.$.imgAreaSelect.prototype, {
			animateSelection: function (x1, y1, x2, y2, duration) {
				var fx = $.extend($('<div/>')[0], {
					ias: this,
					start: this.getSelection(),
					end: { x1: x1, y1: y1, x2: x2, y2: y2 }
				});
		
				$(fx).animate({
					cur: 1
				},
				{
					duration: duration,
					step: function (now, fx) {
						var start = fx.elem.start, end = fx.elem.end,
							curX1 = Math.round(start.x1 + (end.x1 - start.x1) * now),
							curY1 = Math.round(start.y1 + (end.y1 - start.y1) * now),
							curX2 = Math.round(start.x2 + (end.x2 - start.x2) * now),
							curY2 = Math.round(start.y2 + (end.y2 - start.y2) * now);
						fx.elem.ias.setSelection(curX1, curY1, curX2, curY2);
						fx.elem.ias.update();
					}
				});
			}
		});	
		
		window.parent.$('.imgareaselect-outer').removeClass('zero_index');
		window.parent.$('.imgareaselect-selection').parent().removeClass('zero_index');
	
		$(function () {
			ias = window.parent.$('#working_image').imgAreaSelect({
				aspectRatio: '1:1', 
				fadeSpeed: 400, 
				handles: true, 
				instance: true, 
				persistent: true, 
				//parent: '#image_work_area',
				minWidth:200,
				minHeight:200,
				maxWidth:800,
				maxHeight:800,
				onSelectEnd: function (img, selection) {
            	window.parent.$('input[name="x1"]').val(selection.x1);
            	window.parent.$('input[name="y1"]').val(selection.y1);
            	window.parent.$('input[name="x2"]').val(selection.x2);
            	window.parent.$('input[name="y2"]').val(selection.y2);
				window.parent.$('#saveimagebutton').removeClass('disabled');
				}
				});
		
			animateSel();	
		});	
  };
  
function preview(img, selection) {
	var scaleX = 100 / (selection.width || 1);
	var scaleY = 100 / (selection.height || 1);
  
	window.parent.$('#working_image + div > img').css({
		width: Math.round(scaleX * 150) + 'px',
		height: Math.round(scaleY * 150) + 'px',
		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
	});
};
  
  
  $(document).ready(function() {
	  if ('<?php echo $edit; ?>' === 'y') {
		  
		  window.parent.$('#image_work_area img').attr('src', 'public/media/product_images/working_image_<?php echo strtolower($guid); ?>.jpg?<?php echo $cacheKiller; ?>');
		  $('#modalImageProcess').unbind('click');
		  setTimeout(function() {
		  window.parent.$('#saveimagebutton').addClass('disabled');
		  initializeResize();
		}, 200);
		
		
		/*
		$('<div><img src="public/media/product_images/lg_22908dde-360f-6b88-880a-731fd175b494.jpg" style="position: relative;" /><div>')
			.css({
				float: 'left',
				position: 'relative',
				overflow: 'hidden',
				width: '100px',
				height: '100px'
			})
			.insertAfter(window.parent.$('#working_image'));
	
		window.parent.$('#working_image').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });	
		*/	
	  };
  });
  </script>
</body>
</html>
