function preload_welcome_images() {
	// make sure that old browsers don't trip up on image arrays
	if (document.images) {
		//
		//  hover (mouseover) images here
		//
		buttonHover = new Object();
		buttonHover["mn_design"] = new Image(195,295);
		buttonHover["mn_design"].src = "/images/content/welcome/designguy_hover.jpg";
		buttonHover["mn_illustration"] = new Image(172,293);
		buttonHover["mn_illustration"].src = "/images/content/welcome/illustrationguy_hover.jpg";
		buttonHover["mn_textiles"] = new Image(164,299);
		buttonHover["mn_textiles"].src = "/images/content/welcome/textilesguy_hover.jpg";
		buttonHover["mn_email"] = new Image(187,30);
		buttonHover["mn_email"].src = "/images/content/welcome/email_hover.jpg";
	
		//
		//  normal (mouseout) images here
		//
		buttonNormal = new Object();
		buttonNormal["mn_design"] = new Image(195,295);
		buttonNormal["mn_design"].src = "/images/content/welcome/designguy_norm.jpg";
		buttonNormal["mn_illustration"] = new Image(172,293);
		buttonNormal["mn_illustration"].src = "/images/content/welcome/illustrationguy_norm.jpg";
		buttonNormal["mn_textiles"] = new Image(164,299);
		buttonNormal["mn_textiles"].src = "/images/content/welcome/textilesguy_norm.jpg";
		buttonNormal["mn_email"] = new Image(187,30);
		buttonNormal["mn_email"].src = "/images/content/welcome/email_norm.jpg";
	}
}		



function preload_nav_images() {
	// make sure that old browsers don't trip up on image arrays
	if (document.images) {
		//
		//  hover (mouseover) images here
		//
		buttonHover = new Object();
		buttonHover["mn_home"] = new Image(89,70);
		buttonHover["mn_home"].src = "/images/global/home_hover.jpg";
		buttonHover["mn_design"] = new Image(95,42);
		buttonHover["mn_design"].src = "/images/global/design_hover.jpg";
		buttonHover["mn_illustration"] = new Image(145,36);
		buttonHover["mn_illustration"].src = "/images/global/illustration_hover.jpg";
		buttonHover["mn_textiles"] = new Image(95,38);
		buttonHover["mn_textiles"].src = "/images/global/textiles_hover.jpg";
		buttonHover["mn_info"] = new Image(52,28);
		buttonHover["mn_info"].src = "/images/global/info_hover.jpg";
		buttonHover["mn_close"] = new Image(54,23);
		buttonHover["mn_close"].src = "/images/global/close_hover.jpg";
		buttonHover["mn_prev"] = new Image(39,25);
		buttonHover["mn_prev"].src = "/images/global/back_hover.jpg";
		buttonHover["mn_enlarge"] = new Image(25,25);
		buttonHover["mn_enlarge"].src = "/images/global/enlarge_hover.jpg";
		buttonHover["mn_next"] = new Image(36,25);
		buttonHover["mn_next"].src = "/images/global/forward_hover.jpg";
		buttonHover["mn_page1"] = new Image(17,15);
		buttonHover["mn_page1"].src = "/images/global/page1_hover.jpg";
		buttonHover["mn_page2"] = new Image(19,15);
		buttonHover["mn_page2"].src = "/images/global/page2_hover.jpg";
		buttonHover["mn_page3"] = new Image(17,15);
		buttonHover["mn_page3"].src = "/images/global/page3_hover.jpg";
		buttonHover["mn_page4"] = new Image(19,15);
		buttonHover["mn_page4"].src = "/images/global/page4_hover.jpg";
		buttonHover["mn_email_info"] = new Image(157,16);
		buttonHover["mn_email_info"].src = "/images/content/info/email_hover.jpg";
	
		//
		//  normal (mouseout) images here
		//
		buttonNormal = new Object();
		buttonNormal["mn_home"] = new Image(89,70);
		buttonNormal["mn_home"].src = "/images/global/home_norm.jpg";
		buttonNormal["mn_design"] = new Image(95,42);
		buttonNormal["mn_design"].src = "/images/global/design_norm.jpg";
		buttonNormal["mn_illustration"] = new Image(145,36);
		buttonNormal["mn_illustration"].src = "/images/global/illustration_norm.jpg";
		buttonNormal["mn_textiles"] = new Image(95,38);
		buttonNormal["mn_textiles"].src = "/images/global/textiles_norm.jpg";
		buttonNormal["mn_info"] = new Image(52,28);
		buttonNormal["mn_info"].src = "/images/global/info_norm.jpg";
		buttonNormal["mn_close"] = new Image(54,23);
		buttonNormal["mn_close"].src = "/images/global/close_norm.jpg";
		buttonNormal["mn_prev"] = new Image(39,25);
		buttonNormal["mn_prev"].src = "/images/global/back_norm.jpg";
		buttonNormal["mn_enlarge"] = new Image(25,25);
		buttonNormal["mn_enlarge"].src = "/images/global/enlarge_norm.jpg";
		buttonNormal["mn_next"] = new Image(36,25);
		buttonNormal["mn_next"].src = "/images/global/forward_norm.jpg";
		buttonNormal["mn_page1"] = new Image(17,15);
		buttonNormal["mn_page1"].src = "/images/global/page1_norm.jpg";
		buttonNormal["mn_page2"] = new Image(19,15);
		buttonNormal["mn_page2"].src = "/images/global/page2_norm.jpg";
		buttonNormal["mn_page3"] = new Image(17,15);
		buttonNormal["mn_page3"].src = "/images/global/page3_norm.jpg";
		buttonNormal["mn_page4"] = new Image(19,15);
		buttonNormal["mn_page4"].src = "/images/global/page4_norm.jpg";
		buttonNormal["mn_email_info"] = new Image(157,16);
		buttonNormal["mn_email_info"].src = "/images/content/info/email_norm.jpg";
	}
}


