/* common function to set the style sheet */

var EMsizeg=0;
var EMwidth=0;
var EMheight=0;
var EMresize=-1;
var EMresizec=0;

/*  setstyle - loads the appropriate style sheets depending on the screen dimensions
    the height is used to load a vert...css holding hold the font size settings and button 'box'
    the width is used to load a horz...css holding the rest of the styles with margins/padding etc
    finally inline styles are created to set the dimensions of the rest of the 'boxes' these are a
    combination of data from both width and height also the table is a third of the width of contents
    but ensure that the ratio vert... to horz.. is at least 4:3 to ensure that the header fits */
function setstyle()
{
// get the window size
	getWinHeight();
// estimate 2 extra on width and 166 on height for a 'full screen' size (not actually accurate)
	var h=EMheight+166;
	var w=EMwidth+2;
	var menuw = new Number;
// variables for holding the widths of the boxes the formulae must be found by trial and error!
	var containw = new Number;
	var contentw = new Number;
	var headerw = new Number;
	var work = new Number;
// special testing
/*	if (document.URL.search("Peter")>=0)
{
	if (screen.height==1024)
	{
		h=1034;
		w=1400;
	}
}*/
// set vert style based on height (but also width)
 	if (h<720 || w<650)
	{
		document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/vert600.css\"/>");
		menuw=108;
		headerw = Math.max(w-37,headerw=620);
	}
	else if (h<848 || w<1000)
	{
		document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/vert768.css\"/>");
		menuw=128;
		headerw = Math.max(w-39,850);
	}
	else if (h<1032 || w<1400)
	{
		document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/vert1024.css\"/>");
		menuw=186;
		headerw = Math.max(w-40,1020);
	}
	else
	{
		document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/vert1200.css\"/>");
		menuw=220;
		headerw = Math.max(w-45,1500);
	}

	if (w<840)
	{
		document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/horz800.css\"/>");
		containw = w-36;
		contentw = w-menuw-45;
	}
	else if (w<1000)
	{
		document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/horz1024.css\"/>");
		containw = w-37;
		contentw = w-menuw-49;
	}
	else if (w<1400)
	{
		document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/horz1280.css\"/>");
		containw = w-35;
		contentw = w-menuw-50;
	}
	else
	{
		document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/horz1680.css\"/>");
		containw = w-32;
		contentw = w-menuw-65;
	}
	document.writeln("<style>");
/* set section widths */
	document.writeln("#container {width:"+containw.toString()+"px}");
	document.writeln("#header {width:"+headerw.toString()+"px}");
	document.writeln("#content {width:"+contentw.toString()+"px}");
	document.writeln("#footer {width:"+headerw.toString()+"px}");
 // repertoire columns are half the content width (minus padding)
	work=Math.floor((contentw-50)/2);
	document.writeln(".repertoire col{width:"+work.toString()+"px}");
	document.writeln("</style>");
}


// function to get the inner size of the browser window (depends on browser used) values in global vars EMwidth amd height
// get the inner window height depending on which browser is in use
function getWinHeight()
{
	switch (EMsizeg)
	{
	case 0:
		if (typeof window.innerWidth!='undefined') { EMsizeg = 1 }
		 else if (typeof document.documentElement!='undefined'
		     && typeof document.documentElement.clientWidth!=
		     'undefined' && document.documentElement.clientWidth!=0)
		{
			EMsizeg=2;
			EMwidth=document.documentElement.clientWidth;
			EMheight=document.documentElement.clientHeight;
			return 0
		}
		else
		{
			EMsizeg=3;
			EMwidth=getElementsByTagName('body')[0].clientWidth;
			EMheight=getElementsByTagName('body')[0].clientHeight;
			return 0
		}
	case 1:
		EMwidth=window.innerWidth;
		EMheight=window.innerHeight;
		return 0
	case 2:
		EMwidth=document.documentElement.clientWidth;
		EMheight=document.documentElement.clientHeight;
		return 0
	default:
		EMwidth=getElementsByTagName('body')[0].clientWidth;
		EMheight=getElementsByTagName('body')[0].clientHeight;
		return 0
	}
}


/* the function that receives the resize event */
function resized()
{
	alert("resize")
}

/* routine to add a goto top of page button */
function gototop()
{
	document.writeln("<div class=\"centered\">");
	document.write("<button type=\"button\" id=\"gototop\" class=\"topbut\" onclick=\"procbut(\'gototop\',1)\"");
	document.write(" onmouseover=\"procbut(\'gototop\',2)\" onmouseout=\"procbut(\'gototop\',3)\"");
	document.write(" onfocus=\"procbut(\'gototop\',2)\" onblur=\"procbut(\'gototop\',3)\">");
	document.writeln("Return<br/>to top</button></div>");
}

/* function to process a button. parameters:
 id - the id of the button
 type - type of process - 0 goto previous page, 1 - scroll to top of page, 2 'hover' (white text), 3 'unhover' (black text) */
function procbut(id,type)
{
	switch(type)
	{
	case 0:
		history.back();
		break;
	case 1:
		window.scrollTo(0,document.getElementById("collage").height);
		break;
	case 2:
		document.getElementById(id).style.color="White";
		break;
	case 3: 
		document.getElementById(id).style.color="Black";
		break;
	default:
		alert("Invalid topbotton call "+type);
	}
}


/* setflowplayer installs the flowpayer into the specified element (id and name the same)
  1 - name of clip and element to play it in (excludes the flash/ and the .flv) */
function setflowplayer(clipname)
{
	var el=document.getElementById(clipname+"b");
	if (el!="undefined")
	{
		el.className="centered"
	}
	el=document.getElementById(clipname);
	if (el=="undefined")
	{
		alert("Player element not found: "+clipname);
		return 1
	}
	el.className="flowplayer";
	el.innerHTML="";
	flowplayer(clipname, 'flowplayer-3.1.4.swf', {
	playlist: [ "flash/"+clipname+".flv" ]
	} )
}


// resize process start a timer if not already done
function emresize()
{
// if a timer is already running 
	if (EMresize==0)
	{
		return 0
	}
// get the current window size
	getWinHeight();
// start the timer for .5 sec to call timer processor with the current window sizes
	EMresize=0;
	var t=setTimeout("EMtimed("+EMwidth.toString()+","+EMheight.toString()+")",500)
}

// resize timeout, if the size has changed just start the timer again
function EMtimed(w,h)
{
// get the current window size
	getWinHeight();
// if the size is not changed reload the page
	if ((w==EMwidth && h==EMheight) || EMresizec>10)
	{
		EMresize=1;
		EMresizec=0;
		window.location.reload();
		return 0
	}
// restart the timer for .5 sec to call timer processor with the current window sizes
	EMresize=0;
	EMresizec=EMresizec+1;
	var t=setTimeout("EMtimed("+EMwidth.toString()+","+EMheight.toString()+")",500)
}