var options = new Array();

function lightbox() { }

lightbox.prototype = {
	
	self: this,
	overlay: new Element('div', { 'id': 'presslightbox-overlay' }).hide(),
	container: new Element('div', { 'id': 'presslightbox-container' }).hide(),
	close: new Element('a', { 'href': '#' }).addClassName('close'),
	cover: new Element('div').addClassName('cover'),
	name: new Element('div').addClassName('name'),
	date: new Element('div').addClassName('date'),
	mainImageContainer: new Element('div', { 'id': 'presslightbox-mainImageContainer' }),
	mainImage: new Element('div'),
	
	thumbsContainer: new Element('table', { 'id': 'presslightbox-thumbsContainer' }),
	
	btnNext: new Element('a', { href: '#', title: 'Next' }).update('Next').addClassName('btnNext'),
	btnPrev: new Element('a', { href: '#', title: 'Previous' }).update('Previous').addClassName('btnPrev'),
	
	currentOption: null,
	currentImage: 0,
	body: null,
	
	create: function() {
		
		this.body = $$('body')[0];
		this.body.insert({ bottom: this.overlay }).insert({ bottom: this.container });
		
		this.mainImageContainer.insert(this.btnPrev).insert(this.btnNext).insert(this.mainImage);
		
		this._adjustSize();
		this.container.insert(this.close).insert(new Element('div').update('UNIONBAY in the Press').addClassName('heading')).insert(this.cover).insert(this.name).insert(this.date).insert(this.mainImageContainer).insert(this.thumbsContainer);
		
		this.btnNext.observe('click', this.nextImage.bindAsEventListener(this));
		this.btnPrev.observe('click', this.prevImage.bindAsEventListener(this));
		
		this.close.update('Close').observe('click', function(e) { Event.stop(e); press_lightbox.hide() });
	},

	show: function (option) {
		//this.body.setStyle({ overflow: 'hidden' });
		this._adjustSize();
		var self = this;
		this.currentOption = option;
		this.currentImage = 1;
		this._setupInfo();
		Effect.Appear(this.overlay, { 
					  duration: 1.0, 
					  to: 0.9, 
					  afterFinish: function() { 
												self.container.show();
												self._loadImage(0);
												}
									});
	},

	hide: function () {
		this.container.hide();
		this.mainImage.update();
		this.thumbsContainer.update();
		var self = this;
		this.currentOption = null;
		//, afterFinish: function() { self.body.setStyle({ overflow: 'auto' }); }
		Effect.Fade(this.overlay, { 
					duration: 1.0
					});
		
	},
	
	nextImage: function(ev) {
		if (ev) ev.stop();
		if ((this.currentImage+1) == this.currentOption.images.length) return;
		this.mainImage.update();
		this._loadImage(this.currentImage+1);
	},
	
	prevImage: function(ev) {
		if (ev) ev.stop();
		if ((this.currentImage-1) < 0) return;
		this.mainImage.update();
		this._loadImage(this.currentImage-1);
	},
	
	_setupInfo: function() {
		this.cover.update(new Element('span').setStyle('background-image: url('+this.currentOption.thumb+')'));
		this.name.update(this.currentOption.name);
		this.date.update(this.currentOption.date);
		
		var tr = new Element('tr');
		
		this.thumbsContainer.insert(tr);
		
		var ii = 1;
		for(i=0;i<this.currentOption.images.length;i++) {
			var td = new Element('td').addClassName('item_'+ii);
			var a = new Element('a', { title: (i+1), href: '#' });
			var img = new Element('img', { src: this.currentOption.images[i].thumb, title: (i+1) });
			td.insert(a);
			a.insert(img);
			tr.insert(td);
			a.observe('click', this._loadImageHandler.bindAsEventListener(this));
			ii++;
			if (ii==3) ii=1;
		}
	},
	
	_loadImageHandler: function(ev) {
		ev.stop();
		var el = Event.element(ev);
		
		var imagenumber = el.readAttribute('title');

		this.mainImage.update();

		this._loadImage((parseInt(imagenumber)-1));
	},
	
	_loadImage: function(imagenumber) {
		
		this.mainImage.update();
		
		var image = new Image();
		
		var image_src = this.currentOption.images[imagenumber].image;
		
		var self = this;

		if ((imagenumber+1) == this.currentOption.images.length) {
			this.btnNext.hide();
		} else {
			this.btnNext.show();
		}
		if ((imagenumber-1) < 0) {
			this.btnPrev.hide();
		} else {
			this.btnPrev.show();
		}

		$(image).observe('load', function() {
			
			new Effect.Parallel([
				new Effect.Morph(self.mainImageContainer, {
								 style: 'height: '+this.height+'px; width: '+this.width+'px',
								 sync: true
								 }),
				new Effect.Morph(self.btnNext, {
								 style: 'top: '+((this.height-61)/2)+'px',
								 sync: true
								 }),
				new Effect.Morph(self.btnPrev, {
								 style: 'top: '+((this.height-61)/2)+'px',
								 sync: true
								 })
			], {
				duration: 0.5,
				 afterFinish: function() {
					 self.mainImage.update(image);
					 self.currentImage = imagenumber;
					 self._changeSelectedThumb();
				 }
			});
			
			
			
			//self.mainImageContainer.setStyle({ height: this.height+'px', width: this.width+'px' });
		}).writeAttribute('src', image_src);			

	},
	
	_changeSelectedThumb: function() {
		var thumbs = $$('#presslightbox-thumbsContainer a');
		thumbs.each(function(el) { el.removeClassName('current'); });
		thumbs[this.currentImage].addClassName('current');
	},
	
	_adjustSize: function() {
		var viewport = this._getViewport();
		if (viewport.width < $('content-wrapper').getWidth()) {
			viewport.width = $('content-wrapper').getWidth();
		}
		this.overlay.setStyle({ height: viewport.height+'px', width: viewport.width+'px' });
		this.container.setStyle({ height: viewport.height+'px', width: viewport.width+'px' });
	},

	_getViewport: function() {
		var d = document.documentElement, b = document.body, w = window;
		var o = {}
		if( typeof( w.pageYOffset ) == 'number' ) {
			o.top = w.pageYOffset;
			o.left = w.pageXOffset;
		} else if( b && ( b.scrollLeft || b.scrollTop ) ) {
			o.top = b.scrollTop;
			o.left = b.scrollLeft;
		} else if( d.documentElement && ( d.documentElement.scrollLeft || d.documentElement.scrollTop ) ) {
			o.top = document.documentElement.scrollTop;
			o.left = document.documentElement.scrollLeft;
		}
		if (typeof w.innerWidth != 'undefined' && w.innerWidth) {
			o.width = w.innerWidth;
			o.height = w.innerHeight;
		} else {
			if (typeof d != 'undefined' && typeof d.clientWidth != 'undefined' && d.clientWidth != 0) {
				o.width = d.clientWidth;
				o.height = d.clientHeight;
			} else {
				o.width = b.clientWidth;
				o.height = b.clientHeight;
			}
		}
		return o;
	}
	
}

var press_lightbox = new lightbox;
document.observe('page:loaded', function() { press_lightbox.create(); });