// globals
var highestDepth = 1;
var userId;
var pageId;
var pageUrl;
var noteTray;
var url = "/__Ajax/Notes.aspx";

if (!nu) {
	var nu = new Object();
}


nu.Note = Class.create();
nu.Note.prototype = {
	
	noteId: 0,
	el: null,
	title: "Note",
	promptText: "Type here..",
	message: "",
	isMinimised: false,
	x: "500px", // default position
	y: "100px",
	
	initialize: function(data) {
		
		// create html element for note
		this.el = document.createElement('div');		
		this.el.className = "note";
		this.el.onmousedown = function() {
			highestDepth ++;
			this.style.zIndex = highestDepth;
		}		
		this.el.onmouseup = this.updatePosition.bind(this);
		document.body.appendChild(this.el);		
		
		// make element draggable 
		new Draggable(this.el, {starteffect:false, endeffect:false});	
		
		// set properties
		this.message = this.promptText;		
		for (var i in data) {
			this[i] = data[i];
		}

		highestDepth ++;
		this.el.style.zIndex = highestDepth;
		this.el.style.left = this.x;
		this.el.style.top = this.y;
		
				
		if (!data) {
			// create new note
			this.edit();
		} else {
			// display existing note			
			this.display();	
			if (this.isMinimised){
				this.el.style.visibilty = "hidden";
				this.minimise(true, 0);
			}
		}
	},
	
	remove: function() {
	
        // remove element from document
        this.el.parentNode.removeChild(this.el);
        
		var deleteRequest = new Ajax.Request(
			url, {
				method: 'post', 
				parameters: 'mode=delete&note_id=' + this.noteId
			});
	},
	
	edit: function() {
		// insert input elements
		this.el.innerHTML ="<div class=\"inner\">&nbsp;</div>"
		var editHtml = '<div class="noteHeader"><input name="title" type="text" value="' + this.title + '" /></div>';
		editHtml += '<textarea name="message" cols="10" rows="6">' + this.message.replace("<br />", "\n") + '</textarea>';
		editHtml += '<div class="noteButtons"><button class="noteSaveBt">&nbsp;</button><button class="noteCancelBt">&nbsp;</button></div>';
		
		this.el.firstChild.innerHTML = editHtml;

		// add button behaviors
		var buttons = this.el.getElementsByTagName('button');
		buttons[0].onclick = this.updateData.bind(this);
		buttons[1].onclick = this.cancel.bind(this);
		
		// set initial prompt text
		if (this.message == this.promptText) {			
			var textarea = this.el.getElementsByTagName('textarea')[0];
			textarea.className = "ghosted";
			textarea.onfocus = function(){
				this.className = null;
				this.value = "";
			}
			var def = this.promptText
			textarea.onblur = function(){
				if(!this.value){
					this.value = def;
					this.className = "ghosted";
				}
			}
		}
	},
	
	display: function() {		

		this.el.style.display = "block";
		this.el.style.height = "auto";

		// render display html
		this.el.innerHTML ="<div class=\"inner\">&nbsp;</div>"
		this.el.firstChild.innerHTML = '<div class="minimise"><img src="/images/layout/note-minimise.gif" alt="Minimise" /></div>';
		this.el.firstChild.innerHTML += '<div class="noteHeader"><h3>' + this.title + '</h3></div>';
		this.el.firstChild.innerHTML += '<p>' + this.message + '</p>';
		this.el.firstChild.innerHTML += '<div class="noteButtons"><button class="noteEditBt">&nbsp;</button><button class="noteDeleteBt">&nbsp;</button></div>';
		
		// add button behaviors		
		var buttons = this.el.getElementsByTagName('button');
		buttons[0].onclick = this.edit.bind(this);
		var self = this;
		buttons[1].onclick = function(){
			if (confirm("Delete Note?")) {
				self.remove();
			}
		}
		
		var minimise = document.getElementsByClassName("minimise", this.el)[0];
		minimise.onclick = function(){
			self.minimise(true);
		}
	},
	
	updateData: function() {
		this.title = this.el.getElementsByTagName('input')[0].value;
		this.message = this.el.getElementsByTagName('textarea')[0].value.replace("\n", "<br />");
		if (!this.message || this.message == this.promptText) {
			alert("Please enter some text");		
		} 
		else if (!this.title) {
			alert("Please enter a title");		
		} else {
			this.save();
			this.display();
		}
	},
	
	updatePosition: function() {
		// if this is not a new note and it's position has changed, upadte properties and save		
		if (this.noteId && this.x != this.el.style.left || this.y != this.el.style.top) {			
			this.x = this.el.style.left;
			this.y = this.el.style.top;
			this.save();
		}
	},
	
	minimise: function(state, t) {
		this.isMinimised = state;
		if (t == null) {
			t = 0.5; // default transition time
		}
		var tweenOptions = {duration: t, transition: Effect.Transitions.sinoidal};
		var el = this.el;
		
		if (state) {
			el.style.height = el.offsetHeight + "px";
			el.style.width =  el.offsetWidth + "px";
			
			el.innerHTML = "";	
			
			tweenOptions.x = $('noteTray').offsetParent.offsetLeft + $('noteTray').offsetLeft;
			tweenOptions.y = $('noteTray').offsetParent.offsetTop + $('noteTray').offsetTop;
			tweenOptions.mode = "absolute";
			
			new Effect.Move(el, tweenOptions)
			new Effect.Scale(el, 10, tweenOptions);
			tweenOptions.afterFinish = addToTray.bind(this, this);
			tweenOptions.from = 0.99;
			tweenOptions.to = 0;
			new Effect.Opacity(el, tweenOptions);
			
		} else {
			el.style.visibility = "visible";
			tweenOptions.x = parseInt(this.x);
			tweenOptions.y = parseInt(this.y);
			tweenOptions.mode = "absolute";
			
			new Effect.Move(el, tweenOptions);
			new Effect.Scale(el, 1000, tweenOptions);
			tweenOptions.to = 0.99;
			tweenOptions.from = 0;
			tweenOptions.afterFinish = this.display.bind(this);
			new Effect.Opacity(el, tweenOptions);
		}
			
	    this.save();
	},
	
	cancel: function() {
		if (!this.message || this.message == this.promptText) {
			this.remove();
		} else {
			this.display();
		}
	},
	
	save: function() {
		var updateRequest = new Ajax.Request(
			url, {
				method: 'post', 
				parameters: 'mode=save&user_id=' + userId + '&record_id=' + pageId + '&page_url=' + pageUrl + '&note_id=' + this.noteId + '&name=' + this.title + '&text=' + this.message + '&x=' + this.x + '&y=' + this.y + '&minimised=' + this.isMinimised, 
				onComplete: function(req) {
					// request returns noteId - we need this if this is a new note
					this.noteId = req.responseText;
					// this is not actually updating the owning note id
				}.bind(this)
			});
	}
}

