//Inplace Edit
//Parameters:
//@ idCssClass		IDs with this css class will be make editable 
//              		for examlple: <div id="xx" class="idCssClass">text here</div>
//@ inplaceEditUrl	ajax call send back to server, add "&elementId=xxx&elementValue=xxx" at the end of this url
//@ userConfig 		user defined configs, parameters:
//						@ editType				edit type, default=EDITTYPE_INPUT
//						@ autoCompleteUrl	    auto complete url
//						@ userDefineTemplate	user's template
//						@ inputClass			input component css style class, default value depends on editType
//						@ submitClass			submit buttons css style class,	
//						@ mouseMoveOverClass	mouse move over css style class, default="editable"
//						@ selectOptions			Select input options html piece, <option value="">label</option> ...
//						@ explainText			expalin text, default="";

var DEFAULT_TEMPLATE=
'<div id="{id}_editarea" >'
+'	<div>'
+'		{explainText}'
+'	</div>'
+'	<div id="{id}_complete" >'
+'		 {InputDefine}'
+'	     <div id="{id}_container"></div>'
+'	</div>'
+'	<div class="{submitClass}">'
+'	  {spaceline}'
+'    <table align="center"><tr><td><a id="{id}_save" href="javascript:void(0)" class="btn" />Save</a></td>'
+'    <td><a id="{id}_cancel" href="javascript:void(0)" class="btn" />Canel</a></td></tr></table>';
+'	</div>'
+'</div>';

var EDITTYPE_INPUT = DEFAULT_TEMPLATE.replace("{InputDefine}",'<input id="{id}_input" name="{id}_input" type="text" value="{title}" class="{inputClass}" />');
var EDITTYPE_AREA = DEFAULT_TEMPLATE.replace("{InputDefine}",'<textarea id="{id}_input" name="{id}_input" class="{inputClass}" >{title}</textarea>');
var EDITTYPE_SELECT = DEFAULT_TEMPLATE.replace("{InputDefine}",'<select id="{id}_input" name="{id}_input" class="{inputClass}" >{selectOptions}</select>');

