define('main', function(require, exports, module) {

  var Engine     = require('famous/core/Engine');

  var Surface    = require('famous/core/Surface');

  var Modifier   = require('famous/core/Modifier');

  var Transform  = require('famous/core/Transform');

  var RenderNode = require('famous/core/RenderNode');

  var Quaternion = require('famous/math/Quaternion');

​

  var mainContext = Engine.createContext();

  mainContext.setPerspective(1000);

​

  // The axis of the rotation is a Left Hand Rule vector with X Y Z (i j k) components

  var quaternion = new Quaternion(1, 0, 0, 0);

  var moveQuaternion = new Quaternion(185, 0, 0, 0);

​

  var rotationModifier = new Modifier({

    origin: [0.5, 0.5],

    align: [0.5, 0.5]

  });

​

  // Bind the box's rotation to the quaternion

  rotationModifier.transformFrom(function() {

    return quaternion.getTransform();

  });

​

  mainContext.add(rotationModifier)

  .add(createBox(260, 260, 260));

​

  // This is where the rotation is created

  Engine.on('prerender', function() {

    // You combine rotations through quaternion multiplication

    quaternion = quaternion.multiply(moveQuaternion);

    //console.log('quaternion', quaternion);

  });

​

  Engine.on('keyup', function(e) {

    console.log('keyEvent',e.keyIdentifier);

    var x = quaternion.x;

    var y = quaternion.y;

    var z = quaternion.z;

    switch (e.keyIdentifier) {

      case 'Up':

        x = -1; y = 0; z = 0;

        break;

      case 'Down':

        x = 1; y = 0; z = 0;

        break;

      case 'Left':

        x = 0; y = 1; z = 0;

        break;

      case 'Right':

        x = 0; y = -1; z = 0;

        break;

      case 'Home':

        x = -1; y = 1; z = 0;

        break;

      case 'PageUp':

        x = -1; y = -1; z = 0;

        break;

      case 'End':

        x = 1; y = 1; z = 0;

        break;

      case 'PageDown':

        x = 1; y = -1; z = 0;

        break;

      case 'Clear':

        x = 0; y = 0; z = 0;

        break;

      default:

        x = 1; y = 1; z = 1;

    }

    moveQuaternion = new Quaternion(185, x, y, z);

  });

​

  // Creates box renderable

  function createBox(width, height, depth) {

    var box = new RenderNode();

​

    function createSide(params){

      var surface = new Surface({

        size: params.size,

        content: params.content,

        classes: params.classes,

        properties: params.properties

      });

​

      var modifier = new Modifier({

        transform: params.transform

      });

​

      box.add(modifier).add(surface);

    }

​

    // Front

    createSide({

      size: [width, height],

      content: '<h2>Hello World, let\'s get friendly.</h2><p>Take num lock off and use the keypad to arrow the cube rotation.</p>',

      classes: ["red-bg"],

      properties: {

        backgroundColor: '#f30',

        lineHeight: 25 + 'px',

        textSize: '20px',

        textAlign: 'center',

        overflow: 'auto'

      },

      transform: Transform.translate(0, 0, depth / 2)

    });

​

    // Back

    createSide({

      size: [width, height],

      content: 'G\'bye world, Good to know you :D',

      properties: {

        lineHeight: height + 'px',

        textAlign: 'center',

        backgroundColor: '#ff0',

        fontSize: '18px',

        overflow: 'hidden',

        color: '#777'

      },

      transform: Transform.multiply(Transform.translate(0, 0, - depth / 2), Transform.multiply(Transform.rotateZ(Math.PI), Transform.rotateX(Math.PI))),

    });

​

    // Top

    createSide({

      size: [width, depth],

      content: 'I\'m on Top! Just a shimmy and a shake',

      properties: {

        lineHeight: depth + 'px',

        textAlign: 'center',

        backgroundColor: '#0cf',

        overflow: 'hidden',

        color: '#600'

      },

      transform: Transform.multiply(Transform.translate(0, -height / 2, 0), Transform.rotateX(Math.PI/2)),

    });

​

    // Bottom

    createSide({

      size: [width, depth],

      content: 'I\'m the bottom!',

      properties: {

        lineHeight: depth + 'px',

        textAlign: 'center',

        backgroundColor: '#ddd',

        overflow: 'hidden',

        color: '#777'

      },

      transform: Transform.multiply(Transform.translate(0, height / 2, 0), Transform.multiply(Transform.rotateX(-Math.PI/2), Transform.rotateZ(Math.PI))),

    });

​

    // Left

    createSide({

      size: [depth, height],

      content: 'I\'m the Left! I\'m content',

      properties: {

        lineHeight: height + 'px',

        textAlign: 'center',

        backgroundColor: '#333',

        overflow: 'hidden',

        color: '#777'

      },

      transform: Transform.multiply(Transform.translate(-width / 2, 0, 0), Transform.rotateY(-Math.PI/2))

    });

​

    // Right

    createSide({

      size: [depth, height],

      content: 'I\'m always Right!',

      properties: {

        lineHeight: height + 'px',

        textAlign: 'center',

        backgroundColor: '#555',

        overflow: 'hidden',

        color: '#777',

      },

      transform: Transform.multiply(Transform.translate(width / 2, 0, 0), Transform.rotateY(Math.PI/2))

    });

​

    return box;

  }

});