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

// calculate the current window height //
function pageHeight() {
  return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

// calculate the current window vertical offset //
function topPosition() {
  return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}

// calculate the position starting at the left of the window //
function leftPosition() {
  return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}

function addattr(){
closer =document.getElementById("imgs");
closer.onclick = function h() {document.body.removeChild(closer); m= document.getElementById("showup"); document.body.removeChild(m);}
}

function fader(object){
	var speed = Math.round(10); 
    var timer = 0; 
	var ob = object.style;
	
	for (i=0; i<101; ++i){
	
	setTimeout("fade(\"imgs\","+i+")", (timer*speed));
	++timer;
	}
	
}

function fade(id,opacity){
 var object = document.getElementById(id).style; 
   object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")";
}

function showimage(url){
//display the mask
thumb= document.createElement('div');
thumb.id="showup";
thumb.style.opacity = (0.5); 
thumb.style.MozOpacity = (0.5); 
thumb.style.KhtmlOpacity = (0.5); 
thumb.style.filter = "alpha(opacity=50)"; 
thumb.style.position="absolute";
thumb.style.width=pageWidth()+"px";
thumb.style.height=document.body.offsetHeight + "px";
thumb.style.backgroundColor="#000000";
thumb.style.top="0px";
thumb.style.left="0px";
thumb.style.zIndex="5";
document.body.appendChild(thumb);
// display the div with the image
holder=document.createElement('div');
holder.id="imgs";
holder.style.zIndex="7";
holder.style.position="absolute";
holder.style.opacity = (0); 
holder.style.MozOpacity = (0); 
holder.style.KhtmlOpacity = (0); 
holder.style.filter = "alpha(opacity=0)"; 
pic = new Image();
pic.src= url;
pic.setAttribute("class", "galimg");
holder.appendChild(pic);
document.body.appendChild(holder);
var xwdth = holder.offsetWidth;
var xhght = holder.offsetHeight;
// show div in the center of the user screen
showdeadcenterdiv(xwdth, xhght,"imgs");
//fade in
fader(holder);
//attach closefunction to the image div
addattr(); 
	
}


function showdeadcenterdiv(Xwidth,Yheight,divid) { 

// First, determine how much the visitor has scrolled 
var scrolledX, scrolledY; 
if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrolledY = window.pageYOffset;
    scrolledX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrolledY = document.body.scrollTop;
    scrolledX = document.body.scrollLeft;
  } else  {
    //IE6 standards compliant mode
    scrolledY = document.documentElement.scrollTop;
    scrolledX = document.documentElement.scrollLeft;
  }

// Next, determine the coordinates of the center of browser's window 

var centerX, centerY; 
if( self.innerHeight ) { 
centerX = self.innerWidth; 
centerY = self.innerHeight;
} else if( document.documentelement && document.documentElement.clientHeight ) { 
centerX = document.documentElement.clientWidth; 
centerY = document.documentElement.clientHeight; 
alert("my my hey hey rock'n'roll is here to stay ");
} else if( document.body && document.documentElement.clientHeight ) { 
centerX = document.body.clientWidth; 
centerY = document.documentElement.clientHeight
} else if (document.body){
centerX = document.body.cliendWidth;
centerY = document.body.clientHeight;
}

// Xwidth is the width of the div, Yheight is the height of the 
// div passed as arguments to the function: 
var leftoffset = scrolledX + (centerX - Xwidth) / 2; 
var topoffset = scrolledY + (centerY - Yheight) / 2; 
// the initial width and height of the div can be set in the 
// style sheet with display:none; divid is passed as an argument to // the function 
var o=document.getElementById(divid); 
var r=o.style; 
r.position='absolute'; 
r.top = topoffset + 'px'; 
r.left = leftoffset + 'px'; 

}