﻿
//This jQuery plugin wraps element(s) with div tags that are used to rendered rounded corners.
//The rounded corners implementation was obtained from
//http://www.schillmania.com/projects/dialog/png/
//The following is the html structure after running this pluging against a div tag
//with id='foo'
//<div class="rounded-corners">
// <div class="rounded-corners-hd"><div class="rounded-corners-c"></div></div>
// <div class="rounded-corners-bd">
//  <div class="rounded-corners-c">
//   <div class="rounded-corners-s">
//    <div id=-'foo'>
//    </div>
//   </div>
//  </div>
// </div>
// <div class="rounded-corners-ft"><div class="rounded-corners-c"></div></div>
//</div>

(function($) {

    $.fn.roundedCorners = function() {

        //wrap the element with div tags required to round the corners
        $(this)
          .wrap("<div class='rounded-corners'></div>")
          .wrap("<div class='rounded-corners-bd'></div>")
          .wrap("<div class='rounded-corners-c'></div>")
          .wrap("<div class='rounded-corners-s'></div>");

        //need to add header and footer div tags before and after the body div tag 
        var selector = '.rounded-corners ' + this.selector;
        var bd = $(selector).parents('.rounded-corners-bd');
        $("<div class='rounded-corners-hd'><div class='rounded-corners-c'></div></div>").insertBefore(bd);
        $("<div class='rounded-corners-ft'><div class='rounded-corners-c'></div></div>").insertAfter(bd);

        return this;

    }

})(jQuery);
