/*
Switches from the default stylesheet (1024x768) to a smaller layout (800x600)
depending on browser window size.  Can be extended to support other sizes.

Based on code from http://www.themaninblue.com/experiment/ResolutionLayout/
*/

var styleTag = "screenSizeStyler";
checkWidth();
attachListener();

function checkWidth() {
  var theWidth = 0;
	if (window.innerWidth) {
		theWidth = window.innerWidth;
	}	else if (document.documentElement && document.documentElement.clientWidth != 0)	{
		theWidth = document.documentElement.clientWidth;
	}	else if (document.body)	{
	   theWidth = document.body.clientWidth;
	}
	
	if (theWidth > 0) {
    if (theWidth <= 1000) {
		  setStylesheet("800x600.css");
		} else {
      setStylesheet("1024x768.css");
    }
		return true;
	} else {
    return false;
  }
}

function setStylesheet(cssFile) {
	var currTag;
	if (document.getElementsByTagName) {
		for (var i = 0; (currTag = document.getElementsByTagName("link")[i]); i++) {
			if(currTag.getAttribute("title") == styleTag) {
				var slashLoc = currTag.href.lastIndexOf("/");
				if (slashLoc != -1) {
          var pathStr = currTag.href.substring(0, slashLoc + 1);
          currTag.href = pathStr + cssFile;
          break;
        } else {
          return false;
        }
			}
		}
	}
	
	return true;
}

function attachListener() {
  if (typeof window.addEventListener != "undefined") {
    window.addEventListener("resize", checkWidth, false);
  } else if (typeof window.attachEvent != "undefined") {
    window.attachEvent("onresize", checkWidth);
  } else {
    return false;
  }

  return true;
}