// JavaScript Document
function getWindowHeight() 
{
	var windowHeight = 0;
	
	if (typeof(window.innerHeight) == 'number') 
	{
		windowHeight = window.innerHeight;
	}
	
	else 
	{
		if (document.documentElement && document.documentElement.clientHeight) 
		{
			windowHeight = document.documentElement.clientHeight;
		}
		else 
		{
			if (document.body && document.body.clientHeight) 
			{
				windowHeight = document.body.clientHeight;
			}
		}
	}
	return windowHeight;
}

function getWindowWidth() 
{
	var windowWidth = 0;
	
	if (typeof(window.innerWidth) == 'number') 
	{
		windowWidth = window.innerWidth;
	}
	
	else 
	{
		if (document.documentElement && document.documentElement.clientWidth) 
		{
			windowWidth = document.documentElement.clientWidth;
		}
		else 
		{
			if (document.body && document.body.clientWidth) 
			{
				windowWidth = document.body.clientWidth;
			}
		}
	}
	return windowWidth;
}


function centerDiv(id)
{
	var div = document.getElementById(id);
	var top = (getWindowHeight() - div.offsetHeight)/2;
	var left = (getWindowWidth() - div.offsetWidth)/2;
    var xy = getScrollXY();
	  
	div.style.left = left + xy[0] + "px";
	div.style.top = top + xy[1] + "px";	
}	

function setShadow(id)
{
	var div = document.getElementById(id);
	var height = getWindowHeight();
	var width = getWindowWidth();
	div.style.width = width + "px";
	div.style.height = height + "px";
}

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

// prevents the user from scrolling while the popup is visible
function preventScroll()
{
	window.scrollTo(scrollX_old,scrollY_old);
}

// fades in and out depending on what the global var 'fadeType' has been set to
function fade(id)
{
	switch(fadeType) 
	{
		case 'in' : 
			if (shadowOpacity < shadowOpacityMax) { shadowOpacity += popFadeInc; }
			if (popOpacity < 100) { popOpacity += popFadeInc; setOpacity(id) }
			else { fading = false; }
			break;
		case 'out' :
			if (shadowOpacity > 0) { shadowOpacity -= popFadeInc; }
			if (popOpacity > 0) { popOpacity -= popFadeInc; setOpacity(id) }
			else { fading = false; }
			break;
	}
	if (fading) { setTimeout ('fade(\"'+id+'\")',popFadeRate) }
	
}

//sets the opacity of the popup and shadow using the global opacity vars (popupOpacity & shadowOpacity)
function setOpacity(popId) {
	var div1 = document.getElementById(popId);
	var div2 = document.getElementById(shadowId);
	div1.style.opacity = popOpacity/100;
	div1.style.filter = 'alpha(opacity=' + popOpacity + ')';
	div2.style.opacity = shadowOpacity/100;
	div2.style.display = 'block'; // shouldn't really be here but couldn't get it to work otherwise
	div2.style.filter = 'alpha(opacity=' + shadowOpacity + ')';
	if ((div1.style.opacity == 0)||(div1.style.filter == "alpha(opacity=0)")||(div1.style.filter=="progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"))  { 
			div1.style.display =  div2.style.display = 'none';
			div1.innerHTML = ""; 
			window.onscroll = null;
	}

}

// toggles the popup on when the link is clicked and off when the popup is clicked
// initiates the fading
function togglePop(id)
{
	window.onscroll = preventScroll;
	
	var xy = getScrollXY();
	scrollX_old = xy[0];
	scrollY_old = xy[1];
	
	var div = document.getElementById(id);

	if(div.style.display == 'block')
	{
		fadeType = 'out';
		fading = true;
	}
	else 
	{
		div.style.display = 'block';
		
		fadeType = 'in';
		fading = true;
	}
	
	//fade(shadowId);
	fade(id);
	centerDiv(id); 
	centerDiv(shadowId);
	if (id != shadowId)	{	addPopOffset(id); }
}

// loads the content from another div into the popup
// the div should be defined at the start of the html body and its display should be set to 'none'
function loadPop_DIV(popId, contentID, title)
{
	var div1 = document.getElementById(popId);
	var div2 = document.getElementById(contentID);
	
	div1.innerHTML = "<div id=\"popCtrlBar\"><div style=\"float:left;\">"+title+"</div><div style=\"float:right; width:"+closeButtonWidth+"px\"><img style=\"cursor:pointer\" onclick=\"document.getElementById('"+popId+"').innerHTML=''; togglePop('"+popId+"')\" align=\"right\" src=\""+closeButton1+"\" width=\""+closeButtonWidth+"\" height=\""+closeButtonHeight+"\" onmouseover=\"this.src='images/close2.jpg'\" onmouseout=\"this.src='images/close1.jpg'\"></div></div><br>";
	
	div1.innerHTML += "<div id=\"popInnerContent\">"+div2.innerHTML+"</div>";
	
	togglePop(popId);
}

