var rotation;
var rotationStep;
var canvas;
var ctx;
var locationx;
var locationy;
var autoscale = false;
var radius = 1;  // the radius of the circle whe put the photo inside
var zoomfactor = 1;
var baseCoordZoom;
var trX = 0;
var trY = 0;

function initialize() {
  rotation = 0.0;
  rotationStep =  2 * Math.PI / 360;
  canvas = document.getElementById("photoarea");
  locationx = document.getElementById("locationx");
  locationy = document.getElementById("locationy");
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
  }
  canvas.onmousemove = mouseMove;
  canvas.onmousewheel = mouseWheel;

  var dside = Math.min(canvas.width, canvas.height) / 2;
  baseCoordZoom = dside / radius;
}


function draw() {

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();

  var photo = document.getElementById("photo");

  // Calculate a scale factor to make the image diagonal from center to corner be exactly 1.0
  var imgw = photo.width / 2;
  var imgh = photo.height / 2;
  var imgs = radius / Math.sqrt(imgw * imgw + imgh * imgh);

  baseAngle = Math.atan(imgh/imgw);

  if (autoscale) {
    var angle1 = baseAngle + rotation;
    var angle2 = baseAngle - rotation;
    var maxY = Math.max(Math.abs(Math.sin(angle1)), Math.abs(Math.sin(angle2)));
    var maxX = Math.max(Math.abs(Math.cos(angle1)), Math.abs(Math.cos(angle2)));
    zoomfactor = Math.min((canvas.width/2)/maxX, (canvas.height/2)/maxY);
  }

  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.scale(baseCoordZoom, -baseCoordZoom);
  ctx.translate(trX, trY);
  ctx.scale(zoomfactor, zoomfactor);

  ctx.save();
  ctx.rotate(rotation);
  ctx.scale(imgs, -imgs);
  ctx.drawImage(photo, -imgw, -imgh);
  ctx.restore();

  if (true) {
    ctx.lineWidth = 0.01;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, 1);
    ctx.moveTo(1, 0);
    ctx.arc(0, 0, 1, 0, 2 * Math.PI, false);
    ctx.stroke();
  }
  ctx.restore();
}

// invoked by Canvas.onMouseMove.
function mouseMove(event) {

    locationx.innerHTML = screenToCoordX(event.clientX - canvas.offsetLeft).toFixed(3);
    locationy.innerHTML = screenToCoordY(event.clientY - canvas.offsetTop).toFixed(3);

  // ctx.strokeRect(event.clientX, event.clientY, 20, 20);
}


function screenToCoordX(screenX) {
    return (screenX - canvas.width/2) / (baseCoordZoom * zoomfactor);
}
function screenToCoordY(screenY) {
    return (canvas.height/2 - screenY) / (baseCoordZoom * zoomfactor);
}



function mouseWheel(event) {
  //  alert('delta: ' + event.wheelDelta);
  zoomfactor *= (1 - event.wheelDelta/1000.0);
  draw();
  mouseMove(event);
}


document.onkeydown = function(event) {
  var keyCode; 
  var doDraw = false;

  if (event == null) {
    keyCode = window.event.keyCode; 
  } else {
    keyCode = event.keyCode; 
  }
  switch (keyCode) {
    // left 
  case 37: 
  rotation += rotationStep;
  doDraw = true;
  break;
  // right 
  case 39: 
  rotation -= rotationStep;
  doDraw = true;
  break; 
  default: 
  break; 
  } 
  if (doDraw) {
    draw();
  }
}