var w=450;
var h=300;
var posX = [0, w, 0, w];
var posY = [0, 0, h, h];
var startY = 20;
var startX = 0;
var marg = 1;

function scrivi() {
    var part1 = "scrivi";
    var part2 = "lamadiluce.com";
    var part3 = "Contattaci";
    return ('<a href="mai' + 'lto:' + part1 + '@' + part2 + '">')+(part3 + '</a>');
}

function cambia(me){
  	// calclulate large image's URL based on the thumbnail URL (flickr specific)
  	var url = $(me).attr("src").replace("_t", "");
  	// get handle to element that wraps the image and make it semitransparent
  	var wrap = $("#image_wrap"); // .fadeTo("fast", 0.5);
  	// 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").attr("src", url);
          var dtY = (600-img.height)/2;
          wrap.find('img').css("padding-top", dtY);
  	};
  	// begin loading the image
  	img.src = url;
};

function mostra(me) {
    var url = $(me).attr("src").replace("_t", "");
    var wrap = $("#foto");
    var img = new Image();
    img.onload = function() {
      wrap.find("img").attr("src", url);
      var dtY = (600-img.height)/2;
      wrap.find('img').css("padding-top", dtY);
      wrap.find('img').css("padding-bottom", dtY);
      //wrap.css("width", img.width);
      //wrap.css("height", img.height);
      //$("#overFoto").css("width", img.width);
      //$("#overFoto").css("height", img.height);
    };
    img.src = url;
    $("#overFoto").overlay().load();
};

// wait until document is fully scriptable
$(document).ready(function() {
    $("#info").html(scrivi() + " per informazioni.");
	startX = ($(window).width()-2*w)/2;
	startY = ($(window).height()-2*h)/2;
	$("#pannello1").css("top", startY-marg);
	$("#pannello1").css("left", startX-marg);
	$("#pannello2").css("top", startY-marg);
	$("#pannello2").css("left", startX+w+marg);
	$("#pannello3").css("top", startY+h+marg);
	$("#pannello3").css("left", startX-marg);
	$("#pannello4").css("top", startY+h+marg);
	$("#pannello4").css("left", startX+w+marg);
	// select #flowplanes and make it scrollable. use circular and navigator plugins
	$("#scroll1").scrollable({size: 1, clickable: false}).circular(); //.mousewheel(400);
	$("#scroll2").scrollable({size: 1, clickable: false}).circular(); //.mousewheel(400);
    /* Oltre ad essere scrollabile deve avere il lazyload
    $("#scroll2 img").lazyload({ container: $("#scroll2") }); */
	$("#scroll3").scrollable({size: 1, clickable: false}).circular(); //.mousewheel(400);
	$("#scroll4").scrollable({size: 1, clickable: false}).circular(); //.mousewheel(400);
    $("div.scrollable").scrollable({vertical:true, size:4}).circular();//mousewheel(400);
    $("a[rel]").overlay({
        expose: 'black',
		effect: 'apple',
		top: 'center',
        onBeforeLoad: function() {
            // grab wrapper element inside content
            // var wrap = this.getContent().find(".contentWrap");
            var wrap = this.getContent().find(".items");
            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        },
        onLoad: function() {
            $("div.scrollable").scrollable().reload();
            this.getContent().find(".items img").filter(":first").click();
        },
        onClose: function() {
            $("div.scrollable").scrollable().begin();
        }
    });
    $("#overFoto").overlay({
        expose: 'black',
        effect: 'apple',
        top: 'center'
    });
    /* $("img[title]").tooltip({tip:'.tooltip',effect:'fade',predelay:0,position:'bottom right',offset:[-5,-5]}); */
});