var aroEditable = Class.create();

aroEditable.prototype = {
	initialize : function(divEditor,phpHandler) {
		this.editorId = divEditor;
		if(phpHandler!=null)
		this.phpPage = phpHandler;
		else
		this.phpPage = "ajax/updateArticle.php";
		this.editorDomReady = false;
		this.eventBinded = false;
		this.createEditorDom();
		this.loadTmce();

	},
	createEditorDom : function() {

		this.editor = $(this.editorId);
		this.editor.addClassName("editor");
		this.editor.hide();
		this.editor
				.update('<div class="x-toolbar x-small-editor barreBoutons">	<ul><li><input id="btpreview" type="button" value="Aperçu" class="bouton btnRechercher" /></li>	<li><input id="btcancel" type="button" value="Quitter" class="bouton btnActualiser" /></li>			<li><input id="btsave" type="button" value="Enregistrer" class="bouton btnEnregistrer" /></li></ul>		</div><div id="editorTTA"><textarea id="tmceTTA" class="tmce" style="width:100%;height:550px;"></textarea>');
		this.editorDomReady = true;
	},

	loadTmce : function() {

		this.tmce = tinyMCE.init( {
			mode : 'textareas',
			theme : 'advanced',
			editor_selector : 'tmce',
			convert_urls : false,
			cleanup : true,
			theme_advanced_blockformats : "p,h1,h2,h3,h4,h5,h6,blockquote"

		});

		this.tmce = tinyMCE.get("tmceTTA");

	},

	init : function(nom, type, identifiant, indice, controle) {

		//Override type to form while using v2
		if(type == "liste" && nom.substring(0,2) == "V2")
			type = "form";
		
		this.currentNom = nom;
		this.currentType = type;
		this.currentIdentifiant = identifiant;
		this.currentIndice = indice;
		this.currentControle = Element.extend(controle);
		this.currentOriginalText = this.currentControle.innerHTML;
		this.currentMode = "edit";

		if (!this.editorDomReady)
			this.createEditorDom();

		this.loadTmce();
		this.bindEvents();

		this.editor.show();
		var newText = this.currentControle.innerHTML;
		this.tmce.setContent(this.currentControle.innerHTML);
		this.currentControle.addClassName("cl_editable");

	},

	updateDB : function() {
		var text = this.currentControle.innerHTML;

		// text = text.replace(/\+/g, "&#43");
	// text = text.replace(/\\/g, "&#92");
	text = text.replace(/\%/g, "%25");
	text = text.replace(/\?/g, "%3F");
	text = text.replace(/\#/g, "%23");
	text = text.replace(/\&amp;/g, "%26amp%3B");
	text = text.replace(/\&/g, "%26");

	// text = escape(text);
	// text = html_entity_decode(text);
	var toUpdate = this.currentControle;
	var toPost = "?text=" + text + "&nom=" + this.currentNom + "&type="
			+ this.currentType + "&indice=" + this.currentIndice
			+ "&identifiant=" + this.currentIdentifiant;
	new Ajax.Request(this.phpPage, {
		method : 'post',
		parameters : toPost,
		requestHeaders : {
			Accept : 'application/json'
		},
		onLoading : function() {
			aroInfo("Sauvegarde en cours...","top",null)

		},
		onSuccess : function(transport) {

			var json = transport.responseText.evalJSON(true);
			if (json.status == "OK") {
				new Effect.Highlight(toUpdate);
				aroInfo("Sauvegardé","top",5)
			}
			else
			{
				aroInfo("Les modifications n'ont pas  pu être sauvegardées, veuillez réessayez.","top",10);
			}
		}

	});
},

bindEvents : function() {

	// donne par réference l'objet aroEditable
	var currentInstance = this;

	if (!this.eventBinded) {
		Event.observe('btsave', 'click', function(event) {

			var newText = currentInstance.tmce.getContent();
			currentInstance.currentOriginalText = newText;
			currentInstance.currentControle.update(newText);
			currentInstance.updateDB();
			currentInstance.editor.hide();

			currentInstance.currentMode = "edit";
			$("editorTTA").show();
			$('btpreview').value = "Aperçu";
			$('btpreview').addClassName('btnRechercher');
			$('btpreview').removeClassName('btnAjouter');
			currentInstance.currentControle.addClassName("cl_editable");

		});

		Event.observe('btpreview', 'click', function(event) {

			if (currentInstance.currentMode == "edit") {

				var newText = currentInstance.tmce.getContent();
				currentInstance.currentControle.update(newText);
				$("editorTTA").hide();

				currentInstance.currentMode = "preview";
				$('btpreview').value = "Editer";
				currentInstance.currentControle.removeClassName("cl_editable");
				$('btpreview').addClassName('btnAjouter');
				$('btpreview').removeClassName('btnRechercher');
			} else {
				$("editorTTA").show();
				currentInstance.currentMode = "edit";
				// $('btpreview').update("Aperçu");
				$('btpreview').value = "Aperçu";
				$('btpreview').removeClassName('btnAjouter');
				$('btpreview').addClassName('btnRechercher');
			}

		});

		Event.observe('btcancel', 'click', function(event) {

			$('editor').hide();
			$("editorTTA").show();
			currentInstance.currentMode = "edit";
			// $('btpreview').update("Aperçu");
				$('btpreview').value = "Aperçu";
				$('btpreview').removeClassName('btnAjouter');
				$('btpreview').addClassName('btnRechercher');

				currentInstance.currentControle
						.update(currentInstance.currentOriginalText);
				currentInstance.currentControle.addClassName("cl_editable");

			});

		this.eventBinded = true;
	}

}

};