window.onload = addAnimations;

function addAnimations() {
	var photos = getPhotos();
	for(var i = 0; i < photos.length; i++) {
		if(photos[i].childNodes[3]) {
			photos[i].caption = photos[i].childNodes[3];
		} else if(photos[i].childNodes[2]) {
			photos[i].caption = photos[i].childNodes[2];
		}
		photos[i].caption.height = photos[i].caption.offsetHeight;
		photos[i].caption.style.height = '0px';
		photos[i].caption.style.position = 'absolute';
		photos[i].onmouseover = function() {
		        expandCaption(this.caption);
		}
		photos[i].onmouseout = function() {
			retractCaption(this.caption);
		}
	}
	
	function expandCaption(caption) {
		clearInterval(caption.RetractID);
		caption.style.position = 'relative';
		caption.style.visibility = 'visible';
		
		function startExpand() {
			if(caption.height - caption.offsetHeight < 10 && caption.height - caption.offsetHeight > 0)
				caption.style.height = caption.offsetHeight + 1 + 'px';
			else if(caption.offsetHeight < caption.height)
				caption.style.height = caption.offsetHeight + 10 + 'px';
			else
				clearInterval(caption.ExpandID);
		}
		caption.ExpandID = setInterval(startExpand,1);		
	}
	function retractCaption(caption) {
		clearInterval(caption.ExpandID);
		function startRetract() {
			if(caption.offsetHeight > 10)
				caption.style.height = caption.offsetHeight - 10 + 'px';
			else if(caption.offsetHeight > 10)
				caption.style.height = caption.offsetHeight - 1 + 'px';
			else {
				clearInterval(caption.RetractID);
				caption.style.position = 'absolute';
				caption.style.visibility = 'hidden';
			}
		}
		caption.RetractID = setInterval(startRetract,20);					
	}
	function getPhotos() {
		var divs = document.getElementsByTagName('div');
		var i = 0;
		var photos = new Array;	
		for (var x = 0; x < divs.length; x++) {										
			if(divs[x].className == 'photo') {
				photos[i] = divs[x];
				i++;
			}
		}
		return photos;
	}	
}

function overlayPhotograph(url) {

	var ObjBody = document.getElementsByTagName('body')[0];
	if (window.pageYOffset) {  
		scrollTop = window.pageYOffset 
	} else if(document.documentElement && document.documentElement.scrollTop) { 
		scrollTop = document.documentElement.scrollTop; 
	} else if(document.body) { 
		scrollTop = document.body.scrollTop; 
	} 
	
	var BlackOverlay = document.createElement('div');
	ObjBody.appendChild(BlackOverlay);
	BlackOverlay.style.position = 'absolute';
	BlackOverlay.style.background = '#000';
	BlackOverlay.style.opacity = '.7';
	BlackOverlay.style.filter = 'alpha(opacity:70)';
	BlackOverlay.style.height = '100%';
	BlackOverlay.style.width = '100%';	
	BlackOverlay.style.top = scrollTop + 'px';
	
	var PhotoContainer = document.createElement('div');
	ObjBody.appendChild(PhotoContainer);
	PhotoContainer.style.position = 'absolute';
	PhotoContainer.style.height = '100%';
	PhotoContainer.style.width = '100%';	
	PhotoContainer.style.top = scrollTop + 'px';
		
	var Photo = document.createElement('div');
    PhotoContainer.appendChild(Photo);
	Photo.style.width = '640px';
	Photo.style.height = '480px';
	Photo.style.position = 'absolute';
	Photo.style.top = '50%';
	Photo.style.left = '50%';
	Photo.style.marginLeft = '-320px';
	Photo.style.marginTop = '-240px';
	
	Photo.innerHTML = '<img src="images/' + url + '.jpg" />';
	
	var Close = document.createElement('div');
	Photo.appendChild(Close);
	Close.style.height = '15px';
	Close.style.width = '14px';
	Close.style.position = 'absolute';
	Close.style.top = '2px';
	Close.style.right = '2px';
	Close.style.cursor = 'pointer';	
	Close.style.background = 'url(graphics/x.gif) no-repeat';	
	
	PhotoContainer.onclick = window.onscroll = removePhoto;
	
	function removePhoto() {
		if (PhotoContainer.parentNode) {
			PhotoContainer.parentNode.removeChild(PhotoContainer);
			BlackOverlay.parentNode.removeChild(BlackOverlay);
		}
	}

	function stopProp(ev) { 
		var ev = ev || window.event; 
		if(ev.stopPropogation) { ev.stopPropagation(); }
		ev.cancelBubble = true; 
	}
}