$(function(){

  var $uploadInput = $('#upload-image');
  var $sketchContainer = $('#sketch-container');
  var $sketchTools = $('#sketch-tools').addClass('hide');
  var canvas = $('#sketch-canvas')[0];
  var ctx = canvas.getContext('2d');

  var $buttonClear = $('button.clear');
  var $buttonSave = $('button.save');
  
  var $buttonPencil = $('button.pencil').addClass('in-use');
  var $buttonEraser = $('button.eraser');

  var sketchRadius = 2;
  var sketchColor = '#897171';
  var tool = 'pencil';

  /** EVENTS **/

  // when uploading an image, embed it onto canvas and show it
  $uploadInput.change(function(){

    // embed image onto canvas
    var uploadedImage = $uploadInput[0].files[0];
    var reader = new FileReader();
    reader.onload = function(e){
      var img = new Image();
      img.onload =function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img,0,0);
      }
      img.src = e.target.result;
    };
    reader.readAsDataURL(uploadedImage);

    // show sketch container
    $sketchContainer.removeClass('hide');
    $sketchTools.removeClass('hide');
  });

  // clear canvas when clear button clicked
  $buttonClear.click(function(){
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0,0,canvas.width,canvas.height);

    $sketchContainer.addClass('hide');
    $sketchTools.addClass('hide');
  });

  // open png in new window when save button clicked
  $buttonSave.click(function(){
    window.open(canvas.toDataURL('image/png'));
  });
  
  // use pencil when pencil button clicked
  $buttonPencil.click(function(){
    tool = 'pencil';
    $buttonPencil.addClass('in-use');
    $buttonEraser.removeClass('in-use');
  });
  
  // use eraser when eraser button clicked
  $buttonEraser.click(function(){
    tool = 'eraser';
    $buttonEraser.addClass('in-use');
    $buttonPencil.removeClass('in-use');
  });
  
  

  /** DE-SKETCHING **/

  $(canvas).mousedown(function(e){
    $(canvas).mousemove(function(e){

      // get current pixel position
      var offset = $(this).offset(); 
      var x = e.pageX - offset.left;
      var y = e.pageY - offset.top;

      // draw 2px wide circle with grey around the point of mouse
      ctx.beginPath();
      
      // if pencil, draw edges. if eraser, do the magical erase thing
      if ( tool === 'pencil' ) {
        ctx.arc(x, y, sketchRadius, 0, 2 * Math.PI, false);
        ctx.fillStyle = sketchColor;
        ctx.fill();
      } 
      else if ( tool === 'eraser' ) {
        // magical erase thing will go here!
        console.log('erase!');
      }
      
    });
  });

  // when mouse goes up, stop de-sketching
  $(document).mouseup(function(e){
    $(canvas).unbind('mousemove');
  });

});