var viewzilla = {

	init: function() {
		this.images = [];
		$$('a[rel^=rentzilla]').each(function(link) {
			link.removeEvents('click').addEvent('click', this.click.bindWithEvent(this, link));
			this.images.push(link);
		}, this);
	},
	
	keyboardListener: function(event) {
		switch (event.key){
			case 'esc': this.close(); break;
			case 'left': this.prev(); break;
			case 'right': this.next();
		}
	},

	mouseListener: function(event) {
		event = new Event(event);
		if (event.wheel > 0) this.prev();
		else if (event.wheel < 0) this.next();
	},
	
	click: function(e, link) {
		e.stop();
		showOverlay();
		overlay.addEvent('click', this.close.bind(this));
		document.addEvent('keydown', this.keyboardListener.bindWithEvent(this));
//		document.addEvent('mousewheel', this.mouseListener.bindWithEvent(this));

		this.center = new Element('div', {'id':'viewzillaCenter', 'class':'viewzillaLoading'}).inject(overlay, 'after').setStyle('top', document.getScroll().y + 20 + 'px');
		this.prevLink = new Element('a', {'id':'viewzillaPrevLink', 'href':'javascript:void(0)'}).inject(this.center);
		this.nextLink = new Element('a', {'id':'viewzillaNextLink', 'href': 'javascript:void(0)'}).inject(this.center);
		this.image = new Element('div', {'id':'viewzillaImage'}).inject(this.center);
		this.bottom = new Element('div', {'id':'viewzillaBottom'}).inject(this.center);
		new Element('a', {'id':'viewzillaClose', 'href':'javascript:void(0)'}).inject(this.bottom).addEvent('click', this.close.bind(this));
		this.caption = new Element('div', {'id':'viewzillaCaption'}).inject(this.bottom);
		this.number = new Element('div', {'id':'viewzillaNumber'}).inject(this.bottom);
	 	new Element('div', {'styles': {'clear':'both'}}).inject(this.bottom);
		for(var i = 0; i < this.images.length; i++) {
			if(this.images[i].href == link.href) {
				this.activeImage = i;
				this.activeImageTitle = this.images[i].title;
				this.preload = new Image();
				this.preload.onload = this.open.bind(this);
				this.preload.src = this.images[i].href;
				break;
			}
		}
		return false;
	},

	open: function() {
		this.center.setStyles({
			'width': this.preload.width + 'px',
			'height': 'auto',
			'margin-left': -(this.preload.width / 2) + 'px',
			'top': document.getScroll().y + 20 + 'px'
		}).toggleClass('viewzillaLoading');
		this.image.setStyles({
			'background-image': 'url(' + this.preload.src + ')',
			'width': this.preload.width + 'px',
			'height': this.preload.height + 'px'
		});
		this.bottom.style.display = 'block';
		this.caption.set('html', this.activeImageTitle || '');
		if(this.images.length > 1) {
			this.number.set('html', 'Изображение <b>' + (this.activeImage + 1) + '</b> из <b>' + this.images.length + '</b>');
			this.prevLink.setStyles({'height':this.preload.height, 'display':'block'}).addEvent('click', this.prev.bind(this));
			this.nextLink.setStyles({'height':this.preload.height, 'display':'block'}).addEvent('click', this.next.bind(this));
		}
		this.preload = null;
		overlay.setStyle('height', document.getScrollSize().y);
		return false;
	},

	prev: function() {
		return (this.activeImage - 1 < 0) ? this.change(this.images.length - 1) : this.change(this.activeImage - 1);
//		return this.change(this.activeImage - 1);
	},

	next: function() {
		return (this.activeImage >= this.images.length - 1) ? this.change(0) : this.change(this.activeImage + 1);
//		return this.change(this.activeImage + 1);
	},

	change: function(imageNum) {
		if(imageNum < 0 || imageNum >= this.images.length) return false;
		this.image.setStyle('background', '');
		this.center.toggleClass('viewzillaLoading');
		this.nextLink.removeEvents();
		this.prevLink.removeEvents();
		this.prevLink.style.display = this.nextLink.style.display = this.bottom.style.display = 'none';
		this.activeImage = imageNum;
		this.activeImageTitle = this.images[imageNum].title;
		this.preload = new Image();
		this.preload.onload = this.open.bind(this);
		this.preload.src = this.images[imageNum].href;
		return false;
	},

	close: function() {
		hideOverlay();
		this.center.remove();
		document.removeEvents('keydown');
		return false;
	} 

};

window.addEvent('domready', viewzilla.init.bind(viewzilla));

function showOverlay() {
	overlay = new Element('div', {'id': 'overlay'}).inject(document.body, 'top');
	overlay.setStyle('height', document.getScrollSize().y);
	overlay.set('opacity', 0.5);
	if(window.ie) $$('select').set('visibility','hidden');
	return false;
}

function hideOverlay() {
	overlay.remove();
	document.removeEvents();
	if(window.ie) $$('select').setStyle('visibility','visible');
	return false;
}