wps.imageBrowser =  function(container){
		this.instID = 'wps.imageBrowser.' + parseInt(Math.random()*1000000);
		this.container = $(container);
		this.currentPaths = new Array('');
		this.largeImages = new Array();
	}
	
	wps.imageBrowser = wps.imageBrowser.extendsFrom(wps.base);
	
	wps.imageBrowser.prototype.init = function(){
		//set up containers;
		this.isRoot = true;
		this.setupContainers();
		// do request to server for the root of the gallery
		this.reqBrowser();
		this.reqFolders();		
	}	
	
	wps.imageBrowser.prototype.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.container.appendChild(this.navigator);
		this.browser.appendChild(this.navigator);	
		this.container.appendChild(this.browser);
	}
	
	wps.imageBrowser.prototype.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); 
	}
	
	wps.imageBrowser.prototype.drawFolders = function(req){
		var folderDOM = req.responseXML;
		$A(folderDOM.getElementsByTagName('folder')).each(
			(function(img){
				var path = img.getAttribute('path');
				var name = img.getAttribute('name');
				//metaData.path = path;
				//metaData.name = name;
				//var img = Builder.node('img', {className:'', src:gRelRootPath + 'images/folder.png'});
				//img.metaData = metaData;
				//console.log(img);
				var img = Builder.node('span', {className:'folder'}, [name]);
				img.path = name;
				this.addEvent(img, 'click', this.openFolder.bind(this));
				this.navigator.appendChild(img);
			}).bind(this)
		)
		if (!this.isRoot){
			// add back-button:
			var back = Builder.node('div', {id:this.instID + '_back', className:'backbutton'}, ['< back ']);
			back.path = this.root;
			this.addEvent(back, 'click', this.goUp.bind(this));
			this.navigator.appendChild(back);
		}
	}
	
	wps.imageBrowser.prototype.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);		
	}	
	
	wps.imageBrowser.prototype.openFolder = function(event){
		this.isRoot = false;
		var elem = Event.element(event);
		var path = elem.path;
		this.clearBrowser();
		Element.update(this.navigator, '');
		this.browser.appendChild(this.navigator);

		this.currentPaths.push(this.root + path);
		this.reqBrowser(this.root + path);
		this.reqFolders(this.root + path);		
	}

	wps.imageBrowser.prototype.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); 
	}
	
	wps.imageBrowser.prototype.drawBrowser = function(req){
		var imgDOM = req.responseXML;
		$A(imgDOM.getElementsByTagName('image')).each(
			(function(img){
				var thumbURI = img.getAttribute('thumbnail');
				var imgURI = img.getAttribute('src');
				var name = img.getAttribute('name');
				var metaData = this.getMetaData(img);
				metaData.thumbURI = thumbURI;
				metaData.imgURI = imgURI;
				metaData.name = name;
				var img = Builder.node('img', {className:'thumb', src:thumbURI});
				var imgLarge = '<img src="' +imgURI +'"/>';
				 //Builder.node('img', {src:imgURI});
				//this.largeImages.push(imgLarge); // store ref to large blob's so we can clean them up properly
				new wps.imageViewer(img, false, true, imgLarge);
				img.metaData = metaData;
				this.browser.appendChild(img);
			}).bind(this)
		)
	}
	
	wps.imageBrowser.prototype.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')
		};
	}
	
	wps.imageBrowser.prototype.clearBrowser = function(){
		$A(this.browser.childNodes).each(
			(function(childNode){
				this.browser.removeChild(childNode);
			}).bind(this)
		)
		$(this.largeImages).each(
			(function(largeImg){
				largeImg = null;
			}).bind(this)
		)
	}