window.onload = function() {
	var revista = '',
		  filtro_anio = '',
		  filtro_epoca = '',
		  num_rev = 8,
		  revista_num = 1;
		  i = 0,
		  x = 0,
		  $table = $("#revistas_historia"),
    		  rows = [],
          header = [];
	$table.find("thead th").each(function () {
	    header.push($(this).html());
	});
	$table.find("tbody tr").each(function () {
	    var row = {};
	    $(this).find("td").each(function (i) {
	        var key = header[i],
	        		  value = $(this).html();
	        row[key] = value;
	    });
	    rows.push(row);
	});
	var jsonRevistas = JSON.parse(JSON.stringify(rows));
	
	// Lee json y obtiene anios
    var anios_rev = jsonRevistas.map(function (anios) {
        return anios.anio;
    });
	// Filtra los anios del json y regresa un arreglo sin repetidos
	var anios_revista = anios_rev.filter(function (value, index) {
	    return value !== anios_rev[index+1];
	});
	
	// Arreglo de anios y los pinta en select
	filtro_anio+='<option value="anios">Todos los a\u00F1os</option>';
	anios_revista.forEach( anio_rev => {
		if(anio_rev!=='')
			filtro_anio+='<option value="'+anio_rev+'">'+anio_rev+'</option>';
	});
	$('#anio_rev').html(filtro_anio);
		
	// Lista de revistas
	jsonRevistas.forEach( data => {
		
		if(i==0)
			revista+='<div class="flex-content page" id="page'+revista_num+'">';
		revista+='<div class="col-md-3 col-sm-6" anio="'+data.anio+'" mes="'+data.mes+'" temp="'+data.epoca+'">';
			revista+='<div class="content">';
				revista+='<a href="'+data.url+'">';
					revista+='<div class="port-rev-cult text-center">';
						revista+='<figure class="portadas-revistas text-center">';
							revista+='<img alt="" class="back-portada" src="https://revistadehistoriadeamerica.ucol.mx/content/revista/1/image/bg-portada-revistaculturas-derecha.png">';
							revista+='<img alt="" class="portada-revista-cultura" src="'+data.portada+'">';
						revista+='</figure>';
					revista+='</div>';
				revista+='</a>';
				revista+='<p>';
				if(data.epoca !== null && data.epoca !== '' && data.epoca !== '&nbsp;')
            			revista+='\u00C9poca <strong>'+data.epoca+'</strong> \u2022';
            		if(data.volumen !== null && data.volumen !== '' && data.volumen !== '&nbsp;')
					revista+=' Volumen <strong>'+data.volumen+'</strong> \u2022';
				if(data.numero !== null && data.numero !== '' && data.numero !== '&nbsp;')
                		revista+=' N\u00FAmero <strong>'+data.numero+'</strong> \u2022';
                	if(data.anio !== null && data.anio !== '' && data.anio !== '&nbsp;')
					revista+=' <strong>'+data.mes+', '+data.anio+'</strong>';
				revista+='</p>';
				revista+='<p><em>';
				if(data.resumen !== '' && data.resumen !== '&nbsp;' && data.resumen !== null) {
					var string_cont = data.resumen.length;
					revista+=data.resumen.substr(0,180);
					if(string_cont>=180)
						revista +='...';
				} else {
		            revista +='Sin resumen...';
		        }
		        revista+='</em></p>';
		        revista+='<p style="text-align: right;"><a href="'+data.url+'">Ver completo <span class="fa fa-angle-right"></span></a></p>';
		        revista+='<hr>';
		    revista+='</div>';
		revista+='</div>';	
	    if(x!==(num_rev-1)){
		    x++;
		} else {
			x = 0;
			revista+='</div>';
			revista_num++;
			revista+='<div class="flex-content page" id="page'+revista_num+'">';
	    }
	    i++;
	    
		$('#revistas').html(revista);
		$('#page1').addClass('page-active');
		$('#pagination-magazine').twbsPagination({
			//Math.round(data.length / num_rev),
			totalPages: (jsonRevistas.length / num_rev)+1,
			// the current page that show on start
			startPage: 1,
			// maximum visible pages
			visiblePages: num_rev,
			// Text labels
			first: 'Primero',
			prev: 'Anterior',
			next: 'Siguiente',
			last: 'Ultimo',
			// callback function
			onPageClick: function (event, page) {
				$('.page-active').removeClass('page-active');
				$('#page'+page).addClass('page-active');
			}
		});
		
		// Filtros anios
		$('#anio_rev').change(function() {
			var fltr_anio = '';
			$('#mes_rev').prop('selectedIndex',0);
			$('#tempo_rev').prop('selectedIndex',0);
		    $(this).find('option:selected').each(function() {
				if(this.value!=='anios'){
					$('#revistas').addClass('fltr_anio');
					$('#pagination_rev').addClass('hide');
					$('[anio]').addClass('hide');
					fltr_anio = this.value;
					$( '#revistas' ).find('[anio*="'+fltr_anio+'"]').each(function( index ) {
					    $(this).removeClass('hide');
				    });
				} else {
					$('#revistas').removeClass('fltr_anio');
					$('#pagination_rev').removeClass('hide');
					$('[anio]').removeClass('hide');
				}
		    });
		}).trigger('change');
		
		// Filtros meses
		$('#mes_rev').change(function() {
			var fltr_mes = '';
			$('#anio_rev').prop('selectedIndex',0);
			$('#tempo_rev').prop('selectedIndex',0);
		    $(this).find('option:selected').each(function() {
				if(this.value!=='meses'){
					$('#revistas').addClass('fltr_anio');
					$('#pagination_rev').addClass('hide');
					$('[mes]').addClass('hide');
					fltr_mes = this.value;
					$( '#revistas' ).find('[mes*="'+fltr_mes+'"]').each(function( index ) {
					    $(this).removeClass('hide');
				    });
				} else {
					$('#revistas').removeClass('fltr_anio');
					$('#pagination_rev').removeClass('hide');
					$('[mes]').removeClass('hide');
				}
		    });
		}).trigger('change');
		
		// Filtros temporadas
		$('#tempo_rev').change(function() {
			var fltr_tmp = '';
			$('#anio_rev').prop('selectedIndex',0);
			$('#mes_rev').prop('selectedIndex',0);
		    $(this).find('option:selected').each(function() {
				if(this.value!=='temporadas'){
					$('#revistas').addClass('fltr_anio');
					$('#pagination_rev').addClass('hide');
					$('[temp]').addClass('hide');
					fltr_tmp = this.value;
					$( '#revistas' ).find('[temp*="'+fltr_tmp+'"]').each(function( index ) {
					    $(this).removeClass('hide');
				    });
				} else {
					$('#revistas').removeClass('fltr_anio');
					$('#pagination_rev').removeClass('hide');
					$('[temp]').removeClass('hide');
				}
		    });
		}).trigger('change');
		
		
	});
		
}