function gid(id) {
	return document.getElementById(id);
}

var setup = 0;

function setupInterface() {
	var width = (gid('body').offsetWidth - gid('spot-left').offsetWidth - gid('spot-right').offsetWidth - 80) / 5;
	if (width > 120) {
		width = 120;
	}

	$('#title').css("font-size", width + 'px');
	$('#title').css("padding-top", '5px');
	$('#title').children().css("font-size", width + 'px');

	if (!setup) {
		window.addEventListener('resize', setupInterface, true);
		setup++;
	}

	// recompute columns width
	var margin = 20; // pixel
	var column = Math.round((gid('main').offsetWidth - margin * 6) / 5);

	$('.una-colonna').css('width', column + 'px');
	$('.una-colonna').css('min-width', column + 'px');
	$('.una-colonna').css('max-width', column + 'px');

	$('.due-colonne').css('width', (2 * column + margin) + 'px');
	$('.due-colonne').css('min-width', (2 * column + margin) + 'px');
	$('.due-colonne').css('max-width', (2 * column + margin) + 'px');

	$('.tre-colonne').css('width', (3 * column + 2 * margin) + 'px');
	$('.tre-colonne').css('min-width', (3 * column + 2 * margin) + 'px');
	$('.tre-colonne').css('max-width', (3 * column + 2 * margin) + 'px');

	$('.quattro-colonne').css('width', (4 * column + 3 * margin) + 'px');
	$('.quattro-colonne').css('min-width', (4 * column + 3 * margin) + 'px');
	$('.quattro-colonne').css('max-width', (4 * column + 3 * margin) + 'px');

	$('.cinque-colonne').css('width', (5 * column + 4 * margin) + 'px');
	$('.cinque-colonne').css('min-width', (5 * column + 4 * margin) + 'px');
	$('.cinque-colonne').css('max-width', (5 * column + 4 * margin) + 'px');

	$('.in-seconda').css('left', (column + 2 * margin + gid('sfondo').offsetLeft) + 'px');
	$('.in-terza').css('left', (2 * column + 3 * margin + gid('sfondo').offsetLeft) + 'px');
	$('.in-quarta').css('left', (3 * column + 4 * margin + gid('sfondo').offsetLeft) + 'px');
	$('.in-quinta').css('left', (4 * column + 5 * margin + gid('sfondo').offsetLeft) + 'px');

	$('.una-colonna, .due-colonne, .tre-colonne, .quattro-colonne, .cinque-colonne').css('position', 'absolute');
	$('.una-colonna, .due-colonne, .tre-colonne, .quattro-colonne, .cinque-colonne').css('top', (gid('main').offsetTop + 20) + 'px');

	var newHeight = 0;
	var c = 0;
	for (; c < gid('colonne').childNodes.length; c++) {
		if ( gid('colonne').childNodes[c].offsetHeight > newHeight ) {
			newHeight = gid('colonne').childNodes[c].offsetHeight;
		}
	}

	gid('colonne').style.height = newHeight + 'px';
	gid('colonne').style.minHeight = newHeight + 'px';
}

function popupImage(src, text) {
	// preloading the image
	var i = new Image();
	i.src = src;

	var l = Math.ceil(gid('main').offsetWidth/2 - i.width/2) + 25 * 2;
	var t = Math.ceil(window.innerHeight/2 - i.height/2) - 22 * 2;

	var img = document.createElement('img');
	img.style.marginLeft = "auto";
	img.style.marginRight = "auto";
	img.style.background = "#fff";
	img.style.padding = "10px";
	img.style.border = "1px solid black";
	img.alt = "Click here to close image";
	img.addEventListener('mousedown', closeShade, true);
	img.src = src;
	img.id = 'framed-foto';

	var shade = document.createElement('div');
	shade.style.position = 'fixed';
	shade.style.top = 0;
	shade.style.left = 0;
	shade.style.background = "black";
	shade.style.opacity = 0.75;
	shade.style.width = "100%";
	shade.style.height = "100%";
	shade.style.zIndex = 10;
	shade.id = "shade";

	var frame = document.createElement('div');
	frame.style.background = "#fff";
	frame.style.padding = "15px";
	frame.style.width = img.offsetWidth + 30 * 4;
	frame.style.minWidth = img.offsetWidth + 30 * 4;
	frame.style.zIndex = 10;
	frame.appendChild(img);

	frame.style.position = 'fixed';
	frame.style.left = l + 'px';
	frame.style.top = t + 'px';
	frame.style.zIndex = 20;
	frame.style.display = "inline";
	frame.style.opacity = 1;
	frame.id = "frame";

	gid('main').appendChild(shade);
	gid('main').appendChild(frame);

	var dida = document.createElement('div');
	dida.style.display = 'block';
	dida.style.fontStyle = 'italic';
	dida.style.paddingLeft = "5px";
	dida.style.padding = "10px";
	if (dida) {
		dida.innerHTML = text + '<br><span style="font-size: 10px">Clicca sull\'immagine per chiuderla</span>';
		frame.appendChild(dida);
	} else {
		alert('cant create text node');
	}

	$('#frame').hide();
	$('#frame').fadeIn('slow');
}

function closeShade() {
	var shade = gid('shade');
	if (shade) {
		$('#frame').fadeOut('slow');
		gid('main').removeChild(shade);
		gid('main').removeChild(gid('frame'));
	}
}

$(document).ready(function() {
	setupInterface();
	setTimeout('setupInterface();', 1000);
});