var Datamaps = require('datamaps-all-browserify');
var _ = require('lodash');
var templateHTML = require('./map.jade');


var Map = function(selector, data, images, opts) {

    var $el = $(selector).first();
    $el.append(templateHTML());




    // expect data to be key value pairs:
    //
    // either 
    //  location -> color,
    //  location -> scalar value
    //  location -> label
    //
    //

    var dataObj = {}; 
    var fills = {
        defaultFill: '#ddd'
    };

    // if the data keys are of length 3, this
    // should be treated as a world map
    var isWorld = _.every(_.keys(data), function(v) {
        return v.length === 3;
    });


    if (true) { // assume everything maps to scalar value for now    
        var color = d3.scale.linear().domain([0,1]).range(['#fff', '#9175f0']);
        // make fill buckets

        _.each(data, function(val, key) {
            var c = color(val);
            fills[c] = c;
            dataObj[key] = {
                fillKey: c,
                value: val
            };
        });
    }



    var map = new Datamap({
        element: $el.find('#map-container')[0],
        height: $el.width() * 0.65,
        scope: (isWorld) ? 'world' : 'usa',
        fills: fills,
        data: dataObj,
        geographyConfig: {        

            popupTemplate: function(geography, data) { //this function should just return a string
                if(data) {
                    return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong><br/>' + data.value + '</div>';
                }
                return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';
            },
            highlightBorderColor: '#fff',
            highlightFillColor: '#68a1e5',
        }

    });


};


module.exports = Map;
@@ -118,296 +118,732 @@
 );%0A%0A
-%0Avar Map = function(selector, data, images, opts) %7B%0A%0A    var $el = $(selector).first();%0A    $el.append(templateHTML());%0A%0A%0A%0A%0A    // expect data to be key value pairs:%0A    //%0A    // either %0A    //  location -%3E color,%0A    //  location -%3E scalar value%0A    //  location -%3E label
+var margin = %7B%0A    top: 20,%0A    right: 20,%0A    bottom: 20,%0A    left: 45%0A%7D;%0A%0Avar Map = function(selector, data, images, opts) %7B%0A%0A    if(!opts) %7B%0A        opts = %7B%7D;%0A    %7D%0A    %0A    this.opts = opts%0A   %0A    this.width = (opts.width %7C%7C $(selector).width()) - margin.left - margin.right;%0A    this.height = (opts.height %7C%7C (this.width * 0.6)) - margin.top - margin.bottom;%0A    this.selector = selector%0A    this.data = this._formatData(data)%0A%0A    this._init();%0A%0A%7D;%0A%0Amodule.exports = Map;%0A%0AMap.prototype._init = function() %7B%0A%0A    var width = this.width%0A    var height = this.height%0A    var data = this.data%0A    var selector = this.selector%0A%0A    var $el = $(selector).first();%0A    $el.append(templateHTML());
 %0A    
-//
 %0A    
-//%0A
+console.log($el)
 %0A   
@@ -1099,84 +1099,13 @@
 %7D);%0A
-%0A%0A    if (true) %7B // assume everything maps to scalar value for now
     %0A
-    
     
@@ -1180,42 +1180,9 @@
 %5D);%0A
-        // make fill buckets%0A%0A    
+%0A
     
@@ -1223,20 +1223,16 @@
         
-    
 var c = 
@@ -1247,28 +1247,24 @@
 l);%0A        
-    
 fills%5Bc%5D = c
@@ -1265,20 +1265,16 @@
 c%5D = c;%0A
-    
         
@@ -1298,28 +1298,24 @@
             
-    
 fillKey: c,%0A
@@ -1326,20 +1326,16 @@
         
-    
 value: v
@@ -1337,20 +1337,16 @@
 ue: val%0A
-    
         
@@ -1356,23 +1356,11 @@
     
-    %7D);%0A    %7D%0A%0A
+%7D);
 %0A%0A  
@@ -1453,26 +1453,14 @@
 ht: 
-$el.width() * 0.65
+height
 ,%0A  
@@ -2088,32 +2088,79 @@
 %7D);%0A
-%0A
+    
 %0A%7D;%0A%0A
-%0Amodule.exports = Map;
+Map.prototype._formatData = function(data) %7B%0A%0A    return data%0A%0A%7D%0A%0A

Refactor for consistency with other viz types