window.onresize = doResize;


function enlarge(imagePath, caption){
	
	grayOut(true);
	var loadNode = document.createElement('p');
	loadNode.style.position = 'absolute';
	loadNode.style.fontSize=30;
	loadNode.innerHTML='LOADING';
	loadNode.style.top= pageHeight()/2 - 25;
	loadNode.style.left= pageWidth()/2 - 25;
	loadNode.style.zIndex=51;
	loadNode.id='Loading';
	
	
	document.getElementsByTagName('body')[0].appendChild(loadNode);
	
	var image = new Image();
	image.onload=function(){
		document.getElementsByTagName('body')[0].removeChild(document.getElementById('Loading'));
		
		var spanNode = document.createElement('span');
		spanNode.id = 'Span';
		var windowHeight = pageHeight();
		var windowWidth = pageWidth();
		spanNode.style.position='absolute';
		spanNode.style.top=(windowHeight - parseFloat(image.height))/2;
		spanNode.style.left=(windowWidth - parseFloat(image.width))/2;
		spanNode.style.zIndex=51;
		
		var linkNode = document.createElement('a');
		linkNode.className="noDecs";
		linkNode.href="javascript:close();";
		linkNode.style.outline="none";
		linkNode.style.margin=0;
		linkNode.style.padding = 0;
		linkNode.style.zIndex=70;
		linkNode.id = 'CloseIcon';
		
		var closeNode = document.createElement('img');
		closeNode.src='../Scripts/closeIcon.png';
		closeNode.style.position = 'absolute';
		closeNode.style.top=-15;
		closeNode.style.left=image.width-15;
		closeNode.style.zIndex=70;
		closeNode.style.display='block';
		closeNode.id = 'ClosePic';
		closeNode.border = 0;
		
		linkNode.appendChild(closeNode);
		
		
		var tableNode = document.createElement('table');
		tableNode.border='0';
		tableNode.cellPadding='0';
		tableNode.cellSpacing='0';
		tableNode.style.display='block';
		tableNode.style.position='absolute';
		tableNode.style.top=0;
		tableNode.style.left=0;
		tableNode.style.margin=0;
		tableNode.style.padding = 0;
		tableNode.style.zIndex=60;
		var rowNode1 = document.createElement('tr');
		var imageNode = document.createElement('img');
		imageNode.src=imagePath;
		imageNode.border = 0;
		imageNode.id = 'Image';
		rowNode1.appendChild(imageNode);
		var rowNode2 = document.createElement('tr');
		var cellNode = document.createElement('td');
		cellNode.align = 'center';
		cellNode.style.height = '30px';
		cellNode.valign='middle';
		cellNode.innerHTML = caption;
		rowNode2.appendChild(cellNode);
		tableNode.appendChild(rowNode1);
		tableNode.appendChild(rowNode2);
//		tableNode.innerHTML='<tr><img src = "' + imagePath + '" border="0" id="Image"></img></tr><tr style="padding:10px"><td align="center" style="height:30px" valign="middle">'+caption+'</td></tr>';
		tableNode.id='PictureCaptionTable';
		
		var frameNode = document.createElement('div');
		frameNode.style.margin=0;
		frameNode.style.zIndex=55;
		frameNode.style.display='block';
		frameNode.style.position='relative';
		frameNode.style.top=-5;
		frameNode.style.left=-5;
		frameNode.style.width=image.width + 10;
		frameNode.style.height = image.height + 10;
		frameNode.style.backgroundColor='#EEEEEE';
		frameNode.style.opacity=1;                      
		frameNode.style.MozOpacity=1;
		frameNode.id = 'PictureFrame';
		
		spanNode.appendChild(frameNode);
		spanNode.appendChild(linkNode);
		spanNode.appendChild(tableNode);
		
		document.getElementsByTagName('body')[0].appendChild(spanNode);
		
		spanNode.onmouseover=function(){
			document.body.style.cursor="move";
			return false;
		}
		spanNode.onmouseout=function(){
			document.body.style.cursor='';
			return false;
		}
		spanNode.onmousedown=startDrag;
	 }
	 
	 image.src = imagePath;
}


