// Copyright (C) 2008 SpinkBB
// Entire code by Julien VAUBOURG
// julien__AT__vaubourg__DOT__com

// Author  : http://julien.vaubourg.com
// SpinkBB : http://spinkbb.jsand.net
// Forums  : http://CtrlAltSuppr.com

Affichage = {

	panel: function() {
		Affichage.topPanel = document.createElement('div');

		var elements = {
			selectLangue : document.createElement('select'),
			boutonImport : document.createElement('input'),
			boutonExport : document.createElement('input'),
			boutonSave : document.createElement('input'),
			boutonDel : document.createElement('input'),
			boutonPreview : document.createElement('input'),
			boutonAbout : document.createElement('input')
		};

		// Bouton d'importation
		elements['boutonImport'].type = 'button';
		elements['boutonImport'].value = Langues.get('Importer');
		elements['boutonImport'].title = Langues.get('Importer votre Spinker');
		elements['boutonImport'].onclick = function() {
			Affichage.usePanel('importer');
		};

		// Bouton d'exportation
		elements['boutonExport'].type = 'button';
		elements['boutonExport'].value = Langues.get('Exporter');
		elements['boutonExport'].title = Langues.get('Exporter le Spinker');
		elements['boutonExport'].onclick = function() {
			Affichage.usePanel('exporter');
		};

		// Bouton d'enregistrement
		elements['boutonSave'].type = 'button';
		elements['boutonSave'].value = Langues.get('Enregistrer');
		elements['boutonSave'].title = Langues.get('Enregistrer les modifications');
		elements['boutonSave'].onclick = function() {
			if(!Affichage.usePanel('enregistrer'))
				alert(Langues.get('Aucune modification \340 enregistrer.'));
		};

		// Bouton de suppression
		elements['boutonDel'].type = 'button';
		elements['boutonDel'].value = Langues.get('Supprimer');
		elements['boutonDel'].title = Langues.get('Supprimer les modifications');
		elements['boutonDel'].onclick = function() {
			if(!Outils.change && Outils.empty(ImportExport.idSession)) {
				alert(Langues.get('Aucune modification \340 supprimer.'));

			} else if(Affichage.usePanel('supprimer'))
				alert(Langues.get('Suppression effectu\351e !'));
		};

		// Adresse de preview
		elements['boutonPreview'].type = 'button';
		elements['boutonPreview'].value = Langues.get('Aper\347u');
		elements['boutonPreview'].title = Langues.get('Adresse de pr\351visualisation publique de votre Spinker');
		elements['boutonPreview'].onclick = function() {
			if(Outils.change)
				alert(Langues.get('Des modifications n\'ont pas \351t\351 enregistr\351es !\nElles ne seront pas visibles sur l\'aper\347u si vous ne le fa\356tes pas.'));

			Affichage.usePanel('getIdPreview');
		};

		// Bouton d'informations
		elements['boutonAbout'].type = 'button';
		elements['boutonAbout'].value = Langues.get('Comment \347a marche ?');
		elements['boutonAbout'].title = Langues.get('Aide et A propos de SpinkBB');
		elements['boutonAbout'].id = "spkHowToUse";
		elements['boutonAbout'].onclick = function() {
			Affichage.usePanel('about');
		};

		// Menu langues
		elements['selectLangue'].onchange = function() { Gestion.langue(this.value) };
		elements['selectLangue'].title = Langues.get('Langage');

		// Construction du menu langues
		for(var langue in Langues)
			if(!Outils.isFunction(Langues[langue])) {
				var option = document.createElement('option');
				var libelleOption = document.createTextNode(langue);
				
				option.value = langue;
				option.selected = (Parametres.langue == langue);
				option.appendChild(libelleOption);

				elements['selectLangue'].appendChild(option);
			}

		Affichage.topPanel.id = 'spkPanel';
		Affichage.topPanel.className = 'spkPanelOpacity';
		Affichage.topPanel.onmouseover = function() { !Outils.isset(Outils.flotteur) ? Outils.flotteur = 'fixPanel' : null };
		Affichage.topPanel.onmouseout = function() { (Outils.isset(Outils.flotteur) && Outils.flotteur == 'fixPanel') ? delete Outils.flotteur : null };
		
		// Définition en masse des boutons
		for(var element in elements)
			if(!Outils.isFunction(elements[element])) {
				element.match(/^bouton/) ? elements[element].type = 'button' : null;
				Affichage.topPanel.appendChild(elements[element]);
			}

		// Position fixed du panel pour IE6
		if(navigator.userAgent.indexOf('MSIE 6') != -1) {
			window.onscroll = function() {
				Affichage.topPanel.style.top = parseInt(document.documentElement.scrollTop) + 'px';
			};

			Affichage.topPanel.style.position = 'absolute';			
			window.onscroll();
		}
		
		// Ajout du panel
		document.body.appendChild(Affichage.topPanel);
	},

	/** Rafraichissement du panel (pour les langues) */
	refreshPanel: function() {
		document.body.removeChild(document.getElementById('spkPanel'));
		Affichage.panel();
	},

	/** Action des boutons du panel */
	usePanel: function(action) {
		var fermeture = false;

		// Fermeture du panel
		if(Outils.isset(document.getElementById('spkPanelOpen'))) {
			fermeture = (document.getElementById('spkPanelOpen').className == 'spk' + action);
			document.getElementById('spkPanelOpen').parentNode.removeChild(document.getElementById('spkPanelOpen'));
		}

		// Si on a pas recliqué sur le même bouton
		if(!fermeture) {
			if(action != 'supprimer' && action != 'enregistrer' && action != 'getIdPreview') {
				var conteneur = document.createElement('div');
				conteneur.id = 'spkPanelOpen';
				conteneur.className = 'spk' + action;

				// Appel de la fonction demandée
				var retour = Gestion[action](conteneur);

				Affichage.topPanel.className = 'spkPanelOpacityFull';
				Affichage.topPanel.appendChild(conteneur);
			} else
				var retour = Gestion[action]();

			return retour;
		} else
			Affichage.topPanel.className = 'spkPanelOpacity';

		return false;
	},

	/** Fermeture des selects ouverts */
	oneSelect: function() {
		var selects = this.selects;

		for(var s = 0; s < selects.length; s++)
			if(selects[s].nextSibling.firstChild.isOpen() && selects[s] != Affichage.openSelect)
					Affichage.closeSelect.apply(selects[s].nextSibling.firstChild);

		Affichage.openSelect = null;
	},

	/** Remplacement des select de l'élément par des listes */
	replaceSelect: function() {
		var selects = this.selects;
		var nbZIndex = 200;

		// Parcours de tous les selects
		for(var s = 0; s < selects.length; s++) {
			if(!Outils.isset(selects[s].nextSibling) || selects[s].nextSibling.className != 'spkSelect') {
				var conteneur = document.createElement('div');
				var liste = document.createElement('ul');
				var ligne = document.createElement('li');
				var span = document.createElement('span');

				// Si le select est déjà caché (cas de la valeur Auto)
				if(selects[s].style.display == 'none')
					conteneur.style.display = 'none';
				else
					selects[s].style.display = 'none';

				// Ouverture du menu au click
				ligne.onclick = function() { Affichage.activeSelect.apply(this.parentNode) };
				ligne.className = 'spkFirstOption';

				liste.style.zIndex = nbZIndex;
				ligne.appendChild(span);
				liste.appendChild(ligne);
				liste.menu = this;
				liste.isOpen = function() { return this.childNodes.length > 1 };
			
				// Repêres du navigateur de noeuds
				if(selects[s].id == 'spkNodeBrowser') {
					conteneur.id = 'spkNodeBrowserList';
					selects[s].generalized = new Array();
					ligne.title = Langues.get('Navigateur de noeuds');
				}
			
				// Définition de la première ligne (valeur sélectionnée)
				Affichage.innerOption(selects[s].childNodes[selects[s].selectedIndex], span);

				conteneur.className = 'spkSelect';				
				conteneur.style.zIndex = nbZIndex--; // IE
				conteneur.appendChild(liste);
			
				// Ajout de la liste
				if(Outils.isset(selects[s].nextSibling))
					selects[s].parentNode.insertBefore(conteneur, selects[s].nextSibling);
				else
					selects[s].parentNode.appendChild(conteneur);

				// Décalage des éléments qui suivent selon la largeur de la liste (qui est en absolue)
				conteneur.style.width = liste.offsetWidth + 'px';
				conteneur.style.height = liste.offsetHeight + 'px';
			}
		}

		// Le menu ne demande plus à être ouvert (il sera donc refermé si on reclique)
		Affichage.openSelect = null;
		
		// Gestion des listes du menu : seule celle de openSelect doit être ouverte
		this.onclick = Affichage.oneSelect;
	},

	/** Activation du select graphique (appellée dans son contexte) */
	activeSelect: function() {
		if(!Affichage.potentialCheck) {
			var select = this.parentNode.previousSibling;
			Affichage.openSelect = select;

			// Parcours des options du select
			for(var o = 0; o < select.childNodes.length; o++)
				if(select.childNodes[o].value != '?' && select.childNodes[o].value != select.value) {
					var ligne = document.createElement('li');
					var lien = document.createElement('a');

					lien.href = 'javascript:';
					lien.className = 'spkOption' + o;
					lien.onclick = function() {
						Affichage.defineOption.apply(this);
						return false;
					}

					// Ajout de la ligne dans la liste
					ligne.appendChild(lien);
					this.appendChild(ligne);
					
					// Remplissage de la ligne avec la valeur de l'option du select
					Affichage.innerOption(select.childNodes[o], lien);
				}

			// Fermeture du menu lorsqu'on reclique sur la première valeur
			this.firstChild.onclick = function() { Affichage.closeSelect.apply(this.parentNode) };
		}
	},

	/** Formatage du texte et ajout des checkboxs pour le navigateur de noeuds */
	innerOption: function(option, conteneur) {
		var txt = option.innerHTML;
		conteneur.innerHTML = '';
		
		// Formatage
		txt = Affichage.formatOption(txt);

		// Cas du navigateur de noeuds : on ajoute les checkboxs
		if(option.parentNode.id == 'spkNodeBrowser') {
			var checkbox = document.createElement('input');
			checkbox.type = 'checkbox';
			checkbox.value = option.value;
			checkbox.spkNodeBrowser = option.parentNode;
			checkbox.onclick = Outils.generalisation;
			
			// Checkbox inutile
			if(!/[.#]+/.test(txt) && !Outils.isset(option.parentNode.generalized[option.value]))
				checkbox.disabled = true;

			conteneur.parentNode.appendChild(checkbox);
			conteneur.className += ' spkLienCheck';

			Affichage.replaceCheckbox(checkbox);
		}

		// Ajout de la valeur formatée, éventuellement après le checkbox
		conteneur.innerHTML += txt;
	},
	
	/** Formate le texte pour l'affichage HTML */
	formatOption: function(txt) {
		var patterns = [' ', '-', '\\(top\\)', '\\(right\\)', '\\(bottom\\)', '\\(left\\)'];
		var remplacement = ['&nbsp;', '', '(&uarr;)', '(&rarr;)', '(&darr;)', '(&larr;)'];

		// Formatage HTML de la valeur
		for(var i = 0; i < patterns.length; i++)
			txt = txt.replace(new RegExp(patterns[i], 'g'), remplacement[i]);
			
		return txt;
	},

	/** Changement de valeur dans la liste */
	defineOption: function() {
		var liste = this.parentNode.parentNode;
		var select = liste.parentNode.previousSibling;
		var choix = parseInt(this.className.replace('spkOption', ''));

		// Transmission de la valeur choisie dans le select
		for(var o = 0; o < select.childNodes.length; select.childNodes[o].selected = (o++ == choix));
		select.onchange();

		// Changement de valeur sélectionnée dans la liste graphique
		Affichage.updateOption.apply(select);

		// La fermeture du menu se fait par le onclick du menu
	},

	/** Simple mise à jour graphique de la valeur (appellée dans le contexte du select) */
	updateOption: function() {
		if(Outils.isset(this.nextSibling)) {
			Affichage.innerOption(this.childNodes[this.selectedIndex], this.nextSibling.firstChild.firstChild.firstChild);
			this.nextSibling.style.width = this.nextSibling.firstChild.offsetWidth + 'px';
		}
	},

	/** Fermeture de la liste */
	closeSelect: function() {
		if(!Affichage.potentialCheck) {
			for(var li = this.childNodes.length-1; li >= 1; this.removeChild(this.childNodes[li--]));
			this.firstChild.onclick = function() { Affichage.activeSelect.apply(this.parentNode) };
			this.parentNode.style.width = this.offsetWidth + 'px';
		}
	},
	
	/** Remplacement des checkboxs */
	replaceCheckbox: function(checkbox) {
		var checkPerso = document.createElement('a');

		// On coche si le checkbox a été déjà coché
		if(checkbox.spkNodeBrowser && Outils.isset(checkbox.spkNodeBrowser.generalized[checkbox.value]))
			checkbox.checked = true;

		checkPerso.className = 'spkCheckPerso' + (checkbox.checked  ? ' spkChecked' : '');
		
		if(!checkbox.disabled) {
			checkPerso.onclick = Affichage.defineChecked;
			checkPerso.title = Langues.get('G\351n\351raliser l\'\351l\351ment');

			checkPerso.onmouseover = function() {
				Affichage.potentialCheck = true;

				if(!/spkChecked/i.test(this.className))
					this.className += ' spkCheckPersoHover';
			};
			
			checkPerso.onmouseout = function() {
				this.className = this.className.replace(/ spkCheckPersoHover/, '');
				Affichage.potentialCheck = false;
			};
		} else {
			checkPerso.className += ' spkCheckPersoDisabled';
			checkPerso.onmouseover = function() { Affichage.potentialCheck = true };
			checkPerso.onmouseout = function() { Affichage.potentialCheck = false };
		}

		checkbox.style.display = 'none';

		// Ajout de la ligne
		if(Outils.isset(checkbox.nextSibling))
			checkbox.parentNode.insertBefore(checkPerso, checkbox.nextSibling);
		else
			checkbox.parentNode.appendChild(checkPerso);
	},
	
	/** Changement de statut d'un checkPerso */
	defineChecked: function() {
		var checkbox = this.previousSibling;

		// Changement de la valeur du checkbox
		checkbox.checked = !checkbox.checked;

		this.className = this.className.replace(/ spkCheckPersoHover/i, '');
		this.className = checkbox.checked ? this.className + ' spkChecked' : this.className.replace(/ spkChecked/i, '');

		// Déclenchement de l'action du checkbox associé
		checkbox.onclick();
	},
	
	/** Opacité du menu */
	opacity: function(transparent) {
		var opacity = transparent ? 0.9 : 1;

		this.style.opacity = opacity;
		this.style.MozOpacity = opacity;
		this.style.KhtmlOpacity = opacity;
		this.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
	},
	
	// Splashscreen
	splashscreen: function(persistant /* fac */) {
		if(!Outils.isset(Affichage.splash)) {
			Affichage.splash = document.createElement('div');

			Affichage.splash.id = 'spkSplash';
			Affichage.splash.title = Langues.get('Cliquer pour fermer');
			Affichage.splash.onmousedown = function() { Affichage.splashscreen() };
			
			if(!Preview.active)
				Affichage.splash.innerHTML = '<span>' + Langues.get('<strong>Aide :</strong> en haut à droite') + '</span>';

			// Position fixed pour IE6
			if(navigator.userAgent.indexOf('MSIE 6') != -1) {
				window.onscroll = function() {
					Affichage.splash.style.top = parseInt(document.documentElement.scrollTop) + 'px';
				};

				Affichage.splash.style.position = 'absolute';
				window.onscroll();
			}

			// Impossible d'ouvrir un menu de modification tant que le splashscreen est là
			if(!Outils.isset(Outils.flotteur) || Outils.flotteur == 'fixPanel')
				Outils.flotteur = 'fixSplash';

			// Création d'un cookie à la session pour ne plus le réafficher
			ImportExport.creerCookie('splashscreen', 'no', false);

			// Apparition du splashscreen (avant de centrer, pour IE6)
			document.body.appendChild(Affichage.splash);

			// Dimensions du splashscreen
			var width = parseInt(window.getComputedStyle ? window.getComputedStyle(Affichage.splash, null).width : Affichage.splash.currentStyle.width);
			var height = parseInt(window.getComputedStyle ? window.getComputedStyle(Affichage.splash, null).height : Affichage.splash.currentStyle.height);

			// Dimensions de la fenêtre
			var dimFenetre = [
				window.pageXOffset ? parseInt(window.pageXOffset) + parseInt(window.innerWidth) : parseInt(document.documentElement.scrollLeft) + parseInt(document.documentElement.clientWidth),
				window.pageYOffset ? parseInt(window.pageYOffset) + parseInt(window.innerHeight) : parseInt(document.documentElement.scrollTop) + parseInt(document.documentElement.clientHeight),
			];

			// Centrage vertical et horizontal en fonction de la taille de la fenêtre
			Affichage.splash.style.left = (dimFenetre[0] / 2) - (width / 2) + 'px';
			Affichage.splash.style.top = (dimFenetre[1] / 2) - (height / 2) + 'px';

			// Disparition auto programmée
			if(!Outils.isset(persistant) || !persistant)
				Affichage.splashTimer = setTimeout('Affichage.splashscreen()', 1700);

		} else {

			// Stop le déclenchement de la fermeture auto et fait disparaitre le splashscreen
			clearTimeout(Affichage.splashTimer);
			document.body.removeChild(Affichage.splash);

			delete Affichage.splash;
			delete Affichage.splashTimer;

			// Autorisation d'ouvrir des menus d'édition (timeOut pour le click)
			if(Outils.flotteur == 'fixSplash')
				setTimeout('delete Outils.flotteur', 150);
			
			if(navigator.userAgent.indexOf('MSIE 6') != -1)
				window.onscroll = null;
		}
	}
};