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

var currentWindowScroll = 0;

var mediaBackgroundColor = "#EBEEF6";

function showMediaSlip(width, height, url, type) {
	var modalShade = document.getElementById('mediaModalShade');
	var mediaSlipTable = document.getElementById('mediaSlipTable');
	var mediaSlip = document.getElementById('mediaSlip');
	var mediaSlipContainer = document.getElementById('mediaSlipContainer');
	var printStyle = document.getElementById('printStyle');
	var mediaSlipScale = document.getElementById('mediaSlipScale');
	var fixedNotSupported = modalShade.currentStyle && modalShade.currentStyle['position'] == 'absolute';
	var origWidth = width;
	var origHeight = height;
	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);
	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 || testURL.indexOf(".AIF") != -1) {
			type = 'video';
		}
		else if (testURL.indexOf(".FLV") != -1) {
			type = 'flv';
		}
	}

	// Reset the orig width/height
	mediaSlip.origWidth = origWidth;
	mediaSlip.origHeight = origHeight;

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

		mediaSlip.appendChild(mediaElementRoot);
		
		mediaElementRoot.setAttribute('src', url);

		mediaSlip.onclick = function () {hideMediaSlip();}
		mediaSlip.style.cursor = 'pointer';
		
		var scale = Math.floor(width/origWidth*100);
		mediaSlipScale.innerHTML = (scale == 100 ? '' : 'Scale: '+scale+'%');
	} 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 = fixedNotSupported ? (window.scrollY ? window.scrollY : document.documentElement.scrollTop) : 0;
	// ...vertically center it...
	verticalPosition = (currentHeight/2)-((height+40)/2)+verticalPosition;
	if(verticalPosition < 0) {
		verticalPosition = 0;
	}
	mediaSlipTable.style.marginTop = verticalPosition+'px';
	
	// and size the modal shader so that it takes up the entire content area, if it needs to
	if(fixedNotSupported) {
		// get the total height of the content (which includes the area you have to scroll to)...
		var contentHeight = (document.documentElement.scrollHeight > document.body.scrollHeight) ? document.documentElement.scrollHeight : document.body.scrollHeight;	
		var contentWidth= (document.documentElement.scrollWidth > document.body.scrollWidth) ? document.documentElement.scrollWidth : document.body.scrollWidth;
		
		modalShade.style.height = contentHeight+'px';
		modalShade.style.width = contentWidth+'px';
	}
	
	// Setup the printing
	if(printStyle) {
		if(printStyle.hrefSave) {
			printStyle.hrefSave.push(printStyle.href);
		} else {
			printStyle.hrefSave = new Array(printStyle.href);
		}
		printStyle.href = 'css/print_mediaslip.css';
	}
	
	// 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('mediaModalShade');
	var mediaSlip = document.getElementById('mediaSlip');
	var mediaSlipContainer = document.getElementById('mediaSlipContainer');
	var printStyle = document.getElementById('printStyle');
	
	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 = '';

	// fix back the printing
	if(printStyle) {
		printStyle.href = printStyle.hrefSave ? printStyle.hrefSave.pop() : 'css/print.css';
	}

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

function mediaSlipResize() {
	var mediaSlipContainer = document.getElementById('mediaSlipContainer');

	if(mediaSlipContainer && mediaSlipContainer.style.display == 'block') {
		var modalShade = document.getElementById('mediaModalShade');
		var mediaSlip = document.getElementById('mediaSlip');
		var mediaSlipTable = document.getElementById('mediaSlipTable');
		var mediaSlipImg = document.getElementById('mediaSlipImg');
		var mediaSlipScale = document.getElementById('mediaSlipScale');
		var fixedNotSupported = modalShade.currentStyle && modalShade.currentStyle['position'] == 'absolute';
		var width = mediaSlip.origWidth;
		var height = mediaSlip.origHeight;
		
		// 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);
		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;
		}
		
		if(mediaSlipImg) {
			mediaSlipImg.style.width = width + 'px';
			mediaSlipImg.style.height = height + 'px';
			var scale = Math.floor(width/mediaSlip.origWidth*100);
			mediaSlipScale.innerHTML = (scale == 100 ? '' : 'Scale: '+scale+'%');
		} else {
			if(width < mediaSlip.origWidth) {
				width = mediaSlip.origWidth;
			}
			if(height < mediaSlip.origHeight) {
				height = mediaSlip.origHeight;
			}
		}
		
		// 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 = fixedNotSupported ? (window.scrollY ? window.scrollY : document.documentElement.scrollTop) : 0;
		// ...vertically center it...
		verticalPosition = (currentHeight/2)-((height+40)/2)+verticalPosition;
		if(verticalPosition < 0) {
			verticalPosition = 0;
		}
		mediaSlipTable.style.marginTop = verticalPosition+'px';

		// and size the modal shader so that it takes up the entire content area, if it needs to
		if(fixedNotSupported) {
			// get the total height of the content (which includes the area you have to scroll to)...
			var contentHeight = (document.documentElement.scrollHeight > document.body.scrollHeight) ? document.documentElement.scrollHeight : document.body.scrollHeight;	
			var contentWidth= (document.documentElement.scrollWidth > document.body.scrollWidth) ? document.documentElement.scrollWidth : document.body.scrollWidth;
			
			modalShade.style.height = contentHeight+'px';
			modalShade.style.width = contentWidth+'px';
		}
	}
}

