var photos = new Array ('Sveta1_bw.jpg');
var photosDir = 'Images/';

function swapimage(id, src) 
{
	document.getElementById(id).setAttribute('src', src);
}

function HtmlBuild()
{
//	HtmlMenuBar(document.getElementById("menuBar"));
	HtmlMainMenu(document.getElementById("mainMenu"));
//	HtmlFooter(document.getElementById("footer"));
	HtmlCompanyLogo(document.getElementById("companyLogo"));
	HtmlPagePhoto(document.getElementById("pagePhoto"));
//	ClassTransition();
}

function HtmlMenuBar(parentNode)
{

	var html = 	'<table>' +
			'	<tr>' +
					HtmlMenuBarItem("Price List for her",	"PriceList_girl.html") +
					HtmlMenuBarItem("Price List for him",	"PriceList_boy.html") +
					HtmlMenuBarItem("Meet the people",	"Staff.html") +
					HtmlMenuBarItem("Find Us",		"Contact.html") +
					HtmlMenuBarItem("Hen Nights",		"HenNights.html") +
					HtmlMenuBarItem("Hours",		"Contact.html") +
					HtmlMenuBarItem("Treatments",		"Treatments.html") +
					HtmlMenuBarItem("Comments",		"Comments.html") +
					HtmlMenuBarItem("Experiences",		"Experiences.html") +
			'	<tr>' +
			'</table>';

	parentNode.innerHTML = html;

}

function HtmlMenuBarItem(text, href)
{
	var html = 	'<td class="menuBarItem"><a href="' + href + '">' + text + ' |</a></td>';
	return html;
}

function HtmlMainMenu(parentNode)
{

	var html = 	'<table>' +
			'	<tr>' +
			'		<td>' +
			'			<table height="300" width="90%" >' +
							HtmlMainMenuImage("Home",		"Default.htm",		"Images/menu_home_normal.gif",		"Images/menu_home_bold.gif") + 
							HtmlMainMenuImage("Treatments",		"Treatments.html",	"Images/menu_Treatments_normal.gif",	"Images/menu_Treatments_bold.gif") + 
							HtmlMainMenuImage("Gifts",		"Gifts.html",		"Images/menu_Gifts_normal.gif",		"Images/menu_Gifts_bold.gif") +  
							HtmlMainMenuImage("Contact Us",		"Contact.html",		"Images/menu_Contact_normal.gif",	"Images/menu_Contact_bold.gif") + 
			'			</table>' +
			'		</td>' +
			'		<td><img src="Images/dermlogo.gif" alt="Anna Salons - Dermalogica Retailer"></td>' +
			'	</tr>' +
			'</table>';

	parentNode.innerHTML = html;

}

function HtmlMainMenuImage(idName, href, imageNormal, imageBold)
{
	var html =	'<tr>' +
			'	<td height="50" align="right">' +
	 		'		<img  style="cursor:hand" ' +
						'id="' + idName + '" ' +
						'onclick="document.location.href=' + "'" + href + "'" + ' " ' +
						'SRC="' + imageNormal + '" ' +
						'alt="' + idName + '" ' +
						'onmouseover="swapimage(this.id, ' + "'" + imageBold + "');" + '" ' +
						'onmouseout="swapimage(this.id, ' + "'" + imageNormal + "');" + '" ' +
						'onmousedown="swapimage(this.id, ' + "'" + imageBold + "');" + '" ' +
						' />' +
			'	</td>' +
			'</tr>';

	return html;
}


function HtmlFooter(parentNode)
{
	var html = '&copy; 2005 www.invisagedesign.com';
	parentNode.innerHTML = html;
}


function HtmlCompanyLogo(parentNode)
{
	var html = "<img src='Images/AnnaSalon.gif' alt='Anna Salons - Guildford's Brazilian Wax Specialist' >";
	parentNode.innerHTML = html;
}


function HtmlNewImage(parentNode)
{
	var html = "<img src='Images/New.jpg' alt='New' >";
	parentNode.innerHTML = html;
}


function HtmlPagePhoto(parentNode)
{
	// randomly select the picture to display
	var random_num = (Math.round((Math.random() * (photos.length - 1))))

	var html = "<img class='pagePhoto' src='" + photosDir + photos[random_num] + "' alt='Anna Salons' >";
	parentNode.innerHTML = html;
}




var transitionMS=1000;
var transitionTimerID = null;
var transitionCur = 0;
var transitionDirection = "+";
function ClassTransition()
{

	if (transitionTimerID != null)
	{
		clearTimeout(transitionTimerID);
	}

	transitionTimerID = self.setTimeout("Transition()", transitionMS);
}

function Transition ()
{
	var start = 1;
	var end = 3;
	var id = "specialOffers";
	var elem = document.getElementById(id);


	if (transitionDirection == "+")
	{
		transitionCur = transitionCur + 1;
	}
	else
	{
		transitionCur = transitionCur - 1;
	}

	if (transitionCur > end)
	{
		transitionCur = end - 1;
		transitionDirection = "-";
	}
	if (transitionCur < start)
	{
		transitionCur = start + 1;
		transitionDirection = "+";
	}



	elem.className = id + transitionCur;

	ClassTransition();
}