/** www.quiestleplus.fr
 * JS Functions
 * Depedency: jquery
 * Authors: Kris, Nano, Likeyn
 * @CHARSET UTF-8
 */

$(document).ready(function() {
	
	//Nombre de champs input
	var choix = $('#reponseChoix input').length;
	
	//Création du Dropdown
	createDropDown('#source', '#dropdownWrapper');
	
	//Remplissage du champ Autres
	//$('#qualiField').val( $(".dropdown dt a").find("span.value").html() );
	
	//Ajout de champ 'input'
	$('#addLine').click(function() {
		choix++;
		$('#reponseChoix').append('<label class="clear" for="choix'+choix+'">Pr&eacute;nom '+choix+':</label><input id="choix'+choix+'" class="styledInput" type="text" value="" name="n'+choix+'"><br />');
		return false;
	});
	
	
	/*---[ Gestion du Dropdown ]---*/
	/*-----------------------------*/
	
	$(".dropdown dt a").click(function() {
		$(".dropdown dd ul").toggle();
		return false;
	});
	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (! $clicked.parents().hasClass("dropdown")) {
			$(".dropdown dd ul").hide();
		}
		else {
			return false;
		}
	});
	$(".dropdown dd ul li a").click(function() {
		var htmlText = $(this).html();
		$(".dropdown dt a").html(htmlText);
		$(".dropdown dd ul").hide();
		
		var source = $("#source");
		var text = $(this).find("span.value").html();
		
		source.val(text);
		$('#qualiField').val(text);
		
		return false;
	});
	
});

/**
 * Fonction de création du Dropdown
 * @param {Object} sourceSelector - jQuery Selector
 * @param {Object} targetSelector - jQuery Selector
 */
function createDropDown(sourceSelector, targetSelector){
    var source = $(sourceSelector);
    var selected = $(":selected");
    var options = $("option", source);
    
    $(targetSelector).append('<dl id="target" class="dropdown"></dl>');
    $("#target").append('<dt><a href="">' + selected.text() + 
        '<span class="value">' + selected.val() + 
        '</span></a></dt>');
    $("#target").append('<dd><ul></ul></dd>');

    options.each(function(){
        $("#target dd ul").append('<li><a href="">' + 
            $(this).text() + '<span class="value">' + 
            $(this).val() + '</span></a></li>');
    });
	
	source.hide();
}