/*
inspiration from script at http://www.tastypopsicle.com/dropshadow/ for adding divs to elements
divs are given names for shadow technique at: http://theshapeofdays.com/2005/11/29/my-contribution-to-the-css-shadow-kerfuffle.html
*/

var onloadBeforeMyDropShadow = window.onLoad;
window.onload = function() {
	if (onloadBeforeMyDropShadow) onloadBeforeMyDropShadow();
	captionImages();
	wrapImage('shadow');
	wrapImage('shadowright');
	removeimageclass();
}


function captionImages() {
	var images = document.getElementsByTagName('img');
	for (i = 0; i < images.length; i++) {
			var image = images[i];
			var imageCopy = image.cloneNode(true);
			var imageTitle = image.title;	
			// create a wrapper div to hold the image and its caption
			var wrapper = document.createElement('div');
			wrapper.className = 'imageContainer_' + image.className;
			// put the copy of the image inside the wrapper div
			wrapper.appendChild(imageCopy);
			if (images[i].title.length > 0) {
				// create the caption
				var caption = document.createElement('p');
				caption.className = 'caption';
				var captionText = document.createTextNode(imageTitle);
				caption.appendChild(captionText);
				wrapper.appendChild(caption);
			}
			// and replace the original image with the wrapper div
			image.parentNode.replaceChild(wrapper, image);
	}
}

function wrapImage(imageClass) { 
	var images = document.getElementsByTagName('img');
	for (i = 0; i < images.length; i++) {
		if (images[i].className == imageClass) {
			var image = images[i];
			var imageCopy = image.cloneNode(true);
			// create the wrapper div for the shadow and all the divs to hold the corner images
			var div_wrapper = document.createElement('div');
			div_wrapper.className = imageClass;
			var div_tl = document.createElement('div');
			div_tl.className = 'topleft';
			var div_tr = document.createElement('div');
			div_tr.className = 'topright';
			var div_bl = document.createElement('div');
			div_bl.className = 'bottomleft';
			var div_br = document.createElement('div');
			div_br.className = 'bottomright';
			// put the image and all the corner divs inside the wrapper div
			div_wrapper.appendChild(imageCopy);
			div_wrapper.appendChild(div_tl);
			div_wrapper.appendChild(div_tr);
			div_wrapper.appendChild(div_bl);
			div_wrapper.appendChild(div_br);
			// and we replace the image with its copy inside the three Russian Doll divs
			image.parentNode.replaceChild(div_wrapper, image);
		}
	}  
}

function removeimageclass() { 
	var images = document.getElementsByTagName('img');
	for (i = 0; i < images.length; i++) {
		images[i].className = ""; // we don't want to double-style images
	}
}