function hide(id) {
	document.getElementById(id).style.display='none';
}

function show(id) {
	document.getElementById(id).style.display='block';
}

var depth='6' // global variable setting depth of the drop-shadow for open & close popup functions - change it to adjust size of shadow

// opens popup box with a drop shadow

function popShadow(id){
	// if the popup is already open function won't keep making shadow divs
	
		//document.getElementById(id).style.display='block'; //  make pop up visible
		w=document.getElementById(id).offsetWidth;
		h=document.getElementById(id).offsetHeight;
		l=document.getElementById(id).offsetLeft;
		t=document.getElementById(id).offsetTop;
	
		// creates multiple layered divs with 'shadow' class attributes
		for (var i=0; i<depth; i++){ 
			newDiv = document.createElement("div");		
			newDiv.className="shadow";
			newDiv.setAttribute("id",id+i); // gives each shadow layer a unique id name
			
			// makes each layer slightly larger & offset in steps to create a blur effect - change these values to move angle and width of shadow
			newDiv.style.width=w + (i + (2 + i)) +'px';  
			newDiv.style.height=h + (i-1) + 'px';
			newDiv.style.left=l + (-1+-i) + 'px';
			newDiv.style.top=t + (i-1) + 'px';
			
			document.body.appendChild(newDiv);
	}	
}

function dimBackground(w) {
	if (w=='on') {		
		document.getElementById('body').style.backgroundColor='#000000';
		document.getElementById('wrapper').className="dimmed";
	}
	else {
		document.getElementById('body').style.backgroundColor='#551B10';
		document.getElementById('wrapper').className="foo";
	}
}

function showPopup(w) {
	// change screen 'dimmed' closer div to full document size, then make it 'visible'
	//document.getElementById('closeP').style.height=document.getElementById('wrapper').offsetHeight+"px";
	//show('closeP');
	show(w);
	
	// position div
	var viewportwidth;
 	var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
	 if (typeof window.innerWidth != 'undefined')
	 {
		  viewportwidth = window.innerWidth,
		  viewportheight = window.innerHeight
	 }
	 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
	 else if (typeof document.documentElement != 'undefined'
		 && typeof document.documentElement.clientWidth !=
		 'undefined' && document.documentElement.clientWidth != 0)
	 {
		   viewportwidth = document.documentElement.clientWidth,
		   viewportheight = document.documentElement.clientHeight
	 }
	 
 // older versions of IE 
	 else
	 {
		   viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
		   viewportheight = document.getElementsByTagName('body')[0].clientHeight
	 }

	vpTop = document.body.scrollTop;	
	//vpLeft = document.body.scrollLeft;
	vpLeft = document.getElementById('content').offsetLeft;
	
	imgAdjH = document.getElementById(w).offsetHeight;
	imgAdjW = document.getElementById(w).offsetWidth;
	
	tPos = (Math.round(viewportheight/2)-(imgAdjH/2))+vpTop;
	//tPos = (viewportheight-(imgAdjH+75))+vpTop;
	if (imgAdjW<500) {
		lPos = (vpLeft + (502-imgAdjW));
		//lPos = ((vpLeft+506)-imgAdjW);
		//lPos = (((Math.round(viewportwidth/2)-390)+498)-imgAdjW)
	}
	else {
		lPos = (vpLeft-18);
	}
	

	document.getElementById(w).style.top=tPos+"px";
	document.getElementById(w).style.left=lPos+"px";
	
	document.getElementById(w).style.backgroundColor="#FFF";
	
	if (navigator.appName!='Microsoft Internet Explorer'){
			popShadow(w)
	}
}





function closePopup(w){
// this removes the layered shadow divs
	
	if (navigator.appName!='Microsoft Internet Explorer') {	
	for (var i=0; i<depth; i++) {
		d=document.getElementById(w+i)
   		document.body.removeChild(d);
	}
}
	// hide the popup
	hide(w);
	//document.getElementById(w).style.backgroundColor="none";
}