function nav_init() {
	
	// get <body> id value (indicates which page we're on)
	var page_id = document.getElementsByTagName('body');
	currentId = page_id[0].getAttribute('id');
	
	// swap image for the page we're on
	switch (currentId) {
		
		case 'welcome':
			/* no images to set for welcome page */
			break;
		
		case 'design':
			set_active_image('mn_design');
			break;
			
		case 'illustration':
			set_active_image('mn_illustration');
			break;
		
		case 'textiles':
			set_active_image('mn_textiles');
			break;
		
		case 'info':
			set_active_image('mn_info');	
			break;
			
		default:
			break;
	}
}



function set_active_image(imageId) {

	// could also use separate array for active images;
	// doesn't have to use buttonHover array
	
	var image = document.getElementById(imageId);
	
	// return previous active image to normal state (if any)
	if (activeId && (imageId != activeId)) {
		var active_img = document.getElementById(activeId);
		active_img.src = buttonNormal[activeId].src;
	}
	
	// show hover version of image for active image
	image.src = buttonHover[imageId].src;
	activeId = imageId;
}



function rollover(evt) {
	if (document.images) {
		// equalize W3C and IE event objects
		evt = (evt) ? evt : ((window.event) ? window.event : null);
		if (evt) {
			//equalize W3C and IE event property
			var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
			// filter out older browsers (elem=null) and unswappable elements
			if (elem && (elem.className == "rollover" || 
						  elem.className == "rollover_thumb" ||
						  elem.className == "image_nav" ||
						  elem.className == "page_nav")) {
				
				// don't swap image if the image is "active"
				if ((elem.id != activeId) && (elem.id != 'mn_page' + activeMultiPage)) {
					
					// get large content_window image
					var content_image = document.getElementById('content_image');
					
					// let the event type govern state of rollover
					switch (evt.type) {
			
						case "mouseover":
							// switch image to its hover state
							elem.src = buttonHover[elem.id].src;
							break;
							
						case "mouseout":
							// return image to its normal state
							elem.src = buttonNormal[elem.id].src;
							break;
							
						case "click":
							if (elem.className == "rollover_thumb") {
								content_image.src = imageContent[elem.id];
								
								activeImage = elem.id;
								set_active_image_list(elem.id);
								initialize_active_multipage(elem.id);
								return false;
							}
							else if (elem.className == "image_nav") {
								image_controls(elem.id);
								return false;
							}
							else if (elem.className == "page_nav") {
								
								// need to turn off previous active page
								var page_id = "mn_page" + activeMultiPage;
								var page_number_image = document.getElementById(page_id);
								page_number_image.src = buttonNormal[page_id].src;
		
								// update activeMultiPage and
								// show corresponding multipage content
								switch (elem.id) {
									
									case 'mn_page1':
										activeMultiPage = 1;
										break;
									
									case 'mn_page2':
										activeMultiPage = 2;
										break;
									
									case 'mn_page3':
										activeMultiPage = 3;
										break;
										
									case 'mn_page4':
										activeMultiPage = 4;
										break;
									
								}	
								set_active_multipage();
								return false;
							}
							break;
					}
				}
			}
		}
	}
	return true;
}