function startDrag(ev){
	if(!ev){ev = window.event;}
	var target = ev.target;
	if(!target){
		target = ev.srcElement;
	}
	if(target == document.getElementById('ClosePic')){
		if(ev.stopPropagation)
			ev.stopPropagation();
		else ev.cancelBubble=true;

	}
	else{
	document.getElementById('Span').style.opacity=.75;
	document.getElementById('Span').style.MozOpacity=.75;
	startSpanX = parseFloat(document.getElementById('Span').style.left);
	startSpanY = parseFloat(document.getElementById('Span').style.top);
	startMouseX = ev.clientX;
	startMouseY = ev.clientY;
	document.onmousemove=drag;
	document.onmouseup=stopDrag;
	document.getElementById('Span').onmousedown=null;
	}
	return false;
}

function drag(ev){
	if(!ev){ev = window.event;}
	var left = Math.min(Math.max(5, startSpanX+ev.clientX-startMouseX), pageWidth() - parseFloat(document.getElementById('PictureFrame').style.width) - 5);
	var top = Math.min(Math.max(15, startSpanY+ev.clientY-startMouseY), pageHeight() - parseFloat(document.getElementById('PictureFrame').style.height) - 20);
	document.getElementById('Span').style.left=left;
	document.getElementById('Span').style.top=top;
	return false;
}

function stopDrag(ev){
	if(!ev){ev = window.event;}
	document.getElementById('Span').style.opacity=1;
	document.getElementById('Span').style.MozOpacity=1;
	document.onmousemove=null;
	document.getElementById('Span').onmousedown = startDrag;
	document.onmouseup = null;
	return false;
}


function close(){
	grayOut(false);
	document.getElementById('Span').onmouseover = null;
	document.getElementById('Span').onmouseout = null;
	document.getElementById('Span').onmousedown = null;
	document.body.style.cursor = '';
	document.getElementsByTagName('body')[0].removeChild(document.getElementById('Span'));

}

function pageWidth() {
return window.innerWidth != 								 null? window.innerWidth : 
document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth :
										   document.body != null ? document.body.clientWidth : null;
}

function pageHeight() {
return  window.innerHeight != 								  null? window.innerHeight :
document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight :
											 document.body != null? document.body.clientHeight : null;
}
											 
function grayOut(vis) {
  // Pass true to gray out screen, false to ungray
  var zindex = 50;
  var opacity = 50;
  var opaque = (opacity / 100);
  var bgcolor = '#000000';
  var dark=document.getElementById('darkenScreenObject');
  if (!dark) {
	var tbody = document.getElementsByTagName("body")[0];
	var tnode = document.createElement('div');           // Create the layer.
		tnode.style.position='absolute';                 // Position absolute
		tnode.style.top='0px';                           // In the top
		tnode.style.left='0px';                          // Left corner of the viewport
		tnode.style.overflow='hidden';                   // Try to avoid making scroll bars            
		tnode.style.display='none';                      // Start out Hidden
		tnode.id='darkenScreenObject';                   // Name it so we can find it later
	tbody.appendChild(tnode);                            // Add it to the web page
	dark=document.getElementById('darkenScreenObject');  // Get the object.
  }
  if (vis) {
	//set the shader to cover the entire page and make it visible.
	dark.style.opacity=opaque;                      
	dark.style.MozOpacity=opaque;                   
	dark.style.filter='alpha(opacity='+opacity+')'; 
	dark.style.zIndex=zindex;        
	dark.style.backgroundColor=bgcolor;  
	dark.style.width= pageWidth();
	dark.style.height= pageHeight();
	dark.style.display='block';                          
  }
  else {
	 document.getElementsByTagName('body')[0].removeChild(document.getElementById('darkenScreenObject'));
  }
}

function doResize(){
	var dark = document.getElementById('darkenScreenObject');
	if(dark){
		dark.style.height = pageHeight();
		dark.style.width = pageWidth();
	}
}