function loadPop_IMG(popId, mylink, title)
{
	var div1 = document.getElementById(popId);
	
	div1.innerHTML = "<div id=\"popCtrlBar\"><div style=\"float:left;\">"+title+"</div><div style=\"float:right; width:"+closeButtonWidth+"px\"><img style=\"cursor:pointer\" onclick=\"document.getElementById('"+popId+"').innerHTML=''; togglePop('"+popId+"')\" align=\"right\" src=\"images/close1.jpg\" width=\""+closeButtonWidth+"\" height=\""+closeButtonHeight+"\" onmouseover=\"this.src='images/close2.jpg'\" onmouseout=\"this.src='images/close1.jpg'\"></div></div>";
	
	div1.innerHTML += "<span align=\"center\"><img src=\""+mylink+"\" border=\"0\"></span>";

	togglePop(popId);
}

function loadPop_SWF(popId, width, height, mylink, title)
{
	var div1 = document.getElementById(popId);

	div1.innerHTML = "<div id=\"popCtrlBar\"><div style=\"float:left;\">"+title+"</div><div style=\"float:right; width:"+closeButtonWidth+"px\"><img style=\"cursor:pointer\" onclick=\"document.getElementById('"+popId+"').innerHTML=''; togglePop('"+popId+"')\" align=\"right\" src=\"images/close1.jpg\" width=\""+closeButtonWidth+"\" height=\""+closeButtonHeight+"\" onmouseover=\"this.src='images/close2.jpg'\" onmouseout=\"this.src='images/close1.jpg'\"></div></div>";
	
	div1.innerHTML += "<center><div id=\"flv_player\" style=\"margin:auto 0; margin-top:"+closeButtonHeight+"px; z-index:20; position:absolute;\" align=\"center\"><object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\" viewastext=\"\" id=\"Object1\" height=\""+height+"\" width=\""+width+"\"><param name=\"movie\" value=\""+flashPlayer+"?fname="+mylink+"\"><param name=\"quality\" value=\"high\" /><embed src=\""+flashPlayer+"?fname="+mylink+"\" quality=\"high\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" height=\""+height+"\" width=\""+width+"\"></embed></div></object></center>";

	togglePop(popId);
}

function loadPop_QT(popId, width, height, mylink, title)
{
	var div1 = document.getElementById(popId);
	
	div1.innerHTML = "<div id=\"popCtrlBar\"><div style=\"float:left;\">"+title+"</div><div style=\"float:right; width:"+closeButtonWidth+"px\"><img style=\"cursor:pointer\" onclick=\"document.getElementById('"+popId+"').innerHTML=''; togglePop('"+popId+"')\" align=\"right\" src=\"images/close1.jpg\" width=\""+closeButtonWidth+"\" height=\""+closeButtonHeight+"\" onmouseover=\"this.src='images/close2.jpg'\" onmouseout=\"this.src='images/close1.jpg'\"></div></div>";
	
	div1.innerHTML += "<center><div style=\"margin:auto 0; margin-top:"+closeButtonHeight+"px; z-index:20; position:relative;\" align=\"center\"><embed src=\""+mylink+"\" width=\""+width+"\" height=\""+height+"\" align=\"absmiddle\"></embed></div></center>";
	
	div1.innerHTML += "<div id=\"popCaption\"><br>Can't see the clip?<br>Download <a href=\"http://www.apple.com/quicktime/download/\" target=\"_blank\"><strong>QuickTime player</strong></a> / <a href=\"http://www.free-codecs.com/QT_Lite_download.htm\" target=\"_blank\"><strong>Quicktime Lite!</strong></a> </div></center>";
	
	togglePop(popId);
}

// redefines the popup's width, height, background, border and padding so that it can be used with different content 
// would be nice if the width and height could be set automatically in relation to the content dimensions
function setupPop(popId, w, h, bgCol, b, p)
{
	var div = document.getElementById(popId)
	div.style.width = w;
	div.style.height = h;
	div.style.background = bgCol;
	div.style.border = b;
	div.style.padding = p;
	div.style.overflow = 'hidden';
}

function addPopOffset (popId)
{
	var div = document.getElementById(popId)
	div.style.left = div.offsetLeft + popOffset[0] + "px";
	div.style.top = div.offsetTop + popOffset[1] + "px";
}

function setPlayer(p)
{
	flashPlayer = p;
}

// default values
var fading = false;
var fadeType = 'in';
var popOpacity = 0;
var shadowOpacity = 0;
var scrollX_old = 0;
var scrollY_old = 0;
var closeButton1 = "close1.jpg";
var closeButton2 = "close2.jpg";
var closeButtonWidth = 20;
var closeButtonHeight = 20;
var popOffset = [0,0];
var flashPlayer = "player.swf";
var shadowId = 'shadow';
var shadowOpacityMax = 75;
var popFadeRate = 25;
var popFadeInc = 20;