<!-- Content Row -->
					<div class="row">

						<!-- Nube de palabras -->
						<div class="col-xl-8 col-lg-7">
							<div class="card shadow mb-4">
								<!-- Card Header - Dropdown -->
								<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
									<h6 class="m-0 font-weight-bold text-primary">Nube de Palabras</h6>
								</div>
								<!-- Card Body -->
								<div class="card-body" style = "height: 75vh;">
					 					<div id="clouddiv" style="position: relative; width: 100%; height: 100%;">
						 						<canvas id="canvas" style="display:none;"></canvas>
							 					<div id="html-canvas" style="background-size: contain; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;" class="canvas"></div>
					 					</div>
								</div>
							</div>
						</div>

						<!-- Template nube de palabras -->
						<div class="col-xl-4 col-lg-5">
							<div class="card shadow mb-4">
								<!-- Card Header - Dropdown -->
								<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
									<h6 class="m-0 font-weight-bold text-primary">Forma de Nube</h6>									
								</div>
								<!-- Card Body -->
								<div class="card-body text-center">
									<a href="#wc" onclick="CrateCloudChart('WordCloud/img/cloud/Huella_H.png');"><img class="m-3" src="WordCloud/img/cloud/Huella_L.png" style="height: 60px;" /></a>
									<a href="#wc" onclick="CrateCloudChart('WordCloud/img/cloud/Mi_Huella_H.png');"><img class="m-3" src="WordCloud/img/cloud/Mi_Huella_L.png" style="height: 60px;" /></a>
									<a href="#wc" onclick="CrateCloudChart('WordCloud/img/cloud/Planta_H.png');"><img class="m-3" src="WordCloud/img/cloud/Planta_L.png" style="height: 60px;" /></a>
									<a href="#wc" onclick="CrateCloudChart('WordCloud/img/cloud/World_Summit_H.png');"><img class="m-3" src="WordCloud/img/cloud/World_Summit_L.png" style="height: 60px;" /></a>
									<a href="#wc" onclick="CrateCloudChart('WordCloud/img/cloud/Yucatan_I_H.png');"><img class="m-3" src="WordCloud/img/cloud/Yucatan_I_L.png" style="height: 60px;" /></a>
									<a href="#wc" onclick="CrateCloudChart();"><img class="m-3" src="WordCloud/img/cloud/Cloud_L.png" style="height: 60px;" /></a>
									<a href="#wc" onclick="CrateCloudChart('WordCloud/img/cloud/Yucatan_H.png');"><img class="m-3" src="WordCloud/img/cloud/Yucatan_L.png" style="height: 60px;" /></a>
								</div>
								
								<div class="text-xs font-weight-bold text-primary text-center mb-1">* La cantidad de palabras visibles depende de la resolución de la pantalla de su dispositivo</div>
							</div>
							
							<div class="card shadow mb-4">
								<!-- Card Header - Dropdown -->
								<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
									<h6 class="m-0 font-weight-bold text-primary">Palabras más frecuentes</h6>									
								</div>
								<!-- Card Body -->
								<div class="card-body text-center">
									<div class="table-responsive">
										<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
											<tbody>
												<thead>
													<tr>
														<th>Palabra</th>
														<th>Frecuencia</th>
													</tr>
												</thead>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>

	<script>



		
			var lFunction;
			$(document).on('click', '.wcClassS', function() {
				var Word = $(this).html();
				lFunction = function(){ UpdatePage(Word);};
				lFunction();
			}); 
			
			
			// Request de actualización dinámica (main)...
			var sampleClient = new XMLHttpRequest();
			
			var result = "";

			// Actualiza div contenedor (main)...
			function UpdatePage(word){
				// Create a FormData instance...
				var upData = new FormData();
				// Put POST data...
				upData.append('Word', word);
				// Set POST data...				
				sampleClient.open("post", "WordCloud/gSample.php", true);
				// Send to server...
				sampleClient.send(upData);
				// Terminamos...
				return true;
			}
						
			// Respuesta del cliente main...
			sampleClient.onreadystatechange = function(){
				// Status OK...
				if (sampleClient.readyState == 4 && sampleClient.status == 200){
					// Check for errors on response...
					if (sampleClient.responseText.indexOf('Error!') != -1) {
						// Do nothing...
						return;
					}else{
						// Present data to user...
						result = sampleClient.responseText.split('<"SEP">');
						showModal(result[0], result[1], lFunction);
						// Clear response...
						sampleClient.responseText = "";
					}
				}
			}
					
			// Tomamos los elementos HTML que vamos a ocupar...
			var $mainCanvas = $('#canvas');
			var $htmlCanvas = $('#html-canvas');
			
			CrateCloudChart = function CrateCloudChart(tImage=""){
				if (tImage == ""){
					maskCanvas = null;
					$htmlCanvas.css("background-image", "");
					CreateCloud();
				}else{
					$htmlCanvas.css("background-image", "url('" + tImage + "')");
					img.src = tImage;
				}
			}

			// Cuando la imagen se cargue...
			img.onload = function readPixels() {
			
				// Destruimos URL
				window.URL.revokeObjectURL(url)
				
			 	// Creamos un nuevo canvas...
				maskCanvas = document.createElement('canvas');
				maskCanvas.width = img.width;
				maskCanvas.height = img.height;

				var ctx = maskCanvas.getContext('2d');
					ctx.drawImage(img, 0, 0, img.width, img.height);

				var imageData = ctx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
				var newImageData = ctx.createImageData(imageData);
			
				for (var i = 0; i < imageData.data.length; i += 4){
					var alpha = imageData.data[i + 3];
					//Si el alpha es menor que 128 (transparente) pero mayor que 10 (no es fondo)...
					if (alpha < 128 && alpha > 10 ){
						// Dibujamos, lo marcamos de negro y sin transparencia...
						newImageData.data[i] = newImageData.data[i + 1] = newImageData.data[i + 2] = 0;
						newImageData.data[i + 3] = 255;
					
					}else{
						// No dibujamos y lo pintamos de blanco y transparente en la máscara...
						newImageData.data[i] = newImageData.data[i + 1] = newImageData.data[i + 2] = 255;
						newImageData.data[i + 3] = 0;						
					}
				}
				
				ctx.putImageData(newImageData, 0, 0);

				CreateCloud(img.width, img.height);
			};
						
			
			function CreateCloud(imgWidth, imgHeight) {
				
				if (maskCanvas){
				
					// Escalado de bordes...
					var cScale = 1;

					// Obtenemos la resolución del contenedor...
					var navWidth = document.getElementById('clouddiv').offsetWidth;
					var navHeight = document.getElementById('clouddiv').offsetHeight;

					// Ajustamos la imagen para que entre en el navegador...
					var wScale = (navWidth / imgWidth);
					var hScale = (navHeight / imgHeight);

					if(wScale >	hScale){				
						imgWidth = (imgWidth*hScale*cScale);
						imgHeight = (imgHeight*hScale*cScale);
					}else{
						imgWidth = (imgWidth*wScale*cScale);
						imgHeight = (imgHeight*wScale*cScale);
					}

					$mainCanvas.attr('width', imgWidth);
					$mainCanvas.attr('height', imgHeight);
					
					$htmlCanvas.css({'width': imgWidth + 'px', 'height': imgHeight + 'px'});
					$htmlCanvas.html("");
					
					var maskCanvasScaled = document.createElement('canvas');
						maskCanvasScaled.width = $mainCanvas[0].width;
						maskCanvasScaled.height = $mainCanvas[0].height;

					var ctx = maskCanvasScaled.getContext('2d');
						ctx.drawImage(maskCanvas, 0, 0, maskCanvas.width, maskCanvas.height, 0, 0, maskCanvasScaled.width, maskCanvasScaled.height);

					var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
					var newImageData = ctx.createImageData(imageData);
					
					 	// Creamos un nuevo canvas...
					var oImgCanvas = document.createElement('canvas');
						oImgCanvas.width = $mainCanvas[0].width;
						oImgCanvas.height = $mainCanvas[0].height;

					var oIctx = oImgCanvas.getContext('2d');
						oIctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, oImgCanvas.width, oImgCanvas.height);
					var oIData = oIctx.getImageData(0, 0, canvas.width, canvas.height);
						
				
					for (var i = 0; i < imageData.data.length; i += 4){
						if (imageData.data[i + 3] > 128){
							// Donde SI podemos poner palabras...
							newImageData.data[i] = oIData.data[i];
							newImageData.data[i + 1] = oIData.data[i+1];
							newImageData.data[i + 2] = oIData.data[i+2];
							newImageData.data[i + 3] = alphaBGWords;							
						}else{
							// Donde NO podemos poner palabras...
							newImageData.data[i] = oIData.data[i];
							newImageData.data[i + 1] = oIData.data[i+1];
							newImageData.data[i + 2] = oIData.data[i+2];
							newImageData.data[i + 3] = oIData.data[i+3];
						}
					}

					ctx.putImageData(newImageData, 0, 0);
					ctx = $mainCanvas[0].getContext('2d');
					ctx.drawImage(maskCanvasScaled, 0, 0);

					maskCanvasScaled = ctx = imageData = newImageData = oImgCanvas = oIctx = oIData = undefined;

					WordCloud([$mainCanvas[0], $htmlCanvas[0]], { list: list,
											gridSize: 5,
											weightFactor: "auto",
											clearCanvas: false,
											rotateRatio: 1,
											shuffle: false,
											alphaBGWords: alphaBGWords
											}
								);					
					
				}else{
				
					// Obtenemos la resolución del contenedor...
					imgWidth = document.getElementById('clouddiv').offsetWidth;
					imgHeight = document.getElementById('clouddiv').offsetHeight;
					
					$mainCanvas.attr('width', imgWidth);
					$mainCanvas.attr('height', imgHeight);
					
					$htmlCanvas.css({'width': imgWidth + 'px', 'height': imgHeight + 'px'});
					$htmlCanvas.html("");
				
					var maskCanvasScaled = document.createElement('canvas');
						maskCanvasScaled.width = $mainCanvas[0].width;
						maskCanvasScaled.height = $mainCanvas[0].height;
					var ctx = maskCanvasScaled.getContext('2d');
					var newImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
				
					for (var i = 0; i < newImageData.data.length; i += 4){
						// Donde SI podemos poner palabras...
						newImageData.data[i] = 255;
						newImageData.data[i + 1] = 255;
						newImageData.data[i + 2] = 255;
						newImageData.data[i + 3] = alphaBGWords;							
					}

					ctx.putImageData(newImageData, 0, 0);
					ctx = $mainCanvas[0].getContext('2d');
					ctx.drawImage(maskCanvasScaled, 0, 0);

					maskCanvasScaled = ctx = imageData = newImageData = undefined;
					
					
					WordCloud([$mainCanvas[0], $htmlCanvas[0]], { list: list,
											gridSize: 2,
											weightFactor: "auto",
											clearCanvas: false,
											rotateRatio: 1,
											shuffle: false,
											alphaBGWords: alphaBGWords,
											fontFamily: 'Impact, serif',
											color: 'random-light'
											}
								);					
				}
			}
			
			CrateCloudChart();

			// Call the dataTables jQuery plugin
			$(document).ready(function() {
				$('#dataTable').DataTable({
				"data": list,
				"lengthChange": false,
				"searching": false,
				"info": false,
				"paging": false,
				"scrollY": 330,
				"scrollCollapse": true,
				"order": [[ 1, "desc" ]]
				});
			});
			

</script>