var mycode = function() {
  'use strict';

  //define variables
  var here,
      currentSprite,
      canvas = scrawl.canvas.mycanvas,
      pad = scrawl.pad.mycanvas,
      background,
      myImages,
      dragdrop,
      handleFiles,
      handleFile,
      pickupSprite,
      dropSprite,
      stopE;

  //define groups
  background = scrawl.newGroup({
    name: 'background',
    order: 0,
  });
  myImages = scrawl.newGroup({
    name: 'myImages',
    order: 1,
  });

  //define initial sprite
  scrawl.newPhrase({
    font: '40pt Arial, sans-serif',
    text: 'Drag image files\nonto this canvas',
    startX: 300,
    startY: 200,
    handleX: 'center',
    handleY: '60%',
    fillStyle: 'lightgrey',
    group: 'background',
  });

  //event listener functions for dragging and dropping files onto canvas
  stopE = function(e){
    if(e){
      e.stopPropagation();
      e.preventDefault();
    }
  };
  dragdrop = function(e) {
    var dt = e.dataTransfer,
        files = dt.files;
    stopE(e);
    handleFiles(files);
  };
  handleFiles = function(files) {
    for (var i = 0, iz = files.length; i < iz; i++) {
      if (files[i].type.match(/image.*/)) {
        handleFile(files[i], i);
      }
    }
  };
  handleFile = function(file, offset) {
    var reader = new FileReader();
    reader.onload = function() {
      var image = document.createElement('img');
      image.id = file.name;
      image.onload = function() {
        scrawl.newImage({
          element: image,
          fn: function() {
            scrawl.newPicture({
              source: this.name,
              scale: 150 / this.width,
              strokeStyle: 'red',
              scaleOutline: false,
              method: 'fillDraw',
              startX: here.x + (offset * 10),
              startY: here.y + (offset * 10),
              handleX: 'center',
              handleY: 'center',
              group: 'myImages',
            });
          },
        });
      };
      image.src = reader.result;
    };
    reader.readAsDataURL(file);
  };
  canvas.addEventListener("dragenter", stopE, false);
  canvas.addEventListener("dragover", stopE, false);
  canvas.addEventListener("drop", dragdrop, false);

  //event listeners for dragging and dropping sprites within the canvas
  pickupSprite = function(e) {
    stopE(e);
    if (currentSprite) {
      dropSprite();
    }
    currentSprite = myImages.getSpriteAt(here);
    if (currentSprite) {
      currentSprite.pickupSprite(here);
    }
  };
  dropSprite = function(e) {
    stopE(e);
    if (currentSprite) {
      currentSprite.dropSprite();
      currentSprite = false;
    }
  };
  canvas.addEventListener('mousedown', pickupSprite, false);
  document.body.addEventListener('mouseup', dropSprite, false);
  document.body.addEventListener('mouseleave', dropSprite, false);

  //animation object
  scrawl.newAnimation({
    fn: function() {
      here = pad.getMouse();
      if (!here.active) {
        dropSprite();
      }
      scrawl.render();
      myImages.updateSpritesBy({
        roll: 0.2,
      });
    },
  });
};

scrawl.loadModules({
  path: 'http://scrawl.rikweb.org.uk/js/',
  modules: ['animation', 'images', 'phrase'],
  callback: function() {
    window.addEventListener('load', function() {
      scrawl.init();
      mycode();
    }, false);
  },
});