function MyClient() {
    var self = this,
	width = $('#map').width(),
	mapCanvasHeight = (width * 0.45);

  this.init = function() {
    self.drawMap();
    self.drawMarker();
  }
 
  this.drawMap = function () {
        var data;
        console.log(width, mapCanvasHeight);
        // Most parts of D3 don't know anything about SVG—only DOM.
        self.map = d3.geo.equirectangular().scale(width);
        self.path = d3.geo.path().projection(self.map);
        self.svg = d3.select('#map').append('svg:svg')
                  .attr("width", "100%")
                  .attr("height", "100%")
                  //.attr("viewBox", "0 0 " + width + " " + mapCanvasHeight);
        console.log(self.svg);
        self.countries = self.svg.append('svg:g').attr('id', 'countries');

        d3.json("./world-countries.json", function(json) {
            self.countries.selectAll("path")
            .data(json.features)
            .enter().append("path")
            .attr("d", self.path)
            .on("mouseover", function(d) {
                d3.select(this).style("fill","#6C0");})
            .on("mouseout", function(d) {
                d3.select(this).style("fill","#000000");})
        });

    }

  this.drawMarker = function (message) {

    var mapCoords = self.map([-122.05740356445312, 37.4192008972168]);
	x = mapCoords[0];
	y = mapCoords[1];
        console.log(x, y);

	self.svg.append('svg:circle')
		.attr("r", 5)
		.style("fill", "steelblue")
		.attr("cx", x)
		.attr("cy", y);
  }


  this.init();
};

var MyClient;
jQuery(function() {
  MyClient = new MyClient();
});