﻿function addDropShadow(div_id) {
    // make a local variable instead of finding it in the DOM each time
    var $div = $$('#'+div_id);
    // make an array of the new elements (4 sides + 4 corners) using spans for less conflict with existing styles
    var ds_spans = Array(
                        new Element('span', {'class': 'ds top_left'}),
                        new Element('span', {'class': 'ds top_side'}),
                        new Element('span', {'class': 'ds top_right'}),
                        new Element('span', {'class': 'ds right_side'}),
                        new Element('span', {'class': 'ds bottom_right'}),
                        new Element('span', {'class': 'ds bottom_side'}),
                        new Element('span', {'class': 'ds bottom_left'}),
                        new Element('span', {'class': 'ds left_side'})
                        );
    // put the dropshadow spans inside the selected div
    $div.adopt(ds_spans);  
    // make sure that the div has enough bottom margin to show dropshadow   
    if ($div.getStyle('margin-bottom') < '14px') $div.setStyle('margin-bottom','14px');
    // make sure that the div is explicitly positioned so that absolute positioning of child elements will work
    var pos = $div.getStyle('position');
    if (pos = "static") $div.setStyle('position', 'relative');
    return false;
}
