// testing functions

function listElementHandlers(aObj) {
	returnstring = '';
	if (!aObj)
		return null;
	for (var list in aObj)
		if (list.match(/^on/)) 
			returnstring += list + '\n';
	return returnstring;
} 

function listProperties(aObj) {
	returnstring = '';
	for (var list in aObj)
		returnstring += list + '  ';
	alert(returnstring);
}

// Main funcations

/*
function getElmById(aID){ 
	var element = null; 
	
	if (document.getElementById)
		element = document.getElementById(aID)
	else if (document.layers)	// NS4
		element = document.layers[aID]
	else if (document.all)		// IE4
		element = document.all[aID]; 
	
	return element; 
} 
*/

function checkCompatibility() {
	if (document.getElementById) {
		if (document.documentElement) {
			if (document.documentElement.addEventListener) {
				return true;
			}
		}
	}
	return false;
}

function stopEvent(e) {
	e.stopPropagation();
}

function showCategoryPage(event) {
	categoryPage = document.getElementById('categoryPage');
	categoryPage.style.left = event.pageX + 20;
	categoryPage.style.top = event.pageY - 50;
	
	categoryPage.style.display = '';
}

function changeProductPhoto(aEvent) {
	img = aEvent.target;
	// if the thumbnail image is blank, then do not change the main image
	if (img.getAttribute('src').match(/blank/) ) {
	} else {
		document.getElementById('img0').src = img.src;
	}
	img.style.borderColor = "yellow";
}

function darkenTheBorder(aEvent) {
	img = aEvent.target;
	img.style.borderColor = "black";
}

function showToolTip(aEvent) {
	// if aEvent is null, it is the Internet Explorer event model, 
	// so get window.event. 
	var myEvent = aEvent ? aEvent : window.event; 
	
	// Make the border yellow
	myEvent.target.style['borderColor'] = 'yellow';
	
	// Show tool tip text
	textblock = document.getElementById("toolTipText");
	while (textblock.firstChild) {
		textblock.removeChild(textblock.firstChild);
	}
	
	newTextNode = document.createTextNode(myEvent.target.getAttribute('alt'));
	textblock.appendChild(newTextNode);
	
	textblock.style.left = myEvent.pageX + 10;
	textblock.style.top = myEvent.pageY + 10;
	
	textblock.style.display = '';
}

function hideToolTip(aEvent) {
	// if aEvent is null, it is the Internet Explorer event model, 
	// so get window.event. 
	var myEvent = aEvent ? aEvent : window.event; 
	
	myEvent.target.style.borderColor = 'black';
	
	textblock = document.getElementById("toolTipText");
	textblock.style.display = "none";
}

function closeButton_click(aEvent) {
	closebutton = aEvent.target;
	closebutton.style.color = 'yellow'; 
	closebutton.style.background='inherit'; 
	document.getElementById('categoryPage').style.display = 'none' ;
}

function closeButton_mouseover(aEvent) {
	// if aEvent is null, it is the Internet Explorer event model, 
	// so get window.event. 
	var myEvent = aEvent ? aEvent : window.event; 
	
	closebutton = myEvent.target;
	closebutton.style.color = 'black'; 
	closebutton.style.background='yellow';
}

function closeButton_mouseout(aEvent) {
	closebutton = aEvent.target;
	closebutton.style.color = 'yellow'; 
	closebutton.style.background='inherit';
}

function onPageLoad() {
	if (checkCompatibility()) {
		// Add event handler
		document.getElementById("searchtext").addEventListener("mouseover", showToolTip, false);
		document.getElementById("searchtext").addEventListener("mouseout", hideToolTip, false);
		
		document.getElementById("moreCategoryLink").addEventListener("click", showCategoryPage, false);
	
		var closeButton = document.getElementById("closeButton");
		closeButton.addEventListener("click", closeButton_click, false);
		closeButton.addEventListener("mouseover", closeButton_mouseover, false);
		closeButton.addEventListener("mouseout", closeButton_mouseout, false);
			
		imgElements = document.getElementsByTagName('img');
		
		for (var i = 0; i < imgElements.length; i++) {
			var eachElement = imgElements[i];
			if (eachElement.getAttribute('class') == 'categoryImage') {
				eachElement.addEventListener("mouseover", showToolTip, false);
				eachElement.addEventListener("mouseout", hideToolTip, false);
			}
		}
		
		for (var i = 0; i < imgElements.length; i++) {
			var eachElement = imgElements[i];
			if (eachElement.getAttribute('class') == 'thumbnailProductImage') {
				eachElement.addEventListener("mouseover", changeProductPhoto, false);
				eachElement.addEventListener("mouseout", darkenTheBorder, false);
			}
		}
	}
}

function unload() {
	if (checkCompatibility()) {
		document.documentElement.addEventListener("mouseover", stopEvent, true);
		document.documentElement.addEventListener("mouseout", stopEvent, true);
	}
}