var baseurl;
		
		$(function() {	
		  baseurl = "http://" + window.location.hostname + "/navnelaboratoriet";	
			$("#error").ajaxError(function(info, xhr) {
				$(info.target).html("<p> Kald til server fejlede: " + xhr.status + " " + xhr.statusText + "</p>");
			});  
      $("#tabs").tabs();
			$("#searchform").submit(function(event) {
				event.preventDefault();
				$("#search").attr("disabled", true);
				var url = baseurl+"/fornavne.json";
				var parameters = new Object;
				var fornavn = $('#fornavn').val();
				if (fornavn != "undefined" && fornavn.length > 0) {
					parameters["q"] = fornavn;
				}
				if ($("#pige")[0].checked != $("#dreng")[0].checked) {
				  parameters["køn"]= $("#pige")[0].checked?"pige":"dreng";
				}
				var efternavn = $('#efternavn').val();
				$.getJSON(url, parameters, function(fornavne, status) {
					$("#search").attr("disabled", false);
					$("#antalnavne").html(fornavne.length + " navneforslag:");
					$("#navne").empty();
					efternavn= $.trim(efternavn);
          if (efternavn.length>0) efternavn = efternavn.substr(0, 1).toUpperCase() + efternavn.substr(1);
					$.each(fornavne, function(i, fornavn) {
					  var id= fornavn.køn+fornavn.navn+$.trim(efternavn);
						$("#navne").append("<div class='searchitem " + fornavn.køn.toLowerCase() + "' id='" + id + "' >" + fornavn.navn + (efternavn?" " + efternavn:"") +  " (" + fornavn.køn + ")</div>");
						$("#"+id).bind("click", function(e) {
						    var faneid= id+"fane";
						    if ($("#"+faneid).length==0) {
						      $("#tabs").append("<div class='navnefane' id='" + faneid + "' />");
					        $("#tabs").tabs('add',"#"+faneid, $.trim(fornavn.navn + " " + efternavn));
					        visnavneinfo(faneid,fornavn, efternavn);
					      }
					      $("#tabs").tabs('select',faneid);
					  });						  
					  $('.searchitem').hover(function() {
						  $(this).addClass('over');
					  }, function() {
						  $(this).removeClass('over');
					  });					  
					 });					
          $("#kilde").html("<p class='kilde'><a target='_blank' href='http://www.familiestyrelsen.dk/navne/1/?no_cache=1'>Kilde: Familiestyrelsen</a></p>");	
				});
			});
		});
		
		function visnavneinfo(fane, fornavn, efternavn) {
		  $("#"+fane).empty();
			$("#"+fane)
			  .append("<h2>" + $.trim(fornavn.navn+" "+efternavn) + " (" + fornavn.køn +")</h2>")
			  .append("<div id='" + fane + "antal' />")
			  .append("<div id='" + fane + "barometer' />")
			  .append("<div id='" + fane + "hitliste' />")
			  .append("<div id='" + fane + "moreinfo'  />");
			  
			$("#"+fane+"moreinfo").append("<h3>Mere information om navnet "+$.trim(fornavn.navn+" "+efternavn)+"</h3>");
			$("#"+fane+"moreinfo").append("<p><a target='_blank' href='http://da.wikipedia.org/wiki/"+fornavn.navn+"'>Wikipediaartikel om fornavnet " + fornavn.navn+ "</a></p>");
 					  
		  var url= baseurl + escape("/navne/"+fornavn.køn+"/"+$.trim(fornavn.navn+" "+efternavn)+".json");
		  url= url.toLowerCase();
		  var beskyttetefternavn= false;
			
		  // antal
		  $.getJSON(url, function(navn) {
			  $("#"+fane+"antal").append("<h3>Hvor mange hedder "+$.trim(fornavn.navn+" "+efternavn)+" i Danmark?</h3>"); 
			  $("#"+fane+"antal").append("<div id='" + fane + "antaltable' />");		
			  $("#"+fane+"antal").append("<div id='" + fane + "antalcomment' />");		
			  $("#"+fane+"antal").append("<div id='" + fane + "antallinechart' /><br />");	
			  $("#"+fane+"antal").append("<div id='" + fane + "antalfornavnlinechart' class='grafik' />");	
			  $("#"+fane+"antal").append("<div id='" + fane + "antalefternavnlinechart' class='grafik'  />");
			  $("#"+fane+"antal").append("<div id='" + fane + "antalnavnlinechart' class='grafik'  />");
			  $("#"+fane+"antal").append("<div id='" + fane + "antalkilde' class='kilde' />");
        $("#"+fane+"antalkilde").append("<p><a target='_blank' href='http://www.dst.dk/Statistik/Navne/HvorMange.aspx'>Kilde: Danmarks Statistik</a></p>");
        var antaldata = new google.visualization.DataTable();
        antaldata.addColumn('string', 'Årstal');
        antaldata.addColumn('number', fornavn.navn);
        if ($.trim(efternavn).length >0) {
          antaldata.addColumn('number', efternavn);
          antaldata.addColumn('number', fornavn.navn+" "+efternavn);
        }
        var nuller= false;
		    $.each(navn.årstal, function(i, årstal) {
		      var index= antaldata.addRows(1);
		      antaldata.setCell(index,0,årstal.årstal);
		      antaldata.setCell(index,1,parseInt(årstal.fornavnet));
		      if (!nuller) nuller= parseInt(årstal.fornavnet)==0;
          if ($.trim(efternavn).length >0) {
		        antaldata.setCell(index,2,parseInt(årstal.efternavnet));
		        if (!nuller) nuller= parseInt(årstal.efternavnet)==0;
		        antaldata.setCell(index,3,parseInt(årstal.navnet));
		        if (!nuller) nuller= parseInt(årstal.navnet)==0;
		        beskyttetefternavn= parseInt(årstal.efternavnet)<=2000;
          }
		    }); 
		     
        if (beskyttetefternavn) {
          $("#"+fane+"moreinfo").append("<p>" + efternavn + " er et <a target='_blank' href='http://www.familiestyrelsen.dk/navne/5/'>beskyttet efternavn</a></p>");
        }
      
        (new google.visualization.Table($("#"+fane+"antaltable")[0])).draw(antaldata, null);
        
        var view = new google.visualization.DataView(antaldata);
        view.hideColumns([2,3]);
        (new google.visualization.LineChart($("#"+fane+"antalfornavnlinechart")[0])).draw(view, {width: 300, height: 300, legend: 'bottom', title: 'Antal med fornavnet '+fornavn.navn});
        	
       
        if ($.trim(efternavn).length >0) {         
          var view = new google.visualization.DataView(antaldata);
          view.hideColumns([1,3]);
          chart= (new google.visualization.LineChart($("#"+fane+"antalefternavnlinechart")[0])).draw(view, {width: 300, height: 300, legend: 'bottom', title: 'Antal med efternavnet '+efternavn});
           
          var view = new google.visualization.DataView(antaldata);
          view.hideColumns([1,2]);
          (new google.visualization.LineChart($("#"+fane+"antalnavnlinechart")[0])).draw(view, {width: 300, height: 300, legend: 'bottom', title: 'Antal med navnet '+fornavn.navn+" "+efternavn});
  	   
        } 
		    if (nuller) $("#"+fane+"antalcomment").append("<p class='kilde'>Af diskretionshensyn dækker værdien 0 over forekomsterne 0, 1 og 2.</p>");  
		  });		
	
		  
		  // navnebarometer
		  var url= baseurl + escape("/fornavne/"+fornavn.køn+"/"+fornavn.navn+"/antal.json");
		  url= url.toLowerCase();
		  $.getJSON(url, function(antal) {
		    if (antal.length>0) {
			    $("#"+fane+"barometer").append("<h3>Hvor mange bliver navngivet "+fornavn.navn+" i Danmark?</h3>");
			    $("#"+fane+"barometer").append("<div id='" + fane + "barometertable' class='grafik' />");			
			    $("#"+fane+"barometer").append("<div id='" + fane + "barometerlinechart' class='grafik' />");
			    $("#"+fane+"barometer").append("<div id='" + fane + "barometerkilde' class='kilde' />");
          $("#"+fane+"barometerkilde").append("<p><a target='_blank' href='http://www.dst.dk/Statistik/Navne/Baro.aspx'>Kilde: Danmarks Statistik</a></p>");
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Årstal');
          data.addColumn('number', 'Antal');
		      $.each(antal, function(i, antalpraar) {
		        var index= data.addRows(1);
		        data.setCell(index,0,antalpraar.år);
		        data.setCell(index,1,parseInt(antalpraar.antal));
		      });
        
          (new google.visualization.LineChart($("#"+fane+"barometerlinechart")[0])).draw(data, {width: 300, height: 300, legend: 'bottom', title: 'Navngivet '+fornavn.navn});
         
          (new google.visualization.Table($("#"+fane+"barometertable")[0])).draw(data, null);
        }
		  });
		  
		  // hitlister		  
		  var url= baseurl + escape("/fornavne/"+fornavn.køn+"/"+fornavn.navn+"/hitlister.json");
		  url= url.toLowerCase();
		  $.getJSON(url, function(hitlister) {
		    if (hitlister.length>0) {
			    $("#"+fane+"hitliste").append("<h3>Hvor ligger "+fornavn.navn+" på navngivningens Top 50?</h3>");
			    $("#"+fane+"hitliste").append("<div id='" + fane + "hitlistetable' class='grafik' />");			
			    $("#"+fane+"hitliste").append("<div id='" + fane + "hitlistelinechart' class='grafik' />");
			    $("#"+fane+"hitliste").append("<div id='" + fane + "hitlistekilde' class='kilde'/>");			    
          $("#"+fane+"hitlistekilde").append("<p><a target='_blank' href='http://www.dst.dk/Statistik/Navne/NamesPop.aspx'>Kilde: Danmarks Statistik</a></p>");
          var hitdata = new google.visualization.DataTable();
          hitdata.addColumn('string', 'Årstal');
          hitdata.addColumn('number', 'Nummer');
		      $.each(hitlister, function(i, hitliste) {
		        //$("#"+fane+"hitliste").append("<p>" + hitliste.nummer+ ": " + hitliste.antal+ ": " + hitliste.pr1000+ "<br /></p>"); 

		        var index= hitdata.addRows(1);
		        hitdata.setCell(index,0,hitliste.år);
		        hitdata.setCell(index,1,parseInt(hitliste.nummer));
		      });
		      
          (new google.visualization.LineChart($("#"+fane+"hitlistelinechart")[0])).draw(hitdata, {width: 300, height: 300, legend: 'bottom', title: 'Top 50 placering'});
        
          (new google.visualization.Table($("#"+fane+"hitlistetable")[0])).draw(hitdata, null);
        }	
		  });		  
		};