setTimeout(activate, 500);


var bigdiv = null;
var shownsrc = null;

function activate() {
    var imgs = document.getElementsByTagName("IMG");
    for (var i = 0; i < imgs.length; i++) {
        var img = imgs[i];
        if (img.className && img.className.indexOf("screenshot") >= 0) {
            new toggler(img);            
        }
    }
}



function delayedHideBig() {
    setTimeout(hideBig, 20);
}

function hideBig() {
    if (bigdiv) {
        document.body.removeChild(bigdiv);
        bigdiv = null;
    }
}



function showBig(timg) {
    shownsrc = timg.src;
    var captxt = timg.getAttribute("caption");
   
    var bigsrc = shownsrc.replace("imgsml/", "img/");  
    hideBig();
   
    bigdiv = document.createElement("div");
   
    var img = document.createElement("img");
    img.src = bigsrc;
    bigdiv.appendChild(img);
    
    var capdiv = document.createElement("div");
    capdiv.style.padding = "8px";
    capdiv.innerHTML = captxt
    capdiv.style.width = "450px";
    capdiv.style.textAlign = "left";
    bigdiv.appendChild(capdiv);
    
    
    bigdiv.style.position = "absolute"; // "fixed";
    bigdiv.style.textAlign = "center";
    
    var imx = getPosX(timg);
    var imy = getPosY(timg);
    var sy = getTopScrollPos();
    var loff = imx - 300;
    if (loff < 20) {
        loff = 20;
    }
    
    var toff = imy - 400;
    if (toff < sy) {
        toff = sy;
    }
    bigdiv.style.top = toff + "px"; 
    bigdiv.style.left = loff + "px";
    
    bigdiv.style.backgroundColor =  "#a0a0a0";
    bigdiv.style.border = "1px solid #808080";
    bigdiv.style.padding = "16px";
    bigdiv.onclick = delayedHideBig;
    bigdiv.style.cursor = "pointer";
  
    document.body.appendChild(bigdiv);
}



function toggler(img) {
    var myimg = img;   
    myimg.style.cursor = "pointer";
    
    img.onclick = function() {
        if (bigdiv && shownsrc == myimg.src) {
            hideBig();
            
        } else {
           showBig(myimg);
        }
    }
}





function getPosX(obj) {    
	  var curleft = 0;
	  if (obj.offsetParent) {
		while (obj.offsetParent) {
		  curleft += obj.offsetLeft; 
		  obj = obj.offsetParent;
		}
	  } else if (obj.x) {
		curleft += obj.x;
	  }
	  return Number(curleft);
	}
	
	
function getPosY(obj) {
	  var curtop = 0;
	  if (obj.offsetParent) {
		while (obj.offsetParent) {
		  curtop += obj.offsetTop;
		  obj = obj.offsetParent;
		}
	  } else if (obj.y) {
		curtop += obj.y;
	  }
	  return Number(curtop);
	}
	
	
function getLeftScrollPos() {	
	  var lpos = parent.document.documentElement.scrollLeft ? parent.document.documentElement.scrollLeft : parent.document.body.scrollLeft;
	  return lpos;
	}


function getTopScrollPos() {
	  var tpos = parent.document.documentElement.scrollTop ? parent.document.documentElement.scrollTop : parent.document.body.scrollTop;
	  return tpos;
	}

 
 function windowWidth() {
	var myWidth = 0;
	if (typeof( parent.window.innerWidth ) == 'number') {
		myWidth = parent.window.innerWidth; 
	} else if( parent.document.documentElement && parent.document.documentElement.clientWidth) {
		myWidth = parent.document.documentElement.clientWidth; 
	} else if( parent.document.body && parent.document.body.clientWidth) {
		myWidth = parent.document.body.clientWidth; 
	}
     return myWidth;
  }
 

function windowHeight() {
	var myHeight = 0;
	if (typeof( parent.window.innerWidth ) == 'number') {
		myHeight = parent.window.innerHeight;
	} else if( parent.document.documentElement && parent.document.documentElement.clientHeight) {
		myHeight = parent.document.documentElement.clientHeight;
	} else if( parent.document.body && parent.document.body.clientHeight) {
		myHeight = parent.document.body.clientHeight;
	}
     return myHeight;
  }