$(document).ready(function() {
     var distance = 15;
     var time = 200;
     //var hideDelay = 200;
     var hideDelay = 100;
     var hideDelayTimer = null;
     var beingShown = false;
     var shown = false;

     $('.trigger_off').live('mouseover',function (e) {
          $('div.meta_div').removeClass('coda_shown');
          $('div.li_div').removeClass('coda_shown');
          $('div.user2_info').removeClass('coda_shown');
          if ($('#dpop').length > 0)
             $('#dpop').remove();
     });

     $('.trigger, .trigger2, .trigger3, .popup').live('mouseover',function (e) {

       if (hideDelayTimer) clearTimeout(hideDelayTimer);
       if ($(this).is('.popup')) // popup, then it is already shown, just return and do nothing
           return;

       var parent_elem = null;
       var bubble_anchor = null;

       if ($(this).is('.trigger')) {
          parent_elem = $(this).closest('div.meta_div');
          bubble_anchor = $(parent_elem).children('div.user_img')[0];
       } else if ($(this).is('.trigger2')) {
          parent_elem = $(this).closest('div.li_div');
          bubble_anchor = $(parent_elem);
       } else if ($(this).is('.trigger3')) {
          parent_elem = $(this).closest('div.user2_info');
          bubble_anchor = $(parent_elem);
       } else
          return;  // should never comg here!!

       if ($(parent_elem).length==0)
           return;
       if ($(parent_elem).is('.coda_shown') && $('#dpop').length > 0) {
           // don't trigger the animation again
           return;
       } else {
          $('div.meta_div').removeClass('coda_shown');
          $('div.li_div').removeClass('coda_shown');
          $('div.user2_info').removeClass('coda_shown');
          if ($('#dpop').length > 0)
             $('#dpop').remove();
          $(parent_elem).addClass('coda_shown');

          var userurl = $(this).attr('userurl');
          var username = $(this).attr('username');
          var userid = $(this).attr('userid');
          var imgsrc = $(this).attr('imgsrc');
          var bubble_html = 
                '<table id="dpop" class="popup">'+
                    '<tbody><tr class="trigger_off">'+
                          '<td id="topleft" class="corner"></td>'+
                          '<td class="top"></td>'+
                          '<td id="topright" class="corner"></td>'+
                       '</tr>'+
                       '<tr>'+
                           '<td class="left trigger_off"></td>'+
                           '<td>'+
                              '<table class="popup-contents" border="0">'+
                                   '<tbody>'+
                                      '<tr valign="top" class="trigger_off">'+
                                        '<td rowspan="2"><img class="user_profile_img_big" src="'+imgsrc+'" /></td>'+
                                        '<td>'+
                                             '<table class="popup-contents trigger_off" border="0">'+
                                                  '<tbody>'+
                                                     '<tr valign="top">'+
                                                         '<td>Hi, I&#39;m '+username+'!</td>'+
                                                     '</tr>'+
                                                     '<tr valign="top">'+
                                                       '<td valign="top" id="user_loc">&nbsp;</td>'+
                                                     '</tr>'+
                                                     '<tr valign="top">'+
                                                       '<td valign="top" id="user_bio">&nbsp;</td>'+
                                                     '</tr>'+
                                                  '</tbody>'+
                                               '</table>'+
                                          '</td>'+
                                      '</tr>'+
                                      '<tr>'+
                                      '</tr>'+
                                      '<tr valign="top">'+
                                          '<td colspan="2"><a class="what_else_user_tracking" rel="nofollow" href="'+userurl+'">See what else I&#39;m tracking...</a></td>'+
                                      '</tr>'+
                                    '</tbody>'+
                              '</table>'+
                           '</td>'+
                           '<td class="right trigger_off"></td>'+
                        '</tr>'+
                        '<tr>'+
                           '<td class="corner" id="bottomleft"></td>'+
                           '<td class="bottom"><img width="30" height="29" alt="popup tail" src="img/coda/bubble-tail2.png"/></td>'+
                           '<td id="bottomright" class="corner"></td>'+
                        '</tr>'+
                  '</tbody></table>';
                $("body").append(bubble_html);
                // reset position of info box
                beingShown = true;
                var info = $('#dpop').css('opacity', 0).show();
                var y_offset = -110;
                var x_offset = -100;
                var pos = $(bubble_anchor).offset();
                var width = $(bubble_anchor).width();
                currX = pos.left+width;
                currY = pos.top; 

                if ($(this).is('.trigger2')) {
                   x_offset = -200; 
                   y_offset = -120;
                }

                info.css("top",(currY + y_offset) + "px")
                    .css("left",(currX + x_offset) + "px")
                    .animate({
                       top: '+=' + distance + 'px',
                       opacity: 1
                     }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                     });
            }
            $.getJSON("user_profile.php", {id: userid},  function(obj) {

               if (isEmpty(obj)) {
                  // some error happened while parsing, do nothing and exit.
                  return;
               }

               var city = obj.location.city;
               var state = obj.location.state;
               var bio = obj.bio;
                
               if (city != null && state != null && city != '' && state != '') {
                  $('#user_loc').html('from '+ucwords(city.toLowerCase())+', '+state+'.');
               } else {
                  $('#user_loc').html('from an undisclosed location.');
               }
               if (bio != null && bio != '') {
                  $('#user_bio').html('I\'m a '+bio+'.');
               } else {
                  $('#user_bio').html('');
               }
            });
        }).live ('mouseout', function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                var info = $('#dpop');
                info.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    $('div.meta_div').removeClass('coda_shown');
                    $('div.li_div').removeClass('coda_shown');
                    $('div.user2_info').removeClass('coda_shown');
                    info.css('display', 'none');
                }).remove();

            }, hideDelay);
            return false;
        });
});

function isEmpty(obj) { 
   for(var prop in obj) {
       if(obj.hasOwnProperty(prop))
           return false;
   }

   return true; 
}

function ucwords (str) {
    // Uppercase the first character of every word in a string  
    // 
    // version: 909.322
    // discuss at: http://phpjs.org/functions/ucwords    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Waldo Malqui Silva
    // +   bugfixed by: Onno Marsman
    // *     example 1: ucwords('kevin van zonneveld');
    // *     returns 1: 'Kevin Van Zonneveld'    // *     example 2: ucwords('HELLO WORLD');
    // *     returns 2: 'HELLO WORLD'
    return (str+'').replace(/^(.)|\s(.)/g, function ( $1 ) { return $1.toUpperCase( ); } );
}

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.parentNode;
    }
    return { top: _y, left: _x };
}