// popImage, Copyright (c) 2008 Radovan Lozej, <http://xrado.hopto.org>, MIT Style License.

var popImage = new Class({

	Implements: [Events, Options],

	options:{
		'className': 'imgbox',
		'opacity': '0.7',
		'overlay': '#000000'
	},

	initialize: function(options){
		var self = this;
		this.layer = new Element('div',{ styles: {'position':'absolute','top': 0, 'left': 0, 'width': '100%', 'height': window.getScrollHeight(),'text-align':'center' } });
		this.overlay = this.layer.clone().inject(document.body,'bottom').setStyles({'z-index': 100,'opacity': 0,'background':this.options.overlay,'display':'none'});
		this.overlay2 = this.layer.clone().inject(document.body,'bottom').setStyles({'z-index': 101,'display':'none'});
		this.overlay2.set('html','<table align="center" width="200"><tr><td align="center"></td></tr></table>');
		new Element('span',{'styles':{'color':'#555555','font-size':'10px'}}).set('html','( Esc - close | Left - previous | Right - next | F -fit )').inject(this.overlay2,'top');
		this.holder = this.overlay2.getElement('td');

		this.button = new Element('div',{'styles':{'padding':'3px','font-weight':'bold','font-size':'18px','color':'red','display':'inline','cursor':'pointer'}});
		this.button_prev = this.button.clone().setStyles({'margin-right':'50px'}).set('text','<').addEvent('click',this.prev.bind(this)).inject(this.holder);
		this.numberof = new Element('span').setStyles({'color':'gray'}).set('text','2/12').inject(this.holder);
		this.button_next = this.button.clone().setStyles({'margin-left':'50px'}).set('text','>').addEvent('click',this.next.bind(this)).inject(this.holder);

		this.imageholder = new Element('div',{styles:{'clear':'both','padding':'5px','margin-top':'5px'}}).inject(this.holder);
		new Element('img').inject(this.imageholder);
		this.imagetitle = new Element('div',{styles:{'font-size':'11px','color':'#dddddd'}}).inject(this.holder);

		this.images = $$('img.'+this.options.className);
		this.images.addEvent('click',function(event){
				new Event(event).stop();
				self.open(this);
		});

		this.overlay2.addEvent('click',function(event){
			var event = new Event(event).stop();
			if((event.target || event.srcElement)==self.overlay2) self.close();
		});

		window.addEvent('resize',function(){
			self.overlay.setStyle('height',window.getScrollHeight());
			self.overlay2.setStyle('height',window.getScrollHeight());
		});
		document.addEvent('keydown',this.keys.bind(this));

	},

	keys: function(event){
		if(this.enabled){
			if (event.key=='esc') this.close();
			if (event.key=='right') this.next();
			if (event.key=='left') this.prev();
			if (event.key=='f') {
				var width = window.getWidth();
				var height = window.getHeight()-100;
				var s_width = this.overlay2.getElement('img').width;
				var s_height = this.overlay2.getElement('img').height;
				var w = Math.round(s_width * height / s_height);
				var h = Math.round(s_height * width / s_width);
				if ((height-h) < (width-w)) width = Math.round(w);
				else height = Math.round(h)
				this.overlay2.getElement('img').width = width;
				this.overlay2.getElement('img').height = height;
				window.fireEvent('resize');
			}
		}
	},

	open: function(el){
		this.enabled = true;
		this.overlay.setStyle('display','');
		if($type(Fx.Tween)) new Fx.Tween(this.overlay, {'duration':250}).start('opacity',0,this.options.opacity);
		else this.overlay.setStyle('opacity',this.options.opacity);
		this.overlay2.setStyle('display','');
		this.overlay2.setStyle('top',(window.getScrollTop().toInt())+'px');
		this.show(el);
	},

	close: function(){
		this.enabled = false;
		this.overlay2.setStyle('display','none');
		this.overlay.setStyle('display','none');
		this.overlay.setStyle('opacity',0);
		$each([this.imageholder,this.imagetitle,this.numberof],function(el){ el.empty(); });
	},

	show: function(el){
		var self = this;
		this.index = this.images.indexOf(el);
		this.numberof.set('text',this.index+1 +'/' + this.images.length);
		this.imageholder.set('html','<div style="text-decoration:blink; color:white; margin-top:30px"><b>loading</b></div>');
		this.imagetitle.empty();
		var image = el.getParent('a').href;
		new Asset.image(image, {
			onload: function(){
				self.imageholder.empty();
				new Element('img',{src:image,styles:{'border':'10px solid #ffffff'}}).inject(self.imageholder);
				self.imagetitle.set('html',el.title);
				window.fireEvent('resize');
			}
		});
	},

	next: function(){
		var index = (this.index+1>this.images.length-1) ? 0 : ++this.index;
		this.show(this.images[index]);
	},

	prev: function(){
		var index = (this.index-1>=0) ? --this.index : this.images.length-1;
		this.show(this.images[index]);
	}
});

window.addEvent('domready', function(){
	new popImage();
});