var toolBar = {	

	/*
	----------------------------
	--	Variables initialize
	----------------------------
	*/
		idContenerBar : null, // Id de l'element contenant la toolBar
		idObserveTextarea : null, //Id du textarea à observer
		modules : null, //Contient les enumerations des modules à chargés
		balisesStructure : null,
		idButtonObserver : null, // Contient l'Id d'un bouton à observer
		idSelectObserver : null, // contien l'Id du select à observer
		classObserverSelect : null, // contien le nom de class des items à observer dans le select
		debugObserve : true,
		returnButtonActif : false, //Active ou désactive le annuler/retour
		ancienneValueTextarea : '', //Contient l'ancienne valeur du textarea avant changement 
		statePreview : false , //Etat de l'aperçu
		stateLink : false,
	/*
	----------------------------
	--	Méthode __construct
	----------------------------
	*/
	construct:	function() {
		if(this.idContenerBar && this.idObserveTextarea) {
			
				//Vérification de la présence des modules
				if(this.modules) {
					
					var modules = this.modules.split(',');
					$(this.idContenerBar).insert('<div id="toolBarWys">');
					var left = 3 ;
					
					for(i=0; i<=(modules.length-1);i++) {
						
						switch(modules[i]) {
							case 'BOLD':
								$('toolBarWys').insert('<label id="boldButton" class="boldButton" value="B" title="Mettre en gras" style="left:'+left+'px; background:#E6E6D8;">B</label>');
									this.idButtonObserver = 'boldButton' ;
									this.balisesStructure = ['[gras]','[/gras]'];
									this.controlButton();//observation du bouton
								left += 33;
								break;
							case 'ITALIC':
								$('toolBarWys').insert('<label id="italicButton" class="italicButton" title="Mettre en italique" style="left:'+left+'px; background:#E6E6D8;">I</label>');
									this.idButtonObserver = 'italicButton' ;
									this.balisesStructure = ['[italique]','[/italique]'];
									this.controlButton();//observation du bouton
								left += 33;
								break;
							case 'UNDERLINE':
								$('toolBarWys').insert('<label id="underlineButton" class="underlineButton" title="Souligné" style="left:'+left+'px; background:#E6E6D8;">S</label>');
									this.idButtonObserver = 'underlineButton' ;
									this.balisesStructure = ['[souligne]','[/souligne]'];
									this.controlButton();//observation du bouton
								left += 33;
								break;
							case 'PUCES':
								$('toolBarWys').insert('<label id="puceButton" class="puceButton" title="Insérer une puce" style="left:'+left+'px;"></label>');
								$('toolBarWys').insert(
								'<div id="windowPuceSelect" style="display:none; left:'+(left-3)+'px;">'+
									'<span class="itemPuce" id="normal"><img src="images/decoupage/puce_simple.png"/>Simple</span>'+
									'<span class="itemPuce" id="ronde"><img src="images/decoupage/puce_rond.png"/>Ronde</span>'+
									'<span class="itemPuce" id="fleche"><img src="images/decoupage/puce_fleche.png">Flèche</span>'+
									'<span class="itemPuce" id="information"><img src="images/decoupage/puce_information.png"/>Informat.</span>'+
									'<span class="itemPuce" id="attention"><img src="images/decoupage/puce_warning.png"/>Attention</span>'+
									'<span class="itemPuce" id="danger"><img src="images/decoupage/puce_dangerous.png"/>Danger</span>'+
								'</div>');
									this.idButtonObserver = 'puceButton' ;
									this.idSelectObserver = 'windowPuceSelect' ;
									this.classObserverSelect = 'itemPuce';
									this.balisesStructure = ['[puce]','[/puce]'];
									this.controlSelect();//observation du select
								left += 33;
								break;
							case 'SIZE':
								$('toolBarWys').insert('<label id="sizeButton" class="sizeButton" value="Taille" title="Taille" style="left:'+left+'px; background:#E6E6D8;">Taille</label>');
								$('toolBarWys').insert(
								'<div class="windowSizeSelect" id="windowSizeSelect" style="display:none; left:'+(left-3)+'px;">'+
									'<span class="itemSize" id="taille_1" >Taille 1</span>'+
									'<span class="itemSize" id="taille_2" >Taille 2</span>'+
									'<span class="itemSize" id="taille_3" >Taille 3</span>'+
								'</div>');
									this.idButtonObserver = 'sizeButton' ;
									this.idSelectObserver = 'windowSizeSelect' ;
									this.classObserverSelect = 'itemSize';
									this.balisesStructure = ['[taille]','[/taille]'];
									this.controlSelect();//observation du select
								left += 43;
								break;
							case 'COLOR':
								colorSpan = '' ;
								nameColor = '' ;
								for(ii=1; ii<=8; ii++) {
									switch(ii) {
										case 1: color = 'ff0000'; nameColor = 'rouge'; break;// rouge
										case 2: color = 'FFFF00'; nameColor = 'jaune'; break;// jaune
										case 3: color = '0000BB'; nameColor = 'bleu'; break;// bleu
										case 4: color = '008800'; nameColor = 'vert'; break;// vert
										case 5: color = '884400'; nameColor = 'marron'; break;//marron
										case 6: color = '888888'; nameColor = 'gris'; break;// gris
										case 7: color = 'ff8800'; nameColor = 'orange'; break; // orange
										case 8: color = '880088'; nameColor = 'violet'; break; //violet
									}
									colorSpan += '<span class="selectColor" id="'+nameColor+'" style="background:#'+color+';"></span>';
								}
								
								$('toolBarWys').insert('<label id="colorButton" class="colorButton" title="Couleur" style="left:'+left+'px; background:#E6E6D8;">Couleur</label>');
								$('toolBarWys').insert('<div class="windowColorSelect" id="windowColorSelect" style="display:none; left:'+(left-3)+'px;"><label>'+colorSpan+'</label></div>');
									this.idButtonObserver = 'colorButton' ;
									this.idSelectObserver = 'windowColorSelect' ;
									this.classObserverSelect = 'selectColor';
									this.balisesStructure = ['[couleur]','[/couleur]'];
									this.controlSelect();//observation du select
								left += 53;
								break;
							case 'SMILEYS':
								$('toolBarWys').insert('<label id="smileyButton" class="smileyButton" title="Smiley" style="left:'+left+'px;"></label>');
								$('toolBarWys').insert(
								'<div class="windowSmileySelect" id="windowSmileySelect" style="display:none; left:'+(left-3)+'px; height:52px;">'+
									'<label style="height:50px;">'+
										'<img src="images/decoupage/smiley_sourire.png" class="itemSmile" id=":)" style="margin:0px;" border="0"/>'+
										'<img src="images/decoupage/smiley_sympa.png" class="itemSmile" id="^^" style="margin:0px;"/>'+
										'<img src="images/decoupage/smiley_gd_sourire.png" class="itemSmile" id="xD" style="margin:0px;"/>'+
										'<img src="images/decoupage/smiley_clin_oeil.png" class="itemSmile" id=";)" style="margin:0px;"/>'+
										'<img src="images/decoupage/smiley_surpris.png" class="itemSmile" id=":o" style="margin:0px;"/>'+
										'<img src="images/decoupage/smiley_decu.png" class="itemSmile" id=":(" style="margin:0px;"/>'+
										'<img src="images/decoupage/smiley_anxieu.png" class="itemSmile" id=":s" style="margin:0px;"/>'+
									'</label>'+
								'</div>');
									this.idButtonObserver = 'smileyButton' ;
									this.idSelectObserver = 'windowSmileySelect' ;
									this.classObserverSelect = 'itemSmile';
									this.balisesStructure = ['[smiley]',''];
									this.controlSelect();//observation du select
								left += 33;
								break;
								
							case 'LINK':
								$('toolBarWys').insert('<label id="linkButton" class="linkButton" title="Lien" style="left:'+left+'px;"></label>');
									this.idButtonObserver = 'linkButton' ;
									this.balisesStructure = ['[lien]','[/lien]'];
									this.controlLink();//observation du bouton
								left += 33;
								break;
								
							case 'RETURN':
								$('toolBarWys').insert('<label id="nextButton" class="nextButton" title="Annuler/Retour" style="left:'+left+'px"></label>');
									this.idButtonObserver = 'nextButton' ;
									this.controlReturn();
								left += 33;
								break;
							case 'PREVIEW':
								$('toolBarWys').insert('<label id="previewButton" class="previewButton" title="Aperçu" style="left:'+left+'px; background:#E6E6D8;">Aperçu</label>');
									this.idButtonObserver = 'previewButton' ;
									this.controlPreview();
								left += 53;
								break;
							case 'PICTURES':
								$('toolBarWys').insert('<label id="picturesButton" class="picturesButton" title="Ajouter une images" style="left:'+left+'px;">Image</label>');
									this.idButtonObserver = 'picturesButton' ;
									this.balisesStructure = ['[picture align="center"]','[/picture]'];
									this.controlButton();//observation du bouton
								left += 53;
								break;
							default:
								break;
						}
					}
					$(this.idContenerBar).insert('</div>');
					//Affichage de la barre d'outils 
					//$(this.idContenerBar).update(contentBar);
					
				}
			
		} else {
			this.DEBUG('Please precised: idContenerBar - idObserveTextarea');
		}
	},
		
	/*
	----------------------------
	--	Méthode Controls Button
	----------------------------
	*/
	controlButton : function() {
		
		var balises = this.balisesStructure ;
		var idButton = this.idButtonObserver;
		var balises = this.balisesStructure;
		// Observation d'un bouton et ajout de ses balises lors du clique
		$(this.idButtonObserver).observe('click',function(event) {
			toolBar.insertBalises(balises);
		}); 
		
	},
	
	
	
	/*
	----------------------------
	--	Méthode Controls Select
	----------------------------
	*/
	controlSelect : function() {
		var idButton = this.idButtonObserver ;
		var idSelect = this.idSelectObserver ;
		var balises = this.balisesStructure;
		var idClassSelect = this.classObserverSelect;
		
		$(idButton).observe('mouseover',function(event) {
			$(idSelect).style.display = '';
		});
		$(idButton).observe('mouseout',function(event) {
			$(idSelect).style.display = 'none';
		});
		$(idSelect).observe('mouseover',function(event) {
			$(idSelect).style.display = '';
		});
		$(idSelect).observe('mouseout',function(event) {
			$(idSelect).style.display = 'none';
		});
		
		$$('.'+idClassSelect).each(function(e) {
			e.observe('click',function(event) {
				//selection de son type
				baliseStruct = Array(''+balises[0].replace(/\[(.*)\]/g,"[$1 type="+e.id+"]")+'',''+balises[1]+'');
				toolBar.insertBalises(baliseStruct);
				$(idSelect).style.display = 'none';
			});
		});
	},
	
	
	/*
	----------------------------
	--	Méthode controls Return
	----------------------------
	*/
	controlLink : function() {
		var idButton = this.idButtonObserver ;
		var stateLink = false ;
		var idBoxUpTextarea = $(toolBar.idObserveTextarea).up().id ;
		
		$(idButton).observe('click',function(event) {
			
			if(!toolBar.stateLink) {
				//definition de la boxUp
				var dimensionBoxUpTextarea = $(idBoxUpTextarea).getDimensions();
					
				//construction de la fenetre d'appel
				$(idBoxUpTextarea).insert('<div id="backgroundInformLink" style="display:none; height:'+dimensionBoxUpTextarea.height+'px; width:'+dimensionBoxUpTextarea.width+'px; background:#e6e6d8; position:absolute; top:0px; left:0px; z-index:1000;"></div>'+
										  '<div id="boxContentLink" style="line-height:25px; display:none; height:110px; width:250px; color:#123123; position:absolute; margin-left:-125px; margin-top:-75px; top:50%; left:50%; z-index:1200; background:#DFDFCF;">'+
										  '<div id="closeWindowLink" title="Fermer" style="cursor:pointer; height:20px; width:20px; position:absolute; left:240px; top:-5px; background:url(images/decoupage/wysiwyg_close.gif);"></div>'+
										  '<span class="h3">Ajouter un lien</span><br/>Url : <input type="text" class="styleInput" id="urlLink"/><br/>Texte alternatif: <input type="text" class="styleInput" id="titleLink"/><br/><input type="button" id="validLink" class="submit" value="Ok"/>'+
										  '</div>');
				
				//affichage de la box transparent
				$('backgroundInformLink').appear({from:0, to:0.8, duration: 0.5, queue: 'front'});
				$('boxContentLink').appear({from:0, to:1, duration: 0.5, queue: 'end'});
				toolBar.stateLink = true ;
				
				//Ajout des observer
				$('closeWindowLink').observe('click',function(event) {
					//suppression des liens
					$('backgroundInformLink').remove();
					$('boxContentLink').remove();
					toolBar.stateLink = false ;   
				});
				
				//Ajout des observer
				$('backgroundInformLink').observe('click',function(event) {
					//suppression des liens
					$('backgroundInformLink').remove();
					$('boxContentLink').remove();
					toolBar.stateLink = false ;   
				});
				
				//Ajout des observer
				$('validLink').observe('click',function(event) {
					//selection des textes
					var urlLink = $('urlLink').value;
					var titleLink = $('titleLink').value;
					
					toolBar.balisesStructure = ['[lien="'+urlLink+'"]'+titleLink,'[/lien]'];
					toolBar.insertBalises(toolBar.balisesStructure);//observation du bouton
									
					//suppression des liens
					$('backgroundInformLink').remove();
					$('boxContentLink').remove();
					toolBar.stateLink = false ;   
				});
								
			} else {
				//suppression des listenners
				$('validLink').stopObserving();
				$('backgroundInformLink').stopObserving();
				$('closeWindowLink').stopObserving();
				//suppression des liens
				$('backgroundInformLink').remove();
				$('boxContentLink').remove();
				toolBar.stateLink = false ;
			}
			
			
		});
	},





	/*
	----------------------------
	--	Méthode controls Return
	----------------------------
	*/
	controlReturn : function() {
		var idButton = this.idButtonObserver ;
		$(idButton).observe('click',function(event) {
			if(toolBar.returnButtonActif) {
				textarea.value = toolBar.ancienneValueTextarea ;
				$(idButton).style.backgroundPosition = '0 -23px';
				toolBar.returnButtonActif = false ;
			}
		});
	},
	
	
	/*
	----------------------------
	--	Méthode controls Preview
	----------------------------
	*/
	controlPreview : function() {
		var idButton = this.idButtonObserver ;
		$(idButton).observe('click',function(event) {
		
			if(toolBar.stateLink) {
				//suppression des listenners
				$('validLink').stopObserving();
				$('backgroundInformLink').stopObserving();
				$('closeWindowLink').stopObserving();
				//suppression des liens
				$('backgroundInformLink').remove();
				$('boxContentLink').remove();
				toolBar.stateLink = false ;
			}
		
			if(!toolBar.statePreview) {
				//modification texte button
				$(idButton).update('Fermer');
														
				//creation de l'element au dessus du textarea afin d'afficher le preview
				var idBoxUpTextarea = $(toolBar.idObserveTextarea).up().id ;
				
				//definition de la boxUp
				var dimensionBoxUpTextarea = $(idBoxUpTextarea).getDimensions();
				
				//traitement et parsage du textarea
				//alert($('presentation').value);
				var contentTextarea = toolBar.parseCode($(toolBar.idObserveTextarea).value);
				
				//construction de l'element apercu
				$(idBoxUpTextarea).insert('<div id="boxPreviewEditeur" style="height:'+dimensionBoxUpTextarea.height+'px; width:'+dimensionBoxUpTextarea.width+'px; position:absolute; top:0px; left:0px; background-color:#e6e6d8; overflow:auto; z-index:1500;">'+contentTextarea+'</div>');
				toolBar.statePreview = true ;
				
			} else {
				$(idButton).update('Aperçu');
				//suppression de l'element apercu
				$('boxPreviewEditeur').remove();
				toolBar.statePreview = false ;
			}
			
		});
	},

	
	/*
	----------------------------
	--	Méthode Parsage
	----------------------------
	*/
	parseCode : function(str) {
		//	---	RC/NL ---
		if(str=='undefined') {
			var str = '';
		}
		str = str.replace(/\n/g,'<br/>\n');
		var modules = this.modules.split(',');
		for(i=0; i<=(modules.length-1);i++) {
			
			switch(modules[i]) {
				case 'BOLD':
				//	---	GRAS ---
				str = str.replace(/\[gras\]/g,'<strong>');
				str = str.replace(/\[\/gras\]/g,'</strong>');
					break;
				case 'ITALIC':
				//	---	Italique ---
				str = str.replace(/\[italique\]/g,'<i>');
				str = str.replace(/\[\/italique\]/g,'</i>');
					break;
				case 'UNDERLINE':
				//	---	Souligne ---
				str = str.replace(/\[souligne\]/g,'<u>');
				str = str.replace(/\[\/souligne\]/g,'</u>');
					break;
				case 'PUCES':
				//	---	Puces ---
				str = str.replace(/\[puce type=normal\]/g,'<div style="line-height:20px;"><img src="images/decoupage/puce_simple.png" align="left" vspace="5" hspace="10"/>');
				str = str.replace(/\[puce type=ronde\]/g,'<div style="line-height:20px;"><img src="images/decoupage/puce_rond.png" align="left" vspace="5" hspace="10"/>');
				str = str.replace(/\[puce type=fleche\]/g,'<div style="line-height:20px;"><img src="images/decoupage/puce_fleche.png" align="left" vspace="5" hspace="10"/>');
				str = str.replace(/\[puce type=information\]/g,'<div style="line-height:20px;"><img src="images/decoupage/puce_information.png" align="left" vspace="5" hspace="10"/>');
				str = str.replace(/\[puce type=attention\]/g,'<div style="line-height:20px;"><img src="images/decoupage/puce_warning.png" align="left" vspace="5" hspace="10"/>');
				str = str.replace(/\[puce type=danger\]/g,'<div style="line-height:20px;"><img src="images/decoupage/puce_dangerous.png" align="left" vspace="5" hspace="10"/>');
				str = str.replace(/\[\/puce\]/g,'</div>');
					break;
				case 'SIZE':
				//	---	Font Size ---
				str = str.replace(/\[taille type=taille_1\]/g,'<span style="font-size:11px;">');
				str = str.replace(/\[taille type=taille_2\]/g,'<span style="font-size:13px;">');
				str = str.replace(/\[taille type=taille_3\]/g,'<span style="font-size:15px;">');
				str = str.replace(/\[\/taille\]/g,'</span>');
					break;
				case 'COLOR':
				//	---	Font Color ---
				str = str.replace(/\[couleur type=rouge\]/g,'<span style="color:#FF0000;">');
				str = str.replace(/\[couleur type=jaune\]/g,'<span style="color:#FFFF00;">');
				str = str.replace(/\[couleur type=bleu\]/g,'<span style="color:#0000BB;">');
				str = str.replace(/\[couleur type=vert\]/g,'<span style="color:#008800;">');
				str = str.replace(/\[couleur type=marron\]/g,'<span style="color:#884400;">');
				str = str.replace(/\[couleur type=gris\]/g,'<span style="color:#888888;">');
				str = str.replace(/\[couleur type=orange\]/g,'<span style="color:#ff8800;">');
				str = str.replace(/\[couleur type=violet\]/g,'<span style="color:#880088;">');
				str = str.replace(/\[\/couleur\]/g,'</span>');
					break;
				case 'SMILEYS':
				//	---	Smiley ---
				str = str.replace(/\[smiley type=:\)\]/g,' <img src="images/decoupage/smiley_sourire.png" align="absmiddle"> ');
				str = str.replace(/\[smiley type=\^\^\]/g,' <img src="images/decoupage/smiley_sympa.png" align="absmiddle"> ');
				str = str.replace(/\[smiley type=xD\]/g,' <img src="images/decoupage/smiley_gd_sourire.png" align="absmiddle"> ');
				str = str.replace(/\[smiley type=;\)\]/g,' <img src="images/decoupage/smiley_clin_oeil.png" align="absmiddle"> ');
				str = str.replace(/\[smiley type=:o\]/g,' <img src="images/decoupage/smiley_surpris.png" align="absmiddle"> ');
				str = str.replace(/\[smiley type=:\(\]/g,' <img src="images/decoupage/smiley_decu.png" align="absmiddle"> ');
				str = str.replace(/\[smiley type=:s\]/g,' <img src="images/decoupage/smiley_anxieu.png" align="absmiddle"> ');
					break;
				case 'LINK':
				//	---	Smiley ---
				str = str.replace(/\[lien="(.*)"\]/g,'<a href="$1" class="link">');
				str = str.replace(/\[\/lien]/g,' </a> ');
					break;	
				
				case 'PICTURES':
				//	---	Images ---
				str = str.replace(/\[picture align="(.*)"\]/g,'<img align="$1" src="');
				str = str.replace(/\[\/picture]/g,'" border="0" vspace="5" hspace="10">');	
					break;
					
				default:
					break;
			}
		}
			
				
			return str ;
	},


	/*
	----------------------------
	--	Méthode Insert Balises
	----------------------------
	*/
	insertBalises : function(balises) {
		
			textarea = $(this.idObserveTextarea);
			textarea.focus();
			this.ancienneValueTextarea = textarea.value ;
			
			if (window.ActiveXObject) {
                var textRange = document.selection.createRange();            
                selectionCurrent = textRange.text;
			} else {
				var startSelection   = textarea.value.substring(0, textarea.selectionStart);
				selectionCurrent 	 = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
				var endSelection 	 = textarea.value.substring(textarea.selectionEnd);               
			}
			
			if (window.ActiveXObject) {
                textRange.text = balises[0] + selectionCurrent + balises[1];
                textRange.moveStart("character", -balises[1].length - selectionCurrent.length);
                textRange.moveEnd("character", -balises[1].length);
                textRange.select();  
				
				//modification de l'apercu du bouton retour pour remettre l'ancienne valeur
				$('nextButton').style.backgroundPosition = '0 0';
				this.returnButtonActif = true;
				
			} else {
				
                textarea.value = startSelection + balises[0] + selectionCurrent + balises[1] + endSelection;
                textarea.setSelectionRange(startSelection.length + balises[0].length, startSelection.length + balises[0].length + selectionCurrent.length);
				//
				$('nextButton').style.backgroundPosition = '0 0';
				this.returnButtonActif = true;
			}   
			
	},
	
	
	
	/*
	----------------------------
	--	Méthode debugage
	----------------------------
	*/
	DEBUG: function(str) {
		if(this.debugObserve) {
			alert(str);
		}
	}
	
	
}