How to set jquery localScroll's offset dynamically?

Question

jQuery(function( $ ){
    var theOffset = ($(window).width()-900)/-2;

    $(window).resize(function() {
        var theOffset = ($(window).width()-900)/-2;
    });

    $.localScroll({
        target: '#content', // could be a selector or a jQuery object too.
        queue:true,
        duration:1000,
        hash:true,
        offset: {top:0, left: theOffset},
        onBefore:function( e, anchor, $target ){
            // The 'this' is the settings object, can be modified
        },
        onAfter:function( anchor, settings ){
            // The 'this' contains the scrolled element (#content)
        }
    });
});

With the above code I am expecting the left offset of localScroll to change when you resize the window, but it is sticking to the original on-page-load variable. How do I get it to change dynamically when you rezise the page window?

Here is my test page: -removed-

You can see my problem when you load the page with a full-sized window, then shrink the window down smaller, and clicking the links on the bottom nav bar, it slides to the correct place but the offset doesn't change to the smaller width.

Any help would be much appreciated! Thanks!