/**
 *	display.js
 *
 *	contains functions that handle rollovers and other display effects
 *
 */

function homepageRollover(rolloverID, img)
{
	text_container = document.getElementById("rollover_text");
	rollover = document.getElementById(rolloverID);
	rollover.src = "images/"+img;
	
	text_container.className = "red";
	//change the text
	switch(rollover.name)
	{
		case 'stable':
			text_container.innerHTML = "Spacious cockpit and uncomplicated rig invite young sailors. Easy re-entry after capsize and good stability keep sailors safe and happy.";
			break;
		case 'light':
			text_container.innerHTML = "Carbon fiber mast means easy rigging and light hull weight makes it easy to move and increases sailing stability.";
			break;
		case 'roomy':
			text_container.innerHTML = "PIXEL's cockpit makes for comfortable sailing for 2,3 or more kids, or a couple long-legged adults.";
			break;
		case 'fast':
			text_container.innerHTML = "The PIXEL accelerates quickly, planes easily and is a lively, responsive boat to sail.";
			break;
		default:
			alert("stop trying to hack me");
			return false;
	}
	
	//to suppress linkage
	return false;
}


function homepageRollout(rolloverID, img)
{
	text_container = document.getElementById("rollover_text");
	rollover = document.getElementById(rolloverID);
	rollover.src = "images/"+img;
	
	text_container.className = "blue";
	text_container.innerHTML = "There is a lot to like about the PIXEL. Roll over the icons above to learn more.";

	//to suppress linkage
	return false;
}


//	the functions below show hidden divs in two ways. one uses the visibility attribute (to maintain it's are on the page).
//	the other one uses the display property, to allow shrinking and expanding of the layer as it is shown and hidden.
//	currently, these functions only show, they are not confuigued to work in reverse. which one does which is self explanitory.
function showDiv(divid)
{
	document.getElementById(divid).style.visibility = "visible";
}

function displayDiv(divid)
{
	document.getElementById(divid).style.display = "block";
}