window.onload = function(){
	//alert("window.onload");
	initialize();
	slideSwatches();
	// we only need to call the zoom function if we are on the applications pages
	if(document.getElementById("photos")){
		setupZoom();
	}
}

function initialize(){
	// capability detection instead of browser sniffing
	if(!document.getElementsByTagName || !document.getElementById) return false;
	
	// Slide nav panel in and out
	var navDrawer = document.getElementById("nav-supp");
	var navTab = document.getElementById("togglepanel");
	var drawerStatus = "open";
	//alert("function initialize() called.");
	navTab.onclick = function(){
		switch (drawerStatus){
			case "closed":
				xDistance = -215;
				drawerStatus = "open";
			break;
			case "open":
				xDistance = 215;
				drawerStatus = "closed";
			break;
			default:
				alert("Don't know what status drawer is.");
			break;
		}
		new Effect.Move(navDrawer, { 'x': xDistance, 'y': 0, 'mode': 'relative' });
		//new Effect.Move('testMove',{'x':10,'y':10,'duration':1})
		//var navpos = findPos('nav-supp', 'y');
		//alert("nav-supp x position is: "+navpos);
		
		return false;
	}
	
	// Move swatch panels up and down onmouseover

	// declare variables to test if each swatch is moving up or down and track its position
	var movingUp = new Array();
	var movingDown = new Array();
	var swatchStatus = new Array();
	//alert("got here.");
	var swatchList = document.getElementById("swatches");
	// this may be a page in the applications section where the ul has the id 'photos'
	if(swatchList){
		//alert ("swatchlist present.");
		// set a class on each of the list items to stop them from moving down with li:hover
		var swatchLis = swatchList.getElementsByTagName("LI");
		for (var g=0; g<swatchLis.length; g++){
			swatchLis[g].setAttribute("class", "special");
		}
		// all of the list items are covered by the child element p with the CSS to avoid mouseover/out complexities
		var swatchListItems = swatchList.getElementsByTagName("P");
		for (var j=0; j<swatchListItems.length; j++){
			movingUp[j] = 0;
			movingDown[j] = 0;
			swatchStatus[j] = 'up';
			
			// ON MOUSE OVER
			// In IE7, setAttribute does not work when used with the style attribute (or with event handlers, for that matter).
			swatchListItems[j].onmouseover = function(){
				//alert("p moused over.");
				// get x position of swatch moused out
				var xPos = findPos(this, 'x');
				// get the number of the swatch moused over
				var swatchNum = this.getAttribute("id");
				swatchNum = swatchNum.substring(3);
				//alert("swatchNum = "+ swatchNum + " swatchStatus["+ swatchNum + "] = " + swatchStatus[swatchNum] + " xpos = " + xPos);
				// check to see that the swatch is completely up
				if(movingUp[swatchNum] == 0  && swatchStatus[swatchNum] == 'up' && (xPos == 70 || xPos == 90)){
					new Effect.Move(this.parentNode, { x: 0, y: 220, mode: 'relative', beforeStart: function(){movingDown[swatchNum] = 1;}, afterFinish: function(){movingDown[swatchNum] = 0; swatchStatus[swatchNum] = 'down';} });
				}
				//alert("position left,top: " + findPos(this));
				return false;
			}
			
			// ON MOUSE OUT
			swatchListItems[j].onmouseout = function(){
				// get x position of swatch moused out
				var xPos = findPos(this, 'x');
				// get the number of the swatch moused out
				var swatchNum = this.getAttribute("id");
				swatchNum = swatchNum.substring(3);
				//alert("swatchNum = "+ swatchNum + " swatchStatus["+ swatchNum + "] = " + swatchStatus[swatchNum] + " xpos = " + xPos);
				// check to see that swatch is completely down
				if(movingDown[swatchNum] == 0 && swatchStatus[swatchNum] == 'down' && (xPos == 290 || xPos == 310)){
					new Effect.Move(this.parentNode, { x: 0, y: -220, mode: 'relative', beforeStart: function(){movingUp[swatchNum] = 1;}, afterFinish: function(){movingUp[swatchNum] = 0; swatchStatus[swatchNum] = 'up';} });
				}
				//alert("position x: " + findPos(this));
				return false;
			}
		}
	}else{
		// there is no swatch list - it is the photo gallery for applications
		// return false;
	}
	// set event handlers for theme buttons
	var themeWidget = new Array();
	themeWidget[0] = document.getElementById("theme1");
	themeWidget[1] = document.getElementById("theme2");
	themeWidget[2] = document.getElementById("theme3");
	themeWidget[3] = document.getElementById("theme4");
	// loop through the array of buttons in nav_supp
	var themeImages = preloadThemeImages();
	var themeAnchor = new Array();
	for(var k=0; k<themeWidget.length; k++){
		//alert("themeWidget[k] = " + themeWidget[k]);
		themeAnchor[k] = themeWidget[k].getElementsByTagName("A");
		//alert("themeAnchor[k][0] is a " + themeAnchor[k][0]);
		themeAnchor[k][0].onclick = function(){
			//alert("Theme button clicked.");
			// we need to figure out what theme number to pass to the following function
			var children = this.childNodes;
			//alert(children[0].nodeValue);
			//var themeNum = children[0].nodeValue - 1;
			for(var n=0; n<=children.length; n++){
				//alert("looping.");
				//alert("children["+n+"].nodeType = "+ children[n].nodeType);
				if(children[n].nodeType == 3){
					var themeNum = children[n].nodeValue;
					//alert("nodeType is 3. children["+n+"].nodeValue = "+ themeNum);
					// since this is an array...
					themeNum = themeNum - 1;
					setNewTheme(themeImages[themeNum][0]);
					//setNewTheme(themeImages[3][0]);
					// cancel default link behaviour
					return false;
				}
			}
		}
	}
}

