// execute your scripts when the DOM is ready. this is a good habit
$(function() {  
	// initialize scrollable
	window.api = $("div.scrollable").scrollable({size: 6, api: true });
	
});
$(function() {
$(".items img").click(function() {
	$("#caption").animate({ 
    height: "0px",
	marginTop: "561px",
    opacity: 0.6
 	 }, 500 );
	
	// calclulate large image's URL based on the thumbnail URL (flickr specific)
	var url = $(this).attr("src").replace("_t", "");
	url = url.replace("small/","");
	var id = $(this).attr("id").replace("a", "");
	//var id = $(this).attr("id").replace("/page.php", "");
	var path = $("#var"+id).val();
	var titolo = $(this).attr("title").toUpperCase();
	var sottotitolo = $(this).attr("alt");
	
	// get handle to element that wraps the image and make it semitransparent
	var wrap = $("#image_wrap").fadeTo("medium", 0.5, function () {
	$("#caption").animate({ 
    height: "120px",
	marginTop: "441px",
    opacity: 0.6
 	 }, 500 );
	
	$("p.caption").html("<a href=\"page.php?"+path+"\">"+titolo+"<br />"+sottotitolo+" <img id=\"arrow\" src=\"../images/arrow.png\" alt=\"vai al dettaglio\" style=\"border:none\" class=\"absmiddle\" /></a>");
	//alert("<h2>"+titolo+"</h2>" + "<p>"+ sottotitolo+"</p>");

	});
	// the large image from flickr
	var img = new Image();
	// call this function after it's loaded
	img.onload = function() {
		// make wrapper fully visible
		wrap.fadeTo("fast", 1);
		// change the image
		wrap.find("img.photo").attr("src", url);
	};

	// begin loading the image from flickr
	img.src = url;
	

// when page loads simulate a "click" on the first image
}).filter(":first").click();
});