var markers = [],
	iterator = 0,	
	bounds = new google.maps.LatLngBounds(),
	sv = new google.maps.StreetViewService(),
	map,
	panorama,
	lookup = false;

function showMap() {
    var latlng = new google.maps.LatLng(locations[0][1],locations[0][2]);		
	for (var i = 0, LtLgLen = locations.length; i < LtLgLen; i++) {
		bounds.extend( new google.maps.LatLng(locations[i][1], locations[i][2]) );
	}		
    var opts = {
		zoom: 15,
      	center: latlng,
      	mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: false
    };
    map = createMap(opts);
	if(locations.length>1) map.fitBounds(bounds);
	setTimeout(function() {
		dropMarkers();
	},2000);
}

function showLocationMap() {
    var latlng = new google.maps.LatLng(locations[0][1],locations[0][2]);
	var opts = {
		zoom: 15,
      	center: latlng,
      	mapTypeId: google.maps.MapTypeId.ROADMAP
		//,mapTypeControl: false
    };
    map = createMap(opts);
	panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
	google.maps.event.addListener(map, 'click', function(event) {
		sv.getPanoramaByLocation(event.latLng, 50, processSVData);
	});
	setTimeout(function() {
		createSingleMarker();
	},2000);
}

function ToggleControl(controlDiv, map) {
	// Set CSS styles for the DIV containing the control
	// Setting padding to 5 px will offset the control
	// from the edge of the map
	controlDiv.style.padding = '5px';

	// Set CSS for the control border
	var controlUI = document.createElement('div');
	controlUI.style.backgroundColor = 'white';
	controlUI.style.borderStyle = 'solid';
	controlUI.style.borderWidth = '2px';
	controlUI.style.cursor = 'pointer';
	controlUI.style.textAlign = 'center';
	controlUI.title = 'Click to set the map to Home';
	controlDiv.appendChild(controlUI);

	// Set CSS for the control interior
	var controlText = document.createElement('div');
	controlText.style.fontFamily = 'Arial,sans-serif';
	controlText.style.fontSize = '12px';
	controlText.style.paddingLeft = '4px';
	controlText.style.paddingRight = '4px';
	controlText.innerHTML = 'Street View';
	controlUI.appendChild(controlText);

	// Toggle streetview
	google.maps.event.addDomListener(controlUI, 'click', toggleStreetView);
}

/*
function toggleStreetView() {	
	var toggle = panorama.getVisible();
	if (toggle == false) {
	    panorama.setVisible(true);
	} else {
	    panorama.setVisible(false);
	}
}
*/

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {      
      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0,
        zoom: 1
      });
      panorama.setVisible(true);
	}
}

function createMap(opts) {
	var map = new google.maps.Map(document.getElementById("map"), opts);
	return map;
}

function dropMarkers() {
	for (var i = 0; i < locations.length; i++) {
		setTimeout(function(){
			createMarker();
		}, 100 * i);
	}
}

var src,
	shadow = "/assets/img/icon-marker-shadow.png",
	greenMarker = "/assets/img/icon-marker-green.png",
	redMarker = "/assets/img/icon-marker-red.png",	
	greyMarker = "/assets/img/icon-marker-grey.png",
	blueMarker = "/assets/img/icon-marker-blue.png";
