/*
	Permet d'utiliser des selects personalisés avec des images en fond. Le select est réalisé avec des div ce qui permet d'avoir le même rendu avec tous les navigateurs
	
	1) html
		<div class="comboBox comboBoxBlanc" id="monID" data-width="600">
            <div class="title">Select 1</div>
            <div class="select">
                <ul>
                    <li>Option 1</li>
                    <li class="selected">Option 2</li>
                    <li>Option 3</li>
                    <li>Option 4</li>
                    <li>Option 5</li>                    
                </ul>
            </div>    
        </div>
		La DIV principale doit avoir la class "comboBox". L'ID est utile pour interagir avec du js. L’attribut data-width détermine en pixel la largeur du select
		La DIV avec la class "title" contient le texte visible sélectionné
		La DIV select contient la liste,il est possible de définir sa hauteur avec (style="height:100px;") pour limiter la hauteur du menu
		Dans la liste des options il est possible de définir avec la class "selected" quel est le menu sélectionné. Ce menu sera automatiquement sélectionné à l'initialisation
	2) css
		Au départ deux css ont été definit dans le dossier image pour avoir deux selects différent.
	
	3) JavaScript
		Tout le javaScritp est contenu dans une class statique "customSelect". Il est ainsi possible d'appeler directement les méthodes
		
		INITIALISATION
		Pour initialiser tous les select il faut appeler, une fois la page chargé la méthode init, "customSelect.init();"
		
		UTILISATION
		Ci dessous la liste des méthodes disponibles. Le paramètre "id" est une chaine de caractère représentant l'id de la DIV principale
		
		customSelect.setWidth(id, w); 				// définit la largeur (w) de select en pixel
		customSelect.getSelectedIndex(id);			// renvoie l'index à partir de 0 de l'élément sélectionné du select id
		customSelect.setSelectedIndex(id, index);	// définit l'élément sélectionné (index) en commencant à partir de 0
		customSelect.selectSelected(id); 			// sélectionne l'élément de la liste qui à la class "selected"
		customSelect.getText(id);					// renvois le texte affiché dans le select
		customSelect.setText(id, txt); 				// définit le texte affiché dans le titre du select
		customSelect.unselectAll(id); 				// Supprime la class "selected" de la liste		
		customSelect.onChange(id, fct_cb); 			// définit une call back si il y un changement sur le select. La callBack reçois un argument qui est l'ID du select qui a eu le changement. Une seul callBack possible
		
		
		EXEMPLE:
		$(document).ready(function(){
			customSelect.init();						// initialise les selects
			customSelect.onChange('monID', mafct_cb); 	// ajoute une callBack au select
		});
		function mafct_cb(id){ 							// la fonction callBack
			alert(customSelect.getText(id));			// affiche une boite de dialogue avec le texte se l'élément sélectionné
		}
*/

customSelect = {};
(function(){ // début de scope local
	customSelect = {		
		init:function(){ // initialise tous les combo de la page			
			$('#plan_ville_selectInteret .comboBox .title').wrap("<div class='titleBg'></div>").before('<div class="L"></div>').after('<div class="R"></div>'); // ajoute les images de fond pourle select		
			$('.comboBox .titleBg').each(function(){
				$(this).find('.title').attr('data-text', $(this).find('.title').text() );
				$(this).click(function(e) {
					if ($(this).parent().children('.select').css('visibility') == 'hidden'){
						$('.comboBox .select').css('visibility', 'hidden');	
						$(this).parent().children('.select').css('visibility', 'visible');
					}else{
						$(this).parent().children('.select').css('visibility', 'hidden');				
					}
					e.stopPropagation();
				});
			});				
				
			$('.comboBox .select li').each(function(i){ // Si selection d'un élément				
				if($(this).hasClass('selected')) $(this).parent().parent().parent().children('.titleBg').children('.title').html($(this).text()); // selectionne le selectioné
				$(this).click(function(){
					$(this).parent().find('li').removeClass('selected');
					$(this).addClass("selected");
					$(this).parent().parent().parent().children('.titleBg').children('.title').html($(this).text());				
					$('.comboBox .select').css('visibility', 'hidden');
					$('#rechercheTextBox').val('');
					$('#rechercheTextBox').focus();
				});
			});
			
			$(document).click(function() { $('.comboBox .select').css('visibility', 'hidden');}); // si clique en dehors de la zone comboBox  			
			
			// definit les largeurs programées
			$('.comboBox').each(function(){				
				w = $(this).attr('data-width');
				if(self.isNumeric(w)) {
					$(this).find('.titleBg').width(w);
					//$(this).find('.select').width(w-2);
				};
			});
			
		},		
		isNumeric: function(input){ return (input - 0) == input && input.length > 0;},
		setWidth:function(id, w){
			$("#"+id).find('.titleBg').width(w);
			$("#"+id).find('.select').width(w-2);
			
		},
		getSelectedIndex:function(id){ // renvois l'index selectionné dans le comboBox, -1 si aucun
			var no = -1
			$("#"+id).find('.select li').each(function(i){ if ($(this).hasClass('selected')) no = i; });
			return no;
		},
		setSelectedIndex:function(id, index){ // selectionne un element 
			self.unselectAll(id); // enleve toute les selection
			$("#"+id).find('.select li').eq(index).addClass('selected'); // ajoute la classe au selectioné			
			self.selectSelected(id);	
		},
		
		selectSelected:function(id){ // selectionne le dernier qui à la class selected
			txt = "";
			$("#"+id).find('.select li').each(function(){ if($(this).hasClass('selected')) txt = $(this).text(); });
			self.setText(id, txt);
		},
		getText:function(id){ // renvois l'index selectionné dans le comboBox, -1 si aucun
			return $("#"+id).find('.title').text();
		},
		setText:function(id, txt){
			$("#"+id).find('.title').text(txt);
		},
		unselectAll:function(id){ // deselectionne tout
			$("#"+id + ' .select li').each(function(){$(this).removeClass('selected')});
			$("#"+id + ' .title').text($("#"+id).find('.title').attr('data-text'));
		},		
		onChange:function(id, fct_cb){ // ajoute une callBack quand il y a un changement dans le comboBox		
			$("#"+id + ' .select li').unbind('click');
			$("#"+id + ' .select li').each(function(i){ $(this).click(function(){
				$(this).parent().find('li').removeClass('selected');
				$(this).addClass("selected");
				$(this).parent().parent().parent().children('.titleBg').children('.title').html($(this).text());				
				$('.comboBox .select').css('visibility', 'hidden');
				fct_cb(id); 
			});});			
		}
	}
	var self = customSelect;
})(); // fin de scope local