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

// Edited 2008 02 20 - Huug Helmink, Ace Group bv <http://www.acegroup.nl>

var imgBox = new Class({

	Implements: [Events, Options],

	options:{
		classname: 'imgbox',
		overlay_bg: '#000000',
		overlay_opacity: '0.6',
		rbox_bg: '#ffffff',
		controls_color: 'red',
    showControls : true, // HH: option to disable the controls (default = true)
		numberof_color: '#333333',
		title_color: '#ffffff',
		thumb_url: 'size=thumb',
		image_url: 'size=large',
		progressbar: '',
		margin_top: 20 // HH: margin_top as integer, so the whole imageBox gets an offset
	},

	initialize: function(options){
		this.setOptions(options);
		this.overlay =  new Element('div',{
      'id':'ibOverlay', // HH: added id
			'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',{
      'id':'ibBox', // HH: added id
			'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':'10px','margin-top':this.options.margin_top}});
    if (this.options.showControls == true) this.controls.inject(this.rboxh,'bottom'); // HH: only display controls when set

    var defaultControls = new Element('a',{'styles':{'cursor':'pointer','margin':'5px'}}); // HH: default values for controls
		this.prev = defaultControls.clone().set({'text':'<','title':'vorige'}).inject(this.controls,'bottom'); // HH: reuse defaultControls and use object with set()
		this.next = defaultControls.clone().set({'text':'>','title':'volgende'}).inject(this.controls,'bottom');
		this.close = defaultControls.clone().set({'text':'x','title':'sluiten'}).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'}
		});
    if (this.options.showControls == true) this.numberof.inject(this.rboxh,'bottom'); // HH: only display numberof when display controls is set

		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.'+this.options.classname).each(function(el){
			var klass = this;
			this.imgs.push(el)
			this.imgsrc.push(el.src)
			el.addEvent('click',function(){
				klass.change(this.src);
			}).setStyle('cursor','pointer'); // HH: chained addEvent and setStyle
		}.bind(this));

		if($$('img.'+this.options.classname).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.rboxh.addEvent('click',function(){ this.hide(); }.bind(this)); // HH: user can click on imgBox to close

		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.'+this.options.classname).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.setStyles({
        'top': (window.getScrollTop() + (window.getHeight() / 4)) + this.options.margin_top, // HH: center the image and add optional offset.
        'display':''
      }); // HH: using setStyle instead of 2 times setStyle
		}
		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')); // HH: removed this line, because it causes a too small title in IE6
		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);
	}
});