/* 
 * Codificación UTF-8
 * Eventos asociados a los elementos de un formulario
 */

$('input[type=file][data-gvhWindow='+ambito+']').on({
	change: function(e) {
	    e.preventDefault();
console.log(' ** UPDATE FILE '+$(this).attr('id'));
		var fileCollection = new Array();
		var panel = $(this).attr('data-gvhPanelOn');
		var panelJSON = $(this).attr('data-gvhPanelJSON');
		var claseM = $(this).attr('data-gvhClaseManejadora');
		var iter = $(this).attr('data-gvhIterActual');
		var actualizaA = $(this).attr('data-gvhActualizaA');
		var id = $(this).attr('id');
		var campoJSON = id;
		if (panel != 'fil')
			campoJSON = id.split('___')[1];

		idToUpload = "toUpload_"+id;
		var files = e.target.files;
		var count = files.length;
		var tmp_files = '';	
		
		toUpload = $('span[id='+idToUpload+']');
		toUpload.map(function()
		{
			$(this).empty();
		});
		id_ulFile = 'ulFile_'+id;
		$('#'+id_ulFile).empty();
		toUpload.append("<ul id='"+id_ulFile+"'>");	
		padre = $('#progress_bar').parent().attr('id');
    	$('#progress_bar').addClass('progress_bar');
        $("#percent").css("width", "5%");
        $("#percent").text("0%");

		formData = new FormData();
		$.each(files, function(i, file)
		{
			fileCollection.push(file);
        	formData.append( 'file', file );
			var reader = new FileReader();
			reader.readAsDataURL(file);
			// Barra progreso
			reader.onprogress = function(data) {
				if (data.lengthComputable) {
					var percentLoaded = Math.round((data.loaded / data.total) * 100);
console.log(percentLoaded);
				    if (percentLoaded < 100) {
				    	$("#percent").css("width", percentLoaded+"%");
				        $("#percent").text(file.name+' '+percentLoaded+"%");
				    }
				}			
			};
			reader.onload = function(e)
			{
				//console.log(e);
				$('#'+id_ulFile).append('<li class="list">'+file.name+'</li>');
				if (!--count)
				{
					$('#'+idToUpload).append("</ul>");
					$('#'+idToUpload).css('visibility', 'visible');
				}
			    $("#percent").css("width", "100%");
			    $("#percent").text(file.name+" 100%");
			    formData.append('image',fileCollection);
			    setTimeout("$('#progress_bar').removeClass()", 4000);
			}
            //console.log( file );
		});

	    $.ajax({
	        type:'POST',
			url: 'phrame.php?action=ManageUpload__upFile',
			type: "POST",    
			contentType: false,
	        processData: false,
	        cache: false,
	        data:formData,
	        xhr: function() {
                var jqXHR = null;
                if ( window.ActiveXObject )
                {
                    jqXHR = new window.ActiveXObject( "Microsoft.XMLHTTP" );
                }
                else
                {
                    jqXHR = new window.XMLHttpRequest();
                }
                //Upload progress
              /*  jqXHR.upload.addEventListener( "progress", function ( evt )
                {
                    if ( evt.lengthComputable )
                    {
                        var percentLoaded = Math.round( (evt.loaded * 100) / evt.total );
                        //Do something with upload progress
    				    if (percentLoaded < 100) {
    				    	$("#percent").css("width", percentLoaded+"%");
    				        $("#percent").text(percentLoaded+"%");
    				    }
                        console.log( 'Uploaded percent', percentLoaded );
                        console.log(evt);
                    }
                }, false );*/
                //Download progress
                jqXHR.addEventListener( "progress", function ( evt )
                {
                    if ( evt.lengthComputable )
                    {
                        var percentComplete = Math.round( (evt.loaded * 100) / evt.total );

    				   /* if (percentComplete < 100) {
    				    	$("#percent").css("width", "100%");
    				        $("#percent").text("**100%");
    				    }*/
                        //Do something with download progress
                        //console.log( 'Downloaded percent', percentComplete );
                    }
                }, false );
                return jqXHR;
	        },
	        success:function(data) {
	            console.log(data);
		    	$("#percent").css("width", "100%");
		        $("#percent").text("...100%");
	        },
	        error: function(data) {
	            console.log(data);
	        }
	    });
	}
});