(function(){

    var uploadInput = document.getElementById('upload-image');
    var frameContainer = document.getElementById('frame-container');
    var canvas = document.getElementById('frame-canvas');
    var ctx = canvas.getContext('2d');

    var buttonClear = document.getElementById('clear');
    var buttonSave = document.getElementById('save');

    var pixelSize = 15;
    var frameSize;

    /** HELPER FUNCTIONS **/

    var calculateFrameSize = function(dimension) {
      // returns computer-pixel width of frame
      var size = pixelSize * Math.ceil( (dimension * .1) / pixelSize) ;
      return size;
    };
    
    var drawFrameDiagonal = function(x,y,color) {
      // only draw if pixel is outside of image
      if ( 
        x < frameSize || 
        y < frameSize ||
        x >= canvas.width - frameSize - 1 ||
        y >= canvas.height - frameSize - 1
      ) {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, pixelSize, pixelSize);
      }

      x = x + pixelSize;
      y = y - pixelSize;

      if (x >= 0 && y >= 0) {
        drawFrameDiagonal(x,y);
      }
    };

    var drawFrame = function() {
      for (var y = 0; y <= canvas.height; y = y + pixelSize) {
        drawFrameDiagonal(0, y, 'cyan');
      }

      for (var x = pixelSize; x <= canvas.width; x = x + pixelSize) {
        drawFrameDiagonal(x, canvas.height - pixelSize, 'lime');
      }
    };

    /** EVENTS **/

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

      // embed image onto canvas
      var uploadedImage = uploadInput.files[0];
      var reader = new FileReader();
      reader.onload = function(e){
        var img = new Image();
        img.onload =function() {
          
          // resize image to fit grid
          img.width = img.width - (img.width % pixelSize);
          img.height = img.height - (img.height % pixelSize);

          // calculate frame width off of smallest dimension
          frameSize = calculateFrameSize(Math.min(img.width, img.height));
          canvas.style.backgroundColor = 'hotpink';
          canvas.width = img.width + 2 * frameSize;
          canvas.height = img.height + 2 * frameSize;
          ctx.drawImage(img,frameSize,frameSize);
          
          drawFrame();
        }
        img.src = e.target.result;
      };
      reader.readAsDataURL(uploadedImage);

      // show sketch container
      frameContainer.style.display = "block";
    };

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

      frameContainer.style.display = 'none';
    };

    // open png in new window when save button clicked
    buttonSave.onclick = function(){
      window.open(canvas.toDataURL('image/png'));
    };

  }());