var map;

var allMarkers = []; //all markers except the main sketching marker
var allMarkersQueryStrings = [];
var generalGroupMarkers = [];
var laxGroupMarkers = [];
var sketchingMarker;

var sketchingType;

var isBrowsingLocations = false;


function initialize() {
	
	var latlng = new google.maps.LatLng(33.943787,-118.403306);
	var myOptions = {
		scrollwheel: false,
		zoom: 16,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.SATELLITE,
		backgroundColor:'#3E3f32',
		mapTypeControlOptions: {
				mapTypeIds: [google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.ROADMAP],
				position: google.maps.ControlPosition.TOP_RIGHT,
				style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR}, //DROPDOWN_MENU
		navigationControlOptions:{
				position: google.maps.ControlPosition.RIGHT,
				style: google.maps.NavigationControlStyle.DEFAULT}
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
	createOverlays();
	createMarkers();
	
	//add event to listen for a change in zoom
	google.maps.event.addListener(map, 'zoom_changed', function() {
		onZoomChanged(true);
	});
	google.maps.event.addListener(map, 'maptypeid_changed', function() {
		onMapTypeChanged(true);
	});
	google.maps.event.addListener(map, 'center_changed', function() {
		onCenterChanged(true);
	});
	
	

}
$(window).scroll(function () { 
	$("#map_canvas").css("overflow", "visible");
	$("#map_canvas > div").css("overflow", "visible");
});


function createOverlays(){
	var swBound;
	var neBound;
	var bounds;
	sketchingType = new SketchingOverlay(null,'images/sketching10largetype.png', map);

}
function createMarkers(){
	//0 main LAX marker
	sketchingMarker = newLocMarker('images/loc_sketching10.png', 'images/loc_sketching10_shdw.png', new google.maps.LatLng(33.944112,-118.402473), 'Los Angeles Airport near Los Angeles, CA');
	
	//1 Encounter Restaurant
	laxGroupMarkers.push(newLocMarker('images/loc_encounter_restaurant.png', 'images/loc_encounter_restaurant_shdw.png', new google.maps.LatLng(33.944112,-118.402473), 'Encounter Restaurant near Los Angeles, CA'));
	
	//2 LAX Sheraton
	laxGroupMarkers.push(newLocMarker('images/loc_lax_sheraton.png', 'images/loc_lax_sheraton_shdw.png', new google.maps.LatLng(33.946664,-118.390783), 'Sheraton Gateway near Los Angeles, CA'));
	
	//3 Downtown
	generalGroupMarkers.push(newLocMarker('images/loc_downtown.png', 'images/loc_downtown_shdw.png', new google.maps.LatLng(34.050862,-118.248134), 'Bradbury Building near Los Angeles, CA'));
	//4 Art Center
	generalGroupMarkers.push(newLocMarker('images/loc_art_center.png', 'images/loc_art_center_shdw.png', new google.maps.LatLng(34.13019,-118.148346), 'Art Center College of Design near Pasadena, CA'));
}

function newLocMarker(image, shadow, latLng, queryString){

	var icon = new google.maps.MarkerImage(image,
      //use image size by passing in null
      null,
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // anchor is center of asterix
      new google.maps.Point(28, 28));
     
    var shadowImage = new google.maps.MarkerImage(shadow,
      //use image size by passing in null
      null,
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // anchor is center of asterix
      new google.maps.Point(28, 28));

	var marker = new google.maps.Marker({
		position: latLng,
		map: map,
		icon: icon,
		shadow:shadowImage,
		visible:false,
		clickable:false
	});
	
	//remember the path to the image for the marker for toggling from black to yellow
	marker.imagePath = image;
	
	//add markers to the all markers array so that they can be accessed by index
	allMarkers.push(marker);
	allMarkersQueryStrings.push(queryString);
	return marker;
}

//Zooming/Marker or Overlay Display functions

function onMapTypeChanged(){
	
	if(map.getMapTypeId() != google.maps.MapTypeId.SATELLITE){
		appendMarkerImagePath('_blk');
	}else{
		appendMarkerImagePath('');
	}
}

function appendMarkerImagePath(append){
	//toggle all the marker images from yellow to black? or back
	for(var i in allMarkers){
	 	//remove the file type .png   .... if there are going to be other file types we'll have to change this
	 	var path = allMarkers[i].imagePath.substr(0, allMarkers[i].imagePath.length-4);
	 	
	 	//create the new icon
		var icon = new google.maps.MarkerImage(path + append + '.png',
			//use image size by passing in null
			null,
			// The origin for this image is 0,0.
			new google.maps.Point(0,0),
			// anchor is center of asterix
			new google.maps.Point(28, 28));
		allMarkers[i].setIcon(icon);
	}
}
function onCenterChanged(){
	isBrowsingLocations=true;
	sketchingType.visible_=false;
	sketchingType.draw();
	showMarkers(true);
}

function onZoomChanged(){
	isBrowsingLocations=true;
	sketchingType.visible_=false;
	showMarkers(true);
}

function gotoMarker(markerIndex, zoomMin, zoomMax){
	//if using mobile device launch link in new window
	if(this.DetectIphoneOrIpod()){
		window.open('http://maps.google.com/maps?q='+ allMarkersQueryStrings[markerIndex], '_blank');
		return;
	}
	
	isBrowsingLocations=true;
	onZoomChanged();
	sketchingType.draw();
	
	if(zoomMin!=null && map.getZoom()<zoomMin){
		map.setZoom(zoomMin);
	}
	if(zoomMax!=null && map.getZoom()>zoomMax){
		map.setZoom(zoomMax);
	}
	
	var latLng = allMarkers[markerIndex].getPosition();
	map.panTo(latLng);
}

function showMarkers(value){
	if(value){
		if(map.getZoom() < 10){
			//if too far zoomed out only show the mainLax marker
			sketchingMarker.setVisible(true);
			showLaxGroup(false);
			return;
		}
		for ( var i in generalGroupMarkers ){
			generalGroupMarkers[i].setVisible(true);
		}
		
		
		//display lax markers
		if(map.getZoom() < 15){
			showLaxGroup(false);
			sketchingMarker.setVisible(true);
		}else{
			showLaxGroup(true);
			sketchingMarker.setVisible(false);
		}
	}else{
		for ( var i in generalGroupMarkers ){
			generalGroupMarkers[i].setVisible(false);
		}
		showLaxGroup(false);
		sketchingMarker.setVisible(false);
	}
}

function showLaxGroup(value){
	if(value){
		for ( var i in laxGroupMarkers ){
			laxGroupMarkers[i].setVisible(true);
		}
	}else{
		for ( var i in laxGroupMarkers ){
			laxGroupMarkers[i].setVisible(false);
		}
	}
}