function slideSwatches(){
	// determine the width of the swatch set
	//alert("slideSwatches called");
	var swatchList = document.getElementById("swatches");
	if(!swatchList){
		//alert("No swatchList");
		var swatchList = document.getElementById("photos");
	}
	//alert(swatchList);
	var swatchListItems = swatchList.getElementsByTagName("li");
	var numSwatches = swatchListItems.length;
	var swatchListWidth = numSwatches * 185;
	//alert(numSwatches);
	
	// determine the current y position of the swatch set
	var xPos = findPos(swatchList, 'x');
	// the x position of the ul begins at 290px for some reason. IE7 reports 310px!
	xPos = xPos - 290;
	//alert("xPos = "+ xPos);
	// create event handler for left button
	var slideLeft = document.getElementById("swatch_left");
	if(slideLeft){
		slideLeft.onclick = function(){
			// if we can move the set right, do it
			//if (Math.abs(xPos) > 0){
			// we need to account for the positioning weirdness of IE7 here (20px discrepancy)
			if (Math.abs(xPos) > 20){
				new Effect.Move(swatchList, { x: 185, y: 0, mode: 'relative', beforeStart: function(){}, afterFinish: function(){} });
				// update new position
				xPos = xPos + 185;
			}
			// disable default link behaviour
			return false;
		}
	}
	// create event handler for right button
	var slideRight = document.getElementById("swatch_right");
	if(slideRight){
		slideRight.onclick = function(){
			// if we can move the set left, do it
			//if (Math.abs(xPos) < (swatchListWidth - 925)){
			// we need to account for the positioning weirdness of IE7 here (20px discrepancy)
			if (Math.abs(xPos) < ((swatchListWidth - 20) - 925)){
				new Effect.Move(swatchList, { x: -185, y: 0, mode: 'relative', beforeStart: function(){}, afterFinish: function(){} });
				// update new position
				xPos = xPos - 185;
			}
			// disable default link behaviour
			return false;
		}
	}
}

// tip of the hat to http://www.quirksmode.org/js/findpos.html
function findPos(obj, xy) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	if(xy == 'x'){
		return curtop;	
	}else{
		return curleft;
	}
	//return [curleft,curtop];
}

// preload theme images
function preloadThemeImages(){
	var themeImages = new Array();
	if (document.images)
	{
		themeImages[0] = new Image(925,350);
		themeImages[0][0] = "http://ideasbuilt.ca/3m/images/interface/bg_theme_blue.jpg";
		themeImages[0].src = themeImages[0][0];
		themeImages[1] = new Image(925,350);
		themeImages[1][0] = "http://ideasbuilt.ca/3m/images/interface/bg_theme_green.jpg";
		themeImages[1].src = themeImages[1][0];
		themeImages[2] = new Image(925,350);
		themeImages[2][0] = "http://ideasbuilt.ca/3m/images/interface/bg_theme_yellow.jpg";
		themeImages[2].src = themeImages[2][0];
		themeImages[3] = new Image(925,350);
		themeImages[3][0] = "http://ideasbuilt.ca/3m/images/interface/bg_theme_red.jpg";
		themeImages[3].src = themeImages[3][0];
		//alert("Images preloaded.");
	}
	return themeImages;
}

// set the background image to the selected theme
function setNewTheme(image){
	//alert("setNewTheme " + theme + " " + image + ".");
	var container = document.getElementById("content-main");
	if(container){
		//alert("container exists");
		var bgImage = image;
		//alert("bgImage is " + bgImage);
		var bgImageStyle = 'background-image: url(' + bgImage + ');';
		container.setAttribute("style", bgImageStyle);
		container.style.cssText = bgImageStyle;
	}
	//alert(bgImageStyle);
}