var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
	//stamenUrl = 'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png',
	attrib = '&copy; Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> | <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	main = L.tileLayer(osmUrl, {maxZoom: 18, attribution: attrib}),
	map = new L.Map('map', {
		layers: [main],
		center: [55.7501, 37.6687],
		zoom: 11 
	}),
	overlay = L.tileLayer(osmUrl).addTo(map);
	overlay.getContainer().style.display = "none";
	main.getContainer().style.filter = "url(#sepia)";
	main.getContainer().style.WebkitFilter = "url(#sepia)";

//Convert Leaflet geometries to D3 geometries
function projectPoint(x, y) {
	var point = map.latLngToLayerPoint(new L.LatLng(y, x));
	this.stream.point(point.x, point.y);
};

//Initialize SVG layer in Leaflet (works for leaflet-0.7.3)
map._initPathRoot()

var transform = d3.geo.transform({point: projectPoint}),
	path = d3.geo.path().projection(transform);

var svg = d3.select(".leaflet-main-pane").select("svg"),
	// add "leaflet-zoom-hide" class to SVG container for turning off zoom
	defs = svg.append("defs"),
	filterGrayscale = defs.append("filter").attr("id", "grayscale");

//Blur filter params
filterGrayscale.append("feColorMatrix").attr("type", "saturate").attr("values", 0);


//Some extra controls

var filterDropdown = L.Control.extend({
	options: {
		position: 'topright'
	},
	
	onAdd: function (map) {
    	// create the control container with a particular class name
		var container = L.DomUtil.create('div', 'dropdown-control');
		
		// ... initialize other DOM elements, add listeners, etc.
		container.innerHTML = '<label>filter: <select><option selected>none</option><option>grayscale</option><option>partial-grayscale</option><option>saturate</option><option>hue_rotate</option><option>luminance_mask</option></select></label>';
		L.DomEvent
		.on(container.firstChild.firstElementChild, 'change', function(e) {
			var filterStyle = main.getContainer().style.filter;
			if (this.value != 'none') {
				main.getContainer().style.filter = 'url(#'+ this.value + ')';
				main.getContainer().style.WebkitFilter = 'url(#'+ this.value + ')';
			} else {
				main.getContainer().style.filter = 'none';
				main.getContainer().style.WebkitFilter = 'none';
			};
		});
		
		return container;
    }
});
	
map.addControl(new filterDropdown());