google.load('jquery', '1');
google.setOnLoadCallback(function() {
  $(document).ready(function() {    
    var showTweets = function(uname) {
      /*
      $('a.av')
        .attr('href', 'http://www.twitter.com/'+uname)
        .find('img').attr('src', 'http://api.twitter.com/1/users/profile_image/'+uname);
      */
      $('.accounts li').removeClass('active');
      $('.accounts li[title="'+uname+'"]').eq(0).addClass('active');
      getTwitters('tweet', {
        id: uname,
        count: 5,
        enableLinks: true,
        ignoreReplies: true,
        clearContents: true,
        template: '<div class="text">%text%</div><div class="below"><a class="time" href="http://twitter.com/%user_screen_name%/statuses/%id%/" target="_blank">%time%</a><a class="button" href="http://www.twitter.com/?status=@%user_screen_name%&in_reply_to_status_id=%id%&in_reply_to=%user_screen_name%">Reply</a></div>'
      });
    };
    showTweets('bp_');
    $('.accounts li').click(function(e) {
      e.preventDefault();
      showTweets($(this).text());
    });
    $('.preview').hover(function() {
      $(this).addClass('previewHover');
    }, function() {
      $(this).removeClass('previewHover');
    });
    $('.navi li').click(function(e) {
      e.preventDefault();
      if (!$(this).hasClass('active')) {
        $('.navi li').removeClass('active');
        $(this).addClass('active');
        $(this).fadeIn();
        switch($(this).index()) {
        case 0:
          $('.content0').show().css({opacity:0}).animate({top:100,opacity:1});
          $('.content1, .content2, .content3').animate({top:110,opacity:0}, function() { $(this).hide(); });
          break;
        case 1:
          $('.content0').animate({top:90,opacity:0}, function() { $(this).hide(); });
          $('.content1').show().css({opacity:0}).animate({top:100,opacity:1});
          $('.content2, .content3').animate({top:110,opacity:0}, function() { $(this).hide(); });
          break;
        case 2:
          $('.content0, .content1').animate({top:90,opacity:0}, function() { $(this).hide(); });
          $('.content2').show().css({opacity:0}).animate({top:100,opacity:1});
          $('.content3').animate({top:110,opacity:0}, function() { $(this).hide(); });
          break;
        case 3:
          $('.content0, .content1, .content2').animate({top:90,opacity:0}, function() { $(this).hide(); });
          $('.content3').show().css({opacity:0}).animate({top:100,opacity:1});
          break;
        }
      }
    });
  });
});