/*
* this is the main function. it takes:
* the id of the element to shade
* the right offset
* the bottom offset
* true for a bigger shadow, false for a light one
fix- recursive, shade left, i-1, shade up, i-1, i=0, stop
*/
function shade(name, rOffset, bOffset, dense)
{
var r = parseInt(rOffset);
var b = parseInt(bOffset);
var text = document.getElementById(name);
var spacer = text.cloneNode(true);
var parent = text.parentNode;
var box = document.createElement("div");
//create the shadow nodes, the first is the middle dark one
var s1 = makeShadowNode(r, b, 1, 1, "#aaaaaa", 2, text);
if(dense)
{
var s2 = makeShadowNode(r+1, b, 0, 1, "#dddddd", 1, text);
var s3 = makeShadowNode(r, b+1, 1, 0, "#dddddd", 1, text);
var s4 = makeShadowNode(r-1, b, 2, 1, "#dddddd", 1, text);
var s5 = makeShadowNode(r, b-1, 1, 2, "#dddddd", 1, text);
}
box.style.position = "relative";
//the spacer keeps other elements from covering the shadowed one
spacer.style.color = "red";
spacer.style.visibility = "hidden";
spacer.style.zIndex = "-1";
spacer.style.paddingRight = r+1+"px"; //padding fixes some text wrap stuff
spacer.style.paddingBottom = b+1+"px";
//patch up the original text
text.style.zIndex += 3;
text.style.position = "absolute";
text.style.paddingRight = r+1+"px"; //more padding
text.style.paddingBottom = b+1+"px";
box.appendChild(s1);
if(dense)
{
box.appendChild(s2);
box.appendChild(s3);
box.appendChild(s4);
box.appendChild(s5);
}
box.appendChild(spacer);
parent.insertBefore(box, text);
box.insertBefore(text, s1);
}
//creates a shadow node
function makeShadowNode(oR, oB, pR, pB, color, z, text)
{
var shadow = text.cloneNode(true);
shadow.id = "shadow";
shadow.style.position = "absolute"
shadow.style.color = color;
shadow.style.zIndex = z;
shadow.style.top = oB + "px"; //reposition the text
shadow.style.left = oR + "px";
shadow.style.paddingRight = pR + "px"; //fix the wrapping
shadow.style.paddingBottom = pB + "px";
return shadow;
}
/* example use:
some text