var myLightWindow = null;
	wps.imageBrowser = Class.create({
		initialize : function(container, isAdmin){
			this.instID = 'wps.imageBrowser.' + parseInt(Math.random()*1000000);
			this.container = $(container);
			this.currentPaths = new Array('');
			this.largeImages = new Array();
			this.isAdmin = isAdmin;
			this.setFolderMode = false;	
		},
		
		init: function(){
			this.isRoot = true;
			this.setupContainers();
			this.reqBrowser();
			this.reqFolders();		
		},	
		
		setupContainers: function(){
			if (!this.container.className) this.container.className='imageBrowser';
			this.navigator = Builder.node('div', {id:this.instID + "_navigator", className:'navigation'});
			this.browser = Builder.node('div', {id:this.instID + "_browser", className:'browser'});
			this.browser.appendChild(this.navigator);	
			this.container.appendChild(this.browser);
		},
		
		reqFolders: function(root){
			if (!root) var root = '';
			this.root = root + '/';
			var wpsRPC = new wps.rpc;
			wpsRPC.debug = true;
			wpsRPC.createCall('imageBrowser', this.drawFolders.bind(this), this);
			wpsRPC.call('getFolders', 'path=' + root); 
		},
		
		drawFolders: function(req){
			var folderDOM = req.responseXML;
			$A(folderDOM.getElementsByTagName('folder')).each(
				(function(img){
					var path = img.getAttribute('path');
					var name = img.getAttribute('name');
					
					var folderPass = img.getElementsByTagName('pass');
					if (folderPass.length > 0 ){
						var pass =  folderPass[0].getAttribute('pass');
					}else{
						var pass = '';
					}
					
					var titleImage = img.getElementsByTagName('titleimage');
					if (titleImage.length > 0 ){
						titleImage = titleImage[0].getAttribute('src');
						var div = new Element('div', {className:'titleImage'});
						//var shadowOverlay = new Element('img', {src:'/images/gallery_bg.png', className:'shadow'});
						//div.appendChild(shadowOverlay);
						
						var resizingOverlay = new Element('div', {className:'resizingOverlay'});
						div.insert(resizingOverlay);
						
						var title = new Element('img', {className:'', src:titleImage});
						resizingOverlay.insert(title);
						this.navigator.appendChild(div);
	
						if (parseInt(title.getHeight()) > parseInt(title.getWidth())){
							title.addClassName('highImg');
						}
						title.path = name;
						title.pass = pass;
					}else{
						var div = new Element('div', {className:'titleImage'});
						this.navigator.appendChild(div);
					}
					

					var span = new Element('span', {className:"titleText"}).update(name);
					div.insert(span);
					div.path = name;
					span.path = name;
					div.pass = pass;
					span.pass = pass;
					div.observe('click', this.openFolder.bind(this));
				}).bind(this)
			)
			if (!this.isRoot){
				// add back-button:
				var back = Builder.node('div', {id:this.instID + '_back', className:'backbutton'}, ['< terug ']);
				back.path = this.root;
				back.observe('click', this.goUp.bind(this));
				this.navigator.appendChild(back);
			}
		},
		
		goUp: function(event){
			var previousPath = this.currentPaths[(this.currentPaths.length-2)];
			if (previousPath == '') this.isRoot = true;
			this.clearBrowser();
			Element.update(this.navigator, '');
			this.browser.appendChild(this.navigator);
	
			this.currentPaths.pop();
			this.reqBrowser(previousPath);
			this.reqFolders(previousPath);		
		},
		
		openFolder: function(event){
			this.isRoot = false;
			var elem = Event.element(event);
			var path = elem.path;
			if (elem.pass){
				var inputPass = (prompt('Deze map is beveiligd met een wachtwoord, voer aub. het wachtwoord in'));
				if (inputPass != elem.pass){
					alert("Het wachtwoord is onjuist, probeer het nog een keer");
					return;
					
				}
				
			}
			this.clearBrowser();
			Element.update(this.navigator, '');
			this.browser.appendChild(this.navigator);
			this.currentPath = this.root + path;
			this.currentPaths.push(this.root + path);
			this.reqBrowser(this.root + path);
			this.reqFolders(this.root + path);		
		},
	
		reqBrowser: function(root){
			if (!root) var root = '';
			var wpsRPC = new wps.rpc;
			wpsRPC.debug = true;
			wpsRPC.createCall('imageBrowser', this.drawBrowser.bind(this), this);
			wpsRPC.call('getImages', 'path=' + root); 
		},
		
		switchAdmin: function(){
			if (!this.setFolderMode){
				$('folderModeSwitch').update('Klik op een afbeelding om de gekozen afbeelding als folderafbeelding in te stellen, klik op deze knop om te annuleren.')
				this.setFolderMode = true;
			}else{
				$('folderModeSwitch').update("Folderafbeelding instellen")
				this.setFolderMode = false;
	 		}
		},
		
		setFolderPass: function(){
			var pass = (prompt("voer een wachtwoord in voor deze map"));
			var wpsRPC = new wps.rpc;
			wpsRPC.debug = true;
			wpsRPC.createCall('imageBrowser', this.switchAdmin.bind(this));
			wpsRPC.call('setFolderPass', 'path=' + this.currentPath, 'pass='+pass);
		},
		
		drawBrowser: function(req){
			var imgDOM = req.responseXML;
			if (this.isAdmin && imgDOM.getElementsByTagName('image').length > 0){	
				var button = new Element('button', {id:'folderModeSwitch'}).update("Folderafbeelding instellen");
				this.navigator.insert(button);
				button.observe('click', this.switchAdmin.bind(this));

				var button = new Element('button', {id:'folderPass'}).update("Wachtwoord instellen");
				this.navigator.insert(button);
				button.observe('click', this.setFolderPass.bind(this));

			}
			var preloadLayer = new Element('div', {});
			$(document.body).insert(preloadLayer);
			preloadLayer.hide();
			
			$A(imgDOM.getElementsByTagName('image')).each(
				(function(img){
					var thumbURI = img.getAttribute('thumbnail');
					var imgURI = img.getAttribute('src');
					
					// add image to preloadLayer;
					preloadLayer.insert(new Element('img', {src:imgURI}));
					var name = img.getAttribute('name');
					var metaData = this.getMetaData(img);
					metaData.thumbURI = thumbURI;
					metaData.imgURI = imgURI;
					metaData.name = name;
					var imgLayer = new Element('div', {className:'thumb'});
					this.browser.appendChild(imgLayer);
	
					// add resizing overlay
					var resizingOverlay = new Element('div', {className:'resizingOverlay'});
					imgLayer.insert(resizingOverlay);
					
//					var link = new Element('a', { href:imgURI, className:"lightwindow", rel:"/\\:;*?<>'Ó|¨ª©&#["+name+"]", title:name});
//					resizingOverlay.insert(link);
					
					var realImg = new Element('img', {className:'', src:thumbURI});
					resizingOverlay.insert(realImg);
					realImg.imgURI = imgURI;
					realImg.thumbURI = thumbURI;
					realImg.observe('click', this.imageClicked.bindAsEventListener(this));
					if (parseInt(metaData.height) > parseInt(metaData.width)){
						realImg.addClassName('highImg');
					}
				}).bind(this)
			)
			
			myLightWindow = new lightwindow();
		},
		
		imageClicked: function(e){
			var elem = e.element();
			var imgURI = elem.imgURI;
			
			if (this.setFolderMode){
				this.setTitleImage(elem.thumbURI);
			}else{
				myLightWindow._addLightWindowMarkup(true);
				myLightWindow.activateWindow({
					href: imgURI, 
					caption: elem.getAttribute('alt'),
					title:''
				});	
			}
		},
		
		setTitleImage: function(titleImage){
			if (confirm('Wil je deze afbeelding als titelafbeelding instellen?')){
				var wpsRPC = new wps.rpc;
				wpsRPC.debug = true;
				wpsRPC.createCall('imageBrowser', this.switchAdmin.bind(this));
				wpsRPC.call('setFolderTitle', 'path=' + this.currentPath, 'image='+titleImage); 
			}
		},
		
		getMetaData: function (imgNode){
			var metaDataNode = imgNode.getElementsByTagName('metaData').item(0);
			if (!metaDataNode) return new Object;
			return {
					width:metaDataNode.getAttribute('width'), 
					height:metaDataNode.getAttribute('height'), 
					thumbSizedBy:imgNode.getAttribute('thumbSizedBy'),
					thumbSize:imgNode.getAttribute('thumbSize')
			};
		},
		
		clearBrowser: function(){
			$A(this.browser.childNodes).each(
				(function(childNode){
					this.browser.removeChild(childNode);
				}).bind(this)
			)
			$(this.largeImages).each(
				(function(largeImg){
					largeImg = null;
				}).bind(this)
			)
		}
	})