// Editor
(function($) {
	// Fonction d'appel de base (options de fonctionne pas encore)
	$.fn.editor = function(options) {
		// Default options
		options = $.extend({
			editor : {
				editorId : 'editor',
				panelId : 'panel',
				contentId : 'content'
			},
			icon : {
				size : 18
			},
			// Permet de configurer quels icones on souhaite faire apparetre.
			iconList : ['link', 'strong'],
			// Les fenetres (boite de dialogue) sont généré en ajax, pour avoir une relation avec le serveur pour plus tard.
			windows : {
				urlScript : '/Editor/Views/Window.php'
			},
			// Langue par défaut
			language : 'fr'
		}, options);

		// Chargement de la toolBar
		options.controles = $.extend(true, options.controles, edit.toolBar);

		// Init editor
		edit(this, options);
	}

	edit = function(el, options) {
		if(this instanceof edit) {
			return this.init(el, options);
		} else {
			return new edit(el, options);
		}
	}

	$.extend(edit.prototype, {
		initOptions : null,
		
		initTextearea : null,
		
		initContent : null,
		
		prefix : null,
		
		editor : null,
		
		content : null,
		
		panel : null,

		init : function(el, options) {
			var self = this;
			
			// Appel des options
			this.initOptions = options;
			// Récupération de l'objet textarea (il y a une faute dans le code "textEarea" ;) )
			this.initTextearea = $(el);
			// Récupération du contenu du textarea version rendu final
			this.initContent = $(el).text();
			
			this.prefix = options.editor.editorId + '-';
			
			// Initialisation de l'editeur
			this.initEditor(el, options);
			
			// save content automatique dans le textarea
			$(this.content).bind('blur', function() {
				self.saveContent();	
			});
			
			// controls keys (pas encore opérationnel)
			$(this.content).bind('keyup', function(el) {
				var key = window.event ? el.keyCode : el.which;

				switch(key) {
					case 13:
						var rang = self.getRange();
						
						/*$(rang.startContainer.childNodes).each(function() {
							var type = this.nodeType;
							switch (type) {
								case 3:
									$(this).wrap('<p></p>');
									break;
								case 1:
									switch(this.nodeName.toLowerCase()) {
										case 'br':
											var elm = $(this).parent();

											if($(elm).prev().is('p')) {
												$(elm).after('<br />');
												$(elm).remove();
											}
											break;
									}
									break;
							}
						});*/
						break;
				}
			});
			
		},

		initEditor : function(el, options) {
			var self = this;
			
			// création de l'éditeur, de la toolBar et de la zone de saisie
			var editor = this.editor = $('<div></div>').attr('id', options.editor.editorId);
			var panel = this.panel = $('<ul></ul>').attr('id', this.prefix + options.editor.panelId);
			var content = this.content = $('<div></div>').attr({'id' : this.prefix + options.editor.contentId,
							      'contentEditable' : 'true'});
			
			// Insert les icones dans "this.panel"
			this.setMenu(options);
			
			// Affiche et mise en place d'éditeur
			$(this.initTextearea).before(editor);
			$(editor).append(panel)
				      .append(content)
				      .append($(this.initTextearea).hide());
				      			
			$(content).append(this.initContent);
		},
		
		// Création du menu
		setMenu : function(options) {
			for(var option in options.iconList) {
				// Reprend les options pour les icones que l'on souhaite voir ($.fn.editor).
				var name = options.iconList[option];
				if(options.controles[name]) {
					var action = options.controles[name];
					this.setIcon(name, action);
				}
			}
		},
		
		// Création des icone et de leur actions
		setIcon : function(name, action) {
			var self = this;
			var icon = $('<li></li>').addClass('icon')
						 .addClass(name);
			
			$(icon).bind('mousedown', function() {
				if(typeof(action.exec) == 'function') {
					// Si l'icone à une action spécifique (comme les liens, les images, ...)
					action.exec.apply(self);
				} else if(typeof(action.tag) == 'string') {
					// Si c'est un balise html (comme strong, p, ...)
					self.setTag(self, action);
				}
			});
			
			// Insertion dans le panel
			$(this.panel).append(icon);
		},
		
		// Permet d'envelopper une selection suivant un tag (nom d'une balise)
		setTag : function(el, options) {
			var self = el;
			var classe = '';
			var selection = this.getTextRang();
			
			if(typeof(options.classe) == 'string') {
				classe = ' class="' + options.classe + '"';
			}

			var tag = '<' + options.tag + classe + '>' + selection + '</' + options.tag + '>';

			$(self.content).html($(self.content).html().replace(selection, tag));
		},
		
		// Récupération de la selection sous forme d'objet
		getSelection : function() {
			return (window.getSelection) ? window.getSelection() : document.selection;
		},
		
		// Permet d'avoir la partie selectionner et ses informations
		getRange : function() {
			var selection = this.getSelection();
	    
			if (!(selection)) {
			    return null;
			}
	    
			return (selection.rangeCount > 0) ? selection.getRangeAt(0) : selection.createRange();
		},
		
		// Transforme la selection (objet) en text pur et sans espaces
		getTextRang : function() {
			var range = this.getRange();
			
			if($.browser.msie && range.text) {
				var text = range.text;
			} else if(!$.browser.msie) {
				var text = range.toString();
			} else {
				var text = null;
			}
			
			return $.trim(text)
		},
		
		// Permet la sauvegarde du contenu de la zone de saisie dans e textarea
		saveContent : function() {
			var htmlContent = $(this.content).html();
			
			if(typeof(htmlContent) != 'undefined') {
				$(this.initTextearea).html(htmlContent);
			}
		},
		
		// Permet de générer les fenetre (boite de dialogue)
		getWindow : function(fn, type, selection) {
			var self = this;
			
			$.ajax({
				url : this.initOptions.windows.urlScript,
				type : 'post',
				data : {type : type, language : this.initOptions.language, selection : selection},
				success : function(data) {
					$('body').prepend(data);
					
					// Fermeture de la boite de dialogue
					$('#window-close').live('click', function() {
						$('#window').remove();
					});
					
					// Alignement de la boite de dialogue
					$('#window').height();
					$('#window').width();
		
					$('#window').css({
						top : ($(window).height() - $('#window').height()) / 3 + 'px',
						left : ($(window).width() - $('#window').width()) / 2 + 'px'
					}); // fin alignement
					
					// Si il y a plusieurs onglets
					var i = 0;
					$('#window-content-tabs .list-tab').each(function() {						
						if(i != 0) {
							$(this).hide();
						}
						
						i++;
					});
					
					// Affiche des différents onglets
					$('#window-tabs li a').live('click', function() {
						var listTab = $(this).attr('id');
						
						$('#window-content-tabs .list-tab').each(function() {
							var id = $(this).attr('id');
							id = id.split('-');

							if(id[0] != listTab) {
								$(this).hide();
							} else {
								$(this).show();
							}
						});
					});
				}
			});
			
			// Envoie des données de la boite de dialogue.
			$('#editor-action').live('submit', fn);
		},		
		
		// Ne sert pas à grand chose (c'est pour eviter de faire planter IE quand il y un console.log())
		debug : function(debug) {
			if($.browser.msie) {
				alert(debug)
			} else {
				console.log(debug)
			}
		}
	});

	// La toolBar
	$.extend(edit, {
		toolBar : {
			// Icone Lien
			link : {
				// Parametre lors d'un execution spécifique
				exec : function() {
					var self = this;
					// Appel du text de la selection
					var selection = this.getTextRang();
					
					// Appel de la boite de dialoque
					this.getWindow(function() {
						// Récupération des différent élément de la boite de dialogue
						var protocol = ['http://', 'https://'];
						var url = $(this).find('input[name=url]').val();
						var title = $(this).find('input[name=title]').val();
						var rel = $(this).find('input[name=rel]').val();
						var id = $(this).find('input[name=id]').val();
						var classe = $(this).find('input[name=class]').val();
						var selection = $(this).find('input[name=selection]').val();
						
						// Création de l'attribut href
						if(typeof(url) != 'undefined') {
							var find = false;
							
							for(x in protocol) {
								if(protocol[x] === url) {
									find = true;
									break;
								}
							}
							
							if(!find) {
								herf = ' herf="' + $.trim(url) + '"';
							} else {
								herf = ' herf=""';
							}
							
						}
						
						// Création de l'attribut title
						if(typeof(title) != 'undefined' && title != '') {
							title = ' title="' + $.trim(title) + '"';
						}
						
						// Création de l'attribut rel
						if(typeof(rel) != 'undefined' && rel != '') {
							rel = ' rel="' + $.trim(rel) + '"';
						}
						
						// Création de l'attribut id
						if(typeof(id) != 'undefined' && id != '') {
							id = ' id="' + $.trim(id) + '"';
						}
						
						// Création de l'attribut class
						if(typeof(classe) != 'undefined' && classe != '') {
							classe = ' classe="' + $.trim(classe) + '"';
						}
						
						// Création du lien
						link = '<a' + herf + title + rel + id + classe + '>' + selection + '</a>';
						
						// On remplace la selection par le nouveau lien
						$(self.content).html($(self.content).html().replace(' ' + selection, ' ' + link));
						// On sauvegarde le tout dans la zone de textarea
						self.saveContent();
						
						// Fermeture de la boite de dialogue
						$('#window').remove();
						
						return false;
					    
					// Les paramettre permettent d'appeler un script PHP et d'envoyer le texte selectionner
					}, 'createLink', selection);
				}
			},
			
			// Icone strong sans exec puisque c'est un tag générique sans boite de dialogue
			strong : {
				tag : 'strong'
			}
		}
	});
})(jQuery);