//drawMap(geoJson,data.initialScale,data.initialX,data.initialY);
function drawMap(data){
    var json = JSON.parse(data);
    var width = 560,
        height = 610,
        initialScale = 5500,
        initialX = -11900,
        initialY = 4050,
        duration = 200,
        tootipOffsetX = 70,
        tootipOffsetY = 120,
        centered,
        labels;

    var current = null;
    var containerWidth = $("#map-container").width();
    if(containerWidth<560){
        width = containerWidth-20; //margin
        height = containerWidth*1.1;
        duration = 1000;
        tootipOffsetX = 50,
        tootipOffsetY = 90,
        $("#map-container").attr("height",height);
    }

    //start
    var projection = d3.geoMercator().fitSize([width, height], json);
    var path = d3.geoPath().projection(projection);

    // var zoom = d3.zoom()
    //     .translate(projection.translate())
    //     .scale(projection.scale())
    //     .scaleExtent([height, 800 * height])
    //     .on("zoom", zoom);

    var svg = d3.select("#map-container").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr('id', 'map');

    var states = svg.append("g")
        .attr("id", "states");

    var div = d3.select("#map-container").append("div")	
        .attr("class", "tooltip")				
        .style("opacity", 0);

    states.append("rect")
        .attr("class", "background")
        .attr("width", width)
        .attr("height", height);

    states.selectAll("path")
        .data(json.features).enter().append("path")
        .attr("d", path)
        .attr("id", function(d) { return 'path-'+d.id; })
        .on("click", click);


    labels = states.selectAll("text")
        .data(json.features)
        .enter().append("text")
        .attr("transform", labelsTransform)
        .attr("id", function(d) { return 'label-'+d.properties.CTPRVN_CD; })
        .attr("class", "datalink")
        .attr("data-link", function(d) { return d.properties.SGG_NM; })
        .attr('text-anchor', 'middle')
        .attr("dy", "5px")
        .on("click", click)
        .text(function(d) { return d.properties.MAP_NM; })
        .on("mouseover", function(d) {
            if(centered==null){
                var dataRegion = d.properties.SGG_NM;
                var dataPensioners = $("div[data-region="+dataRegion+"]").attr("data-pensioners");
                var dataPaid = $("div[data-region="+dataRegion+"]").attr("data-paid");
                div.transition()
                    .duration(duration)
                    .style("display","block")	
                    .style("opacity", .9);	
                div	.html('<p class="datalink" data-link="'+dataRegion+'">'+dataRegion+'</p><p>'+dataPensioners+'¸í</p><p>('+dataPaid+'¿ø)</p><div class="triangle"></div>')
                    .style("left", (path.centroid(d)[0]-tootipOffsetX) + "px")		
                    .style("top", (path.centroid(d)[1]-tootipOffsetY) + "px")
                current = d;
            }
            })
        .on("mouseout", function(d) {
            if(centered==null && current != d ){
                div.transition()
                    .duration(duration)		
                    .style("opacity", 0)
                    .style("display", "none")
            }
        });

    function labelsTransform(d) {
        if (d.properties.CTPRVN_CD == 41) {
            var arr = path.centroid(d);
            arr[1] += (d3.event && d3.event.scale) ? (d3.event.scale / height + 20) : (initialScale / height + 20);
            return "translate(" + arr + ")";
        }else if (d.properties.ADM_SECT_C == 26140) {
            var arr = path.centroid(d);
            arr[1] += (d3.event && d3.event.scale) ? (d3.event.scale / height - 35) : (initialScale / height - 35);
            return "translate(" + arr + ")";
        }else {
            return "translate(" + path.centroid(d) + ")";
        }
    }

    function click(d) {
        var x, y, k;
        //tooltip show
        var dataRegion = d.properties.SGG_NM;
        var dataPensioners = $("div[data-region="+dataRegion+"]").attr("data-pensioners");
        var dataPaid = $("div[data-region="+dataRegion+"]").attr("data-paid");
        div.transition()
            .duration(0)
            .style("display","block")	
            .style("opacity", .9);	
        div	.html('<p class="datalink" data-link="'+dataRegion+'">'+dataRegion+'</p><p>'+dataPensioners+'¸í</p><p>('+dataPaid+'¿ø)</p><div class="triangle"></div>')
            .style("left", (path.centroid(d)[0]-tootipOffsetX) + "px")		
            .style("top", (path.centroid(d)[1]-tootipOffsetY) + "px")
        current = d;

        if (d && centered == null) {
            //set tooltip position
            var centroid = path.centroid(d);
            x = centroid[0];
            y = centroid[1];
            k = 1.5;
            centered = d;
            div.transition()
                .duration(0)
                .style("opacity", .9)
                .style("left", (x-tootipOffsetX)+"px")
                .style("top", (y-tootipOffsetY)+"px");	
                // .style("left", ((width/2)-tootipOffsetX)+"px")
                // .style("top", ((height/2)-tootipOffsetY)+"px");	
            
            //active background
            states.selectAll("path")
                .classed("active", centered && function(d) { return d === centered; });

            // states.transition()
            //     .duration(duration)
            //     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
            //     .style("stroke-width", 1.5 / k + "px");

        } else if (d && centered == d) {
            centered = null;
            div.transition()
                .duration(0)
                .style("opacity", 0)
                .style("left", ("0px"))
                .style("top", ("0px"))
                .style("display", "none");
            states.selectAll("path")
                .classed("active", centered && function(d) { return d === centered; });

        } else if(centered){
            // x = width / 2;
            // y = height / 2;
            // k = 1;
            var centroid = path.centroid(d);
            x = centroid[0];
            y = centroid[1];

            centered = null;
            div.transition()
                .duration(0)
                .style("opacity", 0)
                .style("left", ("0px"))
                .style("top", ("0px"));

            centered = d;
            div.transition()
                .duration(0)
                .style("opacity", .9)
                .style("left", (x-tootipOffsetX)+"px")
                .style("top", (y-tootipOffsetY)+"px");	
                // .style("left", ((width/2)-tootipOffsetX)+"px")
                // .style("top", ((height/2)-tootipOffsetY)+"px");	
            
            states.selectAll("path")
                .classed("active", centered && function(d) { return d === centered; });

        }
    };
    
}

// Áö¸íÇ¥½Ã
// $('#radio').find('input').on('click', function() {
//   if (this.value == 'on') {
//     labels.style('display', 'block');
//   } else if (this.value == 'off') {
//     labels.style('display', 'none');
//   }
// });