var isIE = false;
	var browserVersion = "-1.0";
	var curSelected = "";

	function loadMe(name) { // var name is the calling page: home, services, contact, etc.
		detectBrowser();
		preloadImages();

		// Set Selected
		var priorSelected = curSelected;
		curSelected = name;
		var elID = "nav_" + name;
		var obj = document.getElementById(elID);
		var selImage;
		selImage = "url(../images/mainNav/" + name + "SEL.jpg)";	
		obj.style.backgroundImage = selImage;

		// Reset Prior
		if(priorSelected != "") {
			var elID = "nav_" + priorSelected;
			var obj = document.getElementById(elID);
			obj.style.backgroundImage = "url(../images/mainNav/" + name + ".jpg";
		}

		// Specifics:
		if(name == "portfolio") {
			preloadPortfolioImages();
		}
	}

	function detectBrowser() {
		var b = navigator.appName;
		var bVer = navigator.appVersion;
		var bUserAgent = navigator.userAgent;
		var bCodeName = navigator.appCodeName;

		if(b.toLowerCase() == "netscape") {
			isIE = false;
		} else if(b.toLowerCase() == "microsoft internet explorer") {
			// TBD: detect for Opera
			isIE = true;
		}
	}

	// ---------------- MAIN NAV ---------------------

	function mainNavOver(name) {
		var elID = "nav_" + name;
		var obj = document.getElementById(elID);
		obj.style.fontSize = "19px";
		obj.style.cursor = "pointer";

		if(name != curSelected) {
			var roImage;
			roImage = "url(../images/mainNav/" + name + "RO.jpg)";	
			obj.style.backgroundImage = roImage;
		}
	}

	function mainNavOut(name) {
		var elID = "nav_" + name;
		var obj = document.getElementById(elID);
		obj.style.fontSize = "18px";
		obj.style.cursor = "auto";

		if(name != curSelected) {
			var normalImage;
			normalImage = "url(../images/mainNav/" + name + ".jpg)";	
			obj.style.backgroundImage = normalImage;
		}
	}

	function mainNavDown(name) {
		var elID = "nav_" + name;
		var obj = document.getElementById(elID);
		obj.style.borderBottom = "1px solid red";
	}

	function mainNavUp(name) {
		var elID = "nav_" + name;
		var obj = document.getElementById(elID);
		obj.style.borderBottom = "0";
	}

	function mainNavClick(name) {
		var navToBase = "http://www.clearlymosaic.com/";
		
		var navTo = "";
		if(name == "home") {
			navTo = navToBase + "home/index.php";
		} else if(name == "services") {
			navTo = navToBase + "services/index.php";
		} else if(name == "contact") {
			navTo = navToBase + "contact/index.php";
		} else if(name == "portfolio") {
			navTo = navToBase + "portfolio/mcardleschools.php?name=mcardleschools&url=www.mcardleschools.com";
		}

		location.href = navTo;
	}

	// -------------- END MAIN NAV -------------------


	// Show and Hide subNav blocks
	function showSubNavPopUp(navID) {
		//if(isIE) { alert("IE!!!"); } else { alert("Not IE."); }

		// highlight the header:

		// show the p
		var elID = "sn" + navID + "Desc";
		var obj = document.getElementById(elID);
		obj.style.display = "block";
		//obj.style.zIndex = "1000";

		/*
		// highlight the header
		elID = "" + navID + "Header";
		obj = document.getElementById(elID);
		obj.style.cursor = "pointer";
		obj.style.color = "yellow";
		*/

		// IE z-index fix:	Set all the sub-nav items' containing divs' z-index to 1,
		//					then set the z-index of the highlighted nav-item to 1000. 
		if(isIE) {
			//setNavZ("1", "", "");
			subNavDivs = cssQuery("#subNav > div"); // gotta do this or else pop-ups show under the selected div's background.
			for(i = 0; i < subNavDivs.length; i++) {
				subNavDivs[i].style.zIndex = "1";
			}

			elID = "sn" + navID;
			obj = document.getElementById(elID);
			obj.style.zIndex = "1000";
		}
	}

	function hideSubNavPopUp(navID) {
		// hide the p
		var elID = "sn" + navID + "Desc";
		var obj = document.getElementById(elID);
		obj.style.display = "none";

		/*
		// un-highlight the header
		var elID = "" + navID + "Header";
		var obj = document.getElementById(elID);
		obj.style.color = "white";
		*/
		
		// IE z-index bug fix: re-set back to 1.
		if(isIE) {
			elID = "sn" + navID;
			obj = document.getElementById(elID);
			obj.style.zIndex = "1";
		}
	}

	
	// Rollovers for the headers, also calls the pop-up function
	function subNavHeaderMouseOver(navID) {
		if("" + navID != "" + selectedSubNav) { // only change the color if this item is not currently displayed.
			var elID = "sn" + navID + "Header";
			var obj = document.getElementById(elID);
			obj.style.fontSize = "16px";
			obj.style.color = "#EADAA4";
			obj.style.cursor = "pointer";
			
			//showTile(navID);

			showSubNavPopUp(navID);
		}
	}

	function subNavHeaderMouseOut(navID) {
		if("" + navID != "" + selectedSubNav) { // only change the color if this item is not currently displayed.
			hideSubNavPopUp(navID);

			var elID = "sn" + navID + "Header";
			var obj = document.getElementById(elID);
			obj.style.fontSize = "15px";
			obj.style.color = "white";
			obj.style.cursor = "auto";

			//hideTile(navID);
		}
	}

	function showTile(navID) {
		tile = cssQuery("#sn" + navID + "Header > img");
		tile[0].style.display = "inline";

	}
	function hideTile(navID) {
		tile = cssQuery("#sn" + navID + "Header > img");
		tile[0].style.display = "none";
	}
	function hideAllTiles() {
		tiles = cssQuery("#subNav > div > h3 > img");
		for(i = 0; i < tiles.length; i++) {
			tiles[i].style.display = "none";
		}
	}

