/*
* Needs prototype
*/

AutoCompleter=function()
{
	this.appName="mercury";//application name on root folder
	
	this.autoCompleteFieldId="";//id of the auto complete field
	this.folderName="";//the name of the folder that stores [loadJSON.do,autocomplete.do,etc]
	this.prefix;//the prefix for form fields
	this.completer;
	this.container; //container stores the field, arr, ajax loading gif etc
	this.formId;
	this.fieldId;
	this.activateOnBlur=false;	//if true and entry does not exists in drop down default to 0 
	this.forceOverwrite = false;	//allows component to overwrite preexisting fields
	//less frequently used
	this.autoCompleteArrowSpan;//reference to arrow span
	this.afterUpdateElementFunction;
	this.afterPopulateFormFunction;
}

AutoCompleter.prototype.setActivateOnBlur=function(activateOnBlur)
{
	this.activateOnBlur = activateOnBlur;
	if(this.activateOnBlur)
	{
		this.attachOnBlur();
	}	
}
AutoCompleter.prototype.setForceOverwrite=function(overwrite)
{
	this.forceOverwrite = overwrite;	
}
AutoCompleter.prototype.afterUpdateElementFunction=function(func)
{
	this.afterUpdateElementFunction = func;	
}
AutoCompleter.prototype.afterPopulateFormFunction=function(func)
{
	this.afterPopulateFormFunction = func;	
}

AutoCompleter.prototype.setAppName=function(name)
{
	this.appName = name;
}

AutoCompleter.prototype.setFieldID=function(id)
{
	this.fieldId= id;
}

AutoCompleter.prototype.init=function(appName,autoCompleteFieldId,folderName,prefix,formId,containerId)
{
	//gets params and sets to obj scope
	this.appName=appName;
	this.autoCompleteFieldId=autoCompleteFieldId;
	this.folderName=folderName;
	this.prefix=prefix;
	this.formId = formId;
	this.fieldId = this.prefix+'.id';
	//this.containerId = containerId || "dropdowncontainer";
	
	//change the auto complete field element to a storage div, copy and store the old 1
	//recreate input element and THEN
	//Removed because we now specify a container
	//this.createAutoCompleteStorageDiv(this.autoCompleteFieldId);
	
	this.container = $(this.autoCompleteFieldId+'_container') || $("dragdropcontainer");
	//alert(this.container.id)
	
	if(this.container)
	{
		//we create the element and set a reference so we can hook up events on it later
		this.autoCompleteArrowSpan = this.createAutoCompleteArrowSpan()
		//attache elements to container
		this.container.appendChild( this.autoCompleteArrowSpan );
		this.container.appendChild( this.createAutoCompleteIndicatorSpan() );
		this.container.appendChild( this.createAutoCompleteDiv() );
	}else{
		alert('Container doesnt exists');
	}
	
	
	if($(this.autoCompleteFieldId))//creates the auto completer if the element exists
	{
		var obj1 = new Object();
		obj1['inst']=this;
		
		//create ajax Autocompleter obj
		this.completer = new Ajax.Autocompleter(this.autoCompleteFieldId,
			this.autoCompleteFieldId+'_autocomplete',
			this.appName+'/'+this.folderName+'/autocomplete.do',{
				indicator:this.autoCompleteFieldId+'_indicator',
				paramName:'name',
				onFocus:true,
				afterUpdateElement: function(a,b){//called when a option has been selected
					//a html element
					//b li from drop down list
					obj1['inst'].updateID(a,b);
					//alert(obj1['inst'].afterUpdateElementFunction)
					if(obj1['inst'].afterUpdateElementFunction)
					{	
						setTimeout(obj1['inst'].afterUpdateElementFunction,0)
					}
				}
		});
	}else{
		alert('autoCompleteFieldId doesnt exist');
	}
	
	//Hook up events AFTER all elements have been created
	//check if the autocompleter and arrow span exists
	if(this.completer && this.autoCompleteArrowSpan)
	{
		var obj2 = new Object();
		obj2['inst']=this;
		Event.observe(this.autoCompleteArrowSpan,'click',function(e){
			obj2['inst'].completer.hasFocus = true;
			obj2['inst'].completer.startIndicator();
			obj2['inst'].completer.getUpdatedChoices();
		});
	}
	
	//attaches event on autoCompleteFieldId
	
	if(this.activateOnBlur)
	{
		this.attachOnBlur();
	}
	
}

//html elements
AutoCompleter.prototype.createAutoCompleteArrowSpan=function()
{
	//create the elements
	var span = document.createElement('span');
	var img = document.createElement('img');
	img.setAttribute('src','/gkpcommon/images/icon_dropdown.gif');
	span.setAttribute('class','arrowdown');
	span.appendChild(img);
	//append the element BELOW the selected "autoCompleteFieldId"
	return span;
}

AutoCompleter.prototype.createAutoCompleteIndicatorSpan=function()
{
	//create the elements
	var span = document.createElement('span');
	var img = document.createElement('img');
	img.setAttribute('src','/gkpcommon/images/indicator.gif');
	span.setAttribute('id',this.autoCompleteFieldId+'_indicator');
	span.setAttribute('style','display:none');
	span.style.display='none';//fix for ie
	span.appendChild(img);
	//append the element BELOW the selected "autoCompleteFieldId"
	return span;
}

