/* 
    The initial code here creates the rounded borders by manipulating DOM.
    We assume jquery is already loaded.
*/

$().ready(function(){
// --------------------------------------------------

// Apply rounded borders to everything
   rb_apply();

});

function rb_apply () {
// --------------------------------------------------
/* 
    Applies the CSS required to allow for rounded
    borders

    This will take the frame divs like the following

    <div class="frame-header rb">
      SOME CONTENT
    </div>

    And dynamically add manipulate DOM so that it looks like
    the following:

    <div class="frame-header">
      <div class="rb-inner">
        <div class="rb-t">
          <div class="rb-b">
            <div class="rb-l">
              <div class="rb-r">
                <div class="rb-tl">
                  <div class="rb-tr">
                    <div class="rb-bl">
                      <div class="rb-br">
                        <div class="rb-body">
                          SOME CONTENT
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    From there, the rounded corners are handled by the css found in
    the generic section of "style.css". Note that the new divs are
    enclosed by the orginal div so it's possible to apply alternative
    stylings to each div class.
*/

    var seen = new Array;

    $(".rb").each(function (i){

// Find the first attribute which will be come the "outername"
        var classes = $(this).attr('class').split( / / );
        var class_name = classes[0];
        var background = $(this).css("background");


        $(this)
            .wrap( 
                '<div class="'+class_name+'-rb rb-outer"'
                        + ( background ? ' style="background:'+background+'"' : "" )
                        +'>'
                    + '<div class="rb-l">'
                      + '<div class="rb-r">'
                        + '<div class="rb-t">'
                          + '<div class="rb-b">'
                            + '<div class="rb-tl">'
                              + '<div class="rb-tr">'
                                + '<div class="rb-bl">'
                                  + '<div class="rb-br">'
                                    + '<div class="rb-body">'
                                    + '</div>'
                                  + '</div>'
                                + '</div>'
                              + '</div>'
                            + '</div>'
                          + '</div>'
                        + '</div>'
                      + '</div>'
                    + '</div>'
                + '</div>' 
            )
            .css({ 
                background: "none",
                position: "relative",
                width: "100%",
                right: "0px",
                left: "0px",
                top: "0px",
                bottom: "0px",
                margin: "0px"
              });
    });

}