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

    var current = null;

    //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.properties.CTPRVN_CD; })
        .attr("data-link", function(d) { return d.properties.SGG_NM; })
        .attr("class", "datalink")
        //.attr("tabindex", "0")
        .on("click", click)
        .on("mouseover", function(d) {
            if(centered==null){
                var dataRegion = d.properties.SGG_NM;
                var dataPensioners = $("a[data-region="+dataRegion+"]").attr("data-pensioners");
                var dataPaid = $("a[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")
            }
        });

    links = states.selectAll("a")
        .data(json.features)
        .enter().append("a")
        .attr("focusable", "true")
        .attr("transform", labelsTransform)
        .attr("xlink:href", "javascript:void(0);")
        //.attr("id", function(d) { return 'label-'+d.properties.CTPRVN_CD; })
        .attr("class", "datalink")
                    .attr("data-link", function(d) { return d.properties.SGG_NM; })
        .attr("title", function(d) { return d.properties.SGG_NM + "À̵¿ ¹öÆ°" })
        .append("text")
            .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 = $("a[data-region="+dataRegion+"]").attr("data-pensioners");
                    var dataPaid = $("a[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;

        if (d && centered == null) {

            // var centroid = path.centroid(d);
            // x = centroid[0];
            // y = centroid[1];
            // k = 1.5;
            // centered = d;
            // div.transition()
            //     .duration(duration)
            //     .style("opacity", .9)
            //     //.style("left", ((width/2)-tootipOffsetX)+"px")
            //     //.style("top", ((height/2)-tootipOffsetY)+"px");	
            
            // 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){
            // x = width / 2;
            // y = height / 2;
            // k = 1;
            // centered = null;
            // div.transition()
            //     .style("opacity", 0)

            // 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");
        }

    // div.transition()
    //     .style("opacity", .9)		
    //     .duration(500)
    //     .style("left", centroid[0]+"px")		
    //     .style("top", centroid[1]+"px");	
    };

    // function zoom() {
    //   projection.translate(d3.event.translate).scale(d3.event.scale);
    //   states.selectAll("path").attr("d", path);
    
    //   labels.attr("transform", labelsTransform);
    // }

    // function labelsTransform(d) {
    //     // °æ±âµµ°¡ ¼­¿ïƯº°½Ã¿Í °ãÃļ­ ¿¹¿Ü ó¸®
    //     if (d.id == 1) {
    //         var arr = path.centroid(d);
    //         arr[1] += (d3.event && d3.event.scale) ? (d3.event.scale / height + 20) : (initialScale / height + 20);
            
    //         return "translate(" + arr + ")";
    //     } else {
    //         return "translate(" + path.centroid(d) + ")";
    //     }
    // };

    // ¹öÆ°
    // $('#radio').buttonset();
    // $('#zoomin').button({
    //   text: false,
    //   icons: {
    //     primary: "ui-icon-plus"
    //   }
    // }).click(function() {
    //   var arr = projection.translate(),
    //       scale = projection.scale();
        
    //   arr[0] = arr[0] * 1.2;
    //   arr[1] = arr[1] * 1.2;
    //   scale = scale * 1.2;
    
    //   projection.translate(arr).scale(scale);
    //   states.selectAll("path").attr("d", path);
    
    //   labels.attr("transform", labelsTransform);
    // });
    // $('#zoomout').button({
    //   text: false,
    //   icons: {
    //     primary: "ui-icon-minus"
    //   }
    // }).click(function() {
    //   var arr = projection.translate(),
    //       arr2 = projection.translate(),
    //       scale = projection.scale();
        
    //   arr[0] = arr[0] * 0.8;
    //   arr[1] = arr[1] * 0.8;
    //   scale = scale * 0.8;
    
    //   projection.translate(arr).scale(scale);
    //   states.selectAll("path").attr("d", path);
    
    //   labels.attr("transform", labelsTransform);
    // });
    
}

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