<?xml version="1.0" encoding="iso-8859-15"?>

<bindings id="notes"
	xmlns="http://www.mozilla.org/xbl"
	xmlns:xbl="http://www.mozilla.org/xbl"
	xmlns:html="http://www.w3.org/1999/xhtml"
	xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

	<binding id="board">
		<resources>
			<stylesheet src="test.css"/>
		</resources>
		<implementation>
			<property name="dragging">0</property>
			<property name="currX">0</property>
			<property name="currY">0</property>
			<property name="note_editee">0</property>
			<property name="note_nouvelle">0</property>
			<constructor>
				var table_notes = new Array();

				function replace_all(texte, cherche, remplace)
				{
					var sortie = texte;
					var index = sortie.indexOf(cherche);
					while (index > 1)
					{
						sortie = sortie.replace(cherche, remplace);
						index = sortie.indexOf(cherche, (index + cherche.length + 1));
					}
					return sortie;
				}

				// Ajouter une note : ouvre l'éditeur
				this.addNote = function()
				{
					var titre_note = prompt("Titre pour la note :");
					if (titre_note)
					{
						var editeur = document.getElementById("editeur");
						var go = 1;
						if (editeur.getAttribute("class") == "edition_yes")
						{
							if (!(confirm("Une note est déjà en cours d'édition. Annuler cette note ?")))
							{
								go = 0;
							}
						}
						if (go)
						{
							this.note_nouvelle = 1;
							editeur.setAttribute("class", "edition_yes");
							var texte_editeur = document.getElementById ("texte_note");
							texte_editeur.value = "";
							this.note_editee = document.createElement("div");
							var titre_editeur = document.getElementById ("titre_note");
							titre_editeur.innerHTML = "Note : " + titre_note;
							this.note_editee.setAttribute("caption",titre_note);
						}
					}
				}

				// Fonction d'edition
				this.editNote = function(div)
				{
					if (!(div.getAttribute("class") == "note_rolled"))
					{
						var editeur = document.getElementById("editeur");
						var go = 1;
						if (editeur.getAttribute("class") == "edition_yes")
						{
							if (!(confirm("Une note est déjà en cours d'édition. Annuler cette note ?")))
							{
								go = 0;
							}
						}
						if (go)
						{
							editeur.setAttribute("class", "edition_yes");
							var texte_editeur = document.getElementById("texte_note");
							texte_editeur.value = replace_all(div.innerHTML,"&#060;br&#062;","\n");
							this.note_editee = div;
							var titre_editeur = document.getElementById ("titre_note");
							var titre_note = div.getAttribute("caption");
							titre_editeur.innerHTML = "Note : " + titre_note;
						}
					}
				}

				// Suppression de note
				this.removeNote = function(div)
				{
					// Confirmation
					if (confirm("Confirmes-tu la suppression de la note ?"))
					{
						(div.parentNode).removeChild(div);
						// TODO : appeler le serveur pour faire la suppression
					}
				}

				// Fonction pour enrouler et derouler une note
				this.rollNote = function(div)
				{
					var style = div.getAttribute('class');
					if (style == 'note')
					{
						div.setAttribute('class','note_rolled');
						table_notes[div.getAttribute("caption")] = div.innerHTML;
						div.innerHTML = "";
					} else {
						div.setAttribute('class','note');			
						div.innerHTML = table_notes[div.getAttribute("caption")];
					}
				}
			</constructor>
		</implementation>

		<handlers>
			<handler event="mousedown">
				if (event.originalTarget.className == 'noteCaption') {
					switch (event.originalTarget.nodeName) {
						case 'html:div':
						    this.dragging = event.originalTarget.parentNode.parentNode;
						    break;
						case 'xul:text':
						    this.dragging = event.originalTarget.parentNode.parentNode.parentNode;
						    break;
					}
					var divs = this.dragging.parentNode.getElementsByTagName("div");
					this.currX = event.clientX;
					this.currY = event.clientY;
					var max = 0;
					for (var i = 0; i != divs.length; i++)
					{
						if (max &lt; divs[i].style.zIndex)
						{
							max = divs[i].style.zIndex;
						}
					}
					this.dragging.style.zIndex = parseInt(max) + 1;
				}
			</handler>
			<handler event="mouseup">
				switch (event.originalTarget.className) {
				case 'addNote':
					this.addNote();
					break;
				case 'editNote':
					editNote(event.originalTarget.parentNode.parentNode.parentNode);
					break;
				case 'deleteNote':
					removeNote(event.originalTarget.parentNode.parentNode.parentNode);
					break;
				case 'rollNote':
					rollNote(event.originalTarget.parentNode.parentNode.parentNode);
					break;
				default:
					break;
				}
				this.dragging = null;
			</handler>
			<handler event="mousemove">
				if (!this.dragging) return;
				var deltaX = event.clientX - this.currX;
				var deltaY = event.clientY - this.currY;
				var left = parseInt(this.dragging.style.left);
				var topp = parseInt(this.dragging.style.top);
				left += deltaX; topp += deltaY; if (left &lt; 0) left = 0; 
				if (topp &lt; 0) topp = 0;
				if (left > 592) left = 592;
				if (topp > 500) topp = 500;
				this.dragging.style.left = left;
				this.dragging.style.top = topp;
				this.currX = event.clientX;
				this.currY = event.clientY;
			</handler> 
		</handlers>

		<content>
			<children/>
			<html:div align="right">
				<html:button class="addNote">Nouveau</html:button>
			</html:div>
		</content>
	</binding>

	<binding id="note">
		<resources>
			<stylesheet src="test.css"/>
		</resources>
		<content>
			<html:div style="width: 100%; margin-bottom: 5px; border: thin solid #ccccaa;">
				<html:div class="noteCaption">
					<xul:text class="noteCaption" xbl:inherits="value=caption"/>
					<html:button class="rollNote" title="Enrouler la note">Roul.</html:button>
					<html:button class="editNote" title="Editer la note">Edit.</html:button>
					<html:button class="deleteNote" title="Supprimer la note">Sup.</html:button>
				</html:div>
			</html:div>
			<html:div>
				<children/>
			</html:div>
		</content>
	</binding>
</bindings>
