var LightShow = {
	config: {
		padding: 10,
		initWidth: 100,
		initHeight: 100,
		margin: 50,
		preload: true
	},
	_all: [],
	_active: [],
	_actual: 0,
	_full: false,
	_sizes: null,
	init: function() {
		if(!I('xf_lightshow')) {
			// Trovo e inizializzo i link di lightshow
			var a = T('a'), l = a.length, i, j = 0, o, h, r, t, c = LightShow.config,
				iw = c.initWidth, ih = c.initHeight, sp = c.padding, dp = sp * 2,
				p = Env.viewCenter(iw + dp, ih + dp);

			for(i = 0; i < l; i++) {
				o = a[i];
				h = o.getAttribute('href');
				r = o.getAttribute('rel');
				if((r && h && (r.match(/^lightshow/))) || (h && h.match(/\.(jpg|jpeg|gif|png|bmp)$/i))) {
					Event.add(o, 'onclick', function(e) {
						LightShow.show(this);
						Event.stop(e);
						return false;
					});
					t = o.getAttribute('title');
					LightShow._all[j++] = [h, t, r];
				}
			}

			// Inizializzo il viewport
			ViewPort.init();
			Load.css({
				url: './xframe/lightshow/style.css',
				append: true
			});

			// Creo gli elementi per il lightshow
			Dom.create(['div',
				{
					id: 'xf_lightshow',
					style: {
						display: 'none',
						position: 'absolute',
						left: p[0] + 'px',
						top: p[1] + 'px',
						zIndex: '26',
						padding: sp + 'px'
					}
				},
				['div',
					{
						id: 'xf_lightshow_content',
						style: {
							position: 'relative'
						}
					},
					['div',
						{
							id: 'xf_lightshow_image',
							style: {
								width: iw + 'px',
								height: ih + 'px'
							}
						}
					],
					['div',
						{
							id: 'xf_lightshow_loading',
							style: {
								width: iw + 'px',
								height: ih + 'px',
								position: 'absolute',
								top: '0px',
								left: '0px',
								zIndex: '28'
							}
						}
					],
					['div', {
						id: 'xf_lightshow_title',
						style: {
							width: iw + 'px',
							left: (-sp) + 'px',
							top: ih + 'px',
							zIndex: '27',
							padding: sp + 'px',
							opacity: 0
						}
					}, ' ']
				],
				['div',
					{
						id: 'xf_lightshow_close',
						onmouseover: function() {
							Morph.set({
								element: this,
								styles: {
									opacity: ['actual', 1]
								},
								time: 0.3
							});
						},
						onmouseout: function() {
							Morph.set({
								element: this,
								styles: {
									opacity: ['actual', 'original']
								},
								time: 0.3
							});
						},
						style: {
							opacity: 0.5
						},
						onclick: function() {
							ViewPort.close();
						}
					}, ['span', 'Close']],
				['div',
					{
						id: 'xf_lightshow_prev',
						onmouseover: function() {
							Morph.set({
								element: this,
								styles: {
									opacity: ['actual', 1]
								},
								time: 0.3
							});
						},
						onmouseout: function() {
							Morph.set({
								element: this,
								styles: {
									opacity: ['actual', 'original']
								},
								time: 0.3
							});
						},
						style: {
							opacity: 0.5,
							display: 'none'
						}
					}, ['span', 'Prev']],
				['div',
					{
						id: 'xf_lightshow_next',
						onmouseover: function() {
							Morph.set({
								element: this,
								styles: {
									opacity: ['actual', 1]
								},
								time: 0.3
							});
						},
						onmouseout: function() {
							Morph.set({
								element: this,
								styles: {
									opacity: ['actual', 'original']
								},
								time: 0.3
							});
						},
						style: {
							opacity: 0.5,
							display: 'none'
						}
					}, ['span', 'Next']],
				['div',
					{
						id: 'xf_lightshow_full',
						onmouseover: function() {
							Morph.set({
								element: this,
								styles: {
									opacity: ['actual', 1]
								},
								time: 0.3
							});
						},
						onmouseout: function() {
							Morph.set({
								element: this,
								styles: {
									opacity: ['actual', 'original']
								},
								time: 0.3
							});
						},
						style: {
							opacity: 0.5,
							display: 'none'
						}
					}, ['span', 'Full']]
			], Dom.body());

			ViewPort.addCloseEvent(function() {
				LightShow.hide();
			});

			// Eventi da tastiera

			Event.add(document, 'keydown', function(e) {
				if(I('xf_lightshow').style.display == 'block') {
					var k = Event.getKey(e), l = k.key.toLowerCase(), c = Event.checkKey(k),
					i = LightShow._actual, a = LightShow._active, s = LightShow._sizes, n;
					if(c == 'Escape') ViewPort.close();
					else if(l == 'z' || l == 'p') {
						i -= 1;
						if(a[i]) LightShow.changeImage(i);
					} else if(l == 'x' || l == 'n') {
						i += 1;
						if(a[i]) LightShow.changeImage(i);
					} else if((l == 'c' || l == 'f') && LightShow._sizes) {
						if(s) LightShow.fullSize();
					}
				}
			});
		}
	},
	show: function(o) {
		var r = o.getAttribute('rel'), h = o.getAttribute('href'), t = o.getAttribute('title'), n = 0;
		if(r == 'lightshow') {
			LightShow._active = [[h, t]];
		} else {
			var a = LightShow._all, l = a.length, i, e, k, c = [], j = 0;
			for(i = 0; i < l; i++) {
				e = a[i];
				// Se il rel è uguale a quello attuale, aggiungo i dati dell'immagine
				if(e[2] == r) {
					c[j] = e;
					// Se l'href è uguale a quello attuale mi salvo la posizione dell'immagine attuale
					if(e[0] == h) n = j;
					j++;
				}
			}
			LightShow._active = c;
		}

		if(false) {
			Morph.set({
				element: 'xf_lightshow',
				styles: {
					opacity: [0, 1],
					display: 'block'
				},
				time: 0.3,
				onfinish: function() {
					LightShow.changeImage(n);
				}
			});
		} else {
			I('xf_lightshow').style.display = 'block';
			LightShow.changeImage(n);
		}
		ViewPort.open();
	},
	hide: function() {

		if(false) {
			Morph.set({
				element: 'xf_lightshow',
				styles: {
					opacity: ['actual', 0],
					display: ['block', 'none']
				},
				time: 0.3
			});
		} else {
			I('xf_lightshow').style.display = 'none';
		}
		LightShow.reset();
	},
	reset: function() {
		var bs = I('xf_lightshow').style, is = I('xf_lightshow_image').style,
			ls = I('xf_lightshow_loading').style, ts = I('xf_lightshow_title').style,
			ps = I('xf_lightshow_prev').style, ns = I('xf_lightshow_next').style,
			zs = I('xf_lightshow_full').style,
			c = LightShow.config, w = 'width', h = 'height', d = 'display',
			iw = c.initWidth, ih = c.initHeight, sp = c.padding, dp = sp * 2,
			p = Env.viewCenter(iw + dp, ih + dp);

			bs['left'] = p[0] + 'px';
			bs['top'] = p[1] + 'px';
			bs[w] = is[w] = ls[w] = ts[w] = iw + 'px';
			bs[h] = is[h] = ls[h] = ts['top'] = ih + 'px';
			is[d] = ps[d] = ns[d] = zs[d] = 'none';
			ls['display'] = 'block';

	},
	changeImage: function(i) {
		var l = LightShow._active, a = l[i], h = a[0], t = a[1];

		// Con animazioni
		if(true) {
			Morph.set({
				element: 'xf_lightshow_image',
				styles: {
					opacity: ['actual', 0]
				},
				time: 0.3,
				onchange: function(s) {
					Dom.setOpacity('xf_lightshow_title', s.opacity);
				},
				onfinish: function() {
					I('xf_lightshow_loading').style.display = 'block';
					Load.image({
						url: h,
						onload: function() {
							LightShow.showImage(this, t);
						}
					});
				}
			});
		// Senza animazioni
		} else {
			I('xf_lightshow_title').style.display = 'none';
			I('xf_lightshow_loading').style.display = 'block';
			Load.image({
				url: h,
				onload: function() {
					LightShow.showImage(this, t);
				}
			});
		}

		var pl = LightShow.config.preload, p = l[i - 1], n = l[i + 1],
		po = I('xf_lightshow_prev'), no = I('xf_lightshow_next'), ps = po.style, ns = no.style;
		if(p) {
			ps.display = 'block';
			po.onclick = function() { LightShow.changeImage(i - 1); };
			if(pl) Load.image({url: p[0]});
		} else ps.display = 'none';
		if(n) {
			ns.display = 'block';
			no.onclick = function() { LightShow.changeImage(i + 1); };
			if(pl) Load.image({url: n[0]});
		} else ns.display = 'none';
		LightShow._actual = i;
	},
	showImage: function(i, it) {
		var c = LightShow.config, mp = c.padding, dp = mp * 2, mm = c.margin, dm = mm * 2,
			w = i.width, h = i.height, ow = w, oh = h,
			cs = Env.clientSizes(), jw = cs[0] - dp - dm, jh = cs[1] - dp - dm, is = i.style;

		if(!it) it = '';

		// Controllo la larghezza dell'immagine rispetto alla larghezza della visuale
		if(w > jw) {
			h = (jw * h) / w;
			w = jw;
			if(h > jh) {
				w = (jh * w) / h;
				h = jh;
			}
		} else if(h > jh) {
			w = (jh * w) / h;
			h = jh;
			if(w > jw) {
				h = (jw * h) / w;
				w = jw;
			}
		}

		var fo = I('xf_lightshow_full'), fs = fo.style;
		if(w != ow || h != oh) {
			fs.display = 'block';
			LightShow._sizes = [ow, oh, w, h];
			fo.onclick = function() {
				LightShow.fullSize();
			};
		} else {
			fs.display = 'none';
			LightShow._sizes = null;
		}

		is.width = w + 'px';
		is.height = h + 'px';

		// Controllo la pozizione finale del box
		var p = Env.viewCenter((w + dp), (h + dp)), l = p[0], t = p[1];
		if(l < 0) l = 0;
		if(t < 0) t = 0;

		// Pulisco il titolo
		it = it.trim();
		// Inserisco la nuova immagine e il nuovo titolo
		Dom.replaceChilds('xf_lightshow_title', it);
		Dom.replaceChilds('xf_lightshow_image', i);

		var ls = I('xf_lightshow_loading').style, is = I('xf_lightshow_image').style, ts = I('xf_lightshow_title').style;
		ls.display = 'none';
		is.display = 'block';
		if(it) ts.display = 'block';

		// Animazione
		Morph.set({
			element: 'xf_lightshow',
			styles: {
				width: ['px', 'actual', w],
				height: ['px', 'actual', h],
				left: ['px', 'actual', l],
				top: ['px', 'actual', t]
			},
			time: 0.3,
			onchange: function(s) {
				var fw = s.width, fh = s.height;
				if(fw) ls.width = is.width = ts.width = fw;
				if(fh) ls.height = is.height = ts.top = fh;
			},
			onfinish: function() {
				ViewPort.setSizes();
			}
		},
		{
			element: 'xf_lightshow_image',
			styles: {
				opacity: [0, 1]
			},
			time: 0.3,
			onchange: function(s) {
				Dom.setOpacity('xf_lightshow_title', s.opacity);
			}
		});

	},
	fullSize: function() {
		var f = LightShow._full, s = LightShow._sizes, w = (f) ? s[2] : s[0], h = (f) ? s[3] : s[1];
		LightShow._full = !f;

		// Controllo la pozizione finale del box
		var c = LightShow.config, mp = c.padding, dp = mp * 2,
		p = Env.viewCenter((w + dp), (h + dp)), l = p[0], t = p[1];
		if(l < 0) l = 0;
		if(t < 0) t = 0;

		var ls = I('xf_lightshow_loading').style, is = I('xf_lightshow_image').style, ts = I('xf_lightshow_title').style,
			im = T('img', 'xf_lightshow_image')[0].style;

		// Animazione
		Morph.set({
			element: 'xf_lightshow',
			styles: {
				width: ['px', 'actual', w],
				height: ['px', 'actual', h],
				left: ['px', 'actual', l],
				top: ['px', 'actual', t]
			},
			time: 0.3,
			onchange: function(s) {
				var fw = s.width, fh = s.height;
				if(fw) ls.width = is.width = ts.width = im.width = fw;
				if(fh) ls.height = is.height = ts.top = im.height = fh;
			},
			onfinish: function() {
				ViewPort.setSizes();
			}
		});
	}
};