function menubuttonover(el)
{
	el.style.color = "blue";
	dropdownname_el = document.getElementById("dropdownname");
	DropDownName = dropdownname_el.value;
	if (DropDownName != "")
		{
			dropdown_el = document.getElementById(DropDownName);
			dropdown_el.style.display = "none";
			dropdownname_el.value = "";
		}
	el.style.fontWeight = "bold";
}

function menubuttonselectedout(el)
{
	el.style.color = "#c00000";
	el.style.fontWeight = "normal";
}
function menubuttonout(el)
{
	el.style.color = "gray";
	el.style.fontWeight = "normal";
}

function sidebuttonover(Level, el)
{
	// check if this button is a selected one, display the appropriate image
	oldbuttonname_el = document.getElementById("buttonid");
	OldButtonID = oldbuttonname_el.value;
	OldButtonID_el = document.getElementById(OldButtonID);
	if (OldButtonID_el == el)
	{
 		if (Level == "1")
 		{
			image = "url(images/buttonupselected.gif)";
		} else
		{
			image = "url(images/level2buttonselected.gif)";
		}
	}
	else
	{
 		if (Level == "1")
 		{
			image = "url(images/buttons/buttonupblank.gif)";
		} else
		{
			image = "url(images/level2buttonblank.gif)";
		}
	}
	
	el.style.background = image;
	el.style.backgroundRepeat = "no-repeat";
	el.style.fontWeight = "bold";
}

function sidebuttonout(Level, el)
{
	// check if this button has just been clicked, if so 
	// do not change the image.
	oldbuttonname_el = document.getElementById("buttonid");
	OldButtonID = oldbuttonname_el.value;
	OldButtonID_el = document.getElementById(OldButtonID);
 	if (OldButtonID_el == el) return;
 	if (Level == "1")
 	{
		 image = "url(images/buttons/buttonupblank.gif)";
	}
	else
	{
		 image = "url(images/level2buttonblank.gif)";
	}
	el.style.background = image;
	el.style.backgroundRepeat = "no-repeat";
	el.style.color = "darkblue";
	el.style.fontWeight = "normal";
}
function sidebuttondown(Level, el)
{
 	if (Level == "1")
 	{
		 image = "url(images/buttondown.gif)";
	} else
	{
		 image = "url(images/level2buttondown.gif)";
	}
	el.style.background = image;
	el.style.backgroundRepeat = "no-repeat";
	el.style.color = "#c00000";
	el.style.fontWeight = "bold";
}

function showpage(L1Page,L2Page, PageType)
{
	var url;
	if (PageType == "main")
	{
		url = "mainpage.aspx?L1Page=" + L1Page + "&L2Page=" + L2Page;
	}
	else
	{
		url = "gallery.aspx?L1Page=" + L1Page + "&L2Page=" + L2Page;
	}
	top.location=url;
}

function sidebuttonclick(DivID,BannerURL,NumOfChildren,L1,L2)
{
	showcontent(DivID,BannerURL,NumOfChildren,L1,L2);
	updatemenubuttons(NumOfChildren,L1,L2);
	expandsidebuttons(NumOfChildren,L1,L2);
	updatesidebuttons(NumOfChildren,L1,L2);
}

function menubuttonclick(DivID,BannerURL,NumOfChildren,L1,L2)
{
	showcontent(DivID,BannerURL,NumOfChildren,L1,L2)
	updatemenubuttons(NumOfChildren,L1,L2);
	expandsidebuttons(NumOfChildren,L1,L2);
	updatesidebuttons(NumOfChildren,L1,L2);
	// if a dropdown table is currently being displayed, hide it
	dropdownname_el = document.getElementById("dropdownname");
	DropDownName = dropdownname_el.value;
	if (DropDownName != "")
	{
		dropdown_el = document.getElementById(DropDownName);
		dropdown_el.style.display = "none";
		dropdownname_el.value = "";
	}
}

function showcontent(DivID,BannerURL,NumOfChildren,L1,L2)
{
	// hide the current content
	contentid_el = document.getElementById("contentid");
	CurrentContent = contentid_el.value;
	div_el = document.getElementById(CurrentContent);
	div_el.style.display = "none";
	// display the content that has been chosen
	div_el = document.getElementById(DivID);
	div_el.style.display = "inline";
	contentid_el.value = DivID;
	// display the new banner
	banner_el = document.getElementById("BannerImage");
	banner_el.src = BannerURL;
}
	
function updatesidebuttons(NumOfChildren,L1,L2)
{	
	NewButtonID = "buttoncell" + L1 + "_" + L2;
	NewButton_el = document.getElementById(NewButtonID);
	buttonid_el = document.getElementById("buttonid")
	OldButtonID = buttonid_el.value;

	// check if this button is the current one that was selected
	// if so no need to do anything
	if (NewButtonID == OldButtonID) return

	// display the selected button image for this selected button
	if (L2 == "0")
	{
		NewButton_el.style.background = "url(images/buttonupselected.gif)"
		NewButton_el.style.color = "yellow";
	} else
	{
		NewButton_el.style.background = "url(images/level2buttonselected.gif)"
		NewButton_el.style.color = "yellow";
	}
	NewButton_el.style.backgroundRepeat = "no-repeat";

	// Set the previous sidebutton image to normal
	// and set the selected button image to selected
	pagelevel1_el = document.getElementById("pagelevel1");
	pagelevel2_el = document.getElementById("pagelevel2");
	PageLevel1 = pagelevel1_el.value;
	PageLevel2 = pagelevel2_el.value;
	OldButton_el = document.getElementById(OldButtonID);

	if (PageLevel2 == "0")
 	{
		OldButton_el.style.background = "url(images/buttons/buttonupblank.gif)";
		OldButton_el.style.color = "darkblue";
		OldButton_el.style.fontWeight = "normal";
	} else
	{
		OldButton_el.style.background = "url(images/level2buttonblank.gif)";
		OldButton_el.style.color = "darkblue";
		OldButton_el.style.fontWeight = "bold";
	}
	OldButton_el.style.backgroundRepeat = "no-repeat";
	// save the button id, level 1 and 2 numbers into hidden input
	// values on the page. These values are then used for the next 
	// button clicks and overs
	buttonid_el.value = NewButtonID;
	pagelevel1_el.value = L1;
	pagelevel2_el.value = L2;
}

function expandsidebuttons(NumOfChildren,L1,L2)
{
	// hide the previous expanded child buttons - if any
	expandedparent_el = document.getElementById("expandedparent");
	ExpandedParent = expandedparent_el.value;
	numofchildren_el = document.getElementById("numofchildren");
	prevNumOfChildren = numofchildren_el.value;

	if(ExpandedParent != L1)
	{
		// hide all the child buttons for the previously selected parent
		for (j=1; j<=prevNumOfChildren; j++)
		{
			ChildButtonID = "trbuttoncell" + ExpandedParent + "_" + j;
			ChildButton_el = document.getElementById(ChildButtonID);
			ChildButton_el.style.display = "none";
			ChildButtonID = "buttoncell" + ExpandedParent + "_" + j;
			ChildButton_el = document.getElementById(ChildButtonID);
			ChildButton_el.style.display = "none";
		}
	}
	// show all the hidden child buttons for the selected button
	for (j=1; j<=NumOfChildren; j++)
	{
		ChildButtonID = "trbuttoncell" + L1 + "_" + j;
		ChildButton_el = document.getElementById(ChildButtonID);
		ChildButton_el.style.display = "block";
		ChildButtonID = "buttoncell" + L1 + "_" + j;
		ChildButton_el = document.getElementById(ChildButtonID);
		ChildButton_el.style.display = "block";
	}
	if (L2 == 0)
	{	
		// this is a parent, so save its number of children and id
		numofchildren_el.value = NumOfChildren;
		expandedparent_el.value = L1;
	}
}

function updatemenubuttons(NumOfChildren,L1,L2)
{
	NewMenuButtonID = "menubuttoncell" + L1 + "_" + L2;
	NewMenuButton_el = document.getElementById(NewMenuButtonID);
	buttonid_el = document.getElementById("buttonid");
	OldMenuButtonID = "menu" + buttonid_el.value;

	// check if this button is the current one that was selected
	// if so no need to do anything
	if (NewMenuButtonID == OldMenuButtonID) return
	// display the selected menu button to silver

	NewMenuButton_el.style.background = "silver";
	NewMenuButton_el.style.color = "#c00000";
	NewMenuButton_el.style.borderRight = "dimgray 1px solid";
	NewMenuButton_el.style.borderTop = "dimgray 1px solid";
	NewMenuButton_el.style.borderLeft = "dimgray 1px solid";
	NewMenuButton_el.style.borderBottom = "silver 2px solid";
	NewMenuButton_el.style.fontWeight = "bold";
	
	// Set the previous menu button to white
	OldMenuButton_el = document.getElementById(OldMenuButtonID);
	OldMenuButton_el.style.background = "white";
	OldMenuButton_el.style.color = "gray";
	OldMenuButton_el.style.borderRight = "gray 1px solid";
	OldMenuButton_el.style.borderTop = "#e8e8e8 1px solid";
	OldMenuButton_el.style.borderLeft = "white 1px solid";
	OldMenuButton_el.style.borderBottom = "white 2px solid";
	OldMenuButton_el.style.fontWeight = "normal";
}

function showdropdown(L1Page, el)
{
	offsetleft = el.offsetLeft;
	pagetable_el = document.getElementById("PageTable");
	tableoffsetleft = pagetable_el.offsetLeft;
	posX = offsetleft + tableoffsetleft +10;
	dropdownid = "dropdowntable" + L1Page;
	dropdown_el = document.getElementById(dropdownid);
	dropdown_el.style.left = posX;
	dropdown_el.style.display = "block";
	dropdownname_el = document.getElementById("dropdownname");
	dropdownname_el.value = dropdownid;
}

function dropdownbuttonover(el)
{
	el.style.color = "darkblue";
	el.style.fontWeight = "bold";
}
function dropdownbuttonout(el)
{
	el.style.color = "gray";
	el.style.fontWeight = "normal";
}
function dropdownout()
{
	// the mouse has left the dropdown table so hide the table.
//	el = window.event.srcElement;
// 	elid = el.id;
//  	ellen = elid.length;
//  	elfront = elid.substring(0,ellen-1); // remove the last character from elid
//  	alert(elfront);
//  	if (elfront == "dropdowntable")
//  	{
//		el.style.display = "none";
//	}
}


function scrollbtnover(Direction)
{
	var CellID;
	if (Direction == "down")
	{
		CellID = "scrolldowncell";
		imgID = "scrolldownimg";
		img_el = document.getElementById(imgID);
		img_el.src = "images/buttons/downarrowred.gif";
	}
	else
	{
		CellID = "scrollupcell";
		imgID = "scrollupimg";
		img_el = document.getElementById(imgID);
		img_el.src = "images/buttons/uparrowred.gif";
	}
	Cell_el = document.getElementById(CellID);
	Cell_el.style.border = "#c00000 1px solid";
	Cell_el.style.backgroundColor = "#d3d3d3"
}
function scrollbtnout(Direction)
{
	var CellID;
	if (Direction == "down")
	{
		CellID = "scrolldowncell";
		imgID = "scrolldownimg";
		img_el = document.getElementById(imgID);
		img_el.src = "images/buttons/downarrow.gif";
	}
	else
	{
		CellID = "scrollupcell";
		imgID = "scrollupimg";
		img_el = document.getElementById(imgID);
		img_el.src = "images/buttons/uparrow.gif";
	}
	Cell_el = document.getElementById(CellID);
	Cell_el.style.border = "darkblue 1px solid";
	Cell_el.style.backgroundColor = "gainsboro"
}


//**************************************************************************
// Thumb nail functions

function scrollimages(Direction)
{
	var Move, Newtop, Currenttop, Newbottom, iCurrenttop, iNumofImages;
	var Filename = new Array(7);

	if (Direction == "down")
		{Move = 1;}
	else 
		{Move = -1;}
	numofimages_el = document.getElementById("numofimages");
	NumofImages = numofimages_el.value;
	iNumofImages = parseInt(NumofImages);
	currenttop_el = document.getElementById("currenttop");
	Currenttop = currenttop_el.value;
	iCurrenttop = parseInt(Currenttop);
	Newtop = iCurrenttop + Move;
	Newbottom = Newtop + 4;
	if (Newbottom > iNumofImages ) return;
	if (Newtop < 0) return;
	for (i=0; i < Newtop; i++)
	{
		rowID = "thumbnail" + i;
		row_el = document.getElementById(rowID);
		row_el.style.display = "none";
	}
	for (i=Newtop; i < Newbottom; i++)
	{
		rowID = "thumbnail" + i;
		row_el = document.getElementById(rowID);
		row_el.style.display = "inline";
	}
	for (i=Newbottom; i < iNumofImages; i++)
	{
		rowID = "thumbnail" + i;
		row_el = document.getElementById(rowID);
		row_el.style.display = "none";
	}
	currenttop_el.value = Newtop;
}

function thumbnailover(ImageNum)
{	
	var cellID, el_cellID, imageID, el_imageID;
	// if this image is already selected, ignore.
	if (ImageNum == currentimagenum.value)return;
	cellID = "thumbnailcell" + ImageNum;
	el_cellID = document.getElementById(cellID);
	imageID = "thumbnailimg" + ImageNum;
	el_imageID = document.getElementById(imageID);
 	el_cellID.style.backgroundColor = "gainsboro";
 	el_cellID.style.color = "black";
 	el_cellID.style.borderRight = "black 1px solid";
	el_cellID.style.borderTop = "black 1px solid";
	el_cellID.style.borderLeft = "black 1px solid";
	el_cellID.style.borderBottom = "black 1px solid";

}

function thumbnailout(ImageNum)
{
	var cellID, el_cellID, imageID, el_imageID;
	// if this image is already selected, ignore.
	if (ImageNum == currentimagenum.value)return;
	cellID = "thumbnailcell" + ImageNum;
	el_cellID = document.getElementById(cellID);
	imageID = "thumbnailimg" + ImageNum;
	el_imageID = document.getElementById(imageID);
 	el_cellID.style.backgroundColor = "white";
 	el_cellID.style.color = "darkblue";
 	el_cellID.style.borderRight = "darkblue 1px solid";
	el_cellID.style.borderTop = "darkblue 1px solid";
	el_cellID.style.borderLeft = "darkblue 1px solid";
	el_cellID.style.borderBottom = "darkblue 1px solid";
}

function showimage(ImageNum, Filename)
{
	var cellID, el_cellID, TNimageID, el_TNimageID, CurrentImageNum;
	currentimagenum_el = document.getElementById("currentimagenum");
	CurrentImageNum = currentimagenum_el.value;
	el_PictureImg = document.getElementById("picture");
	el_PictureImg.src = Filename;
	// set the selected thumnail cell to the selected colours
	TNcellID = "thumbnailcell" + ImageNum;
	el_TNcellID = document.getElementById(TNcellID);
	TNimageID = "thumbnailimg" + ImageNum;
	el_TNimageID = document.getElementById(TNimageID);
	el_TNcellID.style.backgroundColor = "white";
	el_TNcellID.style.color = "#c00000";
 	el_TNcellID.style.borderRight = "#c00000 2px solid";
	el_TNcellID.style.borderTop = "#c00000 2px solid";
	el_TNcellID.style.borderLeft = "#c00000 2px solid";
	el_TNcellID.style.borderBottom = "#c00000 2px solid";
	
	// hide the text for the old picture
	var Textid = "imagetext" + CurrentImageNum;
	el_Textid = document.getElementById(Textid);
	el_Textid.style.display = "none";
	// display the text for the new picture
	Textid = "imagetext" + ImageNum;
	el_Textid = document.getElementById(Textid);
	el_Textid.style.display = "block";
	
	// save the new settings
	currentimagenum_el.value = ImageNum;
	
	// set the last selected thumbnail to unselected colours
	thumbnailout(CurrentImageNum);
	
	// write the new picture number
	NewNum = parseInt(ImageNum) + 1;
	el_CurrentPictureNum = document.getElementById("currentpicturenum");
	el_CurrentPictureNum.value = NewNum;		
}

function steptonext(Direction)
{
	var Move, CurrentImageNumCurrentPictureNum, el_CurrentPictureNum, NextNum, NumofImages, iNumofImages;
	currentimagenum_el = document.getElementById("currentimagenum");
	CurrentImageNum = currentimagenum_el.value
	if (Direction == "next") 
		{Move = 1;}
	else
		{Move = -1;}
	NextNum = parseInt(CurrentImageNum) + Move;

	// check against total number of images. Donot scroll if at end of list
	if (NextNum < 0) return;
	NumofImages = numofimages.value;
	iNumofImages = parseInt(NumofImages);
	if (iNumofImages <= NextNum) return;
	// send click event to the thumbnail cell which will then 
	// display the new picture and highlight the corresponding thumbnail
	TNcellID = "thumbnailcell" + NextNum;
	el_TNcellID = document.getElementById(TNcellID);
	el_TNcellID.click();
}

function stepover(el)
{
 	elid = el.id;
 	el.style.color = "blue";
}

function stepout(el)
{
 	elid = el.id;
 	el.style.color = "black";
}

//**************************************************************************