<html>
<head>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="stylesheet" href="../../inclusos/styles.css">
<link href="../../inclusos/css_precopratico.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="70" border="0" cellspacing="0" cellpadding="2" onClick="history.go(-1)" style="cursor:pointer; float:right; background-color:#FC0; font-weight:bold;">
  <tr>
    <td height="25" align="center" class="TextoMenuBranco">Voltar</td>
  </tr>
</table>
<div>
  <img src="<?php echo $_GET['diretorio_virtual'];?><?php echo $_GET['arquivo'];?>" alt="" id="image">
  <canvas id="canvas"></canvas>
</div>
<p>
  <strong>GIRAR IMAGEM: </strong>
  <a href="javascript:;" id="resetImage">Resetar Imagem</a>
  <a href="javascript:;" id="rotate90">90&deg;</a>
  <a href="javascript:;" id="rotate180">180&deg;</a>
  <a href="javascript:;" id="rotate270">270&deg;</a>
</p>

<a id="download" download="<?php echo $_GET['arquivo'];?>">Fazer Download</a>

<script>
var img = null, canvas = null;

$(document).ready(function(){
  //  Initialize image and canvas
  img = document.getElementById('image');
  canvas = document.getElementById('canvas');

  if(!canvas || !canvas.getContext){
    canvas.parentNode.removeChild(canvas);
  } else {
    img.style.position = 'absolute';
    img.style.visibility = 'hidden';
  }
  rotateImage(0);

  //  Handle clicks for control links
  $('#resetImage').click(function(){ rotateImage(0); });
  $('#rotate90').click(function(){ rotateImage(90); });
  $('#rotate180').click(function(){ rotateImage(180); });
  $('#rotate270').click(function(){ rotateImage(270); });
});

function rotateImage(degree)
{
  if(document.getElementById('canvas')){
    var cContext = canvas.getContext('2d');
    var cw = img.width, ch = img.height, cx = 0, cy = 0;

    //   Calculate new canvas size and x/y coorditates for image
    switch(degree){
      case 90:
        cw = img.height;
        ch = img.width;
        cy = img.height * (-1);
		Salvar();
        break;
      case 180:
        cx = img.width * (-1);
        cy = img.height * (-1);
		Salvar();
        break;
      case 270:
        cw = img.height;
        ch = img.width;
        cx = img.width * (-1);
		Salvar();
        break;
    }

    //  Rotate image            
    canvas.setAttribute('width', cw);
    canvas.setAttribute('height', ch);
    cContext.rotate(degree * Math.PI / 180);
    cContext.drawImage(img, cx, cy);
    $('#download').attr('href', canvas.toDataURL())
  } else {
    //  Use DXImageTransform.Microsoft.BasicImage filter for MSIE
    switch(degree){
      case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';   break;
      case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';  break;
      case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';  break;
      case 270: image.style.filter =    'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';  break;
    }
  }
}
function Salvar(){

	$.ajax({
	  type: "POST",
	  url: "altera_img.php",
	  data: { 
		 imgBase64: canvas.toDataURL(),
		 arquivo: '<?php echo $_GET['arquivo'];?>',	 
	  }
	}).done(function(o) {
	  console.log('saved');
	   
	  // If you want the file to be visible in the browser 
	  // - please modify the callback in javascript. All you
	  // need is to return the url to the file, you just saved 
	  // and than put the image in your browser.
	});
	
	
}
</script>
</body>
</html>