jQuery(function($) {
    var $body = $(document.body),
        classes = [];
    var get_dimensions = function() {
        var viewportwidth;
        var viewportheight;
        
        // the more standards compliant browsers (mozilla/netscape/opera/IE7) 
        if (typeof window.innerWidth != 'undefined') {
            viewportwidth = window.innerWidth,
            viewportheight = window.innerHeight
        }
         
        // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
        else if (typeof document.documentElement != 'undefined'
                 && typeof document.documentElement.clientWidth != 'undefined'
                 && document.documentElement.clientWidth != 0) {
            viewportwidth = document.documentElement.clientWidth,
            viewportheight = document.documentElement.clientHeight
        }
        
        // older versions of IE
        else {
            viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
            viewportheight = document.getElementsByTagName('body')[0].clientHeight
        }

        return [viewportwidth, viewportheight];
    };
    var add_class = function(cls) {
        classes.push(cls);
        $body.addClass(cls);
    };
    var update_classes = function() {
        var dimensions = get_dimensions(),
            width = dimensions[0],
            height = dimensions[1];

        var i, j;
        for(i = 0, j = classes.length; i < j; i++)
            $body.removeClass(classes[i]);
        classes = [];

        var x = 700;
        while(width > x && x <= 1300) {
            add_class('wider-than-' + x);
            x += 50;
        }
    };
    update_classes();
    $(window).resize(update_classes);
});