var timeout;
var currentFrame = "1";
var previousFrame = "";
var isPlaying = true;
var playTimeout;

function moreOnLoad()
{
	replaceFlash(document.getElementById("playerContainer"), "/flash/playerProductInstall.swf", 9, 0, 42);
	
	document.getElementById("playerContainer").className = "enabled";
	
	if (document.getElementById("player") == null)
	{
		return;
	}
	
	createControls();
	
	var spans = document.getElementById("controls").getElementsByTagName("span");
	var frame;
	
	for (var j = 0; j < spans.length; j++)
	{
		var anchors = spans[j].getElementsByTagName("a");
		
		for (var i = 0; i < anchors.length; i++)
		{
			// this used to be onclick = loadFrame, but that caused problems when the user
			// clicked a digit when the marker was in mid-creep
			anchors[i].onclick = function()
			{
				clearTimeout(playTimeout);
				
				load(this.id.substring(1));
			};
			
			frame = document.getElementById("frame" + (i + 1));
			
			//frame.style.display = "none";
			
			frame.style.backgroundImage = "url(" + frame.getElementsByTagName("img")[0].src + ")";
		}
	}
	
	var divs = document.getElementById("player").getElementsByTagName("div");
	var html;
	var h;
	
	for (var j = 0; j < divs.length - 0; j++)
	{
		html = divs[j].innerHTML;
		
		h = divs[j].offsetHeight + 10;
		
		divs[j].style.display = "none";
		
		divs[j].style.paddingTop = (285 - h) + "px";
		
		divs[j].style.height = h + "px";
		
		divs[j].innerHTML = html + "<span class='overlay' style='height:" + h + "px;'><\/span>";
	}
	
	document.getElementById("frame" + currentFrame).style.display = "block";
	
	positionMarker(currentFrame);
	
	document.getElementById("mask").onclick = function()
	{
		document.location.href = document.getElementById("frame" + currentFrame).getElementsByTagName("a")[0].href;
	}
	
	playTimeout = setTimeout("creep()", 5000);
}

function loadFrame(e)
{
	if (!e) e = window.event;
	
	var tg = (window.event) ? e.srcElement : e.target;
	
	var frame = tg.id.substring(1);
	
	load(frame);
}

function load(frame)
{
	var current = document.getElementById("frame" + currentFrame);
	var tframe = document.getElementById("frame" + frame);
	var o;
	
	if (!tframe)
	{
		if (frame == "back")
		{
			frame = parseInt(currentFrame) - 1;
			
			if (frame == 0)
			{
				frame = document.getElementById("player").getElementsByTagName("div").length;
			}
		}
		else if (frame == "next")
		{
			frame = parseInt(currentFrame) + 1;
			
			if (frame > document.getElementById("player").getElementsByTagName("div").length)
			{
				frame = 1;
			}
		}
		else
		{
			togglePlay();
			
			return;
		}
		
		tframe = document.getElementById("frame" + frame);
	}
	
	document.getElementById("mask").onclick = function()
	{
		document.location.href = document.getElementById("frame" + currentFrame).getElementsByTagName("a")[0].href;
	}
	
	if (current.filters)
	{
		o = current.filters.alpha.opacity;
	}
	else
	{
		o = (current.style.opacity == "" ? 0 : current.style.opacity);
	}
	
	o = parseFloat(o);
	
	if (currentFrame != frame)
	{
		//clearTimeout(timeout);
		//clearTimeout(playTimeout);
		
		//current.style.zIndex = 0;
		
		//tframe.style.zIndex = 1;
		
		if (tframe.filters)
		{
			tframe.filters.alpha.opacity = 0;
		}
		else
		{
			tframe.style.opacity = 0;
		}
		
		tframe.style.display = "block";
		
		previousFrame = currentFrame;
		
		document.getElementById("frame" + previousFrame).style.display = "none";
		
		currentFrame = frame;
		
		timeout = setTimeout("load('" + frame + "')", 0);
	}
	else
	{
		if (current.filters)
		{
			current.filters.alpha.opacity = o + 20;
		}
		else
		{
			current.style.opacity = o + .20;
		}
		
		if (o > 2) o = o / 100;
		
		var diff = document.getElementById("a" + currentFrame).offsetLeft - document.getElementById("a" + previousFrame).offsetLeft;
		
		document.getElementById("marker").style.left = (document.getElementById("a" + previousFrame).offsetLeft + (diff * o) - 2) + "px";
		
		if (o < 1)
		{
			//clearTimeout(timeout);
			
			timeout = setTimeout("load('" + frame + "')", 100);
		}
		else if (isPlaying)
		{
			playTimeout = setTimeout("creep()", 5000);
		}
	}
}

function positionMarker(frame)
{
	var outline = document.getElementById("marker");
	
	frame = "a" + frame;
	
	outline.style.width = document.getElementById(frame).offsetWidth + "px";
	
	outline.style.height = (document.getElementById(frame).offsetHeight - 2) + "px";
	
	outline.style.left = (document.getElementById(frame).offsetLeft - 2) + "px";
	
	outline.style.top = "0px";
}

function creep()
{
	var nextFrame = parseInt(currentFrame) + 1;
	
	if (nextFrame > document.getElementById("player").getElementsByTagName("div").length)
	{
		nextFrame = 1;
	}
	
	load("" + nextFrame);
	
	if (isPlaying)
	{
		//playTimeout = setTimeout("creep()", 5000);
	}
}

function togglePlay()
{
	isPlaying = !isPlaying;
	
	if (isPlaying)
	{
		creep();
	}
	else
	{
		//clearTimeout(playTimeout);
	}
	
	//document.getElementById("play").innerHTML = (isPlaying ? "Pause" : "Play");
}

function createControls()
{
	var count = document.getElementById("player").getElementsByTagName("div").length;
	var html = "";
	
	html += '<div id="controls">';
	html += '	<span class="backPlay">';
	//html += '		<a id="back">Back</a> | <a id="play">Pause</a>';
	html += '		<a id="back">&lt;</a>';
	html += '	</span>';
	html += '	<span class="numbers">';
	html += '		<span id="marker"></span>';
	
	for (var i = 1; i <= count; i++)
	{
		html += '		<a id="a' + i + '">' + i + '</a>';
	}
	
	html += '	</span>';
	html += '	<span class="next"><a id="next">&gt;</a></span>';
	html += '</div>';
	
	document.getElementById("controlsContainer").innerHTML = html;
}