// JavaScript Document

function dropShadow ( target, imgDir, vOffset, hOffset, cornerSize ) {
	// Set default values if not present.
	if (!imgDir) { imgDir = "images/dropShadow/"; }
	if (!vOffset) { vOffset = 0; }
	if (!hOffset) { hOffset = 0; }
	if (!cornerSize) { cornerSize = 8; }
	
	var t = target.substring(1);
	
	$(target).wrap('<div class="' + t + 'Outer"></div>'); // entire ' + target + ' container
	$(target).before('<div class="' + t + 'Upper"></div>'); // background images container
	
	var imgs = "";
	imgs = imgs + '<img src="' + imgDir + 'top.png" class="' + t + 'Top" />';
	imgs = imgs + '<img src="' + imgDir + 'right.png" class="' + t + 'Right" />';
	imgs = imgs + '<img src="' + imgDir + 'bottom.png" class="' + t + 'Bottom" />';
	imgs = imgs + '<img src="' + imgDir + 'left.png" class="' + t + 'Left" />';
	imgs = imgs + '<img src="' + imgDir + 'topRight.png" class="' + t + 'TopRight ' + t + 'Corner" />';
	imgs = imgs + '<img src="' + imgDir + 'bottomRight.png" class="' + t + 'BottomRight ' + t + 'Corner" />';
	imgs = imgs + '<img src="' + imgDir + 'bottomLeft.png" class="' + t + 'BottomLeft ' + t + 'Corner" />';
	imgs = imgs + '<img src="' + imgDir + 'topLeft.png" class="' + t + 'TopLeft ' + t + 'Corner" />';
	
	var width = $(target).width() + parseInt($(target).css('paddingLeft')) + parseInt($(target).css('paddingRight'));
	var height = $(target).height() + parseInt($(target).css('paddingTop')) + parseInt($(target).css('paddingBottom'));
	
	var wrapperWidth = width + cornerSize - 1; // width + half of each corner
	var wrapperHeight = height + cornerSize - 1; // height + half of each corner
	
	$(target + "Outer").css({'position':$(target).css('position'),'display':'inline', 'width':width + 'px', 'height': height + 'px', 'marginTop':$(target).css('marginTop'),'marginRight':$(target).css('marginRight'),'marginLeft':$(target).css('marginLeft'),'marginBottom':$(target).css('marginBottom'),'top':$(target).css('top'),'right':$(target).css('right'),'left':$(target).css('left'),'bottom':$(target).css('bottom'),'float':$(target).css('float'),'clear':$(target).css('clear'),'zIndex':$(target).css('zIndex')});
	$(target).css({'margin':'0px','top':'0px','right':'0px','bottom':'0px','left':'0px'});
	$(target + "Upper").css({'position':'absolute','top':vOffset + 'px', 'left':hOffset + 'px', 'display':'inline', 'width':wrapperWidth +'px', 'height':wrapperHeight + 'px', 'margin': '-' + ((cornerSize/2)-1) +'px'});
	
	var shadowWidth = width - cornerSize - 1; // width - half of each corner
	var shadowHeight = height - cornerSize - 1; // height - half of each corner
	
	// Insert images into dropShadowUpper
	$(target + "Upper").html(imgs);
	
	// Now apply basic CSS
	$(target + "Upper img").css({'position':'absolute','display':'inline'});
	$(target + "Corner").css({'height':'8px','width':'8px'});
	
	// Position Corners
	$(target + "TopRight").css({'top':'0px','right':'0px'});
	$(target + "BottomRight").css({'bottom':'0px','right':'0px'});
	$(target + "BottomLeft").css({'bottom':'0px','left':'0px'});
	$(target + "TopLeft").css({'top':'0px','left':'0px'});
	
	// Position Sides
	$(target + "Top").css({'left': cornerSize+'px','top':'0px','height':'8px','width': shadowWidth +'px'});
	$(target + "Right").css({'top': cornerSize+'px','right':'0px','height':shadowHeight + 'px','width':'8px'});
	$(target + "Bottom").css({'left': cornerSize+'px','bottom':'0px','height':'8px','width': shadowWidth +'px'});
	$(target + "Left").css({'top': cornerSize+'px','left':'0px','height':shadowHeight + 'px','width':'8px'});		
}