uniform_shadow: function(element)
  {
    element = $(element);
    var options = Object.extend(
    {
      distance: 8,
      opacity: 0.7,
      nestedShadows: 4,
      color: '#000000'
    }, arguments[1] || {});
    var positionStyle = Element.getStyle(element, ‘position’);
    var parent = element.parentNode;
    if (!element.shadowZIndex)
    {
      if (positionStyle != ‘absolute’ && positionStyle != ‘fixed’)
      {
        var placeHolder = this.idSafeClone(element);
        placeHolder.id = null;
        parent.insertBefore(placeHolder, element);
        Position.absolutize(element);
        Position.clone(placeHolder, element);
        element.style.margin = ‘0′;
        placeHolder.style.visibility = ‘hidden’;
        positionStyle = ‘absolute’;
      }
      element.shadowZIndex = new Number(Element.getStyle(element, ‘zIndex’) ? Element.getStyle(element, ‘zIndex’) : 1);
      element.style.zIndex = element.shadowZIndex + options.nestedShadows;
    }
    if (arguments[2]) // force recreate
      this.deshadow(element);
    // create shadows
    if (!element.shadows)
    {
      element.shadows = new Array(options.nestedShadows);
      for (var i = 0; i < options.nestedShadows; i++)
      {
        var shadow = document.createElement(’div’);
        Element.hide(shadow);
        shadow.appendChild(document.createTextNode(’ ‘));
        if (parent)
          parent.appendChild(shadow);
        shadow.style.position = positionStyle;
        shadow.style.backgroundColor = options.color;
        Element.setOpacity(shadow, options.opacity / options.nestedShadows);
        shadow.style.zIndex = element.shadowZIndex + i;
        element.shadows[i] = shadow;
      }
    }
    var legendHeight = this.getLegendHeight(element);
    // position shadows
    Position.prepare();
    var offsets = Position.positionedOffset(element);
    var topOffset = -options.distance;
    var leftOffset = -options.distance;
    element.shadows.each(function(shadow, i)
    {
      shadow.style.top = Math.ceil(offsets[1] + topOffset + i + (legendHeight / 2)) + ‘px’;
      shadow.style.left = (offsets[0] + leftOffset + i) + ‘px’;
      shadow.style.width = (element.offsetWidth - (2 * i)) + 2 * options.distance + ‘px’;
      shadow.style.height = (element.offsetHeight - (2 * i) - (legendHeight / 2)) + 2* options.distance + ‘px’;
      Element.show(shadow);
    });
  },
I hope it will be useful…let me know!
Bye

I was already aware of the style bug and had fixed it in my version that I’m using in production, but I had forgotten to update the one on this post.

You’re absolutely right about the id collision bug. I might do the idSafeClone a little differently, more in the style of prototype.js.

idSafeClone: function(node)
{
  var clone = node.cloneNode(false);
  if (clone.hasAttribute && clone.hasAttribute('id'))
    clone.removeAttribute('id');
  var clonedChildren =
    $A(node.childNodes).collect(this.idSafeClone.bind(this));
  clonedChildren.each(function(child) {
    clone.appendChild(child);
  });
  return clone;
}
It was tempting to chain the collect() and each() calls together, but I went with the clarity of assigning a variable. And it can be even more elegant if you don’t mind traversing the tree twice, because then you can write only a function to strip ids and say stripIds(node.cloneNode(true)) and be done.

Again, thank you for your insight into these problems. I’ll fix the file that’s hosted here with your ideas. I’ve also added some trickery to allow shadowing of fieldsets, since the legend screws with the height measurements.

However, I noticed a couple issues with the code.

The script is currently making a clone of the element in case the position style applied to it is not an ‘absolute’ one.
First, the style check doesn’t seems to work since even with absolutely positioned element a node cloning was happening (checked on FF/XP, FF/Mac, not too sure of other browsers).
I would consider this a medium level issue since it doesn’t have side effects.

Second, and this one can induce quite nasty bugs.
When creating the place holder subtree, you definately take care to remove the id attribute of the top node but the subnodes ids do still exist, which causes access by getElementById() to fail since they access the hidden place holder copy elements.

I tinkered a fix myself but you may be interested in double checking it for yourself :

var placeHolder = element.cloneNode(true);
placeHolder.id = null;
=>
var placeHolder = Shadower.idSafeClone(element);
and the idSafeClone method would be the following

idSafeClone: function(node)
{
  var id = null;
  var clone = null;
  var children = null;
  if (node.nodeType == Node.ELEMENT_NODE) {
    id = node.getAttribute('id');
    if (id) {
      node.removeAttribute('id');
    }
  }
  clone = node.cloneNode(false);
  if (node.nodeType == Node.ELEMENT_NODE) {
    if (id) {
      node.setAttribute('id', id);
    }
    if (node.hasChildNodes()) {
      children = node.childNodes;
      for (i = 0; i < children.length; i++) {
        childClone = Shadower.idSafeClone(children[i]);
        clone.appendChild(childClone);
      }
    }
  }
  return clone;
}

Checked working on XP(IE6,IE7,FF), Mac(Safari, FF)

There are probably ways to optimize it but I didn’t have the time for this.

I don’t understand from your example what to put in my stylesheet and what to call it.

If I wanted all right aligned images (in Wordpress) to have shadows, would I use alignright as the class? What style elements would I add to that class? Would I still need the Shadower.shadow class?

How would I call it in the body tag?

I would like a plugin (like the lightbox plugins) that implements this with a rel tag! Better yet a plugin that automatically implements it on all images (or chosen image classes).

Otherwise, where in the folder structure (of wordpress) would I put the .js files? Does prototype overwrite the prototype.js file already in the wordpress javascript directory?

And how, then would I call the .js files in the header section (reletive paths or full path names)?

Only problem I’ve had is that in IE7 if a div I’m applying a shadow to contains javascript in there to display them (like google ads) the entire browser crashes. NBD though.

Usage code fixed.