$(document).ready(function() {
    tooltipdiv = d3.select("body")
                    .append("div")
                    .attr("class", "tooltip");

    function mousemove(text, text2){
                              tooltipdiv
                                      .style("visibility", "visible")
                                      .style("opacity", 1)
                                      .style("top", d3.event.pageY+15 + "px")
                                      .style("left", d3.event.pageX + "px")
                                      .html(text + "<br/>" + text2);
                             }


     function mouseout(){
                              tooltipdiv.style("opacity", 1)
                                      .style("visibility", "hidden");
                      }



        d3.json("/cologne.json", function(json) {

        d3.csv("/Stadtteildaten.csv", function(data)
        {

     // first map
        var width  = 600;
        var height = 800;

        var vis = d3.select("#mapContainer1").append("svg")
            .attr("width", width).attr("height", height)

         // Was soll angezeigt werden:
            map_id = "1"
         	object = "Zugelassene Kraftfahrzeuge"
         	divisor = "Haushalte insgesamt"

         	var minmax = d3.nest()
         	  .rollup(function(values) { return d3.extent(values, function(d) {return +(d[object]/d[divisor]); }) })
         	  .map(data);

         	var get_median = d3.nest()
	           .rollup(function(values) { return d3.mean(values, function(d) {return +(d[object]/d[divisor]); }) })
	           .map(data);

            // create a first guess for the projection
            var center = d3.geo.centroid(json)
            var scale  = 100;
            var offset = [width/1.7, height/2.7];
            var projection = d3.geo.mercator().scale(scale).center(center)
                .translate(offset);
            // colors
            var color = d3.scale.linear().domain(minmax).range(['#cdd',"#43052a"]);

            // create the path
            var path = d3.geo.path().projection(projection);

            // using the path determine the bounds of the current map and use
            // these to determine better values for the scale and translation
            var bounds  = path.bounds(json);
            var hscale  = scale*width  / (bounds[1][0] - bounds[0][0]);
            var vscale  = scale*height / (bounds[1][1] - bounds[0][1]);
            var scale   = (hscale < vscale) ? hscale : vscale;
            var offset  = [width - (bounds[0][0] + bounds[1][0])/2.39,
                              height - (bounds[0][1] + bounds[1][1])/1.9];

            // new projection
            projection = d3.geo.mercator().center(center)
              .scale(scale).translate(offset);
            path = path.projection(projection);

            var stadtdaten = d3.nest()
            .key(function(d) { return d["Stadtteil Nr."]; })
            .entries(data);
            //console.log(stadtdaten);




//Legende:
            var legend = vis.append("g")
            	  .attr("class", "legend")
            	  .attr("x", 5)
            	  .attr("y", 25)
            	  .attr("height", 100)
            	  .attr("width", 100);

           	legendtitle = legend.append("text")
           			.style("font-size","12px").attr("x", 5)
           		   	.attr("y", 15)
           		   	.style("fill", "Grey").text("Anzahl der KFZ pro Haushalt"+":")

//           for(var number in minmax){};

	           minvalue = legend.append("rect")
	                     .attr("x", 15)
	                     .attr("y", 22)
	                     .attr("width", 10)
	                     .attr("height", 10)
	                     .style("fill", color(minmax[0]));
//
	           mintext = legend.append("text")
	           		.style("font-size","12px").attr("x", 29)
	           	   	.attr("y", 31)
	           	   	.style("fill", "Grey").text(Math.round(minmax[0]*100)/100);

	           maxvalue = legend.append("rect")
	                     .attr("x", 87)
	                     .attr("y", 22)
	                     .attr("width", 10)
	                     .attr("height", 10)
	                     .style("fill", color(minmax[1]));

	           maxtext = legend.append("text")
	           		.style("font-size","12px")
	           		.attr("x", 100)
	           	   	.attr("y", 31)
	           	   	.style("fill", "Grey").text(Math.round(minmax[1]*100)/100);

	        	median = legend.append("text")
	        			.style("font-size","12px")
	        			.attr("x", 5)
	        		   	.attr("y", 50)
	        		   	.style("fill", "Grey").text("Durchschnitt:")

	           medianvalue = legend.append("rect")
	                     .attr("x", 35)
	                     .attr("y", 60)
	                     .attr("width", 10)
	                     .attr("height", 10)
	                     .style("fill", color(get_median));

	           mediantext = legend.append("text")
	           		.style("font-size","12px")
	           		.attr("x", 50)
	           	   	.attr("y", 69)
	           	   	.style("fill", "Grey").text(Math.round(get_median*100)/100);



            vis.selectAll("path")
              .data(json.features).enter().append("path")
              .attr("d", path)
              .attr("id", function(d) { return map_id+d.properties.NUMMER})
              .attr("class", "stadtteil")
              .style("fill",  function(d){return color( d.properties.STADTBEZIR.replace(/\s+/g, '').length);})
              .style("stroke-width", "1")
              .style("stroke", "gray")
              .on("mouseover", function(d){
                console.log(d);
                 return mousemove(d.properties.NAME, "") })
              .on("mousemove",function(d) {
                console.log(d);
                mousemove(d.properties.NAME, d3.select(this).node().textContent);  } )
              .on("mouseout", mouseout);




		     //Add color data to the graph.

		      $.each(stadtdaten, function(i, daten){

		      datensatz = daten.values[0][object]/daten.values[0][divisor]

		      $('#' +map_id+ daten.key).css("fill", color(datensatz));
		      $('#' +map_id+ daten.key).css("fill", color(datensatz)).text(Math.round(datensatz*100)/100);
			  });

          // second map


              var vis = d3.select("#mapContainer2").append("svg")
                  .attr("width", width).attr("height", height)

               // Was soll angezeigt werden:
               	map_id = "2"
               	object = "Fertilitätsrate (Durchschnittliche Zahl der Kinder, die eine Frau vom 15.  bis zum 49. Lebensjahr lebend zur Welt bringt)"

               	var minmax = d3.nest()
               	  .rollup(function(values) { return d3.extent(values, function(d) {return +(d[object]); }) })
               	  .map(data);

               	var get_median = d3.nest()
      	           .rollup(function(values) { return d3.mean(values, function(d) {return +(d[object]); }) })
      	           .map(data);

                  // create a first guess for the projection
                  var center = d3.geo.centroid(json)
                  var scale  = 300;
                  var offset = [width/1.7, height/2.7];
                  var projection = d3.geo.mercator().scale(scale).center(center)
                      .translate(offset);
                  // colors
                  var color = d3.scale.linear().domain(minmax).range(['#cdd',"#43052a"]);

                  // create the path
                  var path = d3.geo.path().projection(projection);

                  // using the path determine the bounds of the current map and use
                  // these to determine better values for the scale and translation
                  var bounds  = path.bounds(json);
                  var hscale  = scale*width  / (bounds[1][0] - bounds[0][0]);
                  var vscale  = scale*height / (bounds[1][1] - bounds[0][1]);
                  var scale   = (hscale < vscale) ? hscale : vscale;
                  var offset  = [width - (bounds[0][0] + bounds[1][0])/2.39,
                                    height - (bounds[0][1] + bounds[1][1])/1.9];

                  // new projection
                  projection = d3.geo.mercator().center(center)
                    .scale(scale).translate(offset);
                  path = path.projection(projection);

                  var stadtdaten = d3.nest()
                  .key(function(d) { return d["Stadtteil Nr."]; })
                  .entries(data);
                  //console.log(stadtdaten);




      //Legende:
                  var legend = vis.append("g")
                  	  .attr("class", "legend")
                  	  .attr("x", 5)
                  	  .attr("y", 25)
                  	  .attr("height", 100)
                  	  .attr("width", 100);

                 	legendtitle = legend.append("text")
                 			.style("font-size","12px").attr("x", 5)
                 		   	.attr("y", 15)
                 		   	.style("fill", "Grey").text("Fertilitätsrate:")


      //           for(var number in minmax){};

      	           minvalue = legend.append("rect")
      	                     .attr("x", 15)
      	                     .attr("y", 22)
      	                     .attr("width", 10)
      	                     .attr("height", 10)
      	                     .style("fill", color(minmax[0]));
      //
      	           mintext = legend.append("text")
      	           		.style("font-size","12px").attr("x", 29)
      	           	   	.attr("y", 31)
      	           	   	.style("fill", "Grey").text(Math.round(minmax[0]*100)/100);

      	           maxvalue = legend.append("rect")
      	                     .attr("x", 87)
      	                     .attr("y", 22)
      	                     .attr("width", 10)
      	                     .attr("height", 10)
      	                     .style("fill", color(minmax[1]));

      	           maxtext = legend.append("text")
      	           		.style("font-size","12px")
      	           		.attr("x", 100)
      	           	   	.attr("y", 31)
      	           	   	.style("fill", "Grey").text(Math.round(minmax[1]*100)/100);

      	        	median = legend.append("text")
      	        			.style("font-size","12px")
      	        			.attr("x", 5)
      	        		   	.attr("y", 50)
      	        		   	.style("fill", "Grey").text("Durchschnitt:")

      	           medianvalue = legend.append("rect")
      	                     .attr("x", 35)
      	                     .attr("y", 60)
      	                     .attr("width", 10)
      	                     .attr("height", 10)
      	                     .style("fill", color(get_median));

      	           mediantext = legend.append("text")
      	           		.style("font-size","12px")
      	           		.attr("x", 50)
      	           	   	.attr("y", 69)
      	           	   	.style("fill", "Grey").text(Math.round(get_median*100)/100);



                  vis.selectAll("path")
                    .data(json.features).enter().append("path")
                    .attr("d", path)
                    .attr("id", function(d) { return map_id+d.properties.NUMMER})
                    .attr("class", "stadtteil")
                    .style("fill",  function(d){return color( d.properties.STADTBEZIR.replace(/\s+/g, '').length);})
                    .style("stroke-width", "1")
                    .style("stroke", "gray")
                    .on("mouseover", function(d){ return mousemove(d.properties.NAME, "") })
                    .on("mousemove",function(d) {
                      console.log(d);
                      mousemove(d.properties.NAME, d3.select(this).node().textContent);  } )
                    .on("mouseout", mouseout);




	      	     //Add color data to the graph.

	      	      $.each(stadtdaten, function(i, daten){

	      	      datensatz = daten.values[0][object]

	      	      $('#' +map_id+ daten.key).css("fill", color(datensatz));
	      	      $('#' +map_id+ daten.key).css("fill", color(datensatz)).text(Math.round(datensatz*100)/100);
	      		  });

     // third map


        var vis = d3.select("#mapContainer3").append("svg")
            .attr("width", width).attr("height", height)

         // Was soll angezeigt werden:
         	map_id = "3"
         	object = "Zugelassene KfZ: Krafträder"
         	divisor = "Haushalte insgesamt"

         	var minmax = d3.nest()
         	  .rollup(function(values) { return d3.extent(values, function(d) {return +(d[object]/d[divisor]); }) })
         	  .map(data);

         	var get_median = d3.nest()
	           .rollup(function(values) { return d3.mean(values, function(d) {return +(d[object]/d[divisor]); }) })
	           .map(data);

            // create a first guess for the projection
            var center = d3.geo.centroid(json)
            var scale  = 300;
            var offset = [width/1.7, height/2.7];
            var projection = d3.geo.mercator().scale(scale).center(center)
                .translate(offset);
            // colors
            var color = d3.scale.linear().domain(minmax).range(['#cdd',"#43052a"]);

            // create the path
            var path = d3.geo.path().projection(projection);

            // using the path determine the bounds of the current map and use
            // these to determine better values for the scale and translation
            var bounds  = path.bounds(json);
            var hscale  = scale*width  / (bounds[1][0] - bounds[0][0]);
            var vscale  = scale*height / (bounds[1][1] - bounds[0][1]);
            var scale   = (hscale < vscale) ? hscale : vscale;
            var offset  = [width - (bounds[0][0] + bounds[1][0])/2.39,
                              height - (bounds[0][1] + bounds[1][1])/1.9];

            // new projection
            projection = d3.geo.mercator().center(center)
              .scale(scale).translate(offset);
            path = path.projection(projection);

            var stadtdaten = d3.nest()
            .key(function(d) { return d["Stadtteil Nr."]; })
            .entries(data);
            //console.log(stadtdaten);




//Legende:
            var legend = vis.append("g")
            	  .attr("class", "legend")
            	  .attr("x", 5)
            	  .attr("y", 25)
            	  .attr("height", 100)
            	  .attr("width", 100);

           	legendtitle = legend.append("text")
           			.style("font-size","12px").attr("x", 5)
           		   	.attr("y", 15)
           		   	.style("fill", "Grey").text("Motorräder pro Haushalt"+":")

//           for(var number in minmax){};

	           minvalue = legend.append("rect")
	                     .attr("x", 15)
	                     .attr("y", 22)
	                     .attr("width", 10)
	                     .attr("height", 10)
	                     .style("fill", color(minmax[0]));
//
	           mintext = legend.append("text")
	           		.style("font-size","12px").attr("x", 29)
	           	   	.attr("y", 31)
	           	   	.style("fill", "Grey").text(Math.round(minmax[0]*100)/100);

	           maxvalue = legend.append("rect")
	                     .attr("x", 87)
	                     .attr("y", 22)
	                     .attr("width", 10)
	                     .attr("height", 10)
	                     .style("fill", color(minmax[1]));

	           maxtext = legend.append("text")
	           		.style("font-size","12px")
	           		.attr("x", 100)
	           	   	.attr("y", 31)
	           	   	.style("fill", "Grey").text(Math.round(minmax[1]*100)/100);

	        	median = legend.append("text")
	        			.style("font-size","12px")
	        			.attr("x", 5)
	        		   	.attr("y", 50)
	        		   	.style("fill", "Grey").text("Durchschnitt:")

	           medianvalue = legend.append("rect")
	                     .attr("x", 35)
	                     .attr("y", 60)
	                     .attr("width", 10)
	                     .attr("height", 10)
	                     .style("fill", color(get_median));

	           mediantext = legend.append("text")
	           		.style("font-size","12px")
	           		.attr("x", 50)
	           	   	.attr("y", 69)
	           	   	.style("fill", "Grey").text(Math.round(get_median*100)/100);



            vis.selectAll("path")
              .data(json.features).enter().append("path")
              .attr("d", path)
              .attr("id", function(d) { return map_id+d.properties.NUMMER})
              .attr("class", "stadtteil")
              .style("fill",  function(d){return color( d.properties.STADTBEZIR.replace(/\s+/g, '').length);})
              .style("stroke-width", "1")
              .style("stroke", "gray")
              .on("mouseover", function(d){ return mousemove(d.properties.NAME, "") })
              .on("mousemove",function(d) { mousemove(d.properties.NAME, d3.select(this).node().textContent);  } )
              .on("mouseout", mouseout);




		     //Add color data to the graph.

		      $.each(stadtdaten, function(i, daten){

		      datensatz = daten.values[0][object]/daten.values[0][divisor]

		      $('#' +map_id+ daten.key).css("fill", color(datensatz));
		      $('#' +map_id+ daten.key).css("fill", color(datensatz)).text(Math.round(datensatz*100)/100);
			  });

		}); //close csv

    });//close json
});