(function($) {
	$.fn.thumbsPanelHome = function(options){
		
		var tempData;
		
		return this.each(function(){
					   
			var defaults = {
				rootPath: "",
				thumbWidth: 50,
				thumbHeight: 50,
				limit:15,
				zindex:0
			}
			
			var $tP = $.extend(defaults, options);
			$tP.obj = $(this);
			$tP.arrPositions = new Object();
			
			
			
			$.getJSON($tP.rootPath+$tP.jsonPath, function(data){
				
				if (!data.benfeitores) return false;
				
				$($tP.obj).find("#message").html(data.benfeitores[0].description+"<br><br>Por: <span>"+data.benfeitores[0].nome+"</span>");
				tempData = 0;
				for(i=0;i<3;i++){
					for(j=0;j<5;j++){
						$tP.arrPositions[tempData] = 	{	x: Math.floor(j*($tP.thumbWidth+1)),
												 			y: Math.floor(i*($tP.thumbHeight+1))};
						tempData++;
					}
				}
				
				for(i=0;i<data.benfeitores.length;i++){
					if(i<$tP.limit){
						
						tempData = {	_x:$tP.arrPositions[i].x, 
										_y:$tP.arrPositions[i].y, 
										nome:data.benfeitores[i].nome, 
										description:data.benfeitores[i].description
									};
						$("<a href='javascript:;' style='position:absolute; margin-top:"+$tP.arrPositions[i].y+"px;margin-left:"+$tP.arrPositions[i].x+"px'><img src='"+$tP.rootPath+"timthumb.php?src="+data.benfeitores[i].image+"&w="+$tP.thumbWidth+"&h="+$tP.thumbHeight+"&zc=1&q=100' alt='"+data.benfeitores[i].nome+"' /></a>").data("data",tempData).appendTo($($tP.obj).find("#painel"));
						
					}
				}
				
				$($tP.obj).find("#painel a").each(function(i){
					setTimeout(function(){animate($($tP.obj).find("#painel a:eq("+i+")"))},i*100);
					$(this).click(function(){changeMessage(this, $tP)});
					$(this).mouseover(function(){over(this, $tP)});
					$(this).mouseout(function(){out(this, $tP)});
				});
			});
		});
		
		function animate(_this){
			tempData = $(_this).data("data");
			$(_this).find("img").width(100).height(100).css({marginTop:-25, marginLeft:-25});
			$(_this).fadeIn();
			$(_this).find("img").animate({width:50,height:50,marginTop:0,marginLeft:0})
		}
		
		function changeMessage(_this, $tP){
			$($tP.obj).find("#painel a[class=actual]").removeClass("actual");
			$(_this).addClass("actual");
			tempData = $(_this).data("data");
			$tP.zindex++;
			$(_this).css("zIndex",$tP.zindex);
			$($tP.obj).find("#message").html(tempData.description+"<br><br>Por: <span>"+tempData.nome+"</span>")
		}
		
		function over(_this, $tP){
			tempData = $(_this).data("data");
			$tP.zindex++;
			$(_this).css("zIndex",$tP.zindex);
			$(_this).animate({
				width:60,
				height:60,
				marginTop:tempData._y-5,
				marginLeft:tempData._x-5
			
			},500, "easeOutElastic");
			$(_this).clearQueue();
			$(_this).find("img").animate({
				width:60,
				height:60,
			}, 500, "easeOutElastic");
			$(_this).find("img").clearQueue();
		}
		
		function out(_this, $tP){
			tempData = $(_this).data("data");
			$(_this).css("zIndex",$tP.zindex);
			$(_this).animate({
				width:50,
				height:50,
				marginTop:tempData._y,
				marginLeft:tempData._x
			
			},500, "easeOutElastic");
			$(_this).clearQueue();
			$(_this).find("img").animate({
				width:50,
				height:50
			}, 500, "easeOutElastic");
			$(_this).find("img").clearQueue();
		}
		
	};
})(jQuery);