$(function () {

    'use strict';
    
    // Params
    var mapContainer = T.DomUtil.get("map"),
        vectorLayer = new T.VectorLayer({useCanvas: false}),
        mapoLayer = new T.TibcoLayer();

    //Map creation
    var map = new T.Map(
        mapContainer,
        {
            zoom: 4,
            center: new T.LatLng(39, -98)
        }
    );

    //LayerCreation
    map.addLayer(mapoLayer);
    map.addLayer(vectorLayer);

    // Helper function that returns a color for a given value
    function getColor(value) {
        return  value > 1000 ? '#800026' :
                value > 500  ? '#BD0026' :
                value > 200  ? '#E31A1C' :
                value > 100  ? '#FC4E2A' :
                value > 50   ? '#FD8D3C' :
                value > 20   ? '#FEB24C' :
                value > 10   ? '#FED976' :
                               '#FFEDA0';
    }

    // Function called for each geometry with its GeoJson properties as the parameter
    function style(properties) {
        return {
            color: '#ffffff',
            opacity: 1,
            weight: 2,
            fillOpacity: 0.7,
            dashArray: 3,
            fillColor: properties ? getColor(properties.density) : '#ff0000'
        };
    }

    // The definition of the importer object
    var importer = new T.GeoJsonImporter('../../assets/us-states.json', {
        style: style,
        success: function (importer) {
            importer.addTo(vectorLayer);
        }
    });

    // Fit map to geometry's bounds on click
    vectorLayer.events.on("press", function (obj) {
        map.fitToBounds(obj.getBounds());
    });

    // Highlights the shape on mouse over and displays the state info 
    vectorLayer.events.on("over", function (obj) {
        var data = obj.options.geojsonProperties;
        obj.setStyle({
            weight: 5,
            color: '#666',
            dashArray: ''
        });

        vectorLayer.bringToFront(obj);
        
        $('.info .description .state').html(data.name);
        $('.info .description .density').html(data.density + ' people / mi²');
    });
    
    // Resets the shape style and the state info box
    vectorLayer.events.on("out", function (obj) {
        obj.setStyle(style(obj.options.geojsonProperties));
        
        $('.info .description .state').html('');
        $('.info .description .density').html('Hover over a state');
    });

    // Renders the legend
    var div = $('.legend'),
        grades = [0, 10, 20, 50, 100, 200, 500, 1000],
        labels = [],
        from, to, i;

    for (i = 0; i < grades.length; i++) {
        from = grades[i];
        to = grades[i + 1];

        labels.push('<i style="background:' + getColor(from + 1) + '"></i> ' + from + (to ? '&ndash;' + to : '+'));
    }

    div.html(labels.join('<br>'));
});