<html>
<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
  <![endif]-->
  <style type="text/css">
	  body{
	  	padding: 0;
	  	margin: 0;
	  }
	  #printbutton {
	  	position: absolute;
	  	top: 0;
	  	left: 0;
	  	z-index: 999;
	  }
    #map { 
    	height: 2550px; /* 8.5 inch at 300 dpi */
    	width: 3300px;  /* 11 inch at 300 dpi */
    }
  </style>
  <style type="text/css" media="print">
	  @page {
			size: 11in 8.5in; 
		  margin: 0mm; 
		}
	  #printbutton {
	  	display: none;
	  }
    htmlff,boffdy { 
    	height: 8.5in; 
    	width: 11in; 
    }
    #map {
    	margin: 0.25in;
    	height: 8in; 
    	width: 10.5in; 
    }
  </style>

  <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

</head>
<body>
	<input type="button" value="Print" id="printbutton" onclick="printMap()" />
  <div id="map"></div>	

  <script type="text/javascript">

		var query = "";
    var map = L.map('map', {zoomControl: false}); //.setView([51.505, -0.09], 13);
    L.tileLayer('http://{s}.tile.cloudmade.com/4be2d4a8b7ae4a5e8ebc0558bb5d7db4/997/256/{z}/{x}/{y}.png', {
	    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>',
	    maxZoom: 18
		}).addTo(map);

    // Get url params
    var prmstr = window.location.search.substr(1);
		var prmarr = prmstr.split ("&");
		var params = {};
		for ( var i = 0; i < prmarr.length; i++) {
		    var tmparr = prmarr[i].split("=");
		    params[tmparr[0]] = tmparr[1];
		}

		// decode query param
		if(params["q"] && params["b0"] && params["b1"] && params["b2"] && params["b3"]){
			updateMap(decodeURIComponent(params["q"]),[[decodeURIComponent(params["b0"]), decodeURIComponent(params["b1"])],
				  [decodeURIComponent(params["b2"]), decodeURIComponent(params["b3"])]]);
		}
		else {
			alert("No boundaries given!");
		}


		function updateMap(query,bounds){
			// Fit map to the GPS boundaries
			map.fitBounds(bounds);
		};

		var mapHalved = false;
		function printMap(){
			// Only halve the map if it hasn't already been halved
			if(!mapHalved){
				halveMap();
			}
			// It takes awhile to halve, so print after 2sec.
			setTimeout(function(){
				print();
			},2000);
		}
		
		function halveMap(){

			// Halve size of map container (hopefully no redraw!)
		  map._container.style.width = window.getComputedStyle(map._container, null).width.split("px")[0]*0.4+"px";
		  map._container.style.height = window.getComputedStyle(map._container, null).height.split("px")[0]*0.4+"px";

			// Halve size of each leaflet tile AND decrease its offsets by half
			var leaflets = document.getElementsByClassName("leaflet-tile");
			for(var i=0; i < leaflets.length; i++){
			  element = leaflets[i];
			  element.style.width = element.style.width.split("px")[0]*0.4+"px";
			  element.style.height = element.style.height.split("px")[0]*0.4+"px";

			  element.style.left = element.style.left.split("px")[0]*0.4+"px";
			  element.style.top = element.style.top.split("px")[0]*0.4+"px";
			}

			mapHalved = true;
		}

  </script>



</body>
</html>