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

Controls div layers for site.

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

// Flash demo variables.
var g_flashFiles = new Array(4);
g_flashFiles[0] = 'demo0_intro';
g_flashFiles[1] = 'demo1_add_names';
g_flashFiles[2] = 'demo2_connect';
g_flashFiles[3] = 'demo3_enjoy';

var g_demoTitles = new Array(4);
g_demoTitles[0] = 'Introduction';
g_demoTitles[1] = 'Add Names';
g_demoTitles[2] = 'Connect';
g_demoTitles[3] = 'Enjoy';

var g_curFileNum = 0;
var g_nextEnabled = true;
var g_prevEnabled = false;

var g_emptyOnClick = 'return false;';
var g_onMouseOut = "alert('restore');";
var g_prevOnMouseOver = "MM_swapImage('demoWindow_prev','','/Controls/images/rollovers/button_prev-over.gif',1)";
var g_nextOnMouseOver = "MM_swapImage('demoWindow_next','','/Controls/images/rollovers/button_next-over.gif',1)";

// Float layer variables.
var floatX=10;
var floatY=10;
var layerwidth=695;
var layerheight=380;
var halign="center";
var valign="center";
var delayspeed=3;

var NS6=false;
var IE4=(document.all);
if (!IE4) {NS6=(document.getElementById);}
var NS4=(document.layers);


// Shows the Watch Demo Panel, with the demo file number specified.
function ShowDemoPanel(fileNum)
{
	// Only proceed if file number is valid.
	if (fileNum <= 3) {
		var obj = null;
		
		try {
			if (obj = document.getElementById('demoFlashMovie')) {
				obj.StopPlay();
			}
		}
		catch (error) {
			// Do nothing.
		}

		// Update current file and swap demo;
		g_curFileNum = fileNum;
		RefreshDemoButtons();
		SwapDemoFile(g_curFileNum);

		if (obj = document.getElementById('demoPanel')) {
			obj.style.display = "block";
		}
	}

	// Return false to prevent reloading the page.
	return false;
}

// Hides the Watch Demo Panel.
function HideDemoPanel()
{
	var obj = null;
	if (obj = document.getElementById('demoFlashMovie')) {
		obj.StopPlay();
	}
	
	if (obj = document.getElementById('demoPanel')) {
		obj.style.display = "none";
	}

	// Return false to prevent reloading the page.
	return false;
}

// Refreshes previous and next image buttons.
function RefreshDemoButtons(type)
{
	// Maintain over states.
	if (type == 'next') {
		DemoMouseOut('demoWindow_prev');
		DemoMouseOver('demoWindow_next');
	}
	else if (type == 'prev') {
		DemoMouseOver('demoWindow_prev');
		DemoMouseOut('demoWindow_next');
	}
	else {
		g_prevEnabled = true;
		g_nextEnabled = true;

		if (g_curFileNum == 0) {
			g_prevEnabled = false;
		}
		else if (g_curFileNum + 1 == g_flashFiles.length) {
			g_nextEnabled = false;
		}

		DemoMouseOut('demoWindow_prev');
		DemoMouseOut('demoWindow_next');
	}
}

// Performs mouse over for previous demo button, shows enabled or disabled.
function DemoMouseOut(elementId)
{
	if (elementId == 'demoWindow_prev') {
		var obj = document.getElementById(elementId);
		if (obj) {
			if (g_prevEnabled) {
				obj.src = '/Controls/images/rollovers/button_prev.gif';
			}
			else {
				obj.src = '/Controls/images/rollovers/button_prev-disabled.gif';
			}
		}
	}
	else if (elementId == 'demoWindow_next') {
		var obj = document.getElementById(elementId);
		if (obj) {
			if (g_nextEnabled) {
				obj.src = '/Controls/images/rollovers/button_next.gif';
			}
			else {
				obj.src = '/Controls/images/rollovers/button_next-disabled.gif';
			}
		}
	}
}

// Performs mouse over for previous demo button, shows enabled or disabled.
function DemoMouseOver(elementId)
{
	var obj = document.getElementById(elementId);
	if (obj) {
		if (elementId == 'demoWindow_prev') {
			if (g_prevEnabled) {
				obj.src = '/Controls/images/rollovers/button_prev-over.gif';
			}
			else {
				obj.src = '/Controls/images/rollovers/button_prev-disabled.gif';
			}
		}
		else if (elementId == 'demoWindow_next') {
			if (g_nextEnabled) {
				obj.src = '/Controls/images/rollovers/button_next-over.gif';
			}
			else {
				obj.src = '/Controls/images/rollovers/button_next-disabled.gif';
			}
		}
	}
}

// Plays the previous demo file.
function PrevDemo()
{
	if (g_curFileNum > 0) {
		g_prevEnabled = true;
		g_nextEnabled = true;
		--g_curFileNum;
		SwapDemoFile(g_curFileNum);

		if (g_curFileNum == 0) {
			g_prevEnabled = false;
		}
	}

	RefreshDemoButtons('prev');

	return false;
}

// Plays or restarts the current demo file.
function PlayDemo()
{
	SwapDemoFile(g_curFileNum);
	return false;
}

