var bigmapheight = 650,
    smallmapheight = 400
    mapbreakwidth = 720,
    highzoom = 8,
    lowzoom = 7;
var initzoom;
var x;
        
      function main() {
        var hlcolor = "#454443";
        
        /*MAP STUFF*/
        if ($("#map").width() > mapbreakwidth) {
            initzoom = highzoom;
            $("#map").height(bigmapheight);
        }
        else {
            initzoom = lowzoom;
            $("#map").height(smallmapheight);
        }
        
        var map = new L.Map('map', {
            center: [50.45,4.45],
            zoom: initzoom,
            maxZoom: 12,
            scrollWheelZoom: false
          });
          
          var cartocss = $("#choropleth").text();
          
          var layerSource = {
            user_name: 'mediafin',
            type: 'cartodb',
            sublayers: [{
                sql: "SELECT * FROM huurwoningen",
                cartocss: cartocss
            }]
          }

          cartodb.createLayer(map, layerSource)
            .addTo(map)
            .on('done', function(layer) {

                //add legend
                var legend = new cdb.geo.ui.Legend({
                   type: "choropleth",
                   data: [
                            { value: "8,4 %" },
                            { value: "74,4 %" },
                            { name: "color1", value: "#008837" },
                            { name: "color2", value: "#a6dba0" },
                            { name: "color3", value: "#f7f7f7" },
                            { name: "color4", value: "#c2a5cf" },
                            { name: "color5", value: "#7b3294" }
                        ]
                 });
                $('#map').append(legend.render().el);

                var datalayer = layer.getSubLayer(0);
                datalayer.setInteractivity('niscode');
                datalayer.setInteraction(true);

                var updategraph = function(e, latlng, pos, data) {
                    d3.selectAll(".municipline")
                        .style("stroke", function(d) {return d.color; })
                        .style("opacity", 0.6)
                        .attr("y1",50);
                    d3.select("#mun" + data.niscode)
                        .style("stroke", hlcolor)
                        .style("opacity", 1)
                        .attr("y1",5);
                    var name = d3.select("#mun" + data.niscode).data()[0].naam;
                    var huurpercentage = d3.select("#mun" + data.niscode).data()[0].huurperc;
                    var xcoord = d3.select("#mun" + data.niscode).attr("x1");
                    d3.select(".ttip")
                        .text(name + " "  + huurpercentage + " %")  
                        .attr("x", function() {
                            if (xcoord > width/2) {
                                return parseFloat(xcoord) - 5;
                            }
                            else {
                                return parseFloat(xcoord) + 5;
                            }
                        })
                        .style("opacity", 1)
                        .attr("text-anchor", function() {
                            if (xcoord > width/2) {
                                return "end"
                            }
                            else {
                            return "start"
                            }
                        });
                }

                datalayer.on('featureOver', updategraph);
                datalayer.on('featureClick', updategraph);
              
                //add searchbox
                var v = cdb.vis.Overlay.create('search', map.viz, {})
                v.show();
                $('#map').append(v.render().el);
              
            })
            .on('error', function(err) {
              alert("some error occurred: " + err);
            });
          
          //GRAPH STUFF
          var svg = d3.select("#viz")
                        .append("svg");
          var gaxis  = svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + 150 + ")")
        //initial draw
        var width = $("#viz").width();
        svg.attr("width", width).attr("height", 170);

        d3.csv("huurperc.csv", function(error, data) {
            data.forEach(function(d) {
                d.huurperc = +d.huurperc;
                if (d.huurperc < 20) { d.color = "#008837"; } else
                if (d.huurperc < 30) { d.color = "#a6dba0"; } else
                if (d.huurperc < 40) { d.color = "#ccc"; } else
                if (d.huurperc < 50) { d.color = "#c2a5cf"; } else
                                     { d.color = "#7b3294"}
            });
            //Scale the range of the data
            x = d3.scale.linear().range([5,width-5]);
            x.domain(d3.extent(data, function(d) {return d.huurperc; }));
            
            var xAxis = d3.svg.axis().scale(x);
            gaxis.call(xAxis);

            var lines  = svg.selectAll("line.municipline")
                .data(data)
                .enter()
                .append("line")
                .attr("class", "municipline")
                .attr("x1", function(d) { return x(d.huurperc) ; })
                .attr("x2", function(d) { return x(d.huurperc) ; })
                .attr("id", function(d) { return "mun" + d.NIS; })
                .attr("y1", 50)
                .attr("y2", 150)
                .style("stroke", function(d) {
                    return d.color;
                })
                .style("stroke-width", 2)
                .style("opacity", 0.6)
                .on("mouseover", function(d) {
                    d3.selectAll("line.municipline")
                        .style("stroke", function(d) {return d.color; })
                        .style("opacity", 0.6)
                        .attr("y1", 50);
                    d3.select(this)
                        .style("stroke", hlcolor)
                        .style("opacity", 1)
                        .attr("y1", 5);
                    if (x(d.huurperc) > width/2) {
                        tooltip.attr("text-anchor", "end")
                    }
                    else {
                        tooltip.attr("text-anchor", "start")
                    }   
                    tooltip.style("opacity", .9)
                        .text(d.naam + " "  + d.huurperc + " %")    
                        .attr("x", function() {
                            if (x(d.huurperc) > width/2) {
                                return x(d.huurperc) - 5;
                            }
                            else {
                                return x(d.huurperc) + 5;
                            }
                        })
                })
                .on("mouseout", function(d) {       
                    d3.select(this)
                        .style("stroke", function(d) {return d.color; })
                        .style("opacity", 0.6)
                        .attr("y1", 50);
                    tooltip.style("opacity", 0);    
                });

            var tooltip = svg.append("text")    
                .attr("class", "ttip")
                .attr("y", 20)
                .attr("x", 50)
                .attr("text-anchor", "start")
                .style("font-size", "18px")
                .style("fill", hlcolor)         
                .style("opacity", 0);

            function redraw() {
                var newwidth = $("#container").width();
                //Redraw map
                if (newwidth < mapbreakwidth) {
                    map.setZoom(lowzoom);
                    $("#map").css('height', smallmapheight);
                };
              
                if (newwidth > mapbreakwidth) {
                    map.setZoom(highzoom);
                    $("#map").css('height', bigmapheight);
                };

                //Redraw chart
                svg.attr("width", newwidth);

                x = d3.scale.linear().range([5,newwidth-5]);
                x.domain(d3.extent(data, function(d) {return d.huurperc; }));
            
                var xAxis = d3.svg.axis().scale(x);
                gaxis.call(xAxis);

                svg.selectAll(".municipline")
                    .attr("x1", function(d) { return x(d.huurperc) ; })
                    .attr("x2", function(d) { return x(d.huurperc) ; })
                    .on("mouseover", function(d) {
                    d3.selectAll("line.municipline")
                        .style("stroke", function(d) {return d.color; })
                        .style("opacity", 0.6)
                        .attr("y1", 50);
                    d3.select(this)
                        .style("stroke", hlcolor)
                        .style("opacity", 1)
                        .attr("y1", 5);
                    if (x(d.huurperc) > newwidth/2) {
                        tooltip.attr("text-anchor", "end")
                    }
                    else {
                        tooltip.attr("text-anchor", "start")
                    }   
                    tooltip.style("opacity", .9)
                        .text(d.naam + " "  + d.huurperc + " %")    
                        .attr("x", function() {
                            if (x(d.huurperc) > newwidth/2) {
                                return x(d.huurperc) - 5;
                            }
                            else {
                                return x(d.huurperc) + 5;
                            }
                        })
                });
            };
            window.addEventListener("resize", redraw);
        });
     }
        
      window.onload = main;