//adjust these to your liking

//The location of the shadow images
var shadowImagePath = './';
//How 'see through' do you want the images? 1.0=dark, 0.0=completely see through
var shadowImageOpacity = 0.50;
//Horizontal image offset. Negative values move it left, positive move it right
var shadowHorzOffset = 0;
//Vertical image offset. Negative values move it left, positive move it right
var shadowVerticalOffset = -1;
//Horizontal size of the shadow
var shadowHorzSize = 10;
//Vertical size of the shadow
var shadowVertSize = 9;


function getShadowImages()
{
	var imgs = document.getElementsByTagName("img");
	var shadowImgs = new Array();
	var name;

	for(i=0; i<imgs.length; i++)
	{
		name = getClassname(imgs[i]);
		if(name == this.shadowType)
			shadowImgs.push(imgs[i]);
	}

	return shadowImgs;
}

function createShadowStructure(image)
{
	var parent = image.parentNode;
	if(isInnerContainer(parent))
		return;

	var inner = document.createElement('div');
	setClassname(inner, this.shadowType + "-inner-container");
	inner.appendChild(document.createElement('div'));
	inner.appendChild(document.createElement('div'));
	inner.appendChild(document.createElement('div'));
	inner.appendChild(document.createElement('div'));
	inner.appendChild(document.createElement('div'));
	inner.appendChild(document.createElement('div'));
	inner.appendChild(document.createElement('div'));
	inner.appendChild(document.createElement('div'));
	inner.appendChild(document.createElement('div'));

	var outer = document.createElement('span');
	setClassname(outer, this.shadowType + "-outer-container");
	parent.insertBefore(outer,image);
	inner.appendChild(image);
	outer.appendChild(inner);
}

function removeShadowStructure(image)
{
	var inner = image.parentNode;
	if(!isInnerContainer(inner))
		return;
	var outer = inner.parentNode;
	var parent = outer.parentNode;
	
	parent.insertBefore(image, outer);
	parent.removeChild(outer);
	
	//this info should be stored before the image is changed
	image.style.position = 'relative';
	image.style.top = 0 + 'px';
	image.style.left = 0 + 'px';
}

function setupShadow(image)
{
	var inner = image.parentNode;
	if(!isInnerContainer(inner))
		return;
	var outer = inner.parentNode;
	var children = inner.getElementsByTagName('div'); var tl = children[0];
	var tr = children[1];
	var bl = children[2];
	var br = children[3];
	var mt = children[4];
	var mb = children[5];
	var ml = children[6];
	var mr = children[7];
	var center = children[8];
	var shadowWidth = image.width + this.xSize;
	var shadowHeight = image.height + this.ySize;
	
/*
	this.setupShadowDiv(container,'container',0,0,shadowWidth,shadowHeight);
	container.style.position = 'relative';

	if(browserType == 'ie')		
		container.runtimeStyle.filter = "alpha(opacity=" + 100 + ")";
	else
		container.style.opacity = 1;
	*/
	//setClassname(inner, 'shadow-inner-container');
	inner.style.top = 0;
	inner.style.left = 0;
	inner.style.width = shadowWidth + 'px';
	inner.style.height = shadowHeight + 'px';
	inner.style.position = 'relative';
	//inner.style.border  ='1px solid red';

	if(browserType != 'ie')
		outer.style.display = '-moz-inline-block';
	outer.style.display = 'inline-block';
	outer.style.position = 'relative';
	//outer.style.border = '1px solid green';

	image.style.position = 'absolute';
	//image.style.position = 'absolute';
	image.style.top = this.ySize / 2 + this.yOffset + 'px';
	image.style.left = this.xSize / 2 + this.xOffset + 'px';

/*
	if(browserType == 'ie')
		image.runtimeStyle.filter = "alpha(opacity=" + 100 + ")";
	else
		image.style.opacity = 1.0;
	*/

	this.setupShadowDiv(center,'center',this.borderSize,this.borderSize,
			shadowWidth - 2 * this.borderSize, shadowHeight - 2 * this.borderSize)
	center.style.background = 'url('+this.path+this.shadowType+'-center.png)';
	
	this.setupShadowDiv(tl,'tl',0,0,this.borderSize,this.borderSize);
	tl.style.background = 'url('+this.path+this.shadowType+'-corner.png) left top';
	this.setupShadowDiv(tr,'tr',shadowWidth-this.borderSize,0,this.borderSize,this.borderSize);
	tr.style.background = 'url('+this.path+this.shadowType+'-corner.png) right top';
	this.setupShadowDiv(bl,'bl',0,shadowHeight-this.borderSize,this.borderSize,this.borderSize);
	bl.style.background = 'url('+this.path+this.shadowType+'-corner.png) left bottom';
	this.setupShadowDiv(br,'br',shadowWidth-this.borderSize,shadowHeight-this.borderSize,
			this.borderSize,this.borderSize);
	br.style.background = 'url('+this.path+this.shadowType+'-corner.png) right bottom';
			
	this.setupShadowDiv(mt,'mt',this.borderSize,0,shadowWidth - 2 * this.borderSize,this.borderSize);
	mt.style.background = 'url('+this.path+this.shadowType+'-horizontal.png) top';
	this.setupShadowDiv(mb,'mb',this.borderSize,shadowHeight - this.borderSize,
			shadowWidth - 2 * this.borderSize,this.borderSize);
	mb.style.background = 'url('+this.path+this.shadowType+'-horizontal.png) bottom';
	this.setupShadowDiv(ml,'ml',0,this.borderSize,this.borderSize,
			shadowHeight - 2 * this.borderSize);
	ml.style.background = 'url('+this.path+this.shadowType+'-vertical.png) left';
	this.setupShadowDiv(mr,'mr',shadowWidth-this.borderSize,this.borderSize,this.borderSize,
			shadowHeight - 2 * this.borderSize);
	mr.style.background = 'url('+this.path+this.shadowType+'-vertical.png) right';
	
}


