/*
 * Creates a rounded box with divs
 *
 * optional parameter boxType, a value of 
 *   'bubble-top': bubble that pops out of the top of another element
 *   'bubble-bottom': bubble that pops out of the bottom of another element
 *   'bubble-left': bubble that pops out of the left of another element
 *   'bubble-right': bubble that pops out of the right of another element.
 *
 */
(function($) {
  $.extend($.fn, {
    testShadowBox: function() {

    },
    removeShadowBox: function() {
      return this.each(function() {
        var content = $(this);
        var box = content.parents('div.shadow-box:first');

        box.replaceWith(content);
      });
    },
    shadowBox: function(boxType) {
      if (typeof(boxType) === 'undefined') {
        boxType = 'none';
      }
      return this.each(function() {
        var content = $(this);
        var parent = content.parent();
    
        var box = $('<div class="shadow-box"></div>');
        var type = $('<div></div>');
        type.addClass(boxType);
        box.append(type);
          
        var top = $('<div class="box-top"></div>');
        type.append(top);
        var bottom = $('<div class="box-bottom"></div>');
        top.append(bottom);
        var left = $('<div class="box-left"></div>');
        bottom.append(left);
        var right = $('<div class="box-right"></div>');
        left.append(right);
        var topLeft = $('<div class="box-top-left"></div>');
        right.append(topLeft);
        var topRight = $('<div class="box-top-right"></div>');
        topLeft.append(topRight);
        var bottomRight = $('<div class="box-bottom-right"></div>');
        topRight.append(bottomRight);
        var bottomLeft = $('<div class="box-bottom-left"></div>');
        bottomRight.append(bottomLeft);
        content.replaceWith(box);
        bottomLeft.append(content);
      });
    }
  });
})(jQuery);