// $Id: userNoteWidget.js 6123 2010-01-06 10:52:22Z tal $
/* How userNoteWidget works:

1. Scan the dom for a form element with the class of "userNoteWidgetInForm"
2. The id of the element will be something like "unw-219294" where 219294 is 
   the member's id. This is so that we can have multiple user note widgets
   on the same page.
3. Get the memberID out of the form's ID.
4. The form will have a child element textarea called unwTextarea. If 
   there is an existing note it will be prepoulated with the note.
5. We load the note into a js variable called 'noteText'

*/
Event.observe(window,'load',unwSetup);
var cts;
var note;
var noteTextarea;
var note_save_button;
var note_action_box;
var ajaxNoRetry = true;

function unwSetup(){
	
	var unwHolder = $$('form.userNoteWidgetInForm');

	for(var i = 0; i < unwHolder.length ; i++){
		// Sanity Checks

		/* We expect a find javascript variable called findNotesPath which comes from the 
		   pages table and will most likely always be '/s/find/notes.php'. If it's 
		   undefined we exit!  */
		if(typeof findNotesPath == 'undefined'){
			return(0);
		}

		/* Split up the element's id on "-". The first part should be "unw" and the second 
		   part is the memberID of the person the note is about. If either of these things 
		   aren't right, we exit!  */
		
		var params = unwHolder[i].id.split('-');		
		if(params.length != 2){
			return(0);
		}

		if(params[0] != 'unw'){
			return(0);
		}
		var memberId = params[1];

		/* Get the exiting note out of the textarea */
		var noteText = unwHolder[i].select('textarea.unwTextarea')[0].value;

		/* Check that memberId is a number, if not, bail. */
		if(isNaN(memberId)){
			return(0);
		}else{
			/* memberId is a number, lets create an instance of the UserNoteWidget */
			unwHolder[i] = Object.extend(unwHolder[i],unw);
			unwHolder[i].build();
			unwHolder[i].noteText = noteText;
			unwHolder[i].memberId = memberId;
			unwHolder[i].update();
		}
	} 
}

// User Note Widget
var unw = {};
	unw.build = function() {

		/* Set up some empty variables */
		this.innerHTML = '';
		this.noteText = '';
		
		/* Create a div to use when we're not in edit mode.
		   Set its class so we can style it. */
		this.noteDiv = document.createElement('div');
		this.noteDiv.className = 'unwDiv';

		
		/* Create a textarea to use when we're in edit mode.
		   Hide it (display:none).
		   Set its class so we can style it. */ 
		
		this.noteTextarea = document.createElement('textarea');
		this.noteTextarea.style.display = 'none';
		this.noteTextarea.className = 'unwTextarea';


		/* Set up an event for the texarea blur. This event needs to decide whether 
		   anything has changed, and if it has to do the ajax update. */
		this.noteTextarea.onblur = this.switchToViewingMode;
		

		/* Create the "Save Note" button.
		   Set it's value to the copy item which currently is "Save Note".
		   Hide it by default since it's only needed when we're in edit mode.	 */
		this.noteTextareaButton = document.createElement('button');
		this.noteTextareaButton.innerHTML = copyItems['find_profile_user_note_save'];
		this.noteTextareaButton.style.display = 'none';

		/* Create the actionBar which will either be "Add Note" or "Edit Note" */
		this.actionBar = document.createElement('a');
		this.actionBar.href = '#';
		this.actionBar.innerHTML = copyItems['find_profile_user_note_add'];

		this.actionBar.switchToAddMode = function(){
			this.innerHTML = copyItems['find_profile_user_note_add'];
			this.style.display = 'block';
			this.className = 'unwActionBar unwActionBarAdd';
		}

		this.actionBar.switchToEditingMode = function(){
			this.style.display = 'none';
		}

		this.actionBar.switchToViewingMode = function(){
			if (this.parentNode.noteTextarea.value == ''){
				this.innerHTML = copyItems['find_profile_user_note_add'];
			}else{
				this.innerHTML = copyItems['find_profile_user_note_edit'];	
			}
			this.style.display = 'block';
			this.className = 'unwActionBar unwActionBarView';
		}

		this.appendChild(this.noteDiv);
		this.appendChild(this.noteTextarea);
		this.appendChild(this.actionBar);
		this.appendChild(this.noteTextareaButton);	
	}

	unw.update = function(){
		this.noteDiv.innerHTML = this.noteText;
		this.noteTextarea.value = this.noteText;

		if(this.noteText == copyItems['default_note_copy'] || this.noteText == ''){
			this.noteDiv.innerHTML = '';
			this.actionBar.switchToAddMode();
		}else{
			this.noteDiv.innerHTML = this.nl2br(this.noteText);
			this.actionBar.switchToViewingMode();
		}
	}

	unw.switchToEditingMode = function(){
		if(this.noteTextarea.value == copyItems['default_note_copy']){
			this.noteTextarea.value = ''
		}
		this.noteDiv.style.display = 'none';
		var newheight = this.noteDiv.style.height;
		if (newheight < 50) { newheight = 50; }
		this.noteTextarea.style.height =  newheight + 'px';
		this.noteTextarea.style.display = 'block';
		this.noteTextarea.focus();
		this.noteTextareaButton.style.display = 'block';
		this.actionBar.switchToEditingMode();
		return false;
	}

	unw.switchToViewingMode = function(){
		this.parentNode.noteTextarea.style.display = 'none';
		if (this.parentNode.noteDiv.innerHTML != this.parentNode.nl2br(this.parentNode.noteTextarea.value)){
			//something has changed, trigger the update
			ajaxRequest(findNotesPath + '?m=' + this.parentNode.memberId +'&f=v&a=add','noteTextarea=' + this.parentNode.noteTextarea.value);
		}

		this.parentNode.noteDiv.innerHTML = this.parentNode.nl2br(this.value);
		this.parentNode.actionBar.switchToViewingMode();	
		this.parentNode.noteDiv.style.display = 'block';
		this.parentNode.noteTextareaButton.style.display = 'none';
	}

	unw.nl2br = function(text){
		var re_nlchar;
		text = escape(text);
		if(text.indexOf('%0D%0A') > -1){
			re_nlchar = /%0D%0A/g ;
		}else if(text.indexOf('%0A') > -1){
			re_nlchar = /%0A/g ;
		}else if(text.indexOf('%0D') > -1){
			re_nlchar = /%0D/g ;
		}
		return unescape( text.replace(re_nlchar,'<br>') );
	}

	unw.onclick = unw.switchToEditingMode;