Change Stylesheet URI on Window Resize

Hello,

I have the following placed in my header.php file:

<style type="text/css" media="screen">
	@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>

<link rel="stylesheet" id="size-stylesheet" href="<?php bloginfo('template_url'); ?>/wide.css" type="text/css">

I found this great little snippet of jQuery code that I would like to use for my WordPress theme:

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "medium.css");
    } else {
       $("#size-stylesheet").attr("href", "wide.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

The code replaces the ‘href’ attribute of the linked stylesheet with the id “size-stylesheet” based on the browser window size. For some reason this isn’t working with WordPress. Even when I use absolute paths for the css files and template directory, it won’t work.

Any suggestions?