pictocalypse.js

$(function () {
  var Pict = {
    api: {
      url:'http://ajax.googleapis.com/ajax/services/search/images'
    },
    atCache:  0,
    cache:    [], 
    clear:    function ( fn ) {
      this.cache.length  = 0;
      if ( fn && $.isFunction(fn) ) {
        fn();
      }
    }, 
    show:   function () {
      if ( this.atCache === this.cache.length ) {
        this.atCache = 0;
        
        this.clear(function () {
          this.fetch();
        });
      }
      else {

        var $fig  = $('#pict-frame'), 
            $img  = $('#pict-img'), 
            $obj  = Pict.cache[Pict.atCache];
        
        $('section').width($obj.width);
        
        $('header p a:last').attr({
          href: $obj.originalContextUrl
        })
        .text($obj.contentNoFormatting);
        
        $img.attr({
          src: $obj.unescapedUrl
        })
        .bind('load', function (event) {
          
          var mLeft = $('#container').width() / 2 - ( $img.width() / 2 );

          $fig.css({
            marginLeft: mLeft + 'px'
          })            
          .animate({
            opacity: 1
          }, 
          1000, 
          function() {
            setTimeout(function () {

              $fig.animate({
                opacity: 0
              }, 
              1000, 
              function () {
                
                $img.unbind(event);
              
                Pict.atCache++;
                
                if ( Pict.cache[Pict.atCache] && $.isPlainObject(Pict.cache[Pict.atCache]) ) {
                  Pict.show();
                }
                else {
                  Pict.clear(function () {
                    Pict.fetch();
                  });
                }
              });
            }, 5000);
          });      
        });
      }        
    },
    fetch:  function () {
      var thisp = this;
      
      $.ajax({
        url:  Pict.api.url,
        data: { rsz: 'small', start: Math.floor((Math.random()*50)+1) , v: '1.0', q: $term.val() }, 
        success: function (data) {
          Pict.atCache = 0;
          Pict.cache   = data.responseData.results;
          Pict.show();
        },
        dataType: 'jsonp'      
      });    
    }
  }, 
  $term = $('#term')
  ;    
  
  $('#container,section')
    .width($(window).width());

  $term.bind('keyup', function (e) {
      if ( e.which === 13 ) {
        Pict.clear(function () {
          Pict.fetch();
        });
      }
    })
    .trigger('focus');
    
  Pict.fetch();      
});