var vbose=0;
var width = 800,
    height = 600;
var dx = 300;
var dy = 100;
var mnyear = 1787;
var mxyear = 1975;
var animateInterval = 300 // milliseconds
var startOpacity = 1.0;
var nyear = 20.0;
var bcolor = "#4682B4";
var pcolor = "orange";
var tx=310;
var ty=130;

/**
var projection = d3.geo.orthographic()
    .scale(500)
    .translate([width / 2, height / 2])
    .rotate([110, -30])
    .clipAngle(90);
**/


/**
var projection = d3.geo.stereographic()
    .scale(800)
    .translate([width / 2, height / 2])
    .rotate([100, -40])
    .clipAngle(90);
**/

var projection = d3.geo.albersUsa()
    .scale(800)
    .translate([width / 2, height / 2]);

/**
var projection = d3.geo.mercator()
    .center([120, 50 ])
    .scale(200)
    .rotate([-180,0]);

**/

var gpath = d3.geo.path()
    .projection(null);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

var lam = d3.scale.linear()
    .domain([0, width])
    .range([-180, 180]);

var psi = d3.scale.linear()
    .domain([0, height])
    .range([90, -90]);

var g = svg.append("g");

var lam = d3.scale.linear()
    .domain([0, width])
    .range([-180, 180]);

var psi = d3.scale.linear()
    .domain([0, height])
    .range([90, -90]);

/**
svg.on("click", function() {
    var p = d3.mouse(this);
    var pi = projection.invert([p[0], p[1]]);
    console.log(["click", p[0], p[1], pi[0], pi[1]]);
    projection.center([pi[0], pi[1]]);
    g.selectAll("path").attr("d", path);
});
**/


function parseData(data) {
    var adata = [];
    
    for (i=0 ; i<data.length ; i++ ) {

	p = [+data[i]["lon"],+data[i]["lat"]];
	pr = projection(p);

	data[i]["cx"] = pr[0];
	data[i]["cy"] = pr[1];

	if (i==data.length-1) {
	    ;
	} else if (data[i]["isbat"]!=data[i+1]["isbat"]) {
	    ;
	} else {
	    p = [+data[i+1]["lon"],+data[i+1]["lat"]];
	    pr = projection(p);
	};

	data[i]["nx"] = pr[0];
	data[i]["ny"] = pr[1];

	adata.push(data[i]);
    }
    return adata;
    
};

d3.json("us_stateYear.json", function(error, us) {
    
    if (error) return console.error(error);
    
    if (vbose>=2) {
	console.log(us);
    }
    

    var land = g.selectAll("path")
	.data(topojson.feature(us, us.objects.us_40).features)
	.enter()
	.append("path")
	.attr("class", "land")
	.attr("d", path)
        .style("fill", "#FFF")
	.style("opacity", 1.0)
    ;

  
    g.append("path")
	.datum(topojson.mesh(us, us.objects.us_40, function(a, b) 
			     { 
				 return a !== b; 
			     }
			    ))
	.attr("class", "border state-border")
	.attr("d", path)
	.style("opacity", 1)
        .style("stroke", "#555");

    var grid = d3.geo.graticule();
    g.append("path")
        .datum(d3.geo.graticule())
        .attr("d", path)
        .style("fill", "none")
        .style("stroke", "#000000")
        .style("stroke-width", "0.5px")
	.style("opacity", 0.1);

    var color = d3.scale.category20();
    console.log(["color", color]);

    
    d3.csv("warMeanPos_1.csv", function(data) 
	   {

	       console.log(["mdata",data]);

	       mdata = parseData(data);


	       g.append("g")
		   .attr("id","lineg")
		   .selectAll("path")
		   .data(mdata.slice(0, mdata.length-1))
		   .enter()
		   .append("path")
		   .style("stroke", function(d, i) {
		       var pcol = d["isbat"] == 1 ? bcolor : pcolor; 
		       console.log(["pathcolor", i, d, pcol]);
		       return pcol;
		   })
		   .style("stroke-width", 0.2)
		   .datum(function(d) {
		       console.log(["datum", d]);
		       return {type: "LineString", coordinates:
			       [
				   [d["cx"], d["cy"]],
				   [d["nx"], d["ny"]]
			       ]
			      }})

		   .attr("d",gpath)
	       ;

/**
	       g.append("g")
		   .selectAll("text")
		   .data(["WAR-weighted map"])
		   .enter()
		   .append("text")
		   .attr("id", "blah")
		   .attr("x", 375)
		   .attr("y", 145)
		   .text(function(d) { 
		       console.log(["text", d]);
		       return d;
		   })
		   .attr("font-family", "sans-serif")
		   .attr("font-size", "20px")
	       ;	       
**/

	       g.selectAll("text")
		   .data(["WAR-weighted map"])
		   .enter()
		   .append("text")
		   .attr("id", "svgtext")
		   .attr("x", tx)
		   .attr("y", ty)
		   .text(function(d) { 
		       console.log(["text", d]);
		       return d;
		   })
		   .attr("font-family", "sans-serif")
		   .attr("font-size", "20px")
	       ;	       

	       g.append("text")
		   .attr("x", tx)
		   .attr("y", ty)
		   .text("WAR-weighted map")
		   .attr("font-family", "sans-serif")
		   .attr("font-size", "20px")
	       ;

	       g.append("text")
		   .attr("x", tx+40)
		   .attr("y", ty+15)
		   .text("(year-to-year birth-place)")	       
		   .attr("font-family", "sans-serif")
		   .attr("font-size", "12px")
	       ;

	       g.append("text")
		   .attr("x", tx+200)
		   .attr("y", ty)
		   .text("batters")
		   .attr("fill", bcolor)
		   .attr("font-family", "sans-serif")
		   .attr("font-size", "12px")
	       ;

	       g.append("text")
		   .attr("x", tx+200)
		   .attr("y", ty+15)
		   .text("pitchers")
		   .attr("fill", pcolor)
		   .attr("font-family", "sans-serif")
		   .attr("font-size", "12px")
	       ;


	       g.selectAll("circle")	       
		   .data(mdata)
		   .enter()
		   .append("circle")
		   .attr("r", function(d) {
		       if (vbose>=2) {
			   console.log(["r", d]);
		       }
		       return 0.75; })
		   .attr("cx", function(d) {
		       return d["cx"];
		   })
		   .attr("cy", function(d) {
		       return d["cy"];
		   })
		   .attr("fill", function(d) {		      
		       return d["isbat"]==1 ? bcolor : pcolor;
		   })
		   .attr("opacity", 0.8)

		   .on("mouseover", function(d) {
		       console.log(["mouseover", d]);
		       g.selectAll("#svgtext")
			   .text(d["year"])
			   .transition()
			   .style('fill', '#555')
			   .style('opacity', 1)
			   .style('font-size', "10px")
			   .attr('x', d["cx"])
			   .attr('y', d["cy"])
		   })

		   .on("mouseout", function(d) {
		       g.selectAll("#svgtext")
			   .text(d["year"])
			   .transition()
			   .style('fill', '#555')
			   .style('opacity', 0)
			   .style('font-size', "0px")
			   .attr('x', d["cx"])
			   .attr('y', d["cy"])
		   })

/****************/
	   })
})			 



/**
**/
var zoom = d3.behavior.zoom()
    .on("zoom",function() {

//	console.log(["zoom", d3.event]);

        g.attr("transform",
	       "translate(" + 
	       d3.event.translate.join(",") +
	       ")scale(" +
	       d3.event.scale+
	       ")"
	      );

/**
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 
**/

  });

svg.call(zoom)