/*
	function showTile(navID) {
		var shiftFactor = 0;
		var start = 35;
		var shiftHeight = 53;
		if(navID == "Design") {
			shiftFactor = 0;
		} else if(navID == "Development") {
			shiftFactor = 1;
		} else if(navID == "EandH") {
			shiftFactor = 2;
		} else if(navID == "Stats") {
			shiftFactor = 3;
		} else if(navID == "Maintenance") {
			shiftFactor = 4;
		} else if(navID == "Logos") {
			shiftFactor = 5;
		} else if(navID == "Cards") {
			shiftFactor = 6;
		} else if(navID == "Photo") {
			shiftFactor = 7;
		}
		
		var newTop = start + (shiftFactor * shiftHeight);
		var tileObj = document.getElementById("mtile");
		tileObj.style.top = "" + newTop;
		tileObj.style.display = "block";
	}
	function hideTile(navID) {
		var tileObj = document.getElementById("mtile");
		tileObj.style.display = "none";	
	}
*/

	function subNavHeaderMouseDown(navID) {
		var elID = "sn" + navID + "Header";
		var obj = document.getElementById(elID);
		obj.style.color = "gray";
	}
	function subNavHeaderMouseUp(navID) {
		var elID = "sn" + navID + "Header";
		var obj = document.getElementById(elID);
		obj.style.color = "white";
	}

	var selectedSubNav;

	function clickNav(topic) {
		// un-display all topics.
		topicDivs = cssQuery("#mainContent > div");
		for(i = 0; i < topicDivs.length; i++) {
			topicDivs[i].style.display = "none";
		}

		// display target topic.
		var elID = "svc" + topic;
		var obj = document.getElementById(elID);
		obj.style.display = "block";

		// mark as displayed
		selectedSubNav = "sn" + topic;

		// hide the <p> for this item
		elID = "sn" + topic + "Desc";
		obj = document.getElementById(elID);
		obj.style.display = "none";


		// Reset all header colors, sizes, etc...
		var snHeaders = cssQuery("#subNav > div > h3");
		for(i = 0; i < snHeaders.length; i++) {
			snHeaders[i].style.color = "white";
			snHeaders[i].style.fontSize = "15";
			//snHeaders[i].style.backgroundColor = "transparent";
		}

		// Set this header's color, size, etc...
		elID = "sn" + topic + "Header";
		obj = document.getElementById(elID);
		obj.style.color = "#EADAA4";
		obj.style.fontSize = "16";
		//obj.style.backgroundColor = "#EADAA4";
			
		// Hide all tiles, and show the current tile.
		hideAllTiles();
		showTile(topic);

		// reset all containing divs.
		var snDivs = cssQuery("#subNav > div ");
		for(i = 0; i < snDivs.length; i++) {
			snDivs[i].style.backgroundColor = "transparent";
		}

		// Highlight the containing div.
		elID = "sn" + topic;
		obj = document.getElementById(elID);
		obj.style.backgroundColor = "#1F2639"
	}

	function dStyleClick(what) {
		//alert("clicked: " + what);
		var modList;
		if(what == "snLeft") {
			modList = cssQuery("#subNav > div > h3");
			for(i = 0; i < modList.length; i++) {
				modList[i].style.textAlign = "left";
			}
			
			// Make sure the pop-up boxes show up where they're supposed to...
			modList = cssQuery("#subNav > div > p");
			for(i = 0; i < modList.length; i++) {
				modList[i].style.left = "30";
			}
		} else if(what == "snCenter") {
			modList = cssQuery("#subNav > div > h3");
			for(i = 0; i < modList.length; i++) {
				modList[i].style.textAlign = "center";
			}
		} else if(what == "snRight") {
			modList = cssQuery("#subNav > div > h3");
			for(i = 0; i < modList.length; i++) {
				modList[i].style.textAlign = "right";
			}
	
			// Move the pop-up box a little to the left wrt to default left-aligned behavoir.
			modList = cssQuery("#subNav > div > p");
			for(i = 0; i < modList.length; i++) {
				modList[i].style.left = "0";
			}
		}
	}

	function mOverTestP() {
		var elID = "testP";
		var obj = document.getElementById(elID);
		obj.style.fontWeight = "bold";
	}

	function mOutTestP() {
		var elID = "testP";
		var obj = document.getElementById(elID);
		obj.style.fontWeight = "normal";
	}




	// ---------------------------- FOOTER ----------------------------
	function footerOver(name) {
		var elID = name + "Button";
		var obj = document.getElementById(elID);
		obj.style.cursor = "pointer";

		var roImage;
		roImage = "url(../images/" + name + "ButtonRO.gif)";	
		obj.style.backgroundImage = roImage;
	}

	function footerOut(name) {
		var elID = name + "Button";
		var obj = document.getElementById(elID);
		obj.style.cursor = "auto";

		var normalImage;
		normalImage = "url(../images/" + name + "Button.gif)";	
		obj.style.backgroundImage = normalImage;
	}

	function footerClick(name) {
		
		var target;
		if(name == "css") {
			target = "http://jigsaw.w3.org/css-validator/";
		} else if(name == "xhtml") {
			target = "http://validator.w3.org/check?uri=referer";
		}

		location.href = target;
	
	}


	// ------------------- PRELOAD ---------------------
	function preloadImages() {

		pic1 = new Image(75,30); 
		pic1.src = "../images/mainNav/homeRO.jpg";
		
		pic2 = new Image(120,30); 
		pic2.src = "../images/mainNav/servicesRO.jpg";

		pic3 = new Image(114,30); 
		pic3.src = "../images/mainNav/contactRO.jpg";

		pic4 = new Image(133,30); 
		pic4.src = "../images/mainNav/portfolioRO.jpg";

		pic5 = new Image(88,31); 
		pic5.src = "../images/xhtmlButtonRO.gif";

		pic6 = new Image(88,31); 
		pic6.src = "../images/cssButtonRO.gif";
			
		pic7 = new Image(75,30); 
		pic7.src = "../images/mainNav/homeSEL.jpg";
		
		pic8 = new Image(120,30); 
		pic8.src = "../images/mainNav/servicesSEL.jpg";

		pic9 = new Image(114,30); 
		pic9.src = "../images/mainNav/contactSEL.jpg";

		pic10 = new Image(133,30); 
		pic10.src = "../images/mainNav/portfolioSEL.jpg";
	}


	function preloadPortfolioImages() {

		pic1 = new Image(130,106); 
		pic1.src = "../portfolio/images/mcardleschools-ro.jpg";
		
		pic2 = new Image(130,106); 
		pic2.src = "../portfolio/images/torringtonfeis-ro.jpg";

		pic3 = new Image(130,106); 
		pic3.src = "../portfolio/images/northmeckalumni-ro.jpg";
		
		pic4 = new Image(130,106); 
		pic4.src = "../portfolio/images/killerev-ro.jpg";

		pic5 = new Image(130,106); 
		pic5.src = "../portfolio/images/northmeck76-ro.jpg";
		
		pic6 = new Image(130,106); 
		pic6.src = "../portfolio/images/wsopqualify-ro.jpg";
			
		pic7 = new Image(130,106); 
		pic7.src = "../portfolio/images/homeroommemories-ro.jpg";
		
		pic8 = new Image(130,106); 
		pic8.src = "../portfolio/images/blackprincearmory-ro.jpg";

		pic9 = new Image(130,106); 
		pic9.src = "../portfolio/images/feismarks-ro.jpg";

	}