/************************************************

Andranno in qualche modo configurati dei parametri iniziali come
- Colore bordi
- Colore riquadro informazioni
- Effetto apertura riquadro informazioni


Lo script andrą a trattare solamente gli elementi del div con id 'portfolio-pala', al suo interno gli elementi si dovranno presentare sotto questa forma:
"<a href='urldicollegamento'><img src='sorgenteImmagine' alt='descrizioneLavoro' title='nomeCliente'/></a>"

Lo script andrą ad eliminare tutte le foto e ricostruirą la struttura.

La struttua di ogni "elemento" sarą composta in questo modo:
-<div>
-<a><img /></a>
-<div class='descrizione'></div>
-</div>


*************************************************/



var settings = {

	thumbWidth : 221,
	thumbHeight : 112,
	borderColor : "#fff",
	
	
	bgOverlayColor : "#000",
	openEffect : "effect"
};



var arrayElementi=[];
	
$(function () {
	
	
	$("#listaLavori li").each(function (i,el) {
										   			
		/***************** Elimino la struttura esistente *******************/			
		arrayElementi[i] = new Array();
		arrayElementi[i]["href"] = $("a",el).attr("href")
		arrayElementi[i]["src"] = $("img",el).attr("src");
		arrayElementi[i]["descrizione"] = $("img",el).attr("alt");
		arrayElementi[i]["title"] =  $("a",el).attr("title");
		arrayElementi[i]["anno"] = $("img",el).attr("anno");
		arrayElementi[i]["index"] = "btn"+i;
		

		
		$("a",el).remove();

		/***************** Creo la nuova struttura  *******************/			


		$(el).append("<div class='pala-element' id='btn"+i+"'><img src='"+arrayElementi[i]["src"]+"' alt = '"+arrayElementi[i]["descrizione"]+"' width = '"+ settings.thumbWidth +"' height = '"+ settings.thumbHeight +"' /><div id ='pala-description'><h2>"+arrayElementi[i]["title"]+"</h2></div></div>");
		
		
		/************  Definisco i CSS per gli elementi appena creati ************/
		$(".pala-element",el).addClass(arrayElementi[i]["tipo"]);
		$(".pala-element",el).addClass("pala-btn");
		$(".pala-element",el).css({
					"width" : settings.thumbWidth,
					"height" : settings.thumbHeight				
								  });
		
		/*$(".pala-element img",el).css({
									  "border-color" : settings.borderColor,
									  "border-width" : "1px",
									  "border-style" : "solid"									  
									  });*/
		
		$("#pala-description",el).css({
									  "background-color" : settings.bgOverlayColor,
									  "width" : settings.thumbWidth-8,
									  "height" : settings.thumbHeight/3
									  });
		
		
		/************  Assegno le animazioni agli eventi e inizializzo il tutto ************/
		$("#pala-description",el).hide();
		
		
	});
	$(".pala-element").hover(function (){
									$("#pala-description",this).stop(true);
									$("#pala-description",this).css("display","block");
									$("#pala-description",this).fadeTo("slow",0.9);

								},
								function (){
									$("#pala-description",this).fadeTo("slow",0);
								});
	$(".pala-element").click(function (event)
											   {
												   event.preventDefault();
          										   event.stopPropagation();
												   id = $(this).attr('id');
												   id = id.substring(3,4);
												   window.open(arrayElementi[id]['href'], "_self");
											   });

	$("#pala-portfolio ul").wrap("<div style = 'clear:both;'></div>");
	

});