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

var imgBox = new Class({

	Implements: [Events, Options],

	options:{
		classname: 'rbox',
		overlay_bg: '#000000',
		overlay_opacity: '0.6',
		rbox_bg: '#ffffff',
		controls_color: 'red',
		numberof_color: '#333333',
		title_color: '#ffffff',
		thumb_url: 'size=thumb',
		image_url: 'size=large',
		progressbar: 'template/images/progress_bar.gif',
		margin_top: '5px'
	},

	initialize: function(options){
		this.setOptions(options);
		this.overlay =  new Element('div',{
			'styles':{
				'position':'absolute',
				'top': 0,
				'left': 0,
				'z-index': 90,
				'width': '100%',
				'height': window.getScrollHeight(),
				'background-color': this.options.overlay_bg,
				'opacity': this.options.overlay_opacity,
				'display': 'none'
			}
		}).inject(document.body,'bottom');

		this.rboxh =  new Element('div',{
			'styles':{
				'position': 'absolute',
				'left': 0,
				'top': 0,
				'width': '100%',
				'z-index': 100,
				'text-align': 'center',
				'color': this.options.controls_color,
				'display': 'none'
			}
		}).inject(document.body,'bottom');

		this.controls =  new Element('div',{'styles':{'font-size' : '30px','font-weight': 'bold','margin-bottom':'4px','margin-top':this.options.margin_top}}).inject(this.rboxh,'bottom');

		this.prev = new Element('a',{'styles':{'cursor':'pointer','margin':'5px'}}).set('text','<').set('title','previous').inject(this.controls,'bottom');
		this.next = new Element('a',{'styles':{'cursor':'pointer','margin':'5px'}}).set('text','>').set('title','next').inject(this.controls,'bottom');
		this.close = new Element('a',{'styles':{'cursor':'pointer','margin':'5px'}}).set('text','x').set('title','close').inject(this.controls,'bottom');

		this.rbox =  new Element('img',{
			'id':'rbox',
			'align':'center',
			'styles':{
					'padding' : '20px 10px 20px 10px',
					'background-color': this.options.rbox_bg
			}
		}).inject(this.rboxh,'bottom');

		this.numberof = new Element('div',{'styles':{
			'font-size' : '12px',
			'color':this.options.numberof_color,
			'position':'relative',
			'top':'-20px'}
		}).inject(this.rboxh,'bottom');

		this.title = new Element('div',{'styles':{
			'font-size' : '12px',
			'color':this.options.title_color,
			'position':'relative',
			'top':'-15px'}
		}).inject(this.rboxh,'bottom');

		this.imgs = [];
		this.imgsrc = [];
		$$('img.rbox').each(function(el){
			var klass = this;
			this.imgs.push(el)
			this.imgsrc.push(el.src)
			el.setStyle('cursor','pointer');
			el.addEvent('click',function(){
				klass.change(this.src);
			});
		}.bind(this));

		if($$('img.rbox').length==1) {
			[this.prev,this.next].each(function(el){ el.setStyle('display','none'); });
			this.numberof.setStyle('visibility','hidden');
		}

		this.close.addEvent('click',function(){ this.hide(); }.bind(this));

		this.next.addEvent('click',function(){
			var index = this.imgsrc.indexOf(this.rbox.src.replace(this.options.image_url,this.options.thumb_url));
			if((index+1)<this.imgsrc.length) this.change(this.imgsrc[index+1]);
		}.bind(this));

		this.prev.addEvent('click',function(){
			var index = this.imgsrc.indexOf(this.rbox.src.replace(this.options.image_url,this.options.thumb_url));
			if((index)>0) this.change(this.imgsrc[index-1]);
		}.bind(this));

		this.mode=0;

		var url = location.href.split("#")[1];
		if(url && this.imgsrc[url.toInt()-1]) $$('img.rbox').each(function(el){
			if(el.src==this.imgsrc[url.toInt()-1]) el.fireEvent('click', el);
		}.bind(this));

	},

	show: function(){
		this.rbox.set('src',this.options.progressbar);
		if(this.mode==0) {
			$$("object").setStyle('visibility','hidden'); // linux flash transparency fix
			this.overlay.setStyle('display','');
			this.rboxh.setStyle('top',window.getScrollTop().toInt());
			this.rboxh.setStyle('display','');
		}
		this.mode=1;
	},

	hide: function(){
		$$("object").setStyle('visibility','visible'); // linux flash transparency fix
		this.rboxh.setStyle('display','none');
		this.overlay.setStyle('display','none');
		this.rbox.set('src',this.options.progressbar);
		location.href = location.href.split('#')[0]+'#0';
		this.mode=0;
	},

	change: function(src){
		this.show();
		this.numberof.set('text',(this.imgsrc.indexOf(src)+1)+' | '+this.imgsrc.length);
		this.title.setStyle('width',this.rbox.get('width'));
		this.title.set('text',this.imgs[this.imgsrc.indexOf(src)].get('title'));
		location.href = location.href.split('#')[0]+'#'+(this.imgsrc.indexOf(src)+1);
		this.rbox.set('src',src.replace(this.options.thumb_url,this.options.image_url));
		this.preload();
	},

	preload: function(){
		var index = this.imgsrc.indexOf(this.rbox.src.replace(this.options.image_url,this.options.thumb_url));
		var preload = new Image();
		if((index+1)<this.imgsrc.length) preload.src = this.imgsrc[index+1].replace(this.options.thumb_url,this.options.image_url);
	}
});