fbElement =  new Class({
	initialize: function(element, options) {
		this.setOptions(element, options);
	},
	
	setOptions: function(element, options) {
		if($(element)){
			this.element = $(element);
			if(this.element && this.element.hasClass('readonly')){
				options.ro = true;
			}
		}
		
		this.options = Object.extend({
			element:       'default',
			defaultVal: '',
			ro:false,
			splitter:'../.._2A../default.htm'
		}, arguments[1] || {});
		Object.extend(this.options, options || {});
	},
	
	addNewEvent: function( action, js ){
		if(this.element){
			if(action == 'load'){
				eval(js);
			}else{
				(this.element).addEvent( action, function(e){
					eval(js);
				} );
			}
		}
	},
	
	//can override in plugin element classes
	
	update: function(val){
		if(this.options.ro){
			this.element.setHTML(val);
		}else{
			this.element.value = val;
		}
	}
})

fbField = fbElement.extend({
	initialize: function(element, options) {
		this.setOptions(element, options);
	}
});

fbDropdown = fbElement.extend({
	update: function(val, record){
		if(this.options.ro){
			this.element.setHTML(val);
		}else{
			if(!val)
				val = '';
		val = val.split(this.options.splitter);
		this.element.getChildren().each(function(opt){
			if(val.indexOf(opt.value) != -1){
				opt.selected = 'selected';
			}else{
				opt.selected = '';	
			}
		});
		}
	}
});

fbDatabaseJoin = fbElement.extend({
	update: function(val, record){
		if(this.options.ro){
			this.element.setHTML(val);
		}else{
			val = record[this.element.id + '___value'];
		this.element.getChildren().each(function(opt){
			if(val == opt.value){
				opt.selected = 'selected';
			}else{
				opt.selected = '';	
			}
		});
		}
	}
});

fbRadio = fbElement.extend({

	initialize: function(element, options) {
		this.elementtype_id = 'fabrikRadiobutton';
		this.setOptions(element, options);
	},

	setOptions: function( element, options ) {
		options.ro = false;
		this.baseName = element;
		if($(element)){
			this.element = $(element);
			if(this.element && this.element.hasClass('readonly')){
				options.ro = true;
			}
		}else{
			this.element = $(element + '_0');
			if(this.element && this.element.hasClass('readonly')){
				options.ro = true;
			}
		}
		var d = new Array();
		this.options = Object.extend({
			element:       'default',
			defaultVal: d,
			splitter:'../.._2A../default.htm'
		}, arguments[1] || {});
		var ok = true;
		this.subElements = new Array();
		var optCounter = 0;
		var testId = ''; 	
		while(ok){
			testId = element + '_' + optCounter;
			if($(testId)){
				this.subElements.push($(testId));
				optCounter ++;
			}else{
				ok = false;
			} 
		}
	},

	addNewEvent: function( action, js ){
		if(action == 'load'){
			eval(js);
		}else{
			this.subElements.each( function(el){
				(el).addEvent( action, function(e){
					eval(js);
				} );
			});
		}
	},

	update: function(val){
		if(this.options.ro){
			this.element.setHTML(val);
		}else{
			this.subElements.each( function(el){
				if(el.value == val){
					el.checked = 'checked';
				}else{
					el.checked = false;
				}
			});
		}
	}
});

fbCheckBox = fbElement.extend({

	initialize: function(element, options) {
		this.elementtype_id = 'fabrikCheckbox';
		this.setOptions(element, options);
	},

	setOptions: function( element, options ) {
		options.ro = false;
		if($(element)){
			this.element = $(element);
			if(this.element && this.element.hasClass('readonly')){
				options.ro = true;
			}
		}
		
		var d = new Array();
		this.options = Object.extend({
			element:       'default',
			defaultVal: d,
			splitter:'../.._2A../default.htm'
		}, arguments[1] || {});
		var ok = true;
		this.subElements = new Array();
		var optCounter = 0;
		var testId = ''; 	
		while(ok){
			testId = element + '_' + optCounter;
			if($(testId)){
				this.subElements.push($(testId));
				optCounter ++;
			}else{
				ok = false;
			} 
		}
		},
		
		update: function(val, record){
			if(this.options.ro){
				this.element.setHTML(val);
			}else{
				if(!val)
					val = '';
				val = val.split(this.options.splitter);
				this.subElements.each( function(el){
					if(val.indexOf(el.value) != -1){
						el.checked = 'checked';
					}else{
						el.checked = false;
					}
				});
			}
		
	},

	addNewEvent: function( action, js ){
		if(action == 'load'){
			eval(js);
		}else{
			this.subElements.each( function(el	){
				(el).addEvent( action, function(e){
					eval(js);
				} );
			});
		}
	}
});

