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

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

    // FIXME: should only show elements after loading is finished
    // FIXME: Sync cannon barrel and cannon ball initial starting 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 target = $( '<div/>', {class: 'target'}).appendTo(main_container);

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

    function fire_cannon(fire_event) {
        var event_x     = fire_event.pageX;
        var event_y     = $(window).height() - fire_event.pageY;
        var radians     = Math.atan2( event_y, event_x );
        var time        = 0;
        var v_x0        = v_0 * Math.cos(radians);
        var v_y0        = v_0 * Math.sin(radians);
        var x           = 0;
        var y           = $(window).height();
        var target_is_hit = false;

        var cannon_ball = $( '<div/>', {class: 'cannon-ball'}).appendTo(main_container);
        cannon_ball.velocity({
           fontSize: 0
        },{
            duration: 2000,
            easing: "swing",
            progress: function(){
                time = time + .15;
                x = (v_x0*time);
                y = (((v_y0*time)) - (.5*gravity*(Math.pow(time, 2))));
                // Forgive the magic number for the offset
                $(this).css({ left: x - 100, top: $(window).height() - y });
                var hit_target = $(this).collision('.target');
                if ( hit_target !== 0 ) {
                    if ( !target_is_hit ) { // TODO: why is this var not working as expected?
                        ++score;
                    }
                    target_is_hit = true;
                    hit_target.velocity({rotateX: '360deg'})
                        .velocity("fadeOut")
                        .velocity({display: 'none'});
                }

            },
            complete: function() {
                if ( target_is_hit ) {
                    $('.score').text(score);
                    $('.target').remove();
                    $( '<div/>', {class: 'target'}).appendTo(main_container).hide().velocity("fadeIn");
                }
                $(this).remove();
            }
        });
    }

    // 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').mousemove(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('click', fire_cannon );
    $.mobile.loading().hide();
}); // end of document ready

@@ -2545,34 +2545,8 @@
 ner)
-.hide().velocity(%22fadeIn%22)
 ;%0A  
@@ -3626,210 +3626,8 @@
  %7D%0A%0A
-    // only moves the box when the mouse is held down%0A    $('html').mousemove(function () %7B%0A        $(document).mousemove(mousemoved);%0A    %7D).mouseup(function () %7B%0A        $(document).unbind();%0A    %7D);%0A
 %0A%0A  
@@ -3663,16 +3663,38 @@
 row keys
+ and page up/down keys
 %0A    // 
@@ -3836,43 +3836,26 @@
     
+$(
 window
+)
 .
-addEventListener(%22
 keydown
-%22, 
+(
 func
@@ -3868,62 +3868,8 @@
 ) %7B%0A
-        //  space, page up, page down and arrow keys:%0A
     
@@ -3993,24 +3993,26 @@
 );%0A%0A    
+$(
 document
 .addEven
@@ -4007,35 +4007,16 @@
 ment
+)
 .
-addEventListener('
 click
-', 
+(
 fire
@@ -4022,17 +4022,55 @@
 e_cannon
- 
+);%0A    $(document).mousemove(mousemoved
 );%0A    $

Simplify event listener calls