Javascript Inline and External Script difference

I need some help, I am currently porting all my internal scripts on my website to a single js file to speed up my website according to the Google and Yahoo page speed recommendations.

I have the following script in my page footer.php (I am using wordpress)

<script> (function ($) {
jQuery(function () {
    var $container = $('#container');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.box',
            columnWidth: 100
        });
    });
    $container.infinitescroll({
        navSelector: '.post-nav',
        nextSelector: '.previous a',
        itemSelector: '.box',
        loading: {
            finishedMsg: 'No more pages to load.',
            img: '/wp-content/themes/images/ajax-loader.gif'
        }
    },

    function (newElements) {
        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });
            $container.masonry('appended',
            $newElems, true);
        });
    });
});
})(jQuery) 
</script>

If the script is in my footer it works 100%, when I add it into the single js it stops working…

Any ideas on why this is, and how should I load the script the same way from the external js stylesheet as it executes like when inline.