//
//  Goal: only have to apply a single class to apply a stretchable
//        background box (with corners and shadows) to any div element.
//
//  It bascially changes a given div element as below:
//
//  <div class="[anyname] stretchbox">
//      box content...                         
//  </div>
//
//  to
//  
//  <div>
//    <div class="[anyname]_top"></div>
//    <div class="[anyname]">
//        body content...
//    </div>
//    <div class="[anyname]_btm"></div>
//  </div>
//
//  By now you can set background image in the stylesheet with classes
//  [anyname] for your box content
//  [anyname]_top for your box top image 
//  [anyname]_btm for your box bottom image
//
//  Written by: Brian Liu 09/03/2007 www.thetopiaproject.com.au


//
//  function to insert top and bottom div for a given div element
//  identified by its class name when a keyword 'stretchbox' is found.
//
function render_box(){

    // get all elements with class name having 'stretchbox' at last
    ar = getElementsByClassName(document.body, "div", "stretchbox");

    for(j=(ar.length)-1; j>=0; j--){
      cssname = ar[j].className.split(' ');
      cssname = cssname[0];
            
      // create top shadow div
      topdiv = document.createElement('div');
      topdiv.className = cssname+'_top';
      
      // create box content div
      contentdiv = document.createElement('div');
      contentdiv.className = cssname;
      contentdiv.innerHTML = ar[j].innerHTML;
      
      // create bottom shadow div
      btmdiv = document.createElement('div');
      btmdiv.className = cssname+'_btm';


      // Clear parent div style
      ar[j].innerHTML = "";
      ar[j].className = null;

      // Place all divs in place
      ar[j].appendChild(topdiv);
      ar[j].appendChild(contentdiv);
      ar[j].appendChild(btmdiv);
    }
    
    
    
}

//
//  function for getting an array of element by class name 
//  Written by Jonathan Snook, http://www.snook.ca/jonathan
//  Add-ons by Robert Nyman, http://www.robertnyman.com
//
function getElementsByClassName(oElm, strTagName, oClassNames){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    var arrRegExpClassNames = new Array();
    if(typeof oClassNames == "object"){
        for(var i=0; i<oClassNames.length; i++){
            arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames[i].replace(/\-/g, "\\-") + "(\\s|$)"));
        }
    }
    else{
        arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames.replace(/\-/g, "\\-") + "(\\s|$)"));
    }
    var oElement;
    var bMatchesAll;
    for(var j=0; j<arrElements.length; j++){
        oElement = arrElements[j];
        bMatchesAll = true;
        for(var k=0; k<arrRegExpClassNames.length; k++){
            if(!arrRegExpClassNames[k].test(oElement.className)){
                bMatchesAll = false;
                break;                      
            }
        }
        if(bMatchesAll){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}
// Array support for the push method in IE 5
if(typeof Array.prototype.push != "function"){
    Array.prototype.push = ArrayPush;
    function ArrayPush(value){
        this[this.length] = value;
    }
}

//
//  function for executing javascript on page load
// 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
 
addLoadEvent(render_box);