function createInplaceEdit(idCssClass, inplaceEditUrl, userConfig){
	 var editableIDArray= new Array();
	 var myDSArray = [];
	 
	 var defaultConfig={
	 			   editType:EDITTYPE_INPUT,	 
	 			   mouseMoveOverClass:"editable",
	 			   explainText:""
	 			   };
	 if(userConfig!=null) 
	 	for(key in userConfig){
		 	defaultConfig[key]=userConfig[key];
		}
		
	 var editType = defaultConfig["editType"];
	 var mouseMoveOverClass = defaultConfig["mouseMoveOverClass"];
	 var inputClass = defaultConfig["inputClass"];
	 var autoCompleteUrl = defaultConfig["autoCompleteUrl"];
	 var selectOptions = defaultConfig["selectOptions"];
	 var userDefineTemplate = defaultConfig["userDefineTemplate"];
	 var submitClass = defaultConfig["submitClass"];
	 var explainText = defaultConfig["explainText"];	 

	 if(null!=userDefineTemplate)
	 	editType = userDefineTemplate;
	 
	 if(null==submitClass)
	 	submitClass = "buttons_area";
	 
	 if(null==inputClass){
	 	inputClass="long_editable_area";
	 	if (editType==EDITTYPE_AREA)
	 		inputClass="editable_area";
	 }	
	 
	 function showAsEditable(e, id){
	          YAHOO.util.Dom.addClass(id, mouseMoveOverClass);
	  }
	 
	 function disableEditable(e, id){
	         YAHOO.util.Dom.removeClass(id, mouseMoveOverClass);
	 }
	 
	 function makeEditable(id){
	    YAHOO.util.Event.addListener(id, "mouseover", showAsEditable, id , true);
	    YAHOO.util.Event.addListener(id, "mouseout", disableEditable, id , true);
	    YAHOO.util.Event.addListener(id, "click", doInplaceEdit, id, false);
	 }
	 
	  function cleanUpEditable(e, id, valueIfEmpty){
	 	 try{removeDiv(id + '_editor');}catch(e){} 	 
	 	 try{
	 	 YAHOO.util.Dom.removeClass(id, "hide");
	 	 var title=document.getElementById(id).innerHTML; 
		 if(title=="")title.innerHTML= valueIfEmpty;
		 }catch(e){}
	 }
	 
	 var inplaceEdit_handleSucceed = function(o) {
	 	 for (i in editableIDArray)
	 	 	cleanUpEditable(null, editableIDArray[i]); 
		eval(o.responseText);
	 }
	 
	  var inplaceEdit_handleFailure = function(o) {
		alert('Operation failed with status: ' + o.status + ', please try again later');
	 }
	
	 var inplaceEdit_callback = {success:inplaceEdit_handleSucceed, failure:inplaceEdit_handleFailure };
	 
	 	
	 function saveChanges(e, id){
			var randomnumber = Math.floor(Math.random() * 100000);
				title=document.getElementById(id + '_input').value;
			var request = YAHOO.util.Connect.asyncRequest('get', inplaceEditUrl + '&' + randomnumber+'&elementId='+id+'&elementValue='+title, inplaceEdit_callback);
	 }
	 
	 function doInplaceEdit(e, id){
	 	 for (i in editableIDArray)
	 	 	cleanUpEditable(null, editableIDArray[i]);
	 	 YAHOO.util.Dom.addClass(id, "hide");
		 var place = document.createElement("div");
		 place.id = id + '_editor';
		 var title=document.getElementById(id).innerHTML;
		 if(title=="&nbsp;" || title.indexOf("Click here to add")==0 )
		     title="";
		 editHtml= editType;
		 editHtml=editHtml.replace("{submitClass}",submitClass);		 
		 while (editHtml.indexOf("{id}")>-1)  
		  	editHtml=editHtml.replace("{id}",id);
		 if(null!=autoCompleteUrl)
		 	title+=" "; 	
		 while (editHtml.indexOf("{title}")>-1)  
		    editHtml=editHtml.replace("{title}",title);		 	
		 while (editHtml.indexOf("{inputClass}")>-1)  
		    editHtml=editHtml.replace("{inputClass}",inputClass);		    
		 while (editHtml.indexOf("{selectOptions}")>-1)  
		    editHtml=editHtml.replace("{selectOptions}",selectOptions);
		 while (editHtml.indexOf("{explainText}")>-1)  
		    editHtml=editHtml.replace("{explainText}",explainText);		    
		 if(null!=autoCompleteUrl)		    
		 		editHtml=editHtml.replace("{spaceline}","<br /><br /><br /><br />");
		 	else
		 		editHtml=editHtml.replace("{spaceline}","");
 		
		 place.innerHTML = editHtml;   
	     YAHOO.util.Dom.insertAfter(place, id);
	     YAHOO.util.Event.addListener(id+"_save", "click", saveChanges, id , true);
	     YAHOO.util.Event.addListener(id+"_cancel", "click", cleanUpEditable, id , true);
	     if(null!=autoCompleteUrl)
	     	ACJSArray(id);
	     try{document.getElementById(id + "_input").select();}catch(e){}	
	 }
	
	function ACJSArray(id) {
    var oACDS = new YAHOO.widget.DS_JSArray(myDSArray);
    var oAutoComp = new YAHOO.widget.AutoComplete(id+'_input',id+'_container', oACDS);
    oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
    oAutoComp.typeAhead = false;
    oAutoComp.useShadow = true;
    oAutoComp.useIFrame = true;  
	oAutoComp.delimChar = ",";
	oACDS.queryMatchContains = true;  
    oAutoComp.minQueryLength = 1;
    oAutoComp.textboxFocusEvent.subscribe(
    	function() {
	        var sInputValue = YAHOO.util.Dom.get(id+'_input').value;
        	if(sInputValue.length >1) {
	            var oSelf = this;
            	setTimeout(function(){oSelf.sendQuery(sInputValue);},0);
        	}
    	}
       );
	};
			
	var handleSucceed = function(o) {
    if(o.responseText !== undefined) {
		eval(""+o.responseText);
	}
	}

	var handleFailure= function(o) {
		alert('Submission failed with status: ' + o.status + ', please try again later');
	}
	
	var callback = {
	  success:handleSucceed, failure:handleFailure
	};
	
	function getContainer() {
		  var randomnumber = Math.floor(Math.random() * 100000);
		  var request = YAHOO.util.Connect.asyncRequest('post', autoCompleteUrl + '&' + randomnumber, callback);
	}

	if(null!=autoCompleteUrl)
		getContainer();
	var elements = YAHOO.util.Dom.getElementsByClassName(idCssClass);
    for (x in elements){
        makeEditable(elements[x].id);
    	editableIDArray.push(elements[x].id);
    }

}