$(function() {
    var Q = window.Q = Quintus()
                       .include('Input,Sprites,Scenes,SVG,Physics')
                       .svgOnly()
                       .setup('quintus',{ maximize: true });
  
    
    Q.CannonBall = Q.Sprite.extend({
      init: function(props) {
        this._super({
          shape: 'circle',
          color: 'red',
          r: 8,
          restitution: 0.5,
          density: 4,
          x: props.dx * 50 + 10,
          y: props.dy * 50 + 210,
          seconds: 5
        });
        this.add('physics');
        this.bind('step',this,'countdown');
      },
  
      countdown: function(dt) {
        this.p.seconds -= dt;
        if(this.p.seconds < 0) { 
          this.destroy();
        } else if(this.p.seconds < 1) {
          this.set({ "fill-opacity": this.p.seconds });
        }
      }
    });
  
    Q.Cannon = Q.Sprite.extend({
      init: function(props) {
        this._super({
          shape:'polygon',
          color: 'black',
          points: [[ 0,0 ], [0,-5], [5,-10], [8, -11], [40, -11], 
                    [ 40, 11], [8, 11], [5, 10], [0, 5] ],
          x: 10,
          y: 210
        });
      },
  
      fire: function() {
        var dx = Math.cos(this.p.angle / 180 * Math.PI),
            dy = Math.sin(this.p.angle / 180 * Math.PI),
            ball = new Q.CannonBall({ dx: dx, dy: dy, angle: this.p.angle });
        Q.stage().insert(ball);
        ball.physics.velocity(dx*400,dy*400);
      }
    });
  
    var targetCount = 0;
    Q.Target = Q.Sprite.extend({
      init: function(props) {
        this._super(_.extend(props,{
          shape: 'circle',
          color: 'pink',
          r: 8
        }));
        targetCount++;
        this.add('physics');
        this.bind('contact',this,'checkHit');
      },
  
      checkHit: function(sprite) {
        if(sprite instanceof Q.CannonBall) {
          targetCount--;
          this.parent.remove(this);
          if(targetCount == 0) { Q.stageScene('level'); }
        }
      }
    });
  
  $(Q.wrapper).on('touchstart touchmove mousemove',function(e) {
      var stage = Q.stage(0), 
          cannon = stage.cannon,
          touch = e.originalEvent.changedTouches ?  
                  e.originalEvent.changedTouches[0] : e,
          point = stage.browserToWorld(touch.pageX,touch.pageY);
     
      var angle = Math.atan2(point.y - cannon.p.y,
                             point.x - cannon.p.x);
      cannon.p.angle = angle * 180 / Math.PI;
      e.preventDefault();
    });
  
    $(Q.wrapper).on('touchend mouseup',function(e) {
      Q.stage(0).cannon.fire();
      e.preventDefault();
    });
  
    Q.scene('level',new Q.Scene(function(stage) {
      targetCount = 0;
      stage.add("world");
      stage.insert(new Q.Sprite({ 
        x: 250, y: 250, w: 700, h: 50, type:"static"
      }))
  
      stage.insert(new Q.Sprite({ w: 10, h:50, x: 500, y: 200 }));
      stage.insert(new Q.Sprite({ w: 10, h:50, x: 550, y: 200 }));
      stage.insert(new Q.Sprite({ w: 70, h:10, x: 525, y: 170 }));
      stage.insert(new Q.Sprite({ w: 10, h:50, x: 500, y: 130 }));
      stage.insert(new Q.Sprite({ w: 10, h:50, x: 550, y: 130 }));
      stage.insert(new Q.Sprite({ w: 70, h:10, x: 525, y: 110 }));
  
      stage.insert(new Q.Sprite({
        points: [[ 0,0 ], [ 50, -50 ],[150, -50],[200,0]],
        x: 200,
        y: 225,
        type:'static',
        shape: 'polygon'
      }));
  
      stage.insert(new Q.Sprite({ w: 50, h:50, x: 300, y: 150 }));
      stage.insert(new Q.Sprite({ w: 25, h:25, x: 300, y: 115 }));
  
      stage.each(function() { this.add("physics"); });
  
      stage.insert(new Q.Target({ x: 525, y: 90 }));
      stage.insert(new Q.Target({ x: 300, y: 90 }));
      stage.insert(new Q.Sprite({ w: 30, h:30, x: 10, y: 210, 
                                  color: 'blue' }));
  
      stage.cannon = stage.insert(new Q.Cannon());
      stage.viewport(600,400);
      stage.centerOn(300,100);
         
    }));
    Q.stageScene("level");
    
  });