$.fn.featureBubble = function(settings) {
  var $popoverTmpl = $('<div class="bubble"><a href="#" class="close">X</a><div class="bubble-arrow"></div></div>');
  
  var defaults = {
    titleText: null,
    smallText: null,
    buttonText: 'Home',
    buttonUrl: 'index.php'
  };
  
  return this.each(function() {
    var $this = $(this);
    var opts = $.extend(defaults, settings);
    var $popover = $popoverTmpl.clone();
    
    $popover
      .append('<h1>' + opts.titleText + '</h1>')
      .append('<h4>' + opts.smallText + '</h4>')
      .append('<a href="' + opts.buttonUrl + '" class="bubble-button">' + opts.buttonText + '</a>');
    
    $this
      .append($popover)
      .css({
      'position': 'relative'
      })
      .find('.bubble').fadeIn('slow')
      // Close button
      .find('a.close').click(function(e) {
        $(this).parent().fadeOut(100);
        e.preventDefault();
      });
  });
};

$(function() {
	$('body')
		.append(
			$('<div/>', {
				id: 'cover',
				css: {
					'background': 'url(images/cover.png)',
					'position': 'fixed',
					'top': 0,
					'right': 0,
					'bottom': 0,
					'left': 0,
					'z-index': 100,
					'display': 'none'
				},
				click: function() {
					close();
				}
			})
		)
		.append(
			$('<div/>', {
				id: 'box',
				css: {
					'width': 540,
					'height': 540,
					'margin': '-270px 0 0 -270px',
					'position': 'absolute',
					'top': '50%',
					'left': '50%',
					'z-index': 9999,
					'display': 'none',
					'background': '#fff'
				}
			}).append(
				$('<div/>', {
					id: 'box-inner',
					css: {
						'width': 470,
						'height': 490,
						'margin': 35,
						'overflow-x': 'hidden',
						'overflow-y': 'auto'
					}
				}).load('bumblebumble.html')
			).append(
				$('<a/>', {
					id: 'close',
					href: '#',
					css: {
						'width': 20,
						'height': 20,
						'position': 'absolute',
						'top': 550,
						'right': 0,
						'background': 'url(images/bt_close.png) no-repeat 0 0'
					},
					click: function(e) {
						e.preventDefault();
						close();
					}
				})
			)
		);
	$('a#bt_bb').click(function(e) {
		e.preventDefault();
		$('#cover, #box').fadeIn('fast');
	});
	
	function close() {
		$('#cover').fadeOut('fast', function() {
			$('#box').fadeOut('fast');
		});
	}
});