YAHOO.util.Event.onDOMReady(function() {
    
    //get the span elements
    var rcElements = YAHOO.util.Dom.getElementsByClassName('roundcorners');
    
    //loop through the span collection
    for(x in rcElements) {
        //they dont have id's but this function will take a HTMLElement object as a parameter
        var el = new YAHOO.util.Element(rcElements[x]);
        
        //create an image element for each round corner
        var imgElTL = document.createElement("img");
        imgElTL.setAttribute("class", "tl");
        imgElTL.setAttribute("src", "/images/imagecornertl.gif");
        imgElTL.setAttribute("alt", "round corner");
        
        var imgElTR = document.createElement("img");
        imgElTR.setAttribute("class", "tr");
        imgElTR.setAttribute("src", "/images/imagecornertr.gif");
        imgElTR.setAttribute("alt", "round corner");
        
        var imgElBL = document.createElement("img");
        imgElBL.setAttribute("class", "bl");
        imgElBL.setAttribute("src", "/images/imagecornerbl.gif");
        imgElBL.setAttribute("alt", "round corner");
        
        var imgElBR = document.createElement("img");
        imgElBR.setAttribute("class", "br");
        imgElBR.setAttribute("src", "/images/imagecornerbr.gif");
        imgElBR.setAttribute("alt", "round corner");
        
       // var clearblock = document.createElement("div");
        //clearblock.setAttribute("class", "clear");
        
        //set the width of the span to match the image it contains
        el.setStyle("width",el.get('firstChild').width + "px");
        
        //insert each image elements after the last child of the span
        el.insertBefore(imgElTL, el.get('lastChild').nextSibling);
        el.insertBefore(imgElTR, el.get('lastChild').nextSibling);
        el.insertBefore(imgElBL, el.get('lastChild').nextSibling);
        el.insertBefore(imgElBR, el.get('lastChild').nextSibling);
        
    }

});