(function($) {
	//Définition du plugin
	$.fn.imgDropDown = function(options) {	
		
		// définition des paramètres par défaut
		var defaults = {
		    title: "",
		    callback: null
		};	
		// mélange des paramètres fournis et par défaut
		var opts = $.extend(defaults, options);		
				
		// création d'une liste
		function createList(f){
			// créer la première zone, affichant l'option sélectionnée
			var cell = $("<div class='dropdownCell'>" + opts.title + "</div>");
			
			// créer la seconde zone, affichant toutes les options
			var dropdown = $("<div id=\"listecadre\" class='dropdownPanel'></div>");				
			var j=0;
			var lavaleur = '';
			var lecache = '';
			$(this).find("option").each(function(){
				var lecontenu = '';
				lavaleur = $(this).attr("value");
				if (lavaleur) {
					if($("#tab_image_cadre_"+lavaleur).attr("value") == '') {
						lecache = ' style="display: none;"';
					}
					lecontenu = '<img src="images/'+$("#tab_image_cadre_"+lavaleur).attr("value")+'" width="50" alt="'+$("#tab_image_cadre_"+lavaleur).attr("title")+'" title="'+$("#tab_image_cadre_"+lavaleur).attr("title")+'"'+lecache+' />';
				}
				else {
					lecontenu = ' ';
				}
				if (lavaleur) {
					dropdown.append($("<div class='dropdownOpt'></div")
						.click(onSelect)
						.attr("value", $(this).attr("value"))
						.attr("id", "dropdownOptCadre_"+$(this).attr("value"))
						.append($(this).html())		
						.prepend(lecontenu)
						.hover(function(){$(this).addClass("dropdownOptSelected");},
							   function(){$(this).removeClass("dropdownOptSelected");})
					);
				}
				j++;
				lavaleur = '';
				lecache = '';
			});

			// on masque la zone déroulante
			dropdown.hide();
			$.data(cell, "visible", false);
			
			// on remplace la balise ul par notre liste personnalisée
			$(this).after(dropdown);
			$(this).after(cell);
			$(this).remove();
		
			// on positionne l'évènement de déroulage de la liste
			cell.click(function(){		
				// si la liste est déroulée
				if ($.data(cell, "visible")){
					$('div#listecadre').attr('style', 'position: absolute; z-index: -1;');
					dropdown.slideUp("fast");
					$.data(cell, "visible", false);
				}else{
					$('div#listecadre').attr('style', 'position: absolute; z-index: 20;');
					dropdown.slideDown("fast");
					$.data(cell, "visible", true);
				}
			});
			
			// fonction appelée à chaque sélection d'un élément
			function onSelect(){
				// on récupère les tailles minimum et maximum en fonction de la catégorie principale
				$.getJSON("tailles.php",{id_cadre: $(this).attr("value"), ajax: 'true'}, function(j){
					for (var i = 0; i < j.length; i++) {
						$('input#taille_min').val(j[i].optionValue);
						$('input#taille_max').val(j[i].optionDisplay);
						$('span#taillemin').html(j[i].optionValue);
						$('span#taillemax').html(j[i].optionDisplay);
						var message_alerte = 0;
						if (parseFloat($("input#largeur").val()) < parseFloat(j[i].optionValue)) {
							message_alerte = 1;
							$("input#largeur").val(parseFloat(j[i].optionValue));
						}
						if (parseFloat($("input#largeur").val()) > parseFloat(j[i].optionDisplay)) {
							message_alerte = 1;
							$("input#largeur").val(parseFloat(j[i].optionDisplay));
						}
						if (parseFloat($("input#hauteur").val()) < parseFloat(j[i].optionValue)) {
							message_alerte = 1;
							$("input#hauteur").val(parseFloat(j[i].optionValue));
						}
						if (parseFloat($("input#hauteur").val()) > parseFloat(j[i].optionDisplay)) {
							message_alerte = 1;
							$("input#hauteur").val(parseFloat(j[i].optionDisplay));
						}
						if (message_alerte == 1) {
							alert('Vous devez indiquer des valeurs de largeur et de hauteur comprises entre '+parseFloat(j[i].optionValue)+' et '+parseFloat(j[i].optionDisplay)+'.\n\nMerci pour votre compréhension.');
						}
					}
				});
				// on modifie l'intervalle choisi
				$.getJSON("intervalles.php",{id_cadre: $(this).attr("value"), ajax: 'true'}, function(j){
					for (var i = 0; i < j.length; i++) {
						$('input#intervalles').val(j[i].optionDisplay);
					}
				});
				// on change la valeur de l'action du formulaire
				$("form#form-cadre-clic").attr('action', 'mon-panier.php?action=add_product&pID='+$(this).attr("value"));
				var lancienneml = $('.dropdownCellMl').html();
				$.ajax({
					type: "get",
					url: "select-cat-ml.php",
					data: "id_cadre="+$(this).attr("value"),
					success: function(msg){
						$("select#select-cat-ml").html(msg);
					}
				 });
				// on change la liste des catégories de ml
//				$.getJSON("select-cat-ml.php", {id_cadre: $(this).attr("value"), ajax: 'true'}, function(j) {
//					var options = '';
//					var labonneml = 0;
//					for (var i = 0; i < j.length; i++) {
//						options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
//					}
//					$("select#select-cat-ml").html(options);
//				});
				// on change la liste des ml
				$.getJSON("select-ml.php",{categories_id_ml: '0', id_cadre: $(this).attr("value"), ajax: 'true'}, function(j){
					var options = '';
					var labonneml = 0;
					for (var i = 0; i < j.length; i++) {
						options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
						if (j[i].optionValue == $("input#id_ml").val()) {
							labonneml = j[i].optionValue;
						}
					}
					$("div.dropdownPanelMl").html(options);
					$(function(){
						$("div.dropdownCellMl").css("display", "none");
						$("div.dropdownPanelMl").css("display", "none");
						if (labonneml > 0) {
							$("div.dropdownPanelMl").imgDropDownMl({titleml: lancienneml});
							$("#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()});
						}
						else {
							$("div.dropdownPanelMl").imgDropDownMl({titleml:"Choisissez la marie-louise"});
							$("input#id_ml").val('');
							$("#apercu-encadrement img").attr({src: 'cadre-clic.php?p='+$("input#id_cadre").val()+'&u='+$("#inputimage").val()+'&l='+$("input#largeur").val()+'&h='+$("input#hauteur").val()});
						}
					});
				});
				var cadrechoisi = $(this).attr("value");
				//on cache la ml correspondante
				$("#listeml .cache").css("display", "");
				$("#listeml .cache").attr("class", "dropdownOpt");
				$("#dropdownOptMl_"+cadrechoisi).css('display', 'none');
				$("#dropdownOptMl_"+cadrechoisi).attr('class', 'cache');
				$("input#id_cadre").attr("value", cadrechoisi);
				$("input#products_id").attr("value", cadrechoisi);
				$("#apercu-encadrement img").attr({src: 'http://www.cadres-sernesi.fr/images/lightbox-ico-loading.gif'});
				$("#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());
				cell.html($(this).html());
				cell.attr("value", $(this).attr("value"));
				dropdown.slideUp("fast");
				
				$.data(cell, "visible", false);
				
				// appel d'une fonction personnalisée
				if (opts.callback)
					opts.callback($(this));
			}				
		}
			
		// création d'une liste déroulante personnalisée pour tous les éléments de l'objet jQuery
		$(this).each(createList);	

		// interface fluide
		return $(this);
	};
})(jQuery);




/*
(function($) {
	//Définition du plugin
	$.fn.imgDropDown = function(options) {	
		
		// définition des paramètres par défaut
		var defaults = {
		    title: "",
		    callback: null
		};	
		// mélange des paramètres fournis et par défaut
		var opts = $.extend(defaults, options);		
				
		// création d'une liste
		function createList(f){
			// créer la première zone, affichant l'option sélectionnée
			var objetcadre = $(this).attr("id");
			var cellcadre = $("<div id='" + $(this).attr("id") + "'>" + opts.title + "</div>");
			// créer la seconde zone, affichant toutes les options
			var dropdowncadre = $("<div class='dropdownPanel-" + objetcadre + "'></div>");				
						
			$(this).find("li").each(function(){
				dropdowncadre.append($("<div class='dropdownOpt-" + objetcadre + "'></div")
					.click(onSelect)
					.attr("value", $(this).attr("value"))
					.append($(this).html())		
					.hover(function(){alert('ok');$(this).addClass("dropdownOptSelected-" + objetcadre);},
						   function(){alert('-ok');$(this).removeClass("dropdownOptSelected-" + objetcadre);})
				);
			});

			// on masque la zone déroulante
			dropdowncadre.hide();
			$.data(cellcadre, "visible", false);
			
			// on remplace la balise ul par notre liste personnalisée
			$(this).after(dropdowncadre);
			$(this).after(cellcadre);
			$(this).remove();
		
			// on positionne l'évènement de déroulage de la liste
			cellcadre.click(function(){		
				// si la liste est déroulée
				if ($.data(cellcadre, "visible")){
					dropdowncadre.slideUp("fast");
					$.data(cellcadre, "visible", false);
				}else{
					dropdowncadre.slideDown("fast");
					$.data(cellcadre, "visible", true);
				}
			});
			
			// fonction appelée à chaque sélection d'un élément
			function onSelect(){
				var test = $(this).attr("value");
				$("#testtt").attr("value").text = test;
				cellcadre.html($(this).html());
				cellcadre.attr("value", $(this).attr("value"));
				dropdowncadre.slideUp("fast");
				
				$.data(cellcadre, "visible", false);
				
				// appel d'une fonction personnalisée
				if (opts.callback)
					opts.callback($(this));
			}				
		}
			
		// création d'une liste déroulante personnalisée pour tous les éléments de l'objet jQuery
		$(this).each(createList);	

		// interface fluide
		return $(this);
	};
})(jQuery);

*/