function initialize_active_multipage(id) {
	
	// if this id has multipage content,
	// then show appropriate image and 
	// set position for it
	if (multiContent[id].length > 0) {
		
		activeMultiPage = 1;
		
		// unhide appropriate mutlipage page number buttons
		// hide all others
		for (i=1; i <= multiContent[id].length; i++) {
			page_id = "page" + i;
			unhide(page_id);
			
			// reset states of page numbers
			var page_id = "mn_page" + i;
			var page_number_image = document.getElementById(page_id);
			page_number_image.src = buttonNormal[page_id].src;
		}
		
		for (k=i; k <= max_multipage_count; k++) {
			page_id = "page" + k;
			hide(page_id);
			
			// reset states of page numbers
			var page_id = "mn_page" + i;
			var page_number_image = document.getElementById(page_id);
			page_number_image.src = buttonNormal[page_id].src;
		}
		
		var page_id = "mn_page" + activeMultiPage;
		var page_number_image = document.getElementById(page_id);
		page_number_image.src = buttonHover[page_id].src;
	}
	else {
		// hide all mutlipage page number buttons 
		hide('page1');
		hide('page2');
		hide('page3');
		hide('page4');
	}
}

function set_active_multipage() {
	
	// if this id has multipage content,
	// then show appropriate image and 
	// set position for it
	if (multiContent[activeImage].length > 0) {
		
		// update page number
		var page_id = "mn_page" + activeMultiPage;
		var page_number_image = document.getElementById(page_id);
		page_number_image.src = buttonHover[page_id].src;
		
		var content_image = document.getElementById('content_image');
		content_image.src = imageContent[multiContent[activeImage][activeMultiPage - 1]];
	}
}

function hide(objectId) {
	
	var obj = document.getElementById(objectId);
	obj.style.display = 'none';
}

function unhide(objectId) {
	
	var obj = document.getElementById(objectId);
	obj.style.display = 'block';
}



function image_controls(id) {
	
	switch (id) {
		
		case "mn_prev":
			prev_content_image();
			break;
		
		case "mn_next":
			next_content_image();
			break;
			
		case "mn_enlarge":
			enlarge_content_image();
			break;
	}
}


function enlarge_content_image() {
	
	// open up a new popup window and
	// display the enlarged activeImage inside of this window
	if (multiContent[activeImage].length > 0) {
		enlarge_id = multiContent[activeImage][activeMultiPage - 1];
	}
	else {
		enlarge_id = activeImage;	
	}
	var image_url = imageLarge[enlarge_id];
	openArbPhotoWindow(image_url);
}