// Plays the next demo file.
function NextDemo()
{
	if (g_curFileNum + 1 < g_flashFiles.length) {
		g_nextEnabled = true;
		g_prevEnabled = true;
		++g_curFileNum;
		SwapDemoFile(g_curFileNum);

		if (g_curFileNum + 1 == g_flashFiles.length) {
			g_nextEnabled = false;
		}
	}

	RefreshDemoButtons('next');

	return false;
}

// Changes Flash Files.
function SwapDemoFile(fileNum)
{
	var obj = null;
	if (obj = document.getElementById('demoTitle')) {
		obj.innerHTML = g_demoTitles[fileNum];
	}
	if (obj = document.getElementById('demoPanel')) {
		obj.style.visibility='visible';
	}

	// First demo has different dimensions.
	var obj = document.getElementById('demoFile');
	if (obj) {
		if (fileNum != 0) {
			obj.innerHTML = "<embed name='demoFlashMovie' id='demoFlashMovie' src='/media/" + g_flashFiles[fileNum] + ".swf' width='438' height='390' play='true' swliveconnect='true' quality='high'></embed>";
		}
		else {
			obj.innerHTML = "<embed name='demoFlashMovie' id='demoFlashMovie' src='/media/" + g_flashFiles[fileNum] + ".swf' width='438' height='325' play='true' swliveconnect='true' quality='high'></embed>";
		}
	}
}

/*** Float Layer Start ***/

function adjust()
{
    if ((NS4) || (NS6)) {
        if (lastX==-1 || delayspeed==0) {
            lastX=window.pageXOffset + floatX;
            lastY=window.pageYOffset + floatY;
        }
        else {
            var dx=Math.abs(window.pageXOffset+floatX-lastX);
            var dy=Math.abs(window.pageYOffset+floatY-lastY);
            var d=Math.sqrt(dx*dx+dy*dy);
            var c=Math.round(d/10);
            if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
            if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
            if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
            if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
        }

        if (NS4) {
            document.layers['demoPanel'].pageX = lastX;
            document.layers['demoPanel'].pageY = lastY;
        }
        else if (NS6) {
            document.getElementById('demoPanel').style.left = lastX;
            document.getElementById('demoPanel').style.top = lastY;
        }
    }
    else if (IE4)
    {
        if (lastX == -1 || delayspeed == 0) {
            lastX = document.body.scrollLeft + floatX;
            lastY = document.body.scrollTop + floatY;
        }
        else {
            var dx = Math.abs(document.body.scrollLeft + floatX - lastX);
            var dy = Math.abs(document.body.scrollTop + floatY - lastY);
            var d = Math.sqrt(dx * dx + dy * dy);
            var c = Math.round(d / 10);
            if (document.body.scrollLeft + floatX > lastX) { lastX = lastX + delayspeed + c;}
            if (document.body.scrollLeft + floatX < lastX) { lastX = lastX - delayspeed - c;}
            if (document.body.scrollTop + floatY > lastY) { lastY = lastY + delayspeed + c;}
            if (document.body.scrollTop + floatY < lastY) { lastY = lastY - delayspeed - c;}
        }

        document.all['demoPanel'].style.posLeft = lastX;
        document.all['demoPanel'].style.posTop = lastY;
    }

	setTimeout('adjust()', 50);
}

function define()
{
	if (NS4 || NS6) {
		if (halign == "left") { floatX = ifloatX }
		else if (halign == "right") { floatX = window.innerWidth - ifloatX - layerwidth - 20 }
		else if (halign == "center") { floatX = Math.round((window.innerWidth - 20) / 2) - Math.round(layerwidth / 2) }
		if (valign == "top") { floatY = ifloatY }
		else if (valign == "bottom") { floatY = window.innerHeight - ifloatY - layerheight }
		else if (valign == "center") { floatY = Math.round((window.innerHeight - 20) / 2) - Math.round(layerheight / 2) }
	}
	else if (IE4) {
		if (halign == "left") { floatX = ifloatX }
		else if (halign == "right") { floatX = document.body.offsetWidth - ifloatX - layerwidth - 20 }
		else if (halign == "center") { floatX = Math.round((document.body.offsetWidth - 20) / 2) - Math.round(layerwidth / 2) }
		if (valign == "top") { floatY = ifloatY }
		else if (valign == "bottom") { floatY = document.body.offsetHeight - ifloatY - layerheight }
		else if (valign == "center") { floatY = Math.round((document.body.offsetHeight - 20) / 2) - Math.round(layerheight / 2) }
	}
}

// Writes the ending tag of the div layer.
function InitDemoLayer()
{
	ifloatX = floatX;
	ifloatY = floatY;
	define();
	addOnResizeEvent(define);
	lastX = -1;
	lastY = -1;
	adjust();
}
/*** Float Layer End ***/

// Centers the specified div layer horizontally.
var isOnResizeSet = false;

function CenterDivLayerHorziontally(divLayerId, layerWidth)
{
	if (NS4 || NS6) {
		floatX = Math.round((window.innerWidth - 20) / 2) - Math.round(layerWidth / 2);
		if (obj = document.getElementById(divLayerId)) {
			obj.style.left = floatX;
		}
	}
	else if (IE4) {
		floatX = Math.round((document.body.offsetWidth - 20) / 2) - Math.round(layerWidth / 2);
		if (obj = document.all[divLayerId]) {
			obj.style.posLeft = floatX;
		}
	}
}