function createMarker() {
	if(locations[iterator]){
		/*	
		if (Modernizr.canvas) {
			src = iconFactory(locations[iterator][3], locations[iterator][4]); // custom icon - letter + status
		} else {
			src = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|00a651|ffffff"; // google lettered icon
		}		
		*/	
		
		var markerShadow = new google.maps.MarkerImage(shadow,
	        new google.maps.Size(38.0, 34.0),
	        new google.maps.Point(0,2),
	        new google.maps.Point(10,34.0)
	    );
		
		var markerIcon;
		switch (parseInt(locations[iterator][4])) {
			case 1:
				markerIcon = greenMarker;
				break;
			case 2:
				markerIcon = greyMarker;
				break;
			case 3:
				markerIcon = blueMarker;
				break;
			default: markerIcon = redMarker
		}
		var markerImage = new google.maps.MarkerImage(markerIcon);

		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[iterator][1], locations[iterator][2]),
			map: map,
			draggable: false,
			title:locations[iterator][0],
			animation: google.maps.Animation.DROP,
			icon: markerImage,
			shadow: markerShadow
	    });
		marker.metadata = { id: iterator, 'letter': locations[iterator][3] };
		
		markers.push(marker);			
		google.maps.event.addListener(markers[iterator], 'startBounce', startBounce);
		google.maps.event.addListener(markers[iterator], 'endBounce', endBounce);
		google.maps.event.addListener(markers[iterator], 'click', function(evt) {
			var pin = this.metadata.letter,
				h = $('a[data-pin=' + pin + ']').attr('href');
			window.location = h;
		});
		iterator++;
	}
}

function createSingleMarker() {
	var markerIcon;
	switch (parseInt(locations[iterator][4])) {
		case 1:
			markerIcon = greenMarker;
			break;
		case 2:
			markerIcon = greyMarker;
			break;
		case 3:
			markerIcon = blueMarker;
			break;
		default: markerIcon = redMarker
	}
	var markerImage = new google.maps.MarkerImage(markerIcon,
		new google.maps.Size(22,38),
		new google.maps.Point(0,0),
		new google.maps.Point(0,38));
	
	var markerShadow = new google.maps.MarkerImage(shadow,
        new google.maps.Size(38.0, 34.0),
        new google.maps.Point(0, 0),
        new google.maps.Point(0,34.0)
    );
	
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(locations[iterator][1], locations[iterator][2]),
		map: map,
		draggable: false,
		title:locations[iterator][0],
		animation: google.maps.Animation.DROP,
		icon: markerImage,
		shadow: markerShadow
    });

	var markerContent = '<div class="popup">'+
	    '<h6 id="firstHeading" class="firstHeading">Uluru</h6>'+
	    '<div class="popup-content">'+
	    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
	    'sandstone rock formation in the southern part of the '+
	    'Northern Territory, central Australia. It lies 335 km (208 mi) '+
	    'south west of the nearest large town, Alice Springs; 450 km '+
	    '(280 mi) by road. Kata Tjuta and Uluru are the two major '+
	    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
	    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
	    'Aboriginal people of the area. It has many springs, waterholes, '+
	    'rock caves and ancient paintings. Uluru is listed as a World '+
	    'Heritage Site.</p>'+
	    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
	    'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
	    '</div>'+
	    '</div>';
	var markerPopup = new google.maps.InfoWindow({
		//content: markerContent
	});
	google.maps.event.addListener(marker, 'click', function() {
		markerPopup.open(map,marker);
	});	
	markers.push(marker);
	iterator++;
}

function startBounce() {
	if (this.getAnimation() == null) {
		this.setAnimation(google.maps.Animation.BOUNCE);
	}
}

function endBounce() {
	if (this.getAnimation() != null) {
		this.setAnimation(null);
	}
}

var iconFactory = function(label, status) {	
	var width = 22,
		height = 38;	
	var canvas = document.createElement("canvas");
	canvas.width = width;
	canvas.height = height;
	var ctx = canvas.getContext("2d");

	// Create pointer image.
	var pointer = new Image();
	pointer.src = status == 1 ? greenMarker : redMarker;
	//pointer.onload = function() {
	    ctx.drawImage(pointer, 0, 0);
	    ctx.shadowOffsetX = 0;
	    ctx.shadowOffsetY = 1;
	    ctx.shadowBlur = 0;
	    ctx.shadowColor = "rgba(0,0,0,0.7)";

	    // Render Label
	    ctx.font = "normal 18px SteelfishExtraBold";
		ctx.fillStyle = 'white';
	    ctx.textBaseline = "top";
	    var textWidth = ctx.measureText(label);
	    ctx.fillText(label, Math.floor((width / 2) - (textWidth.width / 2)), 4);
	    return canvas.toDataURL("image/png");
	//}
};