// JavaScript Document

function displayPhoto(url, w, h) {
	var methods = ['window.inner', 'document.documentElement.client', 'document.body.client'];
	for( var i in methods) {
		if(typeof(eval(methods[i] + 'Width')) == 'number') {
			var wWidth = eval(methods[i] + 'Width');
			var wHeight = eval(methods[i] + 'Height'); 
			break;
		} 		
	}
	
	var wRatio = wWidth / wHeight;
	var pRatio = w / h;
	if(pRatio > wRatio) {
		var pWidth = wWidth * 0.9;
		var pHeight = pWidth / pRatio;
	} else if(pRatio < wRatio) {
		var pHeight = wHeight * 0.9;
		var pWidth = pHeight * pRatio;
	}
	
	var img = document.createElement('img');	// Create new image
	img.setAttribute('id', 'photo');			// Give it id for css
	img.setAttribute('src', url);				// Give it url
	img.setAttribute('width', pWidth);			// Set width
	img.setAttribute('height', pHeight);		// Set height
	
	var pLeft = parseInt((wWidth / 2) - ((pWidth + 10) / 2), 10);
	var pTop = parseInt((wHeight / 2) - ((pHeight + 10) / 2), 10);
	var matte = document.getElementById('mat');
	matte.appendChild(img);						// Append to container
	matte.style.left = pLeft + 'px';
	matte.style.top = pTop + 'px';
	
	document.getElementById('black-out').style.visibility = 'visible';		//Show black out
	document.getElementById('mat').style.visibility = 'visible';			// Show image
}

function hidePhoto() {
	document.getElementById('mat').removeChild( document.getElementById('photo') ); // Remove old pic
	
	document.getElementById('black-out').style.visibility = 'hidden';
	document.getElementById('mat').style.visibility = 'hidden';
}