// preload the hover state of the close button
var closeHover = new Image();
closeHover.src = 'images/close_hover.png';

var mediaBackgroundColor = "#CBD9E6";

function showMediaSlip(width, height, url, type) {
	var modalShade = document.getElementById('modalShade');
	var mediaSlipTable = document.getElementById('mediaSlipTable');
	var mediaSlip = document.getElementById('mediaSlip');
	var mediaSlipContainer = document.getElementById('mediaSlipContainer');
	var data;

	// check the dimensions - if this would be wider or taller than the window, scale it down appropriately
	var currentWidth = window.innerWidth ? window.innerWidth : (document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth);
	var currentHeight = window.innerHeight ? window.innerHeight : (document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight);
	// HERE'S LOGIC TO MAKE THIS WORK FOR TRANSITIONAL DOCTYPES, IN CASE YOU NEED THAT...
	//var currentWidth = window.innerWidth ? window.innerWidth : ((document.documentElement && document.documentElement.clientWidth > 0) ? document.documentElement.clientWidth : document.body.clientWidth);
	//var currentHeight = window.innerHeight ? window.innerHeight : ((document.documentElement && document.documentElement.clientHeight > 0) ? document.documentElement.clientHeight : document.body.clientHeight);
	if (width > (currentWidth-80)) {
		// restrain the width, and scale the height accordingly
		var targetWidth = (currentWidth-80);
		var targetHeight = Math.floor( (targetWidth*(height))/(width) );

		width = targetWidth; 
		height = targetHeight;
	}
	if (height > (currentHeight-60)) {
		// restrain the height, and scale the width accordingly
		var targetHeight = (currentHeight-60);
		var targetWidth = Math.floor( (targetHeight*(width))/(height) );
		
		width = targetWidth; 
		height = targetHeight;
	}

	
	// see if it's requested that we evaluate the media type for them....
	// try to auto-detect the type
	var testURL = url.toUpperCase();
	if (type == null || type == '') {
		if (testURL.indexOf(".JPG") != -1 || testURL.indexOf(".JPEG") != -1 || testURL.indexOf(".GIF") != -1 || testURL.indexOf(".PNG") != -1 || testURL.indexOf(".BMP") != -1) {
			type = 'image';
		}
		else if (testURL.indexOf(".MOV") != -1 || testURL.indexOf(".WMV") != -1 || testURL.indexOf(".MPG") != -1 || testURL.indexOf(".MPEG") != -1 || testURL.indexOf(".MP4") != -1 || testURL.indexOf(".AVI") != -1 || testURL.indexOf(".MP3") != -1 || testURL.indexOf(".WAV") != -1) {
			type = 'video';
		}
		else if (testURL.indexOf(".FLV") != -1) {
			type = 'flv';
		}
	}

	// insert the media markup based on the type requested
	var mediaElementRoot;
	if(type == 0 || type == "image") {
		//data += '<img src="'+url+'" width="'+width+'" height="'+height+'">';
		mediaElementRoot = document.createElement('img');
		mediaElementRoot.src = url;
		mediaElementRoot.style.width = width + 'px';
		mediaElementRoot.style.height = height + 'px';

		mediaSlip.appendChild(mediaElementRoot);

		mediaSlip.onclick = function () {hideMediaSlip();}
		mediaSlip.style.cursor = 'pointer';

	} else if(type == 1 || type == "video") {
		var data = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" id="mediaObj" width="'+width+'" height="'+height+'" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="'+url+'"><param name="autoplay" value="false"><param name="controller" value="true"><param name="bgcolor" value="'+mediaBackgroundColor+'"><param name="scale" value="aspect"><param name="showcontrols" value="true"><embed width="'+width+'" height="'+height+'" src="'+url+'" autoplay="false" controller="true" showcontrols="true" scale="aspect" bgcolor="'+mediaBackgroundColor+'" pluginspage="http://www.apple.com/quicktime/download/" enablejavascript="true"></embed></object>';
		mediaSlip.innerHTML = data;

		mediaSlip.onclick = function () {};
		mediaSlip.style.cursor = 'default';		
	}	
	else if(type == 2 || type == "flv") {
		if (mediaSlip.filters) {
			var data = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mediaObj" type="application/x-shockwave-flash" data="lib/FlowPlayer.swf" width="'+width+'" height="'+height+'" id="FlowPlayer"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="lib/FlowPlayer.swf" /><param name="quality" value="high" /><param name="scale" value="noScale" /><param name="wmode" value="transparent" /><param name="flashvars" value="config={videoFile: '+"'../"+url+"'"+', initialScale: '+"'"+'orig'+"'"+'}" /></object>';
			mediaSlip.innerHTML = data;
		}
		else {		
			mediaElementRoot = document.createElement('object');
			mediaElementRoot.id="FlowPlayer";
			// this seems to cause an error in FF - removing it for now
			//mediaElementRoot.setAttribute("classid", "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000");
			mediaElementRoot.setAttribute("type", "application/x-shockwave-flash");
			mediaElementRoot.setAttribute("data", "lib/FlowPlayer.swf");
			mediaElementRoot.setAttribute("width", width);
			mediaElementRoot.setAttribute("height", height);

			// append the movie parameters
			var movieParams = [
				{ name:"allowScriptAccess", value: "sameDomain" },
				{ name:"movie", value: "lib/FlowPlayer.swf"},
				{ name:"quality", value: "high"},
				{ name:"scale", value: "noScale"},
				{ name:"wmode", value: "transparent"},
				{ name:"flashvars", value: "config={videoFile: '../"+url+"', initialScale: 'orig'}"} 
			];
			for (var i in movieParams) {
				var nextParam = document.createElement("param");
				nextParam.setAttribute("name", movieParams[i].name);
				nextParam.setAttribute("value", movieParams[i].value);
				mediaElementRoot.appendChild(nextParam);
			}
			
			mediaSlip.appendChild(document.createElement("span"));
			mediaSlip.appendChild(mediaElementRoot);
			
		}

		mediaSlip.onclick = function () {}
		mediaSlip.style.cursor = 'default';		

	}

	// adjust the dimensions to accomodate the media
	mediaSlip.style.width = width+'px';
	mediaSlip.style.height = height+'px';
	
	// center the popup within the window, counting on the "currentWidth" and "currentHeight" we read in before
	var verticalPosition = window.scrollY ? window.scrollY : document.documentElement.scrollTop;
	
	// get the total height of the content (which includes the area you have to scroll to)...
	contentHeight = (document.documentElement.scrollHeight > document.body.scrollHeight) ? document.documentElement.scrollHeight : document.body.scrollHeight;	
	contentWidth= (document.documentElement.scrollWidth > document.body.scrollWidth) ? document.documentElement.scrollWidth : document.body.scrollWidth;	
	// ...and size the container (for horizontal positioning purposes) 
	mediaSlipContainer.style.height = contentHeight+'px';
	// ...vertically center it...
	mediaSlipTable.style.marginTop = (currentHeight/2)-((height+40)/2)+verticalPosition+'px';
	// and size the modal shader so that it takes up the entire content area
	modalShade.style.height = contentHeight+'px';
	modalShade.style.width = contentWidth+'px';
	
	// finally, show the slip and the modal shade backdrop
	modalShade.style.display = 'block';
	mediaSlipContainer.style.display = 'block';

	// Safari 2.0.4 wasn't showing the object until AFTER I'd hover over the button.
	// It seems like maybe something in the div needs to gain the focus? 
	// So we'll fake that effect by focusing on a hidden input element.
	var safariFocusHolder = document.getElementById('safariFocusHolder');
	if (safariFocusHolder) {
		safariFocusHolder.focus();
		safariFocusHolder.blur();
	}	
}

function hideMediaSlip() {
	var modalShade = document.getElementById('modalShade');
	var mediaSlip = document.getElementById('mediaSlip');
	var mediaSlipContainer = document.getElementById('mediaSlipContainer');
	
	var mediaObj = document.getElementById('mediaObj');
	if(mediaObj) {
		// stop the playing of the video (for Safari only, I believe)
		if (typeof mediaObj.Stop != "undefined") {
			mediaObj.Stop();
		}
		// and remove it as best we can
		mediaObj.style.display = "none";	// need this for IE 7 - it sometimes keeps the object displayed so we need some extra stuff
		mediaObj.parentNode.removeChild(mediaObj);
		mediaObj = null;
	}

	// clear out any old inner elements
	if (mediaSlip && mediaSlip.firstChild) {
		var firstChild = mediaSlip.firstChild;
		mediaSlip.removeChild(firstChild);
		firstChild = null;
	}	
	mediaSlip.innerHTML = '';

	// hide it 
	mediaSlipContainer.style.display = 'none';
	modalShade.style.display = 'none';
}