var BaseBubble = {
  contents: {},
  _initialized: false,
  init: function() {
    var bubble_html = '<div id="global_base_bubble" class="widget-base-bubble" style="display: none;"><div id="global_base_bubble_contents" class="clearfix"></div>';
    bubble_html += '<div class="widget-dropshadow-top"></div><div class="widget-dropshadow-top-right"></div><div class="widget-dropshadow-right"></div><div class="widget-dropshadow-bottom-right"></div>';
    bubble_html += '<div class="widget-dropshadow-bottom"></div><div class="widget-dropshadow-bottom-left"></div><div class="widget-dropshadow-left"></div><div class="widget-dropshadow-top-left"></div>';
    bubble_html += '</div>';
    $('#page').append(bubble_html);
    BaseBubble._initialized = true;
  },

  Show: function(id, offset_parent, horizontal_offset, vertical_offset, force_flip) {
    if(!BaseBubble._initialized) {
      BaseBubble.init();
    }
    if(!horizontal_offset) {
      horizontal_offset = 15;
    }
    if(!vertical_offset) {
      vertical_offset = -20;
    }
    if (!offset_parent) {
      offset_parent = $(id);
    }
    if (!force_flip) {
      force_flip = false;
    }
    offset_parent = $(offset_parent);
    if (offset_parent && offset_parent.attr('title')) {
      offset_parent.removeAttr('title');
    }

    var bubble = $('#global_base_bubble');
    $('.widget-base-bubble-arrow').remove();
    var bubble_contents = $('#global_base_bubble_contents');
    bubble_contents.empty().append(BaseBubble.contents[id]);
    bubble.show();

    var offset = offset_parent.offset();
    var page_offset = $('#page').offset();
    var viewport_width = $(window).width();

    bubble.css({
        'left': parseInt(offset.left - page_offset.left + offset_parent.width() + horizontal_offset) + 'px',
        'top': parseInt(offset.top - page_offset.top + vertical_offset) + 'px',
        'width': null,
        'visibility': 'hidden'
        });

    var bubble_width = bubble.width();
    var bubble_offset = bubble.position();
    if(!force_flip && bubble_offset.left + bubble_width + 20 < viewport_width) {
      bubble.prepend('<div class="widget-base-bubble-arrow"></div>');
    } else {
      bubble.css({
        'left': (offset.left - page_offset.left - bubble_width - horizontal_offset) + 'px',
        'width': bubble_width
      });
      bubble.prepend('<div class="widget-base-bubble-arrow widget-base-bubble-arrow-right"></div>');
    }

    bubble.css({
      'visibility': 'visible'
    });

  },

  Hide: function() {
    if(!BaseBubble._initialized) {
      BaseBubble.init();
    }
    var bubble = $('#global_base_bubble');
    bubble.hide();
  },

  AddHtmlContent: function(id, html) {
    BaseBubble.contents[id] = html;
  }

};


var SeriesBubble = {
  _series_content_template: 
  '<div class="widget-series-bubble-details"><img class="widget-series-bubble-mug" src="${img}"/><h3>${name}</h3>' +
    '<div class="widget-series-bubble-restrictions">${restrictions}</div>' +
    '<div class="widget-series-bubble-desc">${description}</div>' +
    '<div class="widget-series-bubble-metadata">' +
    '<div class="widget-series-bubble-tags">{{html tags}}</div>' +
    '<div class="widget-series-bubble-num-ep">{{html num_ep}}</div>' +
    '<div class="widget-series-bubble-year">{{html year}}</div>' +
    '</div>' +
    '</div>',
  
  Show: BaseBubble.Show,  
  Hide: BaseBubble.Hide,
  AddContent: function(id, data) {
    var content = $.tmpl(SeriesBubble._series_content_template,data);
    BaseBubble.AddHtmlContent(id,content);
  }
 
};


var MediaBubble = {
    _content_template: '<div class="widget-media-bubble-details">' +
        '<h2>${series}</h2><h3>${name}</h3><h4>${ordernum}</h4>' +
        '<span class="created">${created}</span>' +
        '<div class="widget-media-bubble-desc">${description}</div>' +
        '<div class="widget-media-bubble-restrictions">${restrictions}</div></div>',
    Show: BaseBubble.Show,  
    Hide: BaseBubble.Hide,
    AddContent: function(id, data) {
      var content = $.tmpl(MediaBubble._content_template,data);
      BaseBubble.AddHtmlContent(id,content);
    }
};