$(function() {
  
    var Q = window.Q = Quintus()
                       .include('Input,Sprites,Scenes,SVG,Physics')
                       .svgOnly()
                       .setup('quintus',{ maximize: true });
  
    Q.Ball = Q.Sprite.extend({
      init: function(props) {
        this._super(_(props).defaults({
          shape: 'circle',
          color: 'red',
          r: 25,
          restitution: 0.9,
          density: 4,
          seconds: 5
        }));
        this.add('physics');
      }
  
    });
  
    function rotateContainer() {
      $("#quintus_container")[0].style.webkitTransform = 
                       "rotate(" + -1*window.orientation + "deg)";
    }
  
    rotateContainer();
    window.on("orientationchange",rotateContainer);
  
    Q.scene('level',new Q.Scene(function(stage) {
  
      stage.add("world");
  
      // Create the walls
      stage.insert(new Q.Sprite({ x: 5, y: 300, w: 10, h: 600 }));
      stage.insert(new Q.Sprite({ x: 395, y: 300, w: 10, h: 600 }));
      stage.insert(new Q.Sprite({ x: 200, y: 5, w: 400, h: 10 }));
      stage.insert(new Q.Sprite({ x: 200, y: 595, w: 400, h: 10 }));
  
      // Add the center object
      var center = stage.insert(new Q.Sprite({
        x: 200, y: 300, w: 100, h: 200
      }));
  
      stage.each(function() { 
        this.p.type = 'static'; 
        this.add("physics"); 
      });
  
      // Add the balls
      stage.insert(new Q.Ball({ x: 100, y: 50, color:"blue" }));
      stage.insert(new Q.Ball({ x: 200, y: 50, color:"pink" }));
      stage.insert(new Q.Ball({ x: 300, y: 50, color:"black" }));
      stage.insert(new Q.Ball({ x: 100, y: 150, color:"green" }));
      stage.insert(new Q.Ball({ x: 200, y: 150, color:"teal" }));
      stage.insert(new Q.Ball({ x: 300, y: 150, color:"orange" }));
  
      stage.viewport(400,600);
      stage.centerOn(200,300);
  
      if (window.DeviceOrientationEvent) {
  
        window.on("deviceorientation",function(e) {
          var eventData = e.originalEvent
              tiltLR = eventData.gamma,
              tiltFB = eventData.beta,
              direction = eventData.alpha;
  
          center.physics._body.SetAngle(direction * Math.PI / 180);
  
          var leanAngle = tiltLR * Math.PI / 180,
              tiltAngle = tiltFB * Math.PI /180,
              gravityX = 20 * Math.sin(leanAngle),
              gravityY = 20 * Math.sin(tiltAngle);
  
          stage.world._world.m_gravity.x = gravityX;
          stage.world._world.m_gravity.y = gravityY;
  
        });
      }
  
          
    }));
  
    Q.stageScene("level");
  });