//
// Add a class of "ds" to any div you want to have a drop shadow
// Written by James Player 2009
//

drop_shadow = function(){
$(".ds").each(function(){

var shadow_size = new Array();

//
// Change the below numbers to the size of the drop shadow images in pixels
// E.g. if the top shadow is 5px high then put 5, if the right shadow is 7px wide then put 7
//
shadow_size["top"] = 3;
shadow_size["right"] = 3;
shadow_size["bottom"] = 3;
shadow_size["left"] = 3;

//
// Corner images should be squares that are all the same size
// Enter the length of the corner images in pixels, here
//
var corner_side_length = 4;

var border_width = new Array();
var offset = new Array();
var start_point = new Array();

for(var key in shadow_size){
// Get border widths
border_width[key] = $(this).css("border-"+key+"-width").replace("px", "");
if(!isInteger(border_width[key])){
border_width[key] = 0;
}



// Get offset (absolute positions of shadows)
offset[key] = parseInt(shadow_size[key]) + parseInt(border_width[key]);

// Get start point for side images
start_point[key] = corner_side_length - offset[key];
}

// Get side height and width
var box_width = $(this).outerWidth();
var box_height = $(this).outerHeight();

var side_length = new Array();
side_length["width"] = box_width - start_point["right"] - start_point["left"] - border_width["left"] - border_width["right"];
side_length["height"] = box_height - start_point["top"] - start_point["bottom"] - border_width["top"] - border_width["bottom"];

$(this)
.css("position", "relative")
.children("img.shadow")
.remove()
.end()
//
// Change the below src attributes to the paths to your images
//
.append("<img src='/images/ds-dark-top-left.png' class='shadow' style='margin: 0; padding: 0; width: "+corner_side_length+"px; height: "+corner_side_length+"px; position: absolute; top: -"+offset["top"]+"px; left: -"+offset["left"]+"px;' />")
.append("<img src='/images/ds-dark-top.png' class='shadow' style='margin: 0; padding: 0; height: "+shadow_size["top"]+"px; width: "+side_length["width"]+"px; position: absolute; top: -"+offset["top"]+"px; left: "+start_point["left"]+"px;' />")
.append("<img src='/images/ds-dark-top-right.png' class='shadow' style='margin: 0; padding: 0; width: "+corner_side_length+"px; height: "+corner_side_length+"px; position: absolute; top: -"+offset["top"]+"px; right: -"+offset["right"]+"px;' />")
.append("<img src='/images/ds-dark-right.png' class='shadow' style='margin: 0; padding: 0; width: "+shadow_size["right"]+"px; height: "+side_length["height"]+"px; position: absolute; top: "+start_point["top"]+"px; right: -"+offset["right"]+"px;' />")
.append("<img src='/images/ds-dark-bottom-right.png' class='shadow' style='margin: 0; padding: 0; width: "+corner_side_length+"px; height: "+corner_side_length+"px; position: absolute; bottom: -"+offset["bottom"]+"px; right: -"+offset["right"]+"px;' />")
.append("<img src='/images/ds-dark-bottom.png' class='shadow' style='margin: 0; padding: 0; height: "+shadow_size["bottom"]+"px; width: "+side_length["width"]+"px; position: absolute; left: "+start_point["left"]+"px; bottom: -"+offset["bottom"]+"px;' />")
.append("<img src='/images/ds-dark-bottom-left.png' class='shadow' style='margin: 0; padding: 0; width: "+corner_side_length+"px; height: "+corner_side_length+"px; position: absolute; bottom: -"+offset["bottom"]+"px; left: -"+offset["left"]+"px;' />")
.append("<img src='/images/ds-dark-left.png' class='shadow' style='margin: 0; padding: 0; width: "+shadow_size["left"]+"px; height: "+side_length["height"]+"px; position: absolute; top: "+start_point["top"]+"px; left: -"+offset["left"]+"px;' />");

});


}

function isInteger(s) {// THANKS http://surf11.com/entry/157/javascript-isinteger-function 
return (s.toString().search(/^-?[0-9]+$/) == 0);
}

// Or whenever else you want to use this function
$(window).load(function(){
    drop_shadow();
});