$(document).ready(function() {
  
  //badge hover animation
  $('#badges li').hover(function(){      
    $(this).stop(true, true).animate({bottom:"30px"}, 200);
  }, function(){
    $(this).stop(true, false).animate({bottom:"8px"}, 500);
  });
  $('div.badge').css('display','none');
  
// create overlay
  var $overlay = $('<div id="overlay"></div>')
    .addClass('overlay-hide')
    .css('opacity', '0.1')
    .appendTo('#wrapper');
  var $overlayBar = $('<div id="overlaybar"><a href="#overlaybar" id="overlay-close" class="replace">close</a></div>')
    .appendTo('#wrapper');
    
//show badge info  
  var $html = $('html'),
    $badgeInfo = $('#badge-info');
  $('#badges a').click(function() {
    var scrollTop = $html.scrollTop();
    if ($html.scrollTop() > 0) {
      $badgeInfo.css('top', scrollTop + 20);
    }
    var badge = $(this).attr('href');
    $badgeInfo.show();
    $(badge).fadeIn(600, function() {
      $('div.tab', this).animate({left: '320px'}, 300);
    });
    $overlayBar.slideDown(600);
    $overlay
      .removeClass('overlay-hide')
      .addClass('overlay-bg')
      .fadeTo(600, 0.7);
    return false;
  });

//hide badge info

  $('body').click(function(event) {
    if ($badgeInfo.is(':hidden')) { return;}
    var tgt = event.target;
    if (tgt.id.indexOf('overlay') === 0 ) {
      $overlayBar.slideUp(600);
      $overlay.fadeTo(600, 0.1, function() {
        $overlay.addClass('overlay-hide').removeClass('overlay-bg');
      });
      
      $badgeInfo.find('div.badge:visible').fadeOut(600, function() {
        $(this)
          .find('div.tab').css('left', '20px').end()
          .parent().hide();
      });
      return false;
    }
  });  
  //attach facebox
  // $('a[rel*=facebox]').facebox({
  //     opacity      : .7,
  //     overlay      : true,
  //     loadingImage : '/facebox/loading.gif',
  //     closeImage   : '/facebox/closelabel.gif',
  //     imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
  //     faceboxHtml  : '\
  //   <div id="facebox" style="display:none;"> \
  //     <div class="popup"> \
  //       <table> \
  //         <tbody> \
  //           <tr> \
  //             <td class="tl"/><td class="b"/><td class="tr"/> \
  //           </tr> \
  //           <tr> \
  //             <td class="b"/> \
  //             <td class="body"> \
  //               <div class="content"> \
  //               </div> \
  //             </td> \
  //             <td class="b"/> \
  //           </tr> \
  //           <tr> \
  //             <td class="bl"/><td class="b"/><td class="br"/> \
  //           </tr> \
  //         </tbody> \
  //       </table> \
  //     </div> \
  //   </div>'
  //   });
});