//MAP//////////////

var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var markersArray = [];
  var latlng; 
  var map;
  var trafficLayer;
  
  function initialize(page) {
  
    latlng = new google.maps.LatLng(41.9796050,-91.5519720);
    center = new google.maps.LatLng(41.97830778201462,-91.55283808708191);
    var myOptions = {
      zoom: 16,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
	directionsDisplay = new google.maps.DirectionsRenderer();
	directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
	
	
	

	var contentString = '<h3>Cedar Storage Southeast - Cedar Rapids</h3>';
	contentString += '<img src="/images/gallery/265/pica.jpg" alt="Cedar Storage Southeast - Cedar Rapids IA 52403" width="100" border="1" style="float:left; margin-right: 13px;"/>';
	contentString += '804 Vernon Valley Dr.<br/>Cedar Rapids IA. 52403<br/>';
	contentString += '(319) 531-1352<br/>';
	contentString += '<a href="/Cedar-Rapids-Iowa/52403/265">More Information</a>';
	

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
 
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Cedar Storage Southeast',
		icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|215127'
		
    });
    //icon: 'https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=home|bb|Cedar%20Storage|215127|ffffff'
    if (page != 'facility') { google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    }); }
	markersArray.push(marker);
	//icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=C|215127|ffffff'
 // FOR CASEYS STORE
 /*
 http://maps.google.com/maps?q=804+Vernon+Valley+Dr.+Cedar+Rapids,+IA.+52403+&hl=en&ll=41.976162,-91.553106&spn=0.0108,0.022724&sll=26.271192,-80.270604&sspn=0.208421,0.363579&vpsrc=6&hnear=804+Vernon+Valley+Dr,+Marion,+Iowa+52302&t=m&z=16&iwloc=lyrftr:m,13584121781011503462,41.976098,-91.553128&layer=c&cbll=41.976157,-91.553096&panoid=-hEy53QaOe0VbDt2dvOloQ&cbp=12,201.11,,0,14.37
 */
 
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(41.976162,-91.553106),
        map: map,
        title: 'Casey\'s General Storage',
		icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=shoppingcart|C6EF8C'
		
    });
//icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=C|215127|ffffff'
//icon: 'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|Casey%27s|C6EF8C|000000'
	markersArray.push(marker);	
    
    
	 // We get the map's default panorama and set up some defaults.
    // Note that we don't yet set it visible.
    panorama = map.getStreetView();
    panorama.setPosition(new google.maps.LatLng(41.979795,-91.551018));
    panorama.setPov({
      heading: 280.3800229896891,
      zoom:0,
      pitch:2.1481692078085937}
    );
	
   trafficLayer = new google.maps.TrafficLayer();
  
	
	/*google.maps.event.addListener(panorama, 'pov_changed', function() {
	var headingCell = document.getElementById('directionsPanel');
	//var pitchCell = document.getElementById('pitch_cell');
	headingCell.innerHTML = 'Lat,Lon: '+ panorama.getPosition() +' Heading:'+ panorama.getPov().heading +' POV: '+panorama.getPov().pitch;
	
    }); */
	
	

// Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var streetControlDiv = document.createElement('DIV');
  var streetControl = new StreetControl(streetControlDiv, map);

  streetControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(streetControlDiv);
		if (page != 'facility') {
	// Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var trafficControlDiv = document.createElement('DIV');
  var trafficControl = new TrafficControl(trafficControlDiv, map);

  trafficControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(trafficControlDiv);
	
  
	
	// Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('DIV');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
	
	}

  
  
  }
  var traffic_state = 0;
  
  function toggleTraffic() {
	if (traffic_state == 0) {
		trafficLayer.setMap(map);
		traffic_state = 1;
	} else {
		trafficLayer.setMap(null);
		traffic_state = 0;
	}
  }
  
   function toggleStreetView() {
    var toggle = panorama.getVisible();
    if (toggle == false) {
      panorama.setVisible(true);
    } else {
      panorama.setVisible(false);
    }
  }
  
  function calcRoute() {
    var end = '804 Vernon Valley Dr. Cedar Rapids, IA';
    var start = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
	    document.getElementById("directionsPanel").innerHTML = '';
        directionsDisplay.setDirections(response);
		 directionsDisplay.setMap(map);
		 if (markersArray) {
			for(i in markersArray) {
				markersArray[i].setMap(null);
			}
		 }
      }
    });
  return false;
  }
  
  function clearDirections() { 
	directionsDisplay.setMap(null);
	
	if (markersArray) {
		for(i in markersArray) {
			markersArray[i].setMap(map);
		}
	}
	document.getElementById("directionsPanel").innerHTML = '';
	document.getElementById("directionsPanel").innerHTML = '<dl>' + 
	
		'<dt>From the north:</dt><dd>On Highway 13, three miles south of the intersection with Highway 100</dd>' + 
		'<dt>From the South:</dt><dd>On Highway 13, four miles north of the intersection with Highway 30.</dd>' + 
		'<dt>From the East:</dt><dd>At the corner of Mt. Vernon Road SE and Highway 13. Behind Casey&#039;s General Store</dd>' + 
		'<dt>From the West:</dt><dd>At the corner of Mt. Vernon Road SE and Highway 13. Behind Casey&#039;s General Store. </dd>' + 
		
	'</dl>';
	
				
	map.setZoom(15)
	map.panTo(latlng)

  }
  
function HomeControl(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 = 'Reset Map';
  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 = 'Reset';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to

  google.maps.event.addDomListener(controlUI, 'click', function() { map.setCenter(latlng); map.setZoom(15) } );
}
  
  function StreetControl(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 = 'Street View';
  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);

  // Setup the click event listeners: simply set the map to

  google.maps.event.addDomListener(controlUI, 'click', function() { toggleStreetView(); } );
}
  
function TrafficControl(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 = 'Traffic';
  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 = 'Traffic';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to

  google.maps.event.addDomListener(controlUI, 'click', function() { toggleTraffic() } );
}

function myclick(i) {
	
		google.maps.event.trigger(markersArray[i], "click");
	
}