function addToTray(note) {

	note.el.style.visibility = "hidden";

	var minItem = document.createElement('div');
	minItem.className = "noteIcon";
	
	minItem.innerHTML = "<img src=\"/images/icons/note-icon.gif\" alt=\"expand\" />&nbsp;" + note.title;
	
	$('noteTray').appendChild(minItem);	
	
	var minimise = note.minimise.bind(note);	
	
	minItem.onclick = function() {
		minimise(false);
		this.parentNode.removeChild(this);
	}
}

function initNotes(u, p, purl) {
	if (!$('quickLinksNote')) return false;
	if (!$('noteTray')) return false;
	
	$('noteTray').innerHTML = "";
	
	userId = u;
	pageId = p;
	pageUrl = purl;
	
	$('quickLinksNote').onclick = function(){
		new nu.Note();	
	}
	
	Position.includeScrollOffsets = true;
		
    new Ajax.Request(
		url + '?' + Math.random * 10000, {
			method: 'get', 
			parameters: 'mode=list&user_id=' + userId + '&record_id=' + pageId + '&page_url=' + pageUrl, 
			onComplete: function(req) {
				var notes = eval('(' + req.responseText + ')');	
				for (var i=0; i < notes.length; i++){					
					new nu.Note(notes[i]);
				}
			}
		});
}