$(document).ready(function() {
    var coHoverBox = {
      o : {},
    
      init : function(opt){
        this.setVars(opt);
        this.setHoverBoxCSS();
        this.setHoverBox();
      },
      
      setVars : function(opt){
        this.o.link_class = opt.link_class;
        this.o.hover_class = opt.hover_class; 
        this.o.left_offset = opt.left_offset;
        this.o.top_offset = opt.top_offset; 
        this.o.hover_zindex = opt.hover_zindex; 
      },
      
      setHoverBoxCSS : function(){
        var t = this;
        $('.' + this.o.hover_class).each(function(el){
          $(this).css({
            'display' : 'none',
            'position' : 'absolute',
            'zIndex' : t.o.hover_zindex
          });
        });
      },
      
      setHoverBox : function(){
        var t = this;  
        $('.' + this.o.link_class).each(function(el){
          var link_id = $(this).attr('rel');
          link_id = link_id.replace('link_', '');
          var elem = $(this).children('img');
          $(this).bind('mouseenter', function(){
            elem_pos = elem.offset();     
                  
            $('#' + link_id).css({
              'top' : elem_pos.top - t.o.top_offset,
              'left' : elem_pos.left - t.o.left_offset,
              'display': 'block'
            });
          });
          
          $('#' + link_id).bind('mouseleave', function(){
            $('#' + link_id).css('display', 'none');
          });
        });
      }
    }
    
    coHoverBox.init({
      link_class  : 'co_hover_box',
      hover_class : 'co_hover_box_targ',
      left_offset : 20,
      top_offset  : 100,
      hover_zindex : 1000
    });
});