window.onresize = layout;
window.onload = start;
window.onLoad = start;

var opacity = 100;
var ih;
var startTime;
var fader;

start;


function start()
{
	var code = "";

	for(var i = 0; i < channels.length/2; i++)
	{
		code += '<img onclick="changeChannel('+i+')" class="button" id="b'+i+'" src="images/button5.png">';
		code += '<div onclick="changeChannel('+i+')" class="buttonLabel" id="bl'+i+'">'+channels[i*2]+'</div>';
	}
	
	document.getElementById("buttons").innerHTML = code;

        fader = document.getElementById("fader");

        startTime = now();

	setTimeout("layout()",10);
        setTimeout('setClassFontSize("buttonLabel",ih/25)',11);
        setTimeout("fadeinout()",12);
}

function now()
{
      return new Date().getTime();
}

function fadeinout()
{
        setOpacity(fader,opacity);
	
        opacity = 100-Math.round((now()-startTime)/4);

	if(opacity > 3)
		setTimeout("fadeinout()",5);
	else
		fader.style.visibility = "hidden";
}

function setOpacity(obj, opacity)//opacity 1-100
{
        obj.style.filter = "alpha(opacity="+opacity+")";
        obj.style.opacity = opacity/100;
}

function layout()
{
	var tv = document.getElementById("tv");
	var screenF = document.getElementById("screenF");
	var screenB = document.getElementById("screenB");

	var pageWidth = getPageWidth();
	var pageHeight = getPageHeight();
	var aspect = 1.333; // width/height
	
	var xPad = 0, yPad = 0, sWidth, sHeight;
	
	if (aspect > pageWidth/pageHeight) {
		sWidth = pageWidth;
		sHeight = Math.ceil(pageWidth/aspect);
		yPad = (pageHeight-sHeight)/2;
	}
	else {
		sHeight = pageHeight;
		sWidth = Math.ceil(pageHeight*aspect);
		xPad = (pageWidth-sWidth)/2;
	}

        ih = sHeight*.73;
	
	var scale = pageWidth/100;

	tv.style.left = xPad+"px";
	tv.style.top = yPad+"px";
	tv.style.width = sWidth+"px";
	tv.style.height = sHeight+"px";
	
	screenF.style.left = (xPad+sWidth*.16)+"px";
	screenF.style.top = (yPad+sHeight*.135)+"px";
	screenF.style.width = (sWidth*.555)+"px";
	screenF.style.height = (sHeight*.73)+"px";

	screenB.style.left = (xPad+sWidth*.16)+"px";
	screenB.style.top = (yPad+sHeight*.135)+"px";
	screenB.style.width = (sWidth*.555)+"px";
	screenB.style.height = (sHeight*.73)+"px";


	for(var i = 0; i < channels.length/2; i++)
	{
		var button = document.getElementById("b"+i);
		var buttonLabel = document.getElementById("bl"+i);

		button.style.left = (xPad+sWidth*.78)+"px";
		button.style.top = (yPad+sHeight*(.325+i*.085))+"px";
		button.style.width = (sWidth*.12)+"px";
		button.style.height = (sHeight*.0785)+"px";
		button.style.visibility = "visible";

		buttonLabel.style.left = (xPad+sWidth*.78)+"px";
		buttonLabel.style.top = (yPad+sHeight*(.325+i*.085))+"px";
		buttonLabel.style.width = (sWidth*.12)+"px";
		buttonLabel.style.height = (sHeight*.0785)+"px";
		buttonLabel.style.visibility = "visible";
	}
	
	setClassFontSize("buttonLabel",(sHeight*.73)/25);
}

function changeChannel(channel)
{
	var screenF = document.getElementById("screenF");
	var screenB = document.getElementById("screenB");

	screenF.src = channels[channel*2+1]+"?style=Foreground";
	screenB.src = channels[channel*2+1]+"?style=Background";

}