//$("#imgFotografia").click(function(e){
$("#imgFotografia, .imgFotografia").click(function(e){
	var boton = $(this);
	var mensaje = '<div class="col-md-12"> \
		<div class="row"> \
			<div class="col-md-8"> \
				<label> Selecciona una imágen de las bibliotecas de imágenes </label> \
				<div style="height: 465px; overflow: auto;" id="Biblioteca"> \
					<select id="slBiblioteca" style="visibility: hidden;"></select> \
				</div> \
			</div> \
			<div class="col-md-4"> \
				<div class="row"> \
					<div class="col-md-12"> \
						<label> Ó Sube tu imágen (Esta se almacenará en tu biblioteca y podras utilizarla cuantas veces quieras) </label> \
						<form action="#" class="dropzone" id="flImagen"> \
							<div class="fallback"> \
								<input name="file" type="file"> \
							</div> \
						</form> \
					</div> \
					<div class="col-md-12" style="padding-top: 10px;"> \
						<div class="alert alert-warning" role="alert"> \
							<ul> \
								<li> Las imágenes no deben tener un tamaño mayor a 1MB </li> \
								<li> Solo aceptamos imágenes en formato JPG, PNG y GIF </li> \
							</ul> \
						</div> \
					</div> \
					<div class="col-md-12" style="/*padding-top: 5px;*/"> \
						<div class="form-group"> \
							<label> Ó escriba la ruta de la imagen </label> \
							<input type="text" class="form-control" id="txtImagen"></input> \
						</div> \
						<div class="form-group"> \
							<button type="button" class="btn btn-primary btn-block btn-lg" id="btnCrearImagen"> Usar imágen </button> \
						</div> \
					</div> \
				</div> \
			</div> \
		</div> \
	</div>';
	BootstrapDialog.show({
		title: "Biblioteca de imágenes",
		type: BootstrapDialog.TYPE_DEFAULT,
		message: mensaje,
		draggable: true,
		cssClass: "ModalBiblioteca",
		onshown: function(dialogRef){
			$("#flImagen").dropzone({
				url: $("#hdnRutaImagenes").val(),
				maxFiles: 1,
				acceptedFiles: "image/jpeg,image/png,image/gif",
				maxFilesize: 1,
				success: function(file, response){
					if(response.success){
						var value = response.imagen;
						var img = new Image();
						img.src = value;
						img.onload = function(){
							if(img.height != 0){
								//$("#imgFotografia").attr("src", value);
								boton.attr("src", value);
								if( boton[0].hasAttribute("data-hdn") ){
									var eliminar = false;
									if( $("#"+boton.attr("data-hdn")).length == 1 ){
										if( $("#"+boton.attr("data-hdn")).attr("name") == "fotografia_extra[]" ){
											eliminar = true;
										}
									}
									else{
										eliminar = true;
									}
									if( eliminar ){
										$("#"+boton.attr("data-hdn")).remove();
										var numero = boton.attr("data-hdn").replace( /^\D+/g, "");
										boton.after('<input type="hidden" name="fotografia_extra[]" id="hdnFotografia'+numero+'">');
									}
									$("#"+boton.attr("data-hdn")).val(value);
								}
								else{
									$("#hdnFotografia").val(value);
								}
								$("#btnCrearImagen").html("Usar imágen").prop("disabled", false);
								dialogRef.close();
								$.isLoading("hide"); NProgress.done();
							}
							else{
								new PNotify({ title: "Error", text: "La imágen no pudo ser cargada, por favor vuelve a intentarlo", type: "error" });
								$("#btnCrearImagen").html("Usar imágen").prop("disabled", false);
								dialogRef.close();
								$.isLoading("hide"); NProgress.done();
							}
						}
						img.onerror = function(){
							new PNotify({ title: "Error", text: "La imágen no pudo ser cargada, por favor vuelve a intentarlo", type: "error" });
							$("#btnCrearImagen").html("Usar imágen").prop("disabled", false);
							dialogRef.close();
							$.isLoading("hide"); NProgress.done();
						};
					}
					else{
						dialogRef.close();
						new PNotify({ title: "Error", text: "Ha ocurrido un error, por favor notificalo a soporte!", type: "error" });
					}
				},
				init: function() {
					this.on("addedfile", function(file){
						var dropzone = this;
						if(this.files.length > 1){
							new PNotify({ title: "Error", text: "No puedes subir más de 1 archivo", type: "error" });
							$.each(this.files, function(i, file){
								dropzone.removeFile(file);
							});
						}
					});
					this.on("maxfilesexceeded", function(file){
						new PNotify({ title: "Error", text: "No puedes subir más de 1 archivo", type: "error" });
						$.each(this.files, function(i, file){
							dropzone.removeFile(file);
						});
					});
					this.on("error", function(file, message){
						console.log( message );
						var mensaje = message;
						var borrar = false;
						if( mensaje.indexOf("Max filesize:") !== -1 ){
							borrar = true;
							var texto = "El archivo no debe de tener un tamaño mayor a 1MB";
						}
						else if( mensaje.indexOf("You can't upload files of this type.") !== -1 ){
							borrar = true;
							var texto = "El formato del archivo que intentas cargar no es soportado";
						}
						if( borrar ){
							var dropzone = this;
							$.each(this.files, function(i, file){
								dropzone.removeFile(file);
							});
						}
						new PNotify({ title: "Error", text: texto, type: "error" });
					});
					this.on("processing", function(file){
						$.isLoading({ text: "Cargando..." }); NProgress.start();
						$("#btnCrearImagen").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Procesando...');
					});
				}
			}).on("thumbnail", function(file, dataUri) {
				console.log(dataUri);
			});
			$.get(
				$("#rutabibliotecascliente").val()+$("#cid").val(),
				function(data){
					if(data.success){
						$("#slBiblioteca").html("").append('<option value=""></option>');
						$.each(data.biblioteca, function(index, val){
							$("#slBiblioteca").append("<option data-img-src='"+val.ruta+"' value='"+val.id+"'>");
						});
						$("#slBiblioteca").imagepicker({hide_select: true, show_label: true});
						var i = 0;
						$(".image_picker_selector").find("div.thumbnail").each(function(){
							$(this).prepend('<a class="text-danger" href="javascript:EliminarImagenBiblioteca('+data.biblioteca[i].id+')" title="Eliminar imágen de biblioteca"> <i class="fa fa-trash"> </i> </a>');
							i = i + 1;
						});
						$(".image_picker_selector").find("[title]").each(function(){ $(this).tooltip(); });
					}
					else{
						$("#slBiblioteca").hide();
						$("#Biblioteca").append('<div id="dvWrBiblioteca" class="alert alert-warning" role="alert"> Aún no tienes ningúna imágen almacenada en tu biblioteca </div>');
					}
				},
				"json"
			);
			$("#btnCrearImagen").click(function(e){
				$.isLoading({ text: "Cargando..." }); NProgress.start();
				$("#btnCrearImagen").html('<i class="fa fa-spinner fa-spin"></i> Cargando').prop("disabled", true);
				if( $("#txtImagen").val() == "" && $("#slBiblioteca").val() == ""){
					$.isLoading("hide"); NProgress.done();
					new PNotify({ title: "Error", text: "Debes seleccionar una imágen de la biblioteca, subir una imágen o ingresar la ruta de la imágen que deseas almacenar", type: "error" });
				}
				else{
					if( $("#txtImagen").val() != "" ){
						var value = $("#txtImagen").val();
					}
					else{
						var value = $("#slBiblioteca option:selected").attr("data-img-src");
					}
					var img = new Image();
					img.src = value;
					img.onload = function(){
						if(img.height != 0){
							//$("#imgFotografia").attr("src", value);
							boton.attr("src", value);
							if( boton[0].hasAttribute("data-hdn") ){
								var eliminar = false;
								if( $("#"+boton.attr("data-hdn")).length == 1 ){
									if( $("#"+boton.attr("data-hdn")).attr("name") == "fotografia_extra[]" ){
										eliminar = true;
									}
								}
								else{
									eliminar = true;
								}
								if( eliminar ){
									$("#"+boton.attr("data-hdn")).remove();
									var numero = boton.attr("data-hdn").replace( /^\D+/g, "");
									boton.after('<input type="hidden" name="fotografia_extra[]" id="hdnFotografia'+numero+'">');
								}
								$("#"+boton.attr("data-hdn")).val(value);
							}
							else{
								$("#hdnFotografia").val(value);
							}
							$("#btnCrearImagen").html("Usar imágen").prop("disabled", false);
							dialogRef.close();
							$.isLoading("hide"); NProgress.done();
						}
						else{
							new PNotify({ title: "Error", text: "La imágen no pudo ser cargada, por favor vuelve a intentarlo", type: "error" });
							$("#btnCrearImagen").html("Usar imágen").prop("disabled", false);
							dialogRef.close();
							$.isLoading("hide"); NProgress.done();
						}
					};
					img.onerror = function(){
						new PNotify({ title: "Error", text: "La imágen no pudo ser cargada, por favor vuelve a intentarlo", type: "error" });
						$("#btnCrearImagen").html("Usar imágen").prop("disabled", false);
						dialogRef.close();
						$.isLoading("hide"); NProgress.done();
					};
				}
			});
		},
	});
});