function createWYSIWYG(textArea, index){
	//Cette fonction s'appuie sur la bibliothéque JQuery.
	$(textArea)
	.keyup(function(event){
		$(textArea).next().html($(this).val());
	})
	//On insert un div
	.after('<div contentEditable="true" designMode="on" class="frame_wysiwyg"></div>')
	.hide()
	//On sélectionne le div créé.
	.next()
	//On affecte un événement de clavier sur cet élément.
	.keyup(function(event){
		$(textArea).val($(this).html());
	})
	.prev()
	.keyup();
	if(index > 0){
		$(textArea).next().hide();
	}
}

function toggleRTE(toggleButton){
	var toe = $(".wysiwyg:visible");
	var rte;
	if(toe.length > 0){
		rte = toe.next(".frame_wysiwyg");
	} else {
		rte = $(".frame_wysiwyg:visible");
		toe = rte.prev(".wysiwyg");
	}
	if(rte.is(":visible")){
		$(".button_bold").attr("disabled", "disabled");
		$(".button_italic").attr("disabled", "disabled");
		$(".button_underline").attr("disabled", "disabled");
		rte.hide();
		toe.show();
		$(toggleButton).removeClass("toggle_off").addClass("toggle_on");
	} else {
		$(".button_bold").removeAttr("disabled");
		$(".button_italic").removeAttr("disabled");
		$(".button_underline").removeAttr("disabled");
		toe.hide();
		rte.show();
		$(toggleButton).removeClass("toggle_on").addClass("toggle_off");
	}
}

/*
 * Tests de fonctions pour un éditeur riche en JS.
 */

function refreshEditor(){
	$(".wysiwyg").next().keyup();
}
function newPage(){
	var current = $(".wysiwyg:visible");
	if(current.length == 0){
		current = $(".frame_wysiwyg:visible").prev(".wysiwyg");
	}
	var newPage = $("<textarea rows='25%' cols='90%' class='wysiwyg'></textarea");
	current.next().after(newPage);
	createWYSIWYG(newPage, 1);
	renumber();
	next();
}

function deletePage(){
	var elements = $(".wysiwyg");
	if(elements.length == 1){
		elements.val("").keyup();
	} else {
		var current = $(".wysiwyg:visible");
		if(current.length == 0){
			current = $(".frame_wysiwyg:visible").prev(".wysiwyg");
		}
		var index = elements.index(current);
		if(index == 0){
			next();
		} else {
			previous();
		}
		current.next().remove();
		current.remove();
		renumber();
	}
}
function next(){
	var current = $(".wysiwyg:visible");
	if(current.length == 0){
		current = $(".frame_wysiwyg:visible").prev(".wysiwyg");
	}
	if(current.length == 1){
		var next = current.nextAll(".wysiwyg").first();
		if(next.length > 0){
			var name = next.attr("name");
			$("#pageTitle").text(name.charAt(0).toUpperCase() + name.substr(1, 3) + " " + name.substr(5) + "/" + $(".wysiwyg").length);
			current.hide().next().hide();
			next.next().show();
		}
	}
}
function previous(){
	var current = $(".wysiwyg:visible");
	if(current.length == 0){
		current = $(".frame_wysiwyg:visible").prev(".wysiwyg");
	}
	if(current.length == 1){
		var previous = current.prevAll(".wysiwyg").first();
		if(previous.length > 0){
			var name = previous.attr("name");
			$("#pageTitle").text(name.charAt(0).toUpperCase() + name.substr(1, 3) + " " + name.substr(5) + "/" + $(".wysiwyg").length);
			current.hide().next().hide();
			previous.next().show();
		}
	}
}
function renumber(){
	$(".wysiwyg").each(function(index, element){
		$(element).attr("name", "page_" + (index+1));
	});
	var current = $(".wysiwyg:visible");
	if(current.length == 0){
		current = $(".frame_wysiwyg:visible").prev(".wysiwyg");
	}
	name = current.attr("name");
	$("#pageTitle").text(name.charAt(0).toUpperCase() + name.substr(1, 3) + " " + name.substr(5) + "/" + $(".wysiwyg").length);
}

function bold(){
	document.execCommand('bold',null,false);
	refreshEditor();
}
function italic(){
	document.execCommand('italic',null,false);
	refreshEditor();
}
function underline(){
	document.execCommand('underline',null,false);
	refreshEditor();
}

//TODO
//function title(){
//	document.execCommand('formatblock',false,'h1');
//	refreshEditor();
//}

function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
    }
}

$(function(){
	$(".wysiwyg").each(function(index, element){createWYSIWYG(element, index)});
});