$(function () {
    'use strict'; // Start of use strict

    var main_container = $('#main-container');
    var cannon = $('.cannon');

    // FIXME: should only show elements after loading is finished

    // set cannon's starting position and pivot point
    cannon.css({'transform-origin': 'left'});
    cannon.css({'transform' : 'rotate(-45deg)'});
    cannon.css({'position': 'absolute',
                        'left': '0',
                        'top': ($(window).height() - cannon.width())});
    cannon.show();

    var center_x    = 0;
    var center_y    = 0;
    var v_0         = 150;  // arbitrary initial velocity
    var theta       = 100;  // radians
    var degrees     = 0;
    var gravity     = 9.81;

    //TODO: Bugs everywhere. Fix glitchy animation (Matt).
    function fire_cannon(fire_event) {
        main_container.append('<div class="cannon-ball"></div>');
        var time = 0;
        var cannon_ball = $('.cannon-ball');
        var v_x0 = v_0 * Math.cos(theta*-1); //Should theta have to be negated here?
        var v_y0 = v_0 * Math.sin(theta*-1); //Or here?

        cannon_ball.css({ fontSize: 0 }).animate({
            fontSize: 45
        },{
            duration: 5000,
            easing: "swing",
            step: function(t, fx){
                time = time + .10;
                var x = (v_x0*time);
                var y = (((v_y0*time)) - (.5*gravity*(time*time)) );
                console.log(x + ' ' + y);
                $(this).css({ left: x, top: 1000 - y });
            }
        });
        cannon_ball.clearQueue();   // This needs to be called somewhere else to clear the animation queue
                                    // (Maybe detect ball collision with edge of screen, then clear queue?
        main_container.remove('.cannon-ball');
    }

    // returns theta in radians
    function calculate_theta(event) {
        var cannon_offset   = cannon.offset();
        center_x        = (cannon_offset.left) + (cannon.width() / 2);
        center_y        = (cannon_offset.top) + (cannon.height() / 2);
        var event_x         = event.pageX;
        var event_y         = event.pageY;
        return Math.atan2( event_y - center_y, event_x - center_x );
    }

    function rotate_cannon(degrees) {
        cannon.css({'transform' : 'rotate(' + degrees + 'deg)'});
    }


    function mousemoved(event) {
        var radians = calculate_theta(event);
        var degree = (radians * (180 / Math.PI));
        degrees = degree;
        rotate_cannon(degree);
        theta = radians;
        var pageCoords = event.pageX + ', ' + event.pageY;
        var clientCoords = event.clientX + ', ' + event.clientY;
        $('#coords').text('( pageX, pageY ) : ' + pageCoords
            + ' ( clientX, clientY ) : ' + clientCoords);
    }

    // only moves the box when the mouse is held down
    $('html').mousedown(function () {
        $(document).mousemove(mousemoved);
    }).mouseup(function () {
        $(document).unbind();
    });


    // disables scrolling by arrow keys
    // TODO: comment this section out when debugging cannon balls
    // TODO: also comment out body & html sections in main.sass (lines 4-9)
    window.addEventListener("keydown", function(e) {
        //  space, page up, page down and arrow keys:
        if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
            e.preventDefault();
        }
    }, false);

    document.addEventListener('mouseup', fire_cannon );
    $.mobile.loading().hide();
}); // end of document ready

@@ -592,11 +592,9 @@
   = 
-150
+5
 ;  /
@@ -644,18 +644,16 @@
       = 
-10
 0;  // r
@@ -815,73 +815,8 @@
 ) %7B%0A
-        main_container.append('%3Cdiv class=%22cannon-ball%22%3E%3C/div%3E');
 %0A   
@@ -914,27 +914,24 @@
 th.cos(theta
-*-1
 ); //Should 
@@ -1004,11 +1004,8 @@
 heta
-*-1
 ); /
@@ -1014,25 +1014,24 @@
 r here?%0A
-%0A
         
 cannon_b
@@ -1026,87 +1026,226 @@
     
-cannon_ball.css(%7B fontSize: 0 %7D).animate(%7B%0A            fontSize: 45%0A        %7D,%7B
+var x = Math.cos(theta)*300;%0A        var y = 1000 - Math.sin(theta)*300;%0A%0A        main_container.append('%3Cdiv class=%22cannon-ball%22%3E%3C/div%3E');%0A        cannon_ball.velocity(%7B%0A            left: x,%0A            top: 1000 - y,
 %0A   
@@ -1257,19 +1257,16 @@
     
-duration: 5
+tween: 1
 000,
@@ -1282,24 +1282,36 @@
     
-easing: %22swing%22,
+duration: 10000%0A        %7D, %7B
 %0A   
@@ -1323,12 +1323,16 @@
     
-step
+progress
 : fu
@@ -1342,14 +1342,22 @@
 ion(
-t, fx)
+ x, y, time ) 
 %7B%0A  
@@ -1386,17 +1386,16 @@
 ime + .1
-0
 ;%0A      
@@ -1408,17 +1408,12 @@
     
-var 
 x = 
-(
 v_x0
@@ -1417,17 +1417,16 @@
 _x0*time
-)
 ;%0A      
@@ -1431,28 +1431,24 @@
             
-var 
 y = (((v_y0*
@@ -1473,20 +1473,26 @@
 ty*(
-time*
+Math.pow(
 time
+,2
 ))
- 
+)
 );%0A 
@@ -1518,17 +1518,20 @@
 ole.log(
-x
+time
  + ' ' +
@@ -1535,55 +1535,19 @@
 ' + 
-y);%0A                $(this).css(%7B left: x, top:
+x + ' ' + (
  100
@@ -1552,17 +1552,18 @@
 000 - y 
-%7D
+) 
 );%0A     
@@ -1566,24 +1566,25 @@
            %7D
+,
 %0A        %7D);
@@ -1584,273 +1584,95 @@
     
-%7D);%0A        cannon_ball.clearQueue();   // This needs to be called somewhere else to clear the animation queue%0A                                    // (Maybe detect ball collision with edge of screen, then clear queue?%0A        main_container.remove('.cannon-ball'
+    complete: function() %7B%0A               $(this).remove();%0A            %7D%0A        %7D
 );%0A
+%0A
     

Use Velocity.js to render cannon ball (Broken)