/*
 * roundBoxes
 *
 * This function looks for markup like this:
 *
 *  <div class="jsBox"> ... </div>
 *
 * and converts it to this:
 *
 *  <div class="roundBox">
 *    <div class="roundBoxTL">
 *      <div class="roundBoxTR">
 *        <div class="roundBoxBR">
 *          <div class="roundBoxBL"> ... </div>
 *        </div>
 *      </div>
 *    </div>
 *  </div>
 *
 * CSS is then used to add rounded corner images
 *
 * Created by GSJH 09-05-2007
 */
 function roundBoxes() {

	var jsBox = getElementsByClass('jsBox');
  var jsBoxLen = jsBox.length;
	
	for (var i = 0; i < jsBox.length; i++) {
		
		var divContainer = document.createElement('div');
		// Give this new container a different name, so it can be styled independently
		divContainer.className = jsBox[i].className.replace(/jsBox/, "roundBox");;
		
		var divTL = document.createElement('div');
    divTL.className = 'roundBoxTL';

		var divTR = document.createElement('div');
    divTR.className = 'roundBoxTR';

		var divBR = document.createElement('div');
    divBR.className = 'roundBoxBR';
        
    /* Copy content from original div to innermost newly created div */
    var divBL = jsBox[i].cloneNode(true);
    divBL.className = 'roundBoxBL';
        
    divBR.appendChild(divBL);
    divTR.appendChild(divBR);
		divTL.appendChild(divTR);
		divContainer.appendChild(divTL);

    var parent = jsBox[i].parentNode;
    parent.replaceChild(divContainer,jsBox[i]);
	}
	
}

addLoadEvent(roundBoxes);