fbImage = fbElement.extend({
	initialize: function(element, options) {
		this.setOptions(element, options);
		this.options.rootDir = options.rootDir;
		this.folderDir = $(element + '_folder');
		this.imageDir = $(element + '_dd');
		this.hiddenField = $(element);
		this.image = $(element + '_img');
		this.imageLink = $(element + '_imglink');
		this.imageFolderList = new Array();
		this.selectedFolder = '';
		
		if(this.folderDir ){
			if( this.folderDir.options ){
				if(this.folderDir.options.length != 0){
					this.selectedFolder = (this.folderDir).getValue();
				}else{
					this.selectedFolder = '';
				}
			}else{
				this.selectedFolder = this.folderDir.value;
			}
		}
		if (this.imageDir){
			if(this.imageDir.options.length != 0){
				this.selectedImage = (this.imageDir).getValue();
			}else{
				this.selectedImage = '';
			}
		}
		this.aChangeFolder = this.changeFolder.bindAsEventListener(this);
		this.aShowImage = this.showImage.bindAsEventListener(this);
		
		this.subElements = [$(this.folderDir), $(this.imageDir)];
		if (this.folderDir) {
			$(this.folderDir).addEvent( 'change', this.aChangeFolder);
		}
		
		if (this.imageDir) {
			$(this.imageDir).addEvent( 'change', this.aShowImage);
			this.showImage();
		}
	},
	
	addNewEvent: function( action, js ){
		if(action == 'load'){
			eval(js);
		}else{
			this.subElements.each( function(el){
				(el).addEvent( action, function(e){
					eval(js);
				} );
			});
		}
	},
	
	addImageListOption: function(folder, files){
		if(!this.imageOptionExists( folder )){
			var o = {
				'folder': folder,
				'files': files
				}
			this.imageFolderList.push(o);
		}
	},
				
	imageOptionExists: function( folder ){
		var found = this.imageFolderList.find( function (o){
			return (o.folder == folder);
		})
		if(found){
			return true;
		}else{
			return false;
		}
	},
  	
	changeFolder: function( e ){
		var event = new Event(e);
		
		var el = event.target;
		var folder =$( el.id.replace('_folder', '_dd'));
		this.selectedFolder = (el).getValue();
		folder.innerHTML = '';
		var url = 'index2.php@option=com_fabrik&no_html=1&Itemid=' + this.options.Itemid + '&task=elementPluginAjax&method=ajax_GetImages&element_id=' + this.options.id + '&f=' + encodeURIComponent(this.selectedFolder);
		var myAjax = new Ajax(url, { method:'post', 
		onComplete: function(r){
			var newImages = eval(r);
			newImages.each(function(i){
				var opt = new Element('option', {'value':i}).appendText(i);
				opt.injectInside(folder);
			});
			this.showImage();
			//this.element.value = this.selectedImage;
		}.bind(this)}).request();
	},
	
	showImage: function( e ){
		if(e){
			var event = new Event(e);
			var el = event.target;
		}else{
			var el = this.imageDir;
		}
		if(el.options.length == 0){
			this.image.src = '';
			this.selectedImage = '';
		}else{
			this.selectedImage = el.getValue();
			this.image.src = this.options.rootDir + this.selectedFolder + this.selectedImage;
		}
		this.hiddenField.value = this.selectedFolder +  this.selectedImage;
	}	
});

fbLink = fbElement.extend({

	initialize: function(element, options) {
		this.elementtype_id = 'fabrikLink';
		this.setOptions(element, options);
	},

	setOptions: function( element, options ) {
		options.ro = false;
		if($(element)){
			this.element = $(element);
			if(this.element && this.element.hasClass('readonly')){
				options.ro = true;
			}
		}
		
		var d = new Array();
		this.options = Object.extend({
			element:       'default',
			defaultVal: d
		}, arguments[1] || {});
		var ok = true;
		this.linkField = $(element + '_link');
		
		this.subElements = [this.element, this.linkField];
	},

	addNewEvent: function( action, js ){
		if(action == 'load'){
			eval(js);
		}else{
			this.subElements.each( function(el){
				(el).addEvent( action, function(e){
					eval(js);
				} );
			});
		}
	}

});

fbDisplayText = fbElement.extend({
	initialize: function(element, options) {
		this.elementtype_id = 'fabrikDisplayText';
		if($(element + '_counter')){
			this.warningFX = $(element + '_counter').effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
			var origCol = $(element + '_counter').getStyle('color');
			$(element).addEvent('keydown', function(e){
				var charsLeft =  this.options.max - ($(element).value.length + 1);
				if(charsLeft < 0){
					$(element).value = $(element).value.substring(0,this.options.max);
					charsLeft = 0;
					this.warningFX.start({'opacity':0, 'color':'#FF0000'}).chain(function(){
						this.start({'opacity':1, 'color':'#FF0000'}).chain(function(){
						this.start( {'opacity':0,'color':origCol}).chain(function(){
							this.start({'opacity':1})
						})
					})
				});
				}
				$(element + '_counter').setHTML(charsLeft);
			}.bind(this))
		}
		this.setOptions(element, options);
	},
	
	update: function(val, record){
		this.element.setHTML(val);
	}
});