function openArbPhotoWindow(imgName) {

	var width = enlarged_image_width + 34;
	var height = enlarged_image_height + 35;
	var top = 50;
	var left = 50;
	
	var windowFeatures = "width=" + width + ",height=" + height +
	     ",screenX=" + left + ",screenY=" + top + ",left=" + left +
		 ",top=" + top + ",status=no,location=no,directories=no,menubar=no,toolbar=no,scrollbars=no,resizable";
	
	arbPhotoWindow = window.open("", "arbphotowin", windowFeatures);
	
	timeout_fn = "createArbPhotoPage('" + imgName + "'," + enlarged_image_width + "," + enlarged_image_height + ")";
	
	setTimeout(timeout_fn, 50);
}

function createArbPhotoPage(imgName, imgWidth, imgHeight) {
	
	iconTop = imgHeight + 10;
	iconLeft = imgWidth - 54;
	
	var pageTxt = "<html><head><title>" + imgName + "</title><link href='" + popup_css_file + "' rel='stylesheet' type='text/css'><style type='text/css'>#photo_large { width: " + imgWidth + "px; height: " + imgHeight + "px; } #close_icon { top: " + iconTop + "px; left: " + iconLeft + "px; }</style>";
	pageTxt += "<script src='/js/trieuberry_functions.js' rel='stylesheet' type='text/css'></script></head>"
	pageTxt += "<body onload='preload_nav_images();'><div id='photo_large'><img src='" + imgName + "' width='" + imgWidth + "' height='" + imgHeight + "' border='0'></div>";
	pageTxt += "<div id='close_icon'><a href='#' onClick='window.close(); return false;'><img src='/images/global/close_norm.jpg' id='mn_close' name='mn_close' class='rollover' width='54' height='23' /></a>";
	pageTxt += "</div></body></html>";
	
	arbPhotoWindow.document.write(pageTxt);
	arbPhotoWindow.document.close();

}


function set_active_image_list(id) {

	for (x in imageList) {
		if (imageList[x] == id) {
			activeImageList = x;	
		}
	}
}

function prev_content_image() {
	
	var content_image = document.getElementById('content_image');
	
	if (activeImageList > 0) {
		
		activeImageList--;
		activeImage = imageList[activeImageList];
		content_image.src = imageContent[activeImage];
		initialize_active_multipage(activeImage);
	}
}


function next_content_image() {
	
	var content_image = document.getElementById('content_image');
	
	if (activeImageList < (imageList.length - 1)) {
		activeImageList++;
		activeImage = imageList[activeImageList];
		content_image.src = imageContent[activeImage];
		initialize_active_multipage(activeImage);
	}
}


// Special handling for CSS-P redraw bug in Navigator 4
function handleResize() {
    if (isNN4) {
        // causes extra re-draw, but gotta do it to get banner object color drawn
        location.reload();
    } else {
		var page_id = document.getElementsByTagName('body');
		currentId = page_id[0].getAttribute('id');
		
		if (currentId == "welcome") {
        	centerIt("main");
		}
		else {
			stretchIt("main");
		}
	}
}

// stretch middle content area to 100% height of the browser window
// (tiles will only show on left and right sides of content)
function stretchIt(id) {

	var client_height = getInsideWindowHeight();
	var elem = document.getElementById(id);
	// allow for padding-top on #main
	var main_height = client_height - 10;
	
	elem.style.height = main_height + 'px';
}
// this stores currently active menu button
// (for rollover code)
var activeId = "";
var activeImage = "";
var activeImageList = "";
var activeMultiPage = "";
var max_multipage_count = 4;

// css stylesheet for enlarged image popup window
var popup_css_file = "http://www.trieuberry.com/css/popup_window.css";
var enlarged_image_width = 775;
var enlarged_image_height = 545;

// note that element to be centered has to be called
// "main" in order for following handle to work
window.onresize = handleResize;

// bind events for rollovers
document.onclick = rollover;
document.onmouseover = rollover;
document.onmouseout = rollover;