var Box = new Class({
		initialize: function(options){
			this.options = $merge({
				overlayOpacity: 0.5,
				parent: 'container',
				z_base: 5,
				picinfo: true,
				onclickclose: false
			}, options || {});
			
			this.overlay = new Element('div',{'id':'boxOverlay'});
			this.box = new Element('div',{'id':'boxBox'});
			this.content = new Element('div',{'id':'boxContent'});
			if (this.options.picinfo)
				this.info = new Element('div',{'id':'boxInfo'});
			this.closeButton = new Element('div',{'id':'close'});
			
			this.content.injectInside(this.box);
			if (window.ie6){
				this.closeButton.setStyle('background-image', 'url(../css/close.gif)');
			}
			if (this.options.picinfo) {
				this.closeButton.injectInside(this.info);
				this.info.injectInside(this.box);
			}
			var w = getScrollWidth()-20; var h = getScrollHeight()-5;
			this.overlay.setStyles({
				'z-index':this.options.z_base,
				'width': w,
				'height': h,
				'top': -(getHeight()/2),
				'margin-left': -(w/2)
			});
			this.box.setStyles({
				'z-index':this.options.z_base+1
			});
		},
		
		open: function(obj){
			this.path = obj.path;
			var self = this;
			if ($defined(obj.group)){
				this.group = obj.group;
				obj.name = obj.group[0];
				var thumbs = new Element('div',{'id':'thumbs'});
				obj.group.each(function(name){
					var el = new Element('img',{
						'id': name,
						'src': obj.path+'/'+name+'_thumb.jpg',
						'alt':'thumb'
					});
					el.addEvent('click', self.thumbclick.pass(el,self));
					el.injectInside(thumbs);
				});
			}
			if ($defined(obj.link)) {
				var boxLink = new Element('div',{'id':'boxLink'});
				boxLink.set('html',obj.link);
				boxLink.injectInside(this.content);
			}
			if (obj.type == 'image'){
				//new Element('img',{'src': obj.path+'/'+obj.name+'.jpg','alt':''}).injectInside(this.content);
				var img_asset = new Asset.image(obj.path+'/'+obj.name+'.jpg');
				img_asset.injectInside(this.content);
			}
			if (this.options.picinfo){ 
				var pictitle = new Element('div',{'id':'pictitle'}).set('html',obj.info.title);
				var infotext = new Element('div',{'id':'picinfo'});
			}
			if ($defined(thumbs)) {
				thumbs.injectInside(infotext);
				this.thumbs = thumbs;
			}
			if (this.options.picinfo){
				new Element('div').set('html',"Fotografie: "+obj.info.fotografie).injectInside(infotext);
				new Element('div').set('html',"Model: "+obj.info.model).injectInside(infotext);
				new Element('div').set('html',"Bodypainting: Gekleurd Naakt").injectInside(infotext);
			}
			
			if (this.options.picinfo){
				pictitle.injectInside(this.info);
				infotext.injectInside(this.info);
			}
			this.overlay.injectInside($(this.options.parent));
			this.box.injectInside($(this.options.parent));
			var effect = new Fx.Elements([this.box,this.overlay], {
				duration: 600,
				transition: Fx.Transitions.Quad.easeIn
			});
			effect.start({
				'0': { opacity: [0,1]},
				'1': { opacity: [0.3,1]}
			});
			this.overlay.addEvent('click',this.close.bind(this));
			this.closeButton.addEvent('click',this.close.bind(this));
			if (this.options.onclickclose) {
				this.box.addEvent('click',this.close.bind(this));
				this.box.setStyle('cursor','pointer');
			}
			this.setup();
			this.setup.delay(40,this); // voor als het voorgaande nog niet afgerond was
			this.setup.delay(350,this); // voor als het voorgaande nog niet afgerond was
			this.setup.delay(1200,this); // voor als het voorgaande nog niet afgerond was
		},
		
		thumbclick: function(el){
			var imgs = $$('#boxInfo #picinfo #thumbs img');
			var self = this;
			imgs.each(function(img){
				//img.setProperty('src',self.path+'/'+img.id+'_thumb.jpg');
				img.setOpacity(1);
			});
			//el.setProperty('src',this.path+'/greybox.png');
			el.setOpacity(0.4);
			this.change(el.id,el);
		},
		
		setup: function(){
			// center box
			var size = this.content.getSize();
			if (this.options.picinfo){
				var sizeInfo = this.info.getSize();
				var width = size.x + sizeInfo.x;
			}
			else
				var width = size.x;
			if (getHeight() < 602){
				var top_offset = getHeight()/2;
			}
			else var top_offset = size.y/2;
			if (this.options.picinfo){
				this.info.setStyle('height',size.y);
				var sizePicInfo = this.info.getLast();
				var sizePicTitle = this.info.getFirst();
				sizePicInfo.setStyle('margin-top',(
					size.y - sizePicInfo.getSize().y -
					sizePicTitle.getSize().y - 40));
			}
			if (this.options.picinfo)
				this.box.setStyle('width',size.x + sizeInfo.x);
			else 
				this.box.setStyle('width',size.x);
			
			this.box.setStyles({
				'top': -(top_offset),
				'margin-left': -(width/2)
			});
			trap(); // LET OP: trap()
		},
		
		change: function(name,el){
			var self = this;
			var newImg = new Asset.image(this.path+'/'+name+'.jpg');
			
			var tmpImg = newImg.clone();
			
			newImg.replaces(this.content.getFirst());
			this.setup(); // opnieuw positioneren
			this.setup.delay(30,this); // voor als het voorgaande nog niet afgerond was
			this.setup.delay(80,this); // voor als het voorgaande nog niet afgerond was
			this.setup.delay(350,this); // voor als het voorgaande nog niet afgerond was
			this.setup.delay(1200,this); // voor als het voorgaande nog niet afgerond was
			
			var origSize = this.content.getSize();
			var origPos = this.content.getPosition();
			this.content.set('opacity',0);
			
			tmpImg.injectInside(document.body);
			tmpImg.setStyles({
				'width':32,
				'height':32,
				'position':'absolute',
				'left': el.getLeft(),
				'top': el.getTop(),
				'z-index': this.options.z_base+4
			});
			new Fx.Morph(tmpImg,{duration:500}).start({
				'width': origSize.x,
				'height': origSize.y,
				'top': origPos.y,
				'left':	origPos.x
			}).chain(function(){
				self.content.set('opacity',1);
				tmpImg.set('opacity',0);
				tmpImg.dispose();
			});
			trap(); // LET OP: trap()
		},
		
		close: function(){
			var fadeOut = new Fx.Elements([this.box,this.overlay], {
				duration: 600,
				transition: Fx.Transitions.Quad.easeOut
			});
			fadeOut.start({
				'0': { opacity: 0},
				'1': { opacity: 0}
			}).chain(function(){
				$('boxBox').dispose();
				$('boxOverlay').dispose();
			});
		}
});