/**
 * @author Robert
*/
var fbImage = FbElement.extend({
	initialize: function(element, options) {
		this.setOptions(element, options);
		this.plugin = 'image';
		this.element = $(element);
		this.options.rootPath = options.rootPath;
		this.getMyElements();
		this.imageFolderList = [];
		this.selectedFolder = this.getFolderPath();
		
		this.selectedImage = '';
		if(this.imageDir){
			if(this.imageDir.options.length !== 0){
				this.selectedImage = this.imageDir.getValue();
			}
		}
		this.watchFolders();
		// $$$ hugh - don't think we need to do this on init, as the img is
		// already set by the fabrikimage.php render()
		//this.showImage();
	},
	
	watchFolders: function()
	{
		if($(this.folderDir)){
			$(this.folderDir).addEvent( 'change', this.changeFolder.bindAsEventListener(this));
			}
			if($(this.imageDir)){
				$(this.imageDir).addEvent( 'change', this.showImage.bindAsEventListener(this));
			}
	},
	
	getMyElements:function(){
		var element = this.options.element;
		this.image = $(element).findClassUp('fabrikSubElementContainer').getElement('.imagedisplayor');
		this.folderDir = $(element).findClassUp('fabrikSubElementContainer').getElement('.folderselector');
		this.imageDir = $(element).findClassUp('fabrikSubElementContainer').getElement('.imageselector');
		this.hiddenField = $(element).findClassUp('fabrikSubElementContainer').getElement('.hiddenimagepath');
	},
	
	cloned: function(c){
		this.getMyElements();
		this.watchFolders();
	},
	
	hasSubElements: function(){
		return true;
	},
	
	getFolderPath: function()
	{
		var f = this.options.rootPath;
		if(this.folderDir){
			if(this.folderDir.options.length !== 0){
				f += '/' +  this.folderDir.getValue();
			}
		}
		return f;
	},

	changeFolder: function( e ){
		var event = new Event(e);
		var el = event.target;
		var folder = this.imageDir;
		this.selectedFolder = this.getFolderPath();
		folder.empty();
		var url = this.options.liveSite + 'index.php?option=com_fabrik&format=raw&controller=plugin&task=pluginAjax&g=element&plugin=fabrikimage&method=ajax_files';
		var myAjax = new Ajax(url, { method:'post',
		'data':{'folder':this.selectedFolder}, 
			
		onComplete: function(r){
			var newImages = eval(r);
			newImages.each(function(opt){
				folder.adopt(
					new Element('option', {'value':opt.value}).appendText(opt.text)
				);
			});
			this.showImage();
		}.bind(this)}).request();
	},
	
	showImage: function(e){
		if(e){
			var event = new Event(e);
			var el = event.target;
		}else{
			el = this.imageDir;
		}
		if(el){
			if(el.options.length === 0){
				this.image.src = '';
				this.selectedImage = '';
			}else{
				this.selectedImage = el.getValue();
				this.image.src = this.options.liveSite + '/' + this.selectedFolder + '/' + this.selectedImage;
			}
			this.hiddenField.value =  this.selectedImage;
		}
	}	
});