function setupShadowDiv(div, name, left, top, width, height, pos)
{
	setClassname(div, this.shadowType + '-' + name);

	div.style.position = 'absolute';
	div.style.top = top + 'px';
	div.style.left = left + 'px';
	div.style.width = width + 'px';
	div.style.height = height + 'px';
	div.style.opacity = this.opacity;
	if(browserType == 'ie')
		div.style.filter = "filter: alpha(opacity="+this.opacity * 100+")"

	return div;
}


function uninstallShadows()
{
	getBrowserType();
	//var shadowImgs = getShadowImages();
	for(i=0; i<this.images.length; i++)
	{
		removeShadowStructure(this.images[i]);
	}
}

function installShadows()
{
	getBrowserType();
	for(i=0; i<this.images.length; i++)
	{
		createShadowStructure(this.images[i]);
		//setupShadow(this.images[i]);
	}
}

function updateShadows()
{
	//alert(opacity+','+xOffset+','+yOffset+','+xSize+','+ySize+','+borderSize);
	getBrowserType();
	var shadowImgs = this.images;//getShadowImages();
	for(i=0; i<shadowImgs.length; i++)
	{
		this.setupShadow(shadowImgs[i]);
	}
}

function getClassname(obj)
{
	var name;
	if(browserType == 'ie')
		name =  obj.className;
	else
		name =  obj.getAttribute('class');
	
	if(null == name)
		name = "";

	return name;
}

function setClassname(obj, value)
{
	if(browserType == 'ie')
		obj.className = value;
	else
		obj.setAttribute('class', value);
}

function isInnerContainer(obj)
{
	if(getClassname(obj).indexOf(this.shadowType + '-inner-container') < 0)
		return false;
	return true;
}

var browserType = "";
function getBrowserType()
{
	browserType = "unknown";

	if(navigator.userAgent.indexOf("Opera") > -1)
	{
		browserType = "opera";
		return;
	}
	
	if(navigator.userAgent.indexOf("MSIE") > -1)
	{
		browserType = "ie";
		return;
	}
}


function Shadower(install)
{

	this.opacity = shadowImageOpacity;
	this.xOffset = shadowHorzOffset;
	this.yOffset = shadowVerticalOffset;
	this.xSize = shadowHorzSize;
	this.ySize = shadowVertSize;
	this.path = shadowImagePath;

	//these depend on the image set used
	this.borderSize = 10;
	this.shadowType = 'shadower';

	this.images = this.getImages();
}

Shadower.prototype.install = installShadows;
Shadower.prototype.uninstall = uninstallShadows;
Shadower.prototype.update = updateShadows;
Shadower.prototype.getImages = getShadowImages;
Shadower.prototype.createStructure = createShadowStructure;
Shadower.prototype.remoteStructure = removeShadowStructure;
Shadower.prototype.setupShadowDiv = setupShadowDiv;
Shadower.prototype.setupShadow = setupShadow;
Shadower.prototype.isInnerContainer = isInnerContainer;

getBrowserType();