/**
 * @author Robert
 
 watch another element for changes to its value, and send an ajax call to update
 this elements values 
 */
 var fbCascadingdropdown = FbElement.extend({
	initialize: function(element, options) {
		var o = null;
		this.ignoreAjax = false;
		this.plugin = 'cascadingdropdown';
		this.setOptions(element, options);
		if($(this.options.watch)){
			$(this.options.watch).addEvent('change', this.watch.bindAsEventListener(this));
		}
	},
	
	attachedToForm: function()
	{
		// $$$ rob have to call update here otherwise all options can be shown
		//use this method as getValue on el wont work if el readonly
		var v = this.form.formElements.get(this.options.watch).getValue();
		this.change(v, $(this.options.watch).id);
	},
	
	watch: function(e)
	{
		e = new Event(e);
		var v = $(e.target).getValue();
		this.change(v, $(e.target).id);
	},
	
	change:function(v, triggerid)
	{
		var origvalue = this.getValue();
		if(window.ie){
			if(this.options.repeatCounter.toInt() === 0){ 
			// this is the original cdd element
				var s = triggerid.substr(triggerid.length - 2, 1);
				var i = triggerid.substr(triggerid.length - 1, 1);
				// test for "_x" at end of trigger id where x is an int
				if(s == '_' && $type(parseInt(i)) == 'number' ){
					//found so this is the bug where a third watch element incorrectly updates orig
					return;
				}
			}
		}
		this.element.getParent().getElement('.loader').setStyle('display', '');
		var url = this.options.liveSite + 'index.php?option=com_fabrik&format=raw&Itemid=' + this.options.Itemid + '&controller=plugin&task=pluginAjax&plugin=fabrikcascadingdropdown&method=ajax_getOptions&element_id=' + this.options.id;

		// $$$ hugh testing new getFormElementData() method to include current form element values in data
		// so any custom 'where' clause on the cdd can use {placeholders}.  Can't use getFormData() because
		// it includes all QS from current page, including task=processForm, which screws up this AJAX call.
		var myAjax = new Ajax(url, {
		method:'post', 
		'data': Object.extend(this.form.getFormElementData(), {'v':v, 'formid':this.form.id, 'fabrik_cascade_ajax_update':1}),
		onComplete: function(json){
			
			this.element.getParent().getElement('.loader').setStyle('display', 'none');
			json = Json.evaluate(json);
			this.element.empty();
			if(!this.ignoreAjax){
				var opts;
				json.each(function(item){
					// $$$ rob if loading edit form, at page load, u may have a previously selected value 
					opts = item.value == origvalue ? {'value':item.value, 'selected':'selected'} : {'value':item.value};
					new Element('option', opts).appendText(item.text).injectInside(this.element);
				}.bind(this));
			}else{
				if(this.options.showPleaseSelect){
					var item = json.shift(); 
					new Element('option', {'value':item.value, 'selected':'selected'}).appendText(item.text).injectInside(this.element);
				}
			}
			this.ignoreAjax = false;
			// $$$ hugh - need to remove/add 'readonly' class ???  Probably need to add/remove the readonly="readonly" attribute as well
			//this.element.disabled = (this.element.options.length == 1 ? true : false);
			if (this.element.options.length == 1) {
				this.element.readonly = true;
				this.element.addClass('readonly');
			}
			else {
				this.element.readonly = false;
				this.element.removeClass('readonly');
			}
			
		}.bind(this)}).request();
	},
		
	cloned: function(c){
		//c is the repeat group count
		//cloned seems to be called correctly 
		if($(this.options.watch)){
			if(this.options.watchInSameGroup === true) {
				this.options.watch = this.options.watch + '_' + c;
			}
			if($(this.options.watch)){
				//old events removed in database join element clone() method
				$(this.options.watch).addEvent('change', this.watch.bindAsEventListener(this));
			}
			
		}
		if (this.options.watchInSameGroup === true) {
			this.element.empty();
			//set ingoreAjax so that the ajax event that is fired when the element is added to the form manager
			// does not update the newly cloned dropdown
			this.ignoreAjax = true;
		}
	}
});