// JavaScript de la personnalisation des select via jQuery

	$(document).ready(function(){
	
		$('#my-dropdown, #my-dropdown2, #my-dropdown3, #my-dropdown4, #my-dropdown5, #my-dropdown6').sSelect();
		
		//set max height
		$('#my-dropdownCountries').sSelect({ddMaxHeight: '300px'});
		
		//set value on click
		$('#setVal').click(function(){
			$('#my-dropdown5').getSetSSValue('Sit');
		});
	
		//get value on click
		$('#getVal').click(function(){
			alert('The value is: '+$('#my-dropdown5').getSetSSValue());
		});
	
		//alert change event
		$('#my-dropdownChange').sSelect().change(function(){alert('changed')});
	
		//add options to select and update
		$('#addOptions').click(function(){
			$('#my-dropdown6').append('<option value="newOpt">New Option</option>').resetSS();
		});
		
	});	
	
	//
	
	(function($){
	
		//add class of js to html tag
		$('html').addClass('js');
	
		//create cross-browser indexOf
		Array.prototype.indexOf = function (obj, start) {
			for (var i = (start || 0); i < this.length; i++) {
				if (this[i] == obj) {
					return i;
				}
			}
		}
		
		//utility methods
		$.fn.extend({
			getSetSSValue: function(value){
							if (value){
								//set value and trigger change event
								$(this).val(value).change();
								return this;
							} else {
								return selText = $(this).find(':selected').text();
							}
						},
			resetSS: function(){
							$this = $(this);
							$this.next().remove();
							//unbind all events and redraw
							$this.unbind().sSelect();
						}
		});
	
		$.fn.sSelect = function(options) {
		
			return this.each(function(){
				
				var defaults = {
					defaultText: 'Please select',
					animationSpeed: 0, //set speed of dropdown
					ddMaxHeight: '' //set css max-height value of dropdown
				};
	
				//initial variables
				var opts = $.extend(defaults, options),
					$input = $(this),
					$containerDivText = $('<div class="selectedTxt"></div>'),
					$containerDiv = $('<div class="newListSelected" tabindex="0"></div>'),
					$newUl = $('<ul class="newList"></ul>'),
					itemIndex = -1,
					currentIndex = -1,
					keys = [],
					prevKey = false,
					newListItems = '',
					prevented = false;
					
				//build new list
				$containerDiv.insertAfter($input);
				$containerDivText.prependTo($containerDiv);
				$newUl.appendTo($containerDiv);
				$input.hide();
			
				//test for optgroup
				if ($input.children('optgroup').length == 0){
					$input.children().each(function(i){
						var option = $(this).text();
						//add first letter of each word to array
						keys.push(option.charAt(0).toLowerCase());
						if ($(this).attr('selected') == true){
							opts.defaultText = option;
							currentIndex = i;
						}
						newListItems += '<li>'+option+'</li>';
					});
					//add new list items to ul
					$newUl.html(newListItems);
					newListItems = '';
					//cache list items object
					var $newLi = $newUl.children();
									
				} else { //optgroup
					$input.children('optgroup').each(function(i){
					
						var optionTitle = $(this).attr('label'),
							$optGroup = $('<li class="newListOptionTitle">'+optionTitle+'</li>');
							
						$optGroup.appendTo($newUl);
	
						var $optGroupList = $('<ul></ul>');
	
						$optGroupList.appendTo($optGroup);
	
						$(this).children().each(function(){
							++itemIndex;
							var option = $(this).text();
							//add first letter of each word to array
							keys.push(option.charAt(0).toLowerCase());
							if ($(this).attr('selected') == true){
								opts.defaultText = option;
								currentIndex = itemIndex;
							}
							newListItems += '<li>'+option+'</li>';
						})
						//add new list items to ul
						$optGroupList.html(newListItems);
						newListItems = '';
					});
					//cache list items object
					var $newLi = $newUl.find('ul li');
				
				}
				
				//get heights of new elements for use later
				var newUlHeight = $newUl.height()+3,
					containerHeight = $containerDiv.height()+3,
					newLiLength = $newLi.length;
			
				//check if a value is selected
				if (currentIndex != -1){
					navigateList(currentIndex, true);
				} else {
					//set placeholder text
					$containerDivText.text(opts.defaultText);
				}
	
				//decide if to place the new list above or below the drop-down
				function newUlPos(){
					var containerPosY = $containerDiv.offset().top,
						docHeight = jQuery(window).height(),
						scrollTop = jQuery(window).scrollTop();
	
						//if height of list is greater then max height, set list height to max height value
						if (newUlHeight > parseInt(opts.ddMaxHeight)) {
							newUlHeight = parseInt(opts.ddMaxHeight);
						}	
	
					containerPosY = containerPosY-scrollTop;
					if (containerPosY+newUlHeight >= docHeight){
						$newUl.css({top: '-'+newUlHeight+'px', height: newUlHeight});
						$input.onTop = true;
					} else {
						$newUl.css({top: containerHeight+'px', height: newUlHeight});
						$input.onTop = false;
					}
				}
	
				//run function on page load
				newUlPos();
				
				//run function on browser window resize
				$(window).resize(function(){
					newUlPos();
				});
				
				$(window).scroll(function(){
					newUlPos();
				});
	
				//positioning
				function positionFix(){
					$containerDiv.css('position','relative');
				}
	
				function positionHideFix(){
					$containerDiv.css('position','static');
				}
				
				$containerDivText.click(function(){
				
					if ($newUl.is(':visible')){
						$newUl.hide();
						positionHideFix()
						return false;
					}
	
					$containerDiv.focus();
	
					//show list
					$newUl.slideDown(opts.animationSpeed);
					positionFix();
					//scroll list to selected item
					$newUl.scrollTop($input.liOffsetTop);
	
				});
				
				$newLi.hover(
				  function (e) {
					var $hoveredLi = $(e.target);
					$hoveredLi.addClass('newListHover');
				  },
				  function (e) {
					var $hoveredLi = $(e.target);
					$hoveredLi.removeClass('newListHover');
				  }
				);
	
				$newLi.click(function(e){
					var $clickedLi = $(e.target);
					//update counter
					currentIndex = $newLi.index($clickedLi);
					//remove all hilites, then add hilite to selected item
					prevented = true;
					navigateList(currentIndex);
					$newUl.hide();
					$containerDiv.css('position','static');//ie
				});
	
				function navigateList(currentIndex, init){
	
					//get offsets
					var containerOffsetTop = $containerDiv.offset().top,
						liOffsetTop = $newLi.eq(currentIndex).offset().top,
						ulScrollTop = $newUl.scrollTop();
					
					//get distance of current li from top of list				
					if ($input.onTop == true){
						//if list is above select box, add max height value
						$input.liOffsetTop = (((liOffsetTop-containerOffsetTop)-containerHeight)+ulScrollTop)+parseInt(opts.ddMaxHeight);
					} else {
						$input.liOffsetTop = ((liOffsetTop-containerOffsetTop)-containerHeight)+ulScrollTop;
					}
					
					//scroll list to focus on current item
					$newUl.scrollTop($input.liOffsetTop);
					
					$newLi.removeClass('hiLite')
						.eq(currentIndex)
						.addClass('hiLite');
					var text = $newLi.eq(currentIndex).text();
					//page load
					if (init == true){
						$input.val(text);
						$containerDivText.text(text);
						return false;
					}
					$input.val(text).change();
					$containerDivText.text(text);
	
				};
	
				$input.change(function(event){
						$targetInput = $(event.target);
						//stop change function from firing 
						if (prevented == true){
							prevented = false;
							return false;
						}
						$currentOpt = $targetInput.find(':selected');
						currentIndex = $targetInput.find('option').index($currentOpt);
						navigateList(currentIndex, true);
					}
				);
				
				//handle up and down keys
				function keyPress(element) {
					//when keys are pressed
					element.onkeydown = function(e){
						if (e == null) { //ie
							var keycode = event.keyCode;
						} else { //everything else
							var keycode = e.which;
						}
						
						//prevent change function from firing
						prevented = true;
	
						switch(keycode)
						{
						case 40: //down
						case 39: //right
							incrementList();
							return false;
							break;
						case 38: //up
						case 37: //left
							decrementList();
							return false;
							break;
						case 33: //page up
						case 36: //home
							gotoFirst();
							return false;
							break;
						case 34: //page down
						case 35: //end
							gotoLast();
							return false;
							break;
						case 13:
						case 27:
							$newUl.hide();
							positionHideFix();
							return false;
							break;
						}
	
						//check for keyboard shortcuts
						keyPressed = String.fromCharCode(keycode).toLowerCase();
						var currentKeyIndex = keys.indexOf(keyPressed);
						if (typeof currentKeyIndex != 'undefined') { //if key code found in array
							++currentIndex;
							currentIndex = keys.indexOf(keyPressed, currentIndex); //search array from current index
							if (currentIndex == -1 || currentIndex == null || prevKey != keyPressed) currentIndex = keys.indexOf(keyPressed); //if no entry was found or new key pressed search from start of array
							navigateList(currentIndex);
							//store last key pressed
							prevKey = keyPressed;
							return false;
						}
					}
				}
	
				function incrementList(){
					if (currentIndex < (newLiLength-1)) {
						++currentIndex;
						navigateList(currentIndex);
					}
				}
	
				function decrementList(){
					if (currentIndex > 0) {
						--currentIndex;
						navigateList(currentIndex);
					}
				}
	
				function gotoFirst(){
					currentIndex = 0;
					navigateList(currentIndex);
				}
				
				function gotoLast(){
					currentIndex = newLiLength-1;
					navigateList(currentIndex);
				}
	
				$containerDiv.click(function(){
					keyPress(this);
				});
	
				$containerDiv.focus(function(){
					$(this).addClass('newListSelFocus');
					keyPress(this);
				});
				
				//hide list on blur
				$containerDiv.blur(function(){
				   $(this).removeClass('newListSelFocus');
				   $newUl.hide();
				   positionHideFix();
				});
	
				//add classes on hover
				$containerDivText.hover(function(e) {
					var $hoveredTxt = $(e.target);
					$hoveredTxt.parent().addClass('newListSelHover');
				  }, 
				  function(e) {
					var $hoveredTxt = $(e.target);
					$hoveredTxt.parent().removeClass('newListSelHover');
				  }
				);
	
				//reset left property and hide
				$newUl.css('left','0').hide();
				
			});
		  
		};
	
	})(jQuery);