//Div that stores ol's returned
AutoCompleter.prototype.createAutoCompleteDiv=function()
{
	var div = document.createElement('div');
	
	div.setAttribute('id',this.autoCompleteFieldId+'_autocomplete');
	div.setAttribute('class','autocomplete');
	
	
	//for ie
	div.id=this.autoCompleteFieldId+'_autocomplete';
	div.className='autocomplete';
	
	//append the element BELOW the selected "autoCompleteFieldId"
	return div;
}

//replaces input with a container div and appends the input field inside
AutoCompleter.prototype.createAutoCompleteStorageDiv=function(autoCompleteFieldId)
{
	//reference to field
	var autoCompleteField = document.getElementById(autoCompleteFieldId);
	//clone the field (shallow)
	var inputClone = document.createElement('input');
	inputClone.setAttribute('id',autoCompleteField.id);
	inputClone.setAttribute('size',autoCompleteField.size);
	inputClone.setAttribute('name',autoCompleteField.name);
	inputClone.setAttribute('style',autoCompleteField.style);
	
	//cannot replace 'input' because of bug, will get a input element with no properties
	var oriContent = Element.replace(autoCompleteField.id,'<div id="'+this.autoCompleteFieldId+'_container"></div>');
	var containerRef = $(this.autoCompleteFieldId+'_container');
	containerRef.appendChild( oriContent );
	
	this.container = containerRef;
}

//called on click on arrow
AutoCompleter.prototype.doComplete=function(e)
{
	this.completer.hasFocus = true;
	this.completer.startIndicator();
	this.completer.getUpdatedChoices();
}

AutoCompleter.prototype.updateID=function(a,b)
{
	//alert(b.id)
	$(this.fieldId).value=b.id;
	//this.setFieldId(b.id)
	
}

AutoCompleter.prototype.attachOnBlur=function()
{
	//alert($(this.fieldId).value);return false;
	//workaround
	//create a obj and set all the context we need
	//the execute
	var oo = new Object();
	oo['inst']=this;
	
	Event.observe($(this.autoCompleteFieldId),
		'blur',
		function(e){
			oo['inst'].getFull( e );
		},
		true);
}

AutoCompleter.prototype.getFull=function(e)
{
	//this.setFieldId()
	//alert(this.prefix)
	//alert(this.fieldId)
	
	//alert($(this.fieldId));
	//since attached as a event its loses obj context
	//alert('in get full');
	//get the form field value from event
	var name = Event.element(e).value;
	var id = $(this.fieldId).value;
	//alert(name);
	var content = {name:name.trim(),id:id};
	var url = this.appName+'/'+this.folderName+'/loadJSON.do';
	//alert(name+'|'+id);
	//return false;
	var obj3 = new Object();
	obj3['inst'] = this;
	
	var ajax = new Ajax.Request(url, {
		method: 'post', 
		parameters: content,
		onSuccess: function(e){
			obj3['inst'].populateForm(e);
		} 
	});
}

AutoCompleter.prototype.serializeObject=function(prefix,obj)
{
	var arr = new Array();
	/*for each(var o in obj)
	{
		if( typeof(o)=='object' )
		{
			//call self with obj
			//concat(arr,this.serializeObject(o))
		}	
	}*/
	return arr;
}

AutoCompleter.prototype.getMembers=function(obj,prefix){
		var members = new Array();
		var i = 0;

		//using for returns the obj name as a string
		//using for each returns obj
        for(var member in obj) 
        {
            if( typeof(obj[member])=='object' )
            {
            	var res = this.getMembers(obj[member],prefix+'.'+member);
            	members=members.concat(res);
            }
            else
            {
            	members[i] = prefix+'.'+member;
            }
            i++;
        }
        return members.sort();
}

AutoCompleter.prototype.populateForm=function(e)
{
	//return true;
	//Prerequisite
	//json obj names have to match as per form
	try 
	{
		//alert(e.responseText);
		var myObject = eval('(' + e.responseText + ')');
		
		var arrJSONPath = this.getMembers(myObject,this.prefix);
		
		for(var i=0;i<arrJSONPath.length;i++)
		{	
			var item = arrJSONPath[i];
			//alert(item)
			var formEle = $(item);
			if(item == this.prefix + ".id" )
			{
				 $(this.fieldId).value = myObject.id
				 //alert('entered this fake setup')
			}
			if(formEle)//if a form element with the corresponding id exists
			{
				//alert(item)
				if( typeof(item)=='string' )
				{
					//alert("String item: "+item)
					var evalStr = item.replace(this.prefix,'myObject');
					//e.g. JSON data
					//myObject.address.address1
					//set that forms value to JSON object
					var JSONVal = eval(evalStr);
					//alert(formEle.name + " should equal " + $(this.fieldId).name)
					
					if(formEle.value == '' || this.forceOverwrite || formEle.name == $(this.fieldId).name)
					{
						//alert("Val "+JSONVal)
						formEle.value = JSONVal;
					}
				}
			}
		}
		
		//alert('after all done')
		var obj1 = new Object();
		obj1['inst']=this;
		
		if(obj1['inst'].afterPopulateFormFunction)
		{	
			setTimeout(obj1['inst'].afterPopulateFormFunction,0)
		}
		
	} 
	catch (e) 
	{
		//alert("Error populating "+this.folderName+" fields. Details: "+ e);				      
	}
}

String.prototype.trim=function(){
	return this.replace(/^\s+|\s+$/, '');
}