function scrollSlips(event) {
	// media slip
	var mediaSlipContainer = document.getElementById('mediaSlipContainer');
	if(mediaSlipContainer && mediaSlipContainer.style.display == 'block') {
		var modalShade = document.getElementById('mediaModalShade');
		var fixedNotSupported = modalShade.currentStyle && modalShade.currentStyle['position'] == 'absolute';
		
		if(fixedNotSupported) {
			mediaSlipResize();
		}
	}

	// detail slip
	var detailSlip = document.getElementById('detailSlipContainer');
	if (detailSlip && detailSlip.style.display == 'block') {
		var modalShade = document.getElementById('detailModalShade');
		var fixedNotSupported = modalShade.currentStyle && modalShade.currentStyle['position'] == 'absolute';
		
		if (fixedNotSupported) {
			/*var verticalPosition = fixedNotSupported ? (window.scrollY ? window.scrollY : document.documentElement.scrollTop) : 0;
			var currentHeight = window.innerHeight ? window.innerHeight : (document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight);

			var theSlipTable = document.getElementById("detailSlipTable");
			// ...vertically center it the slipTable
			verticalPosition = (currentHeight/2)-((theSlipTable.offsetHeight)/2)+verticalPosition;
			if(verticalPosition < 0) {
				verticalPosition = 0;
			}
			theSlipTable.style.marginTop = verticalPosition+'px';*/
			
			slipResize('detail');
		}
	}
}

/***************** Detail slip functions *************/
function showSlip(handle) {
	var theSlip = document.getElementById(handle+'SlipContainer');
	if (theSlip) {
		var printStyle = document.getElementById('printStyle');
		// get the current window size
		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);
		
		var modalShade = document.getElementById(handle+'ModalShade');
		var fixedNotSupported = modalShade && modalShade.currentStyle && modalShade.currentStyle['position'] == 'absolute';
		var theSlipTable = document.getElementById(handle+"SlipTable");
		
		if(modalShade && window.ie && !modalShade.hasIframe) {
			modalShade.hasIframe = true;
			modalShade.innerHTML = '<iframe src="blank.html"></iframe>';
		}
		
		// display it as a block, but keep it hidden, so that it'll calculate it's own height correctly
		theSlip.style.visibility = 'hidden';
		theSlip.style.display = 'block';

		// center the popup within the window, counting on the "currentWidth" and "currentHeight" we read in before
		var verticalPosition;
		
		if(theSlipTable.offsetHeight > currentHeight || fixedNotSupported) {
			theSlip.className = 'slipContainer absolute';
			var scrollY = window.scrollY ? window.scrollY : document.documentElement.scrollTop;

			verticalPosition = (currentHeight/2)-((theSlipTable.offsetHeight)/2)+scrollY;
			if(verticalPosition < scrollY) {
				verticalPosition = scrollY;
			}
		} else {
			verticalPosition = (currentHeight/2)-((theSlipTable.offsetHeight)/2);
			if(verticalPosition < 0) {
				verticalPosition = 0;
			}
		}
		
		theSlipTable.style.marginTop = verticalPosition+'px';

		// and size the modal shader so that it takes up the entire content area, if it needs to
		if(fixedNotSupported) {
			// get the total height of the content (which includes the area you have to scroll to)...
			var contentHeight = (document.documentElement.scrollHeight > document.body.scrollHeight) ? document.documentElement.scrollHeight : document.body.scrollHeight;	
			var contentWidth= (document.documentElement.scrollWidth > document.body.scrollWidth) ? document.documentElement.scrollWidth : document.body.scrollWidth;
			
			if (modalShade) {
				modalShade.style.height = contentHeight+'px';
				modalShade.style.width = contentWidth+'px';
			}
		}

		// Setup the printing
		if(printStyle) {
			if(printStyle.hrefSave) {
				printStyle.hrefSave.push(printStyle.href);
			} else {
				printStyle.hrefSave = new Array(printStyle.href);
			}
			printStyle.href = 'css/print_detailslip.css';
		}

		// finally, show the slip and the modal shade backdrop
		if (modalShade) {
			modalShade.style.display = 'block';
		}		
		theSlip.style.visibility = 'visible';
	}
}

function hideSlip(handle) {
	var fixedNotSupported;
	
	// hide the modal shade
	var modalShade = document.getElementById(handle+'ModalShade');
	if (modalShade) {
		modalShade.style.display = "none";
		fixedNotSupported = modalShade && modalShade.currentStyle && modalShade.currentStyle['position'] == 'absolute';
	}
	// hide the slip
	var theSlip = document.getElementById(handle+'SlipContainer');
	if (theSlip) {
		theSlip.style.display = "none";
		
		if(modalShade && !fixedNotSupported) {
			theSlip.className = 'slipContainer fixed';
		}
		
		if(theSlip.getAttribute('keepShown') == 'yes') {
			theSlip.removeAttribute('keepShown');
		}
	}

	// reset it's vertical spacing...
	var slipTable = document.getElementById(handle+'SlipTable');
	if (slipTable) {
		slipTable.style.marginTop = "0px";
	}
	// ..and clear out it's contents and title
	var slipContent = document.getElementById(handle+'SlipContent');
	if (slipContent) {
		slipContent.innerHTML = "";
	}
	
	// fix back the printing
	var printStyle = document.getElementById('printStyle');
	if(printStyle) {
		printStyle.href = printStyle.hrefSave ? printStyle.hrefSave.pop() : 'css/print.css';
	}
}

function slipResize(handle) {
	// We don't actually resize the slip itself.  But we will want to resize its modal shader.
	var modalShade = document.getElementById(handle+'ModalShade');
	var fixedNotSupported = modalShade && modalShade.currentStyle && modalShade.currentStyle['position'] == 'absolute';
	if (modalShade && modalShade.style.display == 'block') {
		if (fixedNotSupported) {
			// get the total height of the content (which includes the area you have to scroll to)...
			var contentHeight = (document.documentElement.scrollHeight > document.body.scrollHeight) ? document.documentElement.scrollHeight : document.body.scrollHeight;	
			var contentWidth= (document.documentElement.scrollWidth > document.body.scrollWidth) ? document.documentElement.scrollWidth : document.body.scrollWidth;
		
			modalShade.style.height = contentHeight+'px';
			modalShade.style.width = contentWidth+'px';		
		}
	}

	// also, we need to see if the slip is taller than the current window height, and cancel the fixed positioning if so
	var slipTable = document.getElementById(handle+'SlipTable');
	var slipContainer = document.getElementById(handle+'SlipContainer');
	if (slipTable && slipContainer && slipContainer.style.display == "block") {
		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);

		if (slipTable.offsetHeight > currentHeight) {
			if(slipContainer.className != 'slipContainer absolute') {
				slipContainer.className = 'slipContainer absolute';
			}
		} else {
			if(!fixedNotSupported && slipContainer.className != 'slipContainer fixed') {
				slipContainer.className = 'slipContainer fixed';
			}
			
			// center the popup within the window, counting on the "currentWidth" and "currentHeight" we read in before
			var verticalPosition = fixedNotSupported ? (window.scrollY ? window.scrollY : document.documentElement.scrollTop) : 0;
			
			// ...vertically center it the slipTable
			verticalPosition = (currentHeight/2)-((slipTable.offsetHeight)/2)+verticalPosition;
			if(verticalPosition < 0) {
				verticalPosition = 0;
			}
			slipTable.style.marginTop = verticalPosition+'px';
			
			// and size the modal shader so that it takes up the entire content area, if it needs to
			if(fixedNotSupported) {
				// get the total height of the content (which includes the area you have to scroll to)...
				var contentHeight = (document.documentElement.scrollHeight > document.body.scrollHeight) ? document.documentElement.scrollHeight : document.body.scrollHeight;	
				var contentWidth= (document.documentElement.scrollWidth > document.body.scrollWidth) ? document.documentElement.scrollWidth : document.body.scrollWidth;
				
				if (modalShade) {
					modalShade.style.height = contentHeight+'px';
					modalShade.style.width = contentWidth+'px';
				}
			}
		}
	}
}

/************** General ***************/
function resizeSlips() {
	mediaSlipResize();
	slipResize('detail');
}

/************** Events ****************/
if(window.addEventListener) {
	window.addEventListener("keypress", keyTrack, false);
	window.addEventListener('scroll', scrollSlips, false);
	window.addEventListener('resize', resizeSlips, false);
} else if(document.attachEvent) {
	document.attachEvent("onkeypress", keyTrack);
	window.attachEvent('onscroll', scrollSlips);
	window.attachEvent('onresize', resizeSlips);
}

function keyTrack(e) {
	if(getKeyCode(e) == 27) {
		var el = document.getElementById('mediaSlipContainer');
		var el2 = document.getElementById('detailSlipContainer');

		if(el && el.style.display == 'block') {
			hideMediaSlip();
		} else if(el2 && el2.style.display == 'block') {
			hideSlip('detail');
		}
	}
}

function getKeyCode(e) {
	if(window.event) {
		return window.event.keyCode;
	} else if(e) {
		return e.keyCode ? e.keyCode : e.which;
	} else {
		return null;
	}
}

function newWindowKey(e) {
	if(e) {
		return e.ctrlKey || e.metaKey;
	} else if(window.event) {
		return window.event.ctrlKey;
	} else {
		return null;
	}
}