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(stamenUrl, {maxZoom: 18, attribution: attrib}),
	map = new L.Map('map', {
		layers: [main],
		center: [55.7501, 37.6687],
		zoom: 11 
	});

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

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

//Blur filter params
filterBlur.append("feGaussianBlur").attr("stdDeviation", 2);

//Leaflet.draw stuff
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
	draw: {
		position: 'topleft',
		polygon: {
			title: 'Draw a sexy polygon!',
			allowIntersection: false,
			drawError: {
				color: '#0099FF',
				timeout: 1000
			},
			shapeOptions: {
				color: '#0099FF',
				weight: 10,
				opacity: 0.8,
				fill: false
			},
			showArea: true
		},
		rectangle: {
			shapeOptions: {
				color: '#0099FF',
				weight: 10,
				opacity: 0.8,
				fill: false
			}
		},		
		polyline: false,
		marker: false,
		circle: false
	},
	edit: {
		featureGroup: drawnItems
	}
});

map.addControl(drawControl);

map.on('draw:created', function (e) {
	var type = e.layerType,
		layer = e.layer;

	drawnItems.addLayer(layer);
});

//Some extra controls

var patternDropdown = 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>pattern: <select><option selected>none</option><option>diagonalHatch</option><option>diagonalHash</option></select></label>';
		L.DomEvent
		.on(container.firstChild.firstElementChild, 'change', function(e) {
			if (this.value != 'none') {
				drawControl.setDrawingOptions({
					polygon: {
						shapeOptions: {
							color: '#0099FF',
							weight: 10,
							opacity: 0.8,
							fill: true,
							fillOpacity: 0.5,
							fillColor: 'url(#'+ this.value + ')'
						},
					},				
					rectangle: {
						shapeOptions: {
							color: '#0099FF',
							weight: 10,
							opacity: 0.8,
							fill: true,
							fillOpacity: 0.5,
							fillColor: 'url(#'+ this.value + ')'
						}
					}
				})
			} else {
				drawControl.setDrawingOptions({
					polygon: {
						shapeOptions: {
							color: '#0099FF',
							fill: false
						},
						showArea: true
					},
					rectangle: {
						shapeOptions: {
							color: '#0099FF',
							weight: 10,
							opacity: 0.8,
							fill: false
						}
					} 	        	
				});
			};
		});

		return container;
	}
});

map.addControl(new patternDropdown());

var blurControl = L.Control.extend({
	options: {
		position: 'topright'
	},
	
	onAdd: function (map) {
        // create the control container with a particular class name
        var container = L.DomUtil.create('div', 'checkbox-control');
        
        // ... initialize other DOM elements, add listeners, etc.
        container.innerHTML = '<label><input type="checkbox" name="blur" value="clear">BLUR</label>';
        L.DomEvent
        .on(container.firstChild.firstElementChild, 'change', function(e) {
        	if (this.value == 'clear') {
        		svg.selectAll("g").selectAll('path').attr("filter", "url(#blur)");
        		this.value = 'blured';
        	} else {
        		svg.selectAll("g").selectAll('path').attr("filter", "none");
        		this.value = 'clear';
        	};
        });
        
        return container;
    }
});
	
map.addControl(new blurControl());

var animateControl = L.Control.extend({
	options: {
		position: 'topright'
	},
	
	onAdd: function (map) {
        // create the control container with a particular class name
        var container = L.DomUtil.create('div', 'checkbox-control');
        
        // ... initialize other DOM elements, add listeners, etc.
        container.innerHTML = '<label><input type="checkbox" name="animate" value="still">Animate pattern</label>';
        L.DomEvent
        .on(container.firstChild.firstElementChild, 'change', function(e) {
        	if (this.value == 'still') {
        		this.value = 'animating';
        		var activePattern = d3.select("select").property("value");
        		if (activePattern == "diagonalHatch") {
        			d3.select('#diagonalHatch').call(drop, 250, this.value);
        		} else if (activePattern == "diagonalHash") {
        			d3.select('#diagonalHash').call(spin, 10000, this.value);
        		};

        	} else {
        		this.value = 'still';
        	};
        });
        
        return container;
    }
});
	
map.addControl(new animateControl());

function drop(pattern, duration, status) {
	if (status == 'animating') {
		pattern.transition()
		  .duration(duration)
		  .attr('patternTransform','rotate(55 0 0)translate(0 30)')
		  .ease("linear")
		  .each("end", function() {
		  	d3.select(this).attr('patternTransform','rotate(55 0 0) translate(0 0)');
		  	drop(pattern, duration, d3.select('input[name=animate]').attr("value"));
		  });
	};
};

function spin(pattern, duration, status) {
	if (status == 'animating') {
		pattern.transition()
		  .duration(duration)
		  .attr('patternTransform','rotate(360 0 0)')
		  .ease("linear")
		  .each("end", function() {
		  	d3.select(this).attr('patternTransform','rotate(0 0 0)');
		  	spin(pattern, duration, d3.select('input[name=animate]').attr("value"));
		  });
	};
};