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

var mediaBackgroundColor = "#FFFFFF";

// note if we're using an old version of IE - we'll need this to handle hiding/reshowing select boxes
var isIE = (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf('Opera') == -1);
var isIE6OrLower = false;
if(isIE) {
	// filter for MSIE 6.x and 5.5
	var ie6xFilter = /^.*MSIE [6]\.[0-9].*$/;
	var ie55Filter = /^.*MSIE [5].*$/;
	if (ie6xFilter.test(navigator.userAgent) || ie55Filter.test(navigator.userAgent)) {
		isIE6OrLower = true;
	}
}


function showMediaSlip(width, height) {
	var modalShade = document.getElementById('modalShade');
	var mediaSlipTable = document.getElementById('mediaSlipTable');
	var mediaSlip = document.getElementById('mediaSlip');
	var mediaSlipContainer = document.getElementById('mediaSlipContainer');
	var mediaSlipScale = document.getElementById('mediaSlipScale');
	var isAbsPosition = 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);
	// 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);


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

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

	// 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 = isAbsPosition ? (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(isAbsPosition) {
		// 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';
	}
	
	// hide select boxes, for old IE versions
	if (isIE6OrLower) {
		setPulldownMenus(false);
	}

	// 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');
	
	// hide it 
	mediaSlipContainer.style.display = 'none';
	modalShade.style.display = 'none';

	// and reshow select boxes, that were hidden for old IE versions
	if (isIE6OrLower) {
		setPulldownMenus(true);
	}
}

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

	if(mediaSlipContainer && mediaSlipContainer.style.display == 'block') {
		var modalShade = document.getElementById('modalShade');
		var mediaSlip = document.getElementById('mediaSlip');
		var mediaSlipTable = document.getElementById('mediaSlipTable');
		var mediaSlipImg = document.getElementById('mediaSlipImg');
		var mediaSlipScale = document.getElementById('mediaSlipScale');
		var isAbsPosition = 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);
		// 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;
		}
		
		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 = isAbsPosition ? (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(isAbsPosition) {
			// 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 mediaSlipScroll() {
	var mediaSlipContainer = document.getElementById('mediaSlipContainer');

	if(mediaSlipContainer && mediaSlipContainer.style.display == 'block') {
		var modalShade = document.getElementById('modalShade');
		var isAbsPosition = modalShade.currentStyle && modalShade.currentStyle['position'] == 'absolute';
		
		if(isAbsPosition) {
			mediaSlipResize();
		}
	}
}

function setPulldownMenus(show) {
	var pulldownMenus = document.getElementsByTagName("select");

	for(var i = 0; i < pulldownMenus.length; i++) {
		if(show) {
			pulldownMenus[i].style.visibility = "";
		} else {
			pulldownMenus[i].style.visibility = "hidden";
		}
	}
}

window.onresize = mediaSlipResize;
window.onscroll = mediaSlipScroll;