_i = 0;
_m = 0;

var ImageBox = Class.create({
	initialize: function(attr) {
		this.images = $A(document.images);  // VOOR FRANK ARRAY MAP!!!!!!!!!
		this.attr	= attr || 'rel';

		this.observers();
	},
	
	observers: function() {
		this.images.each(function(a) { 
			if(a.getAttribute(this.attr)) {
				a.style.cssText += 'cursor:pointer';
				
				Event.observe(a, 'click', function() { 
					//this.foldr = a.getAttribute(this.attr).split('.')[0];
					this.foldr = location.href.split('/');
					this.foldr = this.foldr[(this.foldr.length - 2)];
					this.numbr = a.getAttribute(this.attr)/*.split('.')[1]*/;
					this.title = a.getAttribute('title');
					this.getImages(this.foldr, this.numbr, this.title);
				}.bind(this));
			}
		}.bind(this));
	},
	
	getImages: function(f, i, t) {
		this.options = {
			asynchronous: false,
			method: 'get',
			//parameters: '?folder=' + f + '&cat=' + i,
			parameters: 'folder=' + i,
			onSuccess: function(t) {
				this.buildModal(t);
			}.bind(this)
		}
		
		//new Ajax.Request('/backbase/js/imagebox/imagebox.php', this.options);
		new Ajax.Request('/79/lib/folder.php', this.options);
	},
	
	buildModal: function(t) {
		if(t.responseText != 'null') {
			this.json = t.responseText.evalJSON();
			
			this.imgOverlay = Builder.node('div', {
				id: 'imgOverlay',
				style: 'position:fixed; background-color:#000; filter: alpha(opacity = 70); opacity:0.7; width:100%; height:' + ((document.body.clientHeight < window.outerHeight) ? window.outerHeight : document.body.clientHeight) + 'px; top:0; z-index:6'
			});
			
			this.imgContainer = Builder.node('div', {
				id: 'imgContainer',
				style: 'position:fixed; width:100%; top:5%;'
			});
			
			this.left = ((document.body.clientWidth / 2) - (800 / 2));
			this.top = ((document.documentElement.clientHeight / 2) - (633 / 2));
			
			this.imgShadow = Builder.node('div', {
				id: 'imgShadow',
				//style: 'width:800px; height:600px; margin-top:' + (this.top + 3) + 'px; background-color:#000; overflow:hidden; margin-left:' + (this.left + 3) + 'px; position:fixed; z-index:7'
            	style: 'display:none; position:fixed; z-index:7;' 
			});
			
			this.imgShadow.setOpacity(0.5);
			
			this.imgCont = Builder.node('div', {
				id: 'imgCont',
				//style: 'width:800px; min-height:200px; max-height:600px; margin-left:' + this.left + 'px; background-color:#004C98; overflow:hidden; margin-top:' + this.top + 'px; position:absolute; z-index:8;'
				style: 'width:800px; min-height:200px; max-height:600px; background-color:#004C98; margin:0 auto; overflow:hidden; position:relative; z-index:8;'
			});
			
			this.imgContH = Builder.node('div', {
				id: 'imgHeader',
				style: 'width:100%; min-height:14px; background-color:#004C98; color:#fff; font-weight:bold; padding:5px;'
			}).insert('<span>' + ((this.title) ? this.title : 'Foto gallerie') + '</span><span id="imgClose" title="Sluiten" style="float:right; margin-right:10px; border:1px solid #fff; padding:2px 3px; margin-top:-2px; cursor:pointer;">x</span>');
			
			this.imgContCI = Builder.node('div', {
				style: 'max-height:600px; width:800px; text-align:center;'
			});
			
			this.imgContI = Builder.node('img', {
				id: 'imgCont',
				src: this.json[0].img,
				style: 'max-width:800px; max-height:600px'
			});
			
			this.imgContCI.appendChild(this.imgContI);
			
			this.imgContainer.appendChild(this.imgShadow);
			this.imgContainer.appendChild(this.imgCont);
			
			this.imgCont.appendChild(this.imgContH);
			this.imgCont.appendChild(this.imgContCI);

			document.body.appendChild(this.imgOverlay);
			document.body.appendChild(this.imgContainer);
			
			this.buildThumbs();
			
			this.subObservers();
		}
	},
	
	buildThumbs: function() {
		this.tmbPar = Builder.node('div', {
			id: 'thumbParent',
			style: 'height:60px; width:100%; z-index:20; position:absolute; bottom:0px'
		});
		
		this.tmbShow = Builder.node('div', {
			id:'thumbShow',
			style: 'padding:5px 10px; z-index:25; position:absolute; bottom:55px; color:#fff; background-color:#999; cursor: pointer;'
		}).insert('Show/Hide thumbnails');
		
		this.tmbShow.observe('click', function() { 
			if(this.tmbMore) { this.tmbMore.hide(); }
			if(this.tmbPrev) { this.tmbPrev.hide(); }
			
			this.tmbShow.hide();
			if(this.tmbPar.style.display != 'none') {
				this.tmbShow.style.bottom = '0px';
				if(document.all) {
					this.tmbPar.hide();
					this.tmbShow.show();
				} else {
					new Effect.BlindUp(this.tmbPar, {duration: 0.5, afterFinish: function() {
						this.tmbShow.show();
					}.bind(this)});
				}
			} else {
				this.tmbShow.style.bottom = '55px';
				if(document.all) {
					this.tmbPar.show();
					this.tmbShow.show();

					if(this.tmbMore) { if(_i < $$('.subPar').length - 1) { this.tmbMore.show(); } }
					if(this.tmbPrev && _i > 0) { this.tmbPrev.show(); }			
				} else {
					new Effect.BlindDown(this.tmbPar, {duration: 0.5, afterFinish: function() {
						this.tmbShow.show();
	
						if(this.tmbMore) { if(_i < $$('.subPar').length - 1) { this.tmbMore.show(); } }
						if(this.tmbPrev && _i > 0) { this.tmbPrev.show(); }
					}.bind(this)});
				}
			}
		}.bind(this));
		
		this.tmbCont = Builder.node('div', {
			id: 'thumbCont',
			style:'width:1000%; background-color:#999; height:100%; padding:5px; bottom:0px;'
		});
		
		this.tmbClear = Builder.node('div', {
			className: 'clear'
		});
		
		this.i = 0;
		
		this.json.each(function(e) {
			if((this.i % 9) == 0) {
				this.tmbSPar = Builder.node('div', {
					style:'width:auto; float:left;',
					className: 'subPar'
				});
			
				this.tmbCont.appendChild(this.tmbSPar);
			}
			
			this.tmbImg = Builder.node('img', {
				id: 'thumbImg_' + this.i,
				src: e.img,
				style: 'height:50px; margin:0 5px; cursor:pointer'
			});
			
			this.tmbImg.observe('click', function(e) { 
				this.elem = Event.element(e);
				
				this.imgContI.src = this.elem.src;
			}.bind(this));
			
			this.tmbSPar.appendChild(this.tmbImg);
			
			this.i++;
		}.bind(this));
		
		this.tmbPar.appendChild(this.tmbCont);
		this.tmbCont.appendChild(this.tmbClear);
		
		this.imgCont.appendChild(this.tmbShow);
		this.imgCont.appendChild(this.tmbPar);
		
		setTimeout(function() {
			if($$('.subPar').length > 1) {
				this.more();
				
				this.x = 0;
				$$('.subPar').each(function(e) {
					if(this.x > 0) {
						//e.style.opacity = '0.5';
						e.setOpacity(0.3);
					}
					
					this.x++;
				}.bind(this));
			}
		}.bind(this), 40);
	},
	
	more: function() {
		this.tmbMore = Builder.node('img', {
			src: '/79/lib/js/imagebox/icn_more.png',
			style: 'position:absolute; right:0; bottom:5px; z-index:30;'
		});
		
		this.tmbPrev = Builder.node('img', {
			src: '/79/lib/js/imagebox/icn_prev.png',
			style: 'position:absolute; left:0; bottom:5px; z-index:30; display:none;'
		});
		
		$('imgCont').appendChild(this.tmbMore);
		$('imgCont').appendChild(this.tmbPrev);
		
		this.tmbMore.observe('click', function() {
			_m = ($$('.subPar').length - 1);
			
			if(_i < _m) {
				this.wdt = ($$('.subPar')[_i].getWidth() - 70);
				
				if(document.all) {
					this.tmbPar.style.left = -this.wdt + 'px';
				} else {
					new Effect.Move(this.tmbPar, {y:0, x: -this.wdt, afterFinish: function(){
						this.tmbPar.style.bottom = '0px';
						this.tmbPar.style.top = '';
					}.bind(this)});
				}
			
				_i++;
				
				if(_i == _m) {
					this.tmbMore.hide();
				}
				
				if(_i > 0) {
					this.tmbPrev.show();
				}
				
				$$('.subPar')[_i].setOpacity(1.0);
				$$('.subPar')[(_i - 1)].setOpacity(0.3);
			} else {
				_i = 0;
			}
		}.bind(this));
		
		this.tmbPrev.observe('click', function() {
			if(_i > 0) {
				$$('.subPar')[_i].setOpacity(0.3);	_i--;
				
				this.wdt = ($$('.subPar')[_i].getWidth() - 70);
				if(document.all) {	// Micro$oft & Internet Exploder..
					this.tmbPar.style.left = (parseInt(this.tmbPar.style.left) + this.wdt) + 'px';
				} else {
					new Effect.Move(this.tmbPar, {y:0, x: this.wdt, afterFinish: function(){
						this.tmbPar.style.bottom = '0px';
						this.tmbPar.style.top = '';
					}.bind(this)});
				}
				
				if(_i == 0) {
					this.tmbMore.show();
					this.tmbPrev.hide();
				}
				$$('.subPar')[_i].setOpacity(1.0);
			} else {
				_i = 0;
			}
		}.bind(this));
	},
	
	subObservers: function() {
		$('imgClose').observe('click', function() {
			this.closeModal();
		}.bind(this));
	},
	
	closeModal: function() {
		Element.remove('imgOverlay');
		Element.remove('imgContainer');
	}
});

document.observe('dom:loaded', function() { 
	new ImageBox();
});