var marker = [];
var map;
var bounds;
var bluecommercialicon;
var commercialshadowicon;
var gr = new google.maps.LatLng(42.968905,-85.672242);
var infowindow = new google.maps.InfoWindow({});
google.maps.event.addListener(infowindow, 'closeclick', function(){
	console.log('adfadsf');
	map.fitBounds(bounds);
});

function createCommercialMap(district) {

	var point ='';

	var myOptions = {
		zoom: 15,
		center: gr,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		navigationControl: true,
		navigationControlOptions: {
			style: google.maps.NavigationControlStyle.SMALL
		},
		mapTypeControl: false
    };
	map = new google.maps.Map(document.getElementById("commercial_listing_map"), myOptions);
	
	bounds = new google.maps.LatLngBounds();
	
	// Create shadow, the icon itself is generated in different function
	// because it has its own image to use
	commercialshadowicon = new google.maps.MarkerImage('imgs/real_estate/marker_shadow.png',
		new google.maps.Size(29,25),
		new google.maps.Point(0,0),
		new google.maps.Point(11,23)
	);

	// populate the map with markers	
	document.body.style.cursor='wait';

	$.getJSON('map-get_commercial_listings.php?district='+district, function(buildings, status){		
		if(buildings.length<1){
			map.setCenter(gr);
			map.setZoom(14);
		
		} else {

			var count = 1;
			for(i in buildings){
				
				var opts = {};
				opts.position = new google.maps.LatLng(buildings[i]['lat'], buildings[i]['lng']);
				opts.title = buildings[i]['display_address'];
				opts.zIndex = count;
				opts.map = map;

				// figure out the info window content
				var infowindowcontent = '<div style=\"width:auto;height:auto;\"><b>' +opts.title+ ' <\/b><br \/>';
				if(buildings[i]['thumb']!==null ){
					infowindowcontent += '<img src=\"imgs/real_estate/' +buildings[i]['thumb']+ '\" alt=\"\"  \/>';		 
				}
				//infowindowcontent += '<p style="margin:10px 0;font-size:.9em;"><a href="map-streetview.php?lat=' +buildings[i]['lat']+ '&lng=' +buildings[i]['lng']+ '" onclick="PopUp("map-streetview.php?lat=' +buildings[i]['lat']+ '&lng=' +buildings[i]['lng']+ '"); return false;"  rel="facebox"  >Street view<a/><\/p> ';
				if(buildings[i]['pdf']!==null ){
					infowindowcontent += '<p style="margin:10px 0;font-size:.9em;"><a href="documents/commercial_listings/' +buildings[i]['pdf']+ '" target="_blank" >download PDF<a/><\/p> <\/div> ';									
				}
				opts.infowindowcontent = infowindowcontent;

				createMarker(i,opts);
				bounds.extend(opts.position);
				count++;
			}

			map.fitBounds(bounds);
		}
	});

	document.body.style.cursor='auto';
}


function createMarker(i, markeropts) {

	marker[i] = new google.maps.Marker(markeropts);
	marker[i].setIcon(
		new google.maps.MarkerImage('imgs/real_estate/marker_'+markeropts.zIndex+'.png',
			// This marker is 22 pixels wide by 25 pixels tall.
			new google.maps.Size(22, 25),
			// The origin for this image is 0,0.
			new google.maps.Point(0,0),
			// The anchor for this image is the point at 11,23.
			new google.maps.Point(11,23)
		)
	);
	marker[i].setShadow(commercialshadowicon);

	google.maps.event.addListener(marker[i], 'click', function(){
		infowindow.setContent(markeropts['infowindowcontent']);
		infowindow.open(map, marker[i]);
	});
}

function PopUp(url) {
	window.open( url, "", "status = 1, height = 500, width = 500, resizable = 1" );
}