window.onload = function() {
    'use strict';
  
    // create a Scene
    var scn = new DivSugar.Scene().setSize(800, 600).setImage('mobile-sugar-examples-assets-corkboard.jpg').appendTo(document.body);
  
    // maximize the Scene size
    function resize() { scn.adjustLayout(window.innerWidth, window.innerHeight, 'contain'); }
    window.addEventListener('resize', resize, true);
    resize();
  
    // put pictures
    function addPicture(x, y, src) {
      var node1 = new DivSugar.Node().setPosition(x, y, 0).appendTo(scn);
      var node2 = new DivSugar.Node().setSize(250, 250).setPosition(-130, -130, 0).setImage(src).appendTo(node1);
  
      node2.div.className = 'picture';
      node2.div.addEventListener('mousedown', function(e) {
        if (e.button === 0) {
          hitNode = node1;
          node1.appendTo(scn); // move this Node to the front of the screen
        }
      }, true);
  
      // for touch events
      node2.div.addEventListener('touchstart', function(e) {
        if (!hitNode) {
          hitNode = node1;
          node1.appendTo(scn); // move this Node to the front of the screen
          e.preventDefault();
        }
      }, true);
    }
  
    addPicture(250, 155, 'mobile-sugar-examples-assets-picture1.jpg');
    addPicture(550, 155, 'mobile-sugar-examples-assets-picture2.jpg');
    addPicture(250, 445, 'mobile-sugar-examples-assets-picture3.jpg');
    addPicture(550, 445, 'mobile-sugar-examples-assets-picture4.jpg');
  
    // manipulate pictures
    var hitNode = null;
    var mousePos = new DivSugar.Vector();
    var dragOffset = new DivSugar.Vector();
    var task = new DivSugar.Task().appendTo(DivSugar.rootTask);
  
    task.onUpdate = function() {
      if (hitNode) {
        scn.getLocalPosition(DivSugar.getMouseX(), DivSugar.getMouseY(), mousePos);
  
        if (DivSugar.getMouseState(0, 'pressed')) {
          hitNode.getPosition(dragOffset);
          dragOffset.sub(mousePos);
        }
  
        if (DivSugar.getMouseState(0, 'on')) { hitNode.setPosition(mousePos.x + dragOffset.x, mousePos.y + dragOffset.y, 0); }
        if (DivSugar.getMouseState(0, 'released')) { hitNode = null; }
  
        if (DivSugar.getKeyState(38, 'on')) { hitNode.scale(1 + this.deltaTime * 0.002, 1 + this.deltaTime * 0.002, 1); }
        if (DivSugar.getKeyState(40, 'on')) { hitNode.scale(1 - this.deltaTime * 0.002, 1 - this.deltaTime * 0.002, 1); }
  
        if (DivSugar.getKeyState(37, 'on')) { hitNode.rotate(0, 0, this.deltaTime * -0.1); }
        if (DivSugar.getKeyState(39, 'on')) { hitNode.rotate(0, 0, this.deltaTime * 0.1); }
      }
    };
  };