Change javascript according to window width
<p>I think this is quite simple but after 2 days of trying I'm still clueless. Basically, I need to run one set of commands if the screen is over 767 pixels wide and another if the screen is under 767 pixels.</p>

<p>When the screen is wider than 767 pixels, I want to:</p>

<pre><code>&lt;script type="text/javascript"&gt;

    var jsReady = false;//for flash/js communication

    // FLASH EMBED PART
    var flashvars = {};
    var params = {};

    params.quality = "high";
    params.scale = "noscale";
    params.salign = "tl";
    params.wmode = "transparent";
    params.bgcolor = "#111111";//change flash bg color here
    params.devicefont = "false";
    params.allowfullscreen = "true";
    params.allowscriptaccess = "always";
    var attributes = {};
    attributes.id = "flashPreview";

    swfobject.embedSWF("preview.swf", "flashPreview", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

    &lt;!-- and much more code... --&gt;

&lt;/script&gt;
</code></pre>

<p>When the screen is narrower than 768 pixels, I want to run:</p>

<pre><code>&lt;script type="text/javascript"&gt;  

        jQuery(function($){
            $.supersized({
                //Background image
                slides  :  [ { image : 'img/some_image.jpg' } ]                 
            });
        });

&lt;/script&gt;
</code></pre>

<p>That's right... For desktops and tablets, I want to show a full-screen video background. For smaller screens (less than 767 pixels), I want to show a single still image background.</p>
