var porte = {
    "items": [
        {"value": "1",
		 "description": "La prima porta",
		 "big": "Porte.0015",
		 "label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu fringilla erat.</p><p>Pellentesque vel urna augue, elementum congue purus. Curabitur gravida, elit vel gravida bibendum, odio leo adipiscing odio, molestie ultrices nulla purus eget est. Maecenas quis urna eu erat dictum egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue dolor, molestie congue suscipit ac, gravida ut risus. Sed rutrum libero id diam pellentesque a pharetra nibh ullamcorper.</p><p>Donec a lacus tellus, et laoreet ligula. Vestibulum gravida est sit amet massa accumsan quis bibendum lacus dignissim. Proin nisi nulla, aliquam in pharetra ut, fermentum id tellus.",
		 "classe": "Prima A"},
        {"value": "2", "description":
 		"La seconda porta",
		"big": "Porte.0014",
		 "label": "",
		 "classe": ""},
        {"value": "3", "description":
	 	"La terza porta",
		"big": "Porte.0013",
		 "label": "",
		 "classe": ""},
        {"value": "4", "description":
	 	"La quarta porta",
		"big": "Porte.0012",
		 "label": "",
		 "classe": ""},
        {"value": "5", "description":
		 "La quinta porta",
		 "big": "Porte.0011",
		 "label": "",
		 "classe": ""},
        {"value": "6", "description":
		 "La sesta porta",
		 "big": "Porte.0010",
		 "label": "",
		 "classe": ""},
        {"value": "7", "description":
		 "La settima porta",
		 "big": "Porte.0009",
		 "label": "",
		 "classe": ""},
        {"value": "8", "description":
		 "L'ottava porta",
		 "big": "Porte.0008",
		 "label": "",
		 "classe": ""},
        {"value": "9", "description":
		 "La nona porta",
		 "big": "Porte.0007",
		 "label": "",
		 "classe": ""},
        {"value": "10", "description":
	 	 "La decima porta",
		 "big": "Porte.0006",
		 "label": "",
		 "classe": ""},
        {"value": "11", "description":
         "La undicesima porta",
		 "big": "Porte.0005",
		 "label": "",
		 "classe": ""},
        {"value": "12", "description":
		 "La dodicesima porta",
		 "big": "Porte.0004",
		 "label": "",
		 "classe": ""},
        {"value": "13", "description":
		 "La tredicesima porta",
		 "big": "Porte.0003",
		 "label": "",
		 "classe": ""},
        {"value": "14", "description":
		 "La quattordicesima porta",
		 "big": "Porte.0002",
		 "label": "",
		 "classe": ""},
        {"value": "15",
		 "description": "La qindicesima porta",
		 "big": "Porte.0001",
		 "label": "",
		 "classe": ""}
    ]
}

var currentOffset = 0
var index = 0
var currentIndex = 0

function addPreview() {
	var porta = porte['items'][currentIndex]
	var myImg = new Element('img', {
		'src': 'big/' + porta['big'] + '.jpg',
		'class': 'preview',
		'title': porta['description'],
		'alt': porta['description'],
		'id': 'preview-img',
		'styles': {'opacity': '0' }
	})
	$('preview').adopt(myImg)
	myImg.fade('in')
	$('text').set('html', '<h1>' + porta['description'] + '</h1>', '<p>' + porta['label'] + '</p>', '<address><strong>Classe:</strong> ' + porta['classe'] + '</address>');
	$('text').fade('in')
}

function deletePreview(showIt) {
	var items = $$('#preview img')
	if (items.length == 1) {
		var myFx = new Fx.Tween(items[0]);
		myFx.onComplete = function() {
			items[0].destroy()
			deletePreview(showIt)
		};
		myFx.start('opacity', '0');
		$('text').fade('out')
	} else if (showIt) {
		addPreview()
	}
}

function showImg(i) {
	currentIndex = i
	deletePreview(true)
}

function zoomImg(event) {
	event.stop()
	showImg(this.id.replace(/show-preview-/g, '') - 1)
}

function addElements() {
	var porta = porte['items'][currentOffset + index]
	if (!porta) {
		$('right').fade('out')
		index = 0
		showImg(currentOffset)
		return
	}
	var myAnchor = new Element('a', {
		'href': '#',
		'id': 'show-preview-' + porta['value'],
		'styles': {'display': 'none', 'float': 'left' }
	})
	var myImg = new Element('img', {
		'src': 'small/' + porta['value'] + '.jpg',
		'class': 'preview',
		'title': porta['description'],
		'alt': porta['description'],
		'id': 'preview-' + porta['value']
	})
	myAnchor.adopt(myImg)
	myAnchor.addEvent('click', zoomImg)
	$('container').adopt(myAnchor)
	myAnchor.reveal({'duration': 100, 'display': 'inline', 'onComplete': function() {
		if (index < 3) {
			index++
			addElements()
		} else {
			index = 0
			showImg(currentOffset)
		}
	}})
}

function deleteItem() {
	var items = $$('#container a')
	if (items.length > 0) {
		items[items.length - 1].nix({'duration': '50', 'onComplete': deleteItem}, true)
	} else {
		addElements()
	}
}

function updateItems() {
	deletePreview(false)
	deleteItem()
}

function goRight(event) {
	event.stop()
	if (currentOffset == 0) {
		$('left').fade('in')
	}
	currentOffset+=4
	updateItems()
}

function goLeft(event) {
	event.stop()
	currentOffset-=4
	if (currentOffset == 0) {
		$('left').fade('out')
	}
	$('right').fade('in')
	updateItems()
}

function preloadImages() {
	var myImg = new Element('img', {
		'src': 'img/loading.gif',
		'title': 'loading...',
		'alt': 'loading...',
		'id': 'loader'
	})
	$('preview').adopt(myImg)
	
	for (var i = 0; i < porte['items'].length; i++) {
		var porta = porte['items'][i]
		Preloader.add('big/' + porta['big'] + '.jpg');
		Preloader.add('small/' + porta['value'] + '.jpg');
	}
	Preloader.onFinish(function() {
		var myFx = new Fx.Tween('loader');
		myFx.onComplete = function() {
			$('right').addEvent('click', goRight);
			$('left').addEvent('click', goLeft);
			$('left').fade('out')
			$('loader').destroy()
			updateItems()
		};
		myFx.start('opacity', '0');
	});
	
	Preloader.load();
}

window.addEvent('domready', function() {
	preloadImages()
})