/*
 
    jQuery plugin to retrieve images from Google+ and display with hover effect.
    Author: Dan Aktinson (www.danatkinson.com)
	Usage:
	-----

	$(document).ready(function() {
		$('#myContainer').plusPics({
			userId: 'your_user_id',
			albumId: 'the_album_id',
			numImages: 3,
			title: 'Latest photos'
		});
	});
	
*/

(function($){
  $.fn.plusPics = function(options) {  
    options = $.extend( {
    	'url' : "http://picasaweb.google.com/data/feed/api/user/"+options.userId+"/albumid/"+options.albumId+"?alt=json",
    	'title' : 'Images'
    }, options);

    return this.each(function() {  
    	var cont = $(this);
    	$.getJSON(options.url+'&max-results='+options.numImages, function(data) {
  		  var items = [];
  		  $.each(data.feed.entry, function(i,item) {
  			url = item.media$group.media$content[0].url;
  			title = item.media$group.media$title.$t;
  		    items.push('<li class="pluspic-'+i+'"><a title="'+title+'"><span><img src="' +url+ '" alt="'+title+'"/></span><div class="clear"></div></a></li>');
  		  }); 
  		$('<h3/>', {
  		    html: options.title
  		  }).appendTo(cont);
  		  $('<ul/>', {
  		    'class': 'pluspics',
  		    html: items.join('')+'<div class="clear"></div>'
  		  }).appendTo(cont);
  		  $($(cont).children('.pluspics').children('li').children('a').children('span').children('img')).load(function(){
  			   css = {
  					   "margin-left": '-' + ( parseInt( $(this).width() ) / 2 ) + 'px',
  					   "margin-top": '-' + ( parseInt( $(this).height() ) / 2 ) + 'px'
  					};
  			   $(this).css(css);
  			   $(this).fadeIn(3000, function() {
    				 
  			}) 	 
  			$(this).parent().hover(function() {
			    
			    var img = $(this).children('img');
			    $(this).css({ "z-index": "1000"});
			    $(this).addClass("hover");
			    $(this).stop().animate({
			        width: img.width(),
			        height: img.height(),
			        left: '-'+(parseInt(img.width()-$(this).width())/2)+'px',
                    top: '-'+(parseInt(img.height()-$(this).height())/2)+'px'
			      }, 400, 'swing', function() {
			    	//ani complete  
			      });
			  },
			  function() {
			    $(this).removeClass("hover");
			    $(this).stop().css({ left: "", top: "", width: "", height: "", "z-index": "0"});
			  });
	      }); 			   
  		});
    });

  };
})(jQuery);