(function($) {
	//Définition du plugin
	$.fn.imgDropDownMl = function(optionsMl) {	
		
		// définition des paramètres par défaut
		var defaultsml = {
		    titleml: "",
		    callbackml: null
		};	
		// mélange des paramètres fournis et par défaut
		var optsml = $.extend(defaultsml, optionsMl);		
				
		// création d'une liste
		function createListMl(f){
			// créer la première zone, affichant l'option sélectionnée
			var cellml = $("<div class='dropdownCellMl'>" + optsml.titleml + "</div>");
			
			// créer la seconde zone, affichant toutes les options
			var dropdownml = $("<div id=\"listeml\" class='dropdownPanelMl'></div>");
			var j=0;
			var lavaleur = '';
			$(this).find("option").each(function(){
				var lecontenu = '';
				lavaleur = $(this).attr("value");
				if (lavaleur == 0) {
					lecontenu = ' &nbsp;  &nbsp; ';
				}
				else if (lavaleur) {
					if($("#tab_image_ml_"+lavaleur).attr("value") == '') {
						lecache = ' style="display: none;"';
					}
					lecontenu = '<img src="'+$("#tab_image_ml_"+lavaleur).attr("value")+'" alt="" width="50" id="#tab_image_ml_'+lavaleur+'" />';
				}
				else {
					lecontenu = ' &nbsp;  &nbsp; ';
				}
				//if (lavaleur) {
					dropdownml.append($("<div class='dropdownOptMl'></div")
						.click(onSelectMl)
						.attr("value", $(this).attr("value"))
						.attr("id", "dropdownOptMl_"+$(this).attr("value"))
						.append($(this).html())
						.prepend(lecontenu)
						.hover(function(){$(this).addClass("dropdownOptSelectedMl");},
							   function(){$(this).removeClass("dropdownOptSelectedMl");})
					);
				//}
				j++;
				lavaleur = '';
				lecache = '';
			});

			// on masque la zone déroulante
			dropdownml.hide();
			$.data(cellml, "visible", false);
			
			// on remplace la balise ul par notre liste personnalisée
			$(this).after(dropdownml);
			$(this).after(cellml);
			$(this).remove();
		
			// on positionne l'évènement de déroulage de la liste
			cellml.click(function(){		
				// si la liste est déroulée
				if ($.data(cellml, "visible")){
					$('div#listeml').attr('style', 'position: absolute; z-index: -1;');
					dropdownml.slideUp("fast");
					$.data(cellml, "visible", false);
				}
				else{
					$('div#listeml').attr('style', 'position: absolute; z-index: 20;');
					dropdownml.slideDown("fast");
					$('.dropdownPanel').css('display', 'none');
					$.data(cellml, "visible", true);
				}
			});
			
			// fonction appelée à chaque sélection d'un élément
			function onSelectMl(){
				var mlchoisie = $(this).attr("value");
				//on cache la baguette cadre correspondant
				$("#listecadre .cache").css("display", "");
				$("#listecadre .cache").attr("class", "dropdownOpt");
				$("#dropdownOptCadre_"+mlchoisie).css('display', 'none');
				$("#dropdownOptCadre_"+mlchoisie).attr('class', 'cache');
				$("input#id_ml").attr("value", mlchoisie);
				$("#apercu-encadrement img").attr({src: 'http://www.cadres-sernesi.fr/images/lightbox-ico-loading.gif'});
				if ($("input#id_cadre").val() == '0') {
					$("#apercu-encadrement img").attr({src: 'http://www.cadres-sernesi.fr/images/veuillez-selectionner-une-baguette.png'});
				}
				else {
					$("#apercu-encadrement img").attr({src: 'cadre-clic.php?p='+$("input#id_cadre").val()+'&m='+$("input#id_ml").val()+'&u='+$("#inputimage").val()+'&l='+$("input#largeur").val()+'&h='+$("input#hauteur").val()});
				}
				calculePrix($("input#largeur").val(), $("input#hauteur").val(), $("input#id_cadre").val(), $("input#id_ml").val());
				calculeTaille($("input#largeur").val(), $("input#hauteur").val(), $("input#id_cadre").val(), $("input#id_ml").val());
				affichePhotos($("input#id_cadre").val());
				afficheDescription($("input#id_cadre").val());
				afficheConseil($("input#id_cadre").val());
				cellml.html($(this).html());
				cellml.attr("value", $(this).attr("value"));
				dropdownml.slideUp("fast");
				
				$.data(cellml, "visible", false);
				
				// appel d'une fonction personnalisée
				if (optsml.callback)
					optsml.callback($(this));
			}				
		}
			
		// création d'une liste déroulante personnalisée pour tous les éléments de l'objet jQuery
		$(this).each(createListMl);	

		// interface fluide
		return $(this);
	};
})(jQuery);

