/* put in head

    <link href="css_screen1024.css" rel="stylesheet" type="text/css" id="mystylesheet" />
    <script src="screenres.js" language="javascript" type="text/javascript"></script>
*/

var cssFileLarge = "css_screen1024.css"; //page fixed width at 1024
var cssFileMed = "css_screen800.css"; //variable layout spacing but keep content items constrained
var cssFileSmall = "css_screen640.css"; //both nav and events out of the way
var cssFileTiny	= "css_screentiny.css"; //images and boxes are an issue, need to serve smaller versions or not display

var largeScreenSize = 994; //inclusive, so exactly 1024 will be served the large file
var medScreenSize =  730; //inclusive so exactly 800 will be served the meduim file
var smallScreenSize = 610; //inclusive, so exactly 640 will be served the small file

/*
var cssFile = "screen800.css"; 
var cssFilesmall = "screensmall.css"; 
var smallScreenSize = 800;
*/

var theWidth = getBrowserWidth();
//setBrowserCss(theWidth,cssFile); this looks like an error - should only have one parameter? Correcting
setBrowserCss(theWidth);
window.onresize = winresize;

function winresize() {
    theWidth = getBrowserWidth();
    setBrowserCss(theWidth); // removed cssFile from here too
};

function setBrowserCss(scrnWidth) {
    if (scrnWidth >= largeScreenSize) { 
        setStylesheet(cssFileLarge); }
    else if (scrnWidth >= medScreenSize) { 
        setStylesheet(cssFileMed); }
    else if (scrnWidth >= smallScreenSize) { 
        setStylesheet(cssFileSmall); }
    else { 
        setStylesheet(cssFileTiny); }
    return true;
};

function getBrowserWidth() {
    if (window.innerWidth) {
        return window.innerWidth; }
    else if (document.documentElement && document.documentElement.clientWidth != 0) {
        return document.documentElement.clientWidth; }
    else if (document.body) {
        return document.body.clientWidth; }
    return 0;
};

function setStylesheet(styleTitle) {
    document.getElementById('mystylesheet').href = styleTitle;
    return true;
};