$('document').ready(function(){
	$( "#body" ).load( "/templates/home.html" );

	// Botones
        $("#home").click(function(){
                $( "#body" ).load( "/templates/home.html" );
        });

	$("#animals").click(function(){
		$.get( "/animal", function( data ) {
			$( "#body" ).html("<h1>Yours Dinos</h1><button id='animal-add' class='btn btn-success btn-sm float-right'>+ New Dino</button><br><br><table id='animals-table'></table>");
			$( "#animal-add").click(function(){
				$( "#body" ).load( "/templates/animal-form.html" );
			})
			dataSet = data.data.map(function(item) {
	                        return [item._id, item.name, item.initial_level + " - " + item.level];
			});
			$('#animals-table').DataTable({
				data: dataSet,
				responsive: true,
        			columns: [
				    { title: "id", visible: false},
				    { title: "Name" },
			            { title: "Level" },
				    { title: "Options", className: "options-table", orderable: false,data: null, targets: -1, "mRender": function(data, type, full) {
					    return '<button class="btn btn-primary btn-sm" onclick="showAnimal(\''+ full[0] +'\')">Show</button>&nbsp;&nbsp;<button class="btn btn-info btn-sm" onclick="editAnimal(\''+ full[0] +'\')">Edit</button>&nbsp;&nbsp;<button class="btn btn-danger btn-sm" onclick="removeAnimal(\''+full[0]+'\')">Remove</button>';
			   	    }}
		        ]});
		});
	});
        $("#species").click(function(){
                $.get( "/species", function( data ) {
			$( "#body" ).html("<h1>All Species</h1><table id='species-table'></table>");
			dataSet = data.data.map(function(item) {
				return [item.name, item.description]; 
			});
			$('#species-table').DataTable({
        			data: dataSet,
				responsive: true,
			        columns: [
			            { title: "Name" },
			            { title: "Description" },
                                    { title: "Options", className: "options-table-species", orderable: false,data: null, targets: -1, "mRender": function(data, type, full) {
                                            return '<button class="btn btn-primary btn-sm" onclick="alert(\'En desarollo\')">Show</button>'
                                    }}
			        ]
			});
                });
        }); 

	$("#about").click(function(){
		$( "#body" ).load( "/templates/about.html" );
	});
});