var directions;
var agua_blanca;
var cornerstone;
var monterey_43585;
var milestone_building_72980;
var milestone_building_72960;
var monterey_44300_44350;
var monterey_44200_44250;
var hms_plaza_east;
var hms_plaza_west;

Ext.onReady(function() {
	if (GBrowserIsCompatible()) {
		// Set the center and some controls
		var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
		
        // Create an object for driving directions
		directions = new GDirections(map, document.getElementById('directions'));
		GEvent.addListener(directions, 'error', handleErrors);

        // Set the markers
		var aguaBlanca = function() {
			this.className = 'agua_blanca';
			this.point = new GLatLng(33.7424203, -116.4104580);
			this.html = '<strong>Agua Blanca</strong><br />41-750 Rancho Las Palmas Dr.<br />Rancho Mirage, CA 92270';
			this.default_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>';     
			this.to_html = this.html + '<br /><br />Directions: <strong>To here</strong> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>' +
                '<br />Start address: ' +
                '<input type="text" id="start_address" name="start_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="end_address" name="end_address" value="' + this.point.lat() + ',' + this.point.lng() + '"/>';
			this.from_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <b>From here</b>' +
                '<br />End address: ' +
                '<input type="text" id="end_address" name="end_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="start_address" name="start_address" value="' + this.point.lat() + ',' + this.point.lng() + '" />';
            this.createMarker = function() {
				var default_html = this.default_html;
				var marker = new GMarker(this.point);
				this.marker = marker;
                map.addOverlay(marker);
                GEvent.addListener(marker, "click", function() {
                	marker.openInfoWindowHtml(default_html);
            	});
			}
			this.toHere = function() {
				this.marker.openInfoWindowHtml(this.to_html);
			}
			this.fromHere = function() {
				this.marker.openInfoWindowHtml(this.from_html);
			}
        }
		
		var cornerStone = function() {
			this.className = 'cornerstone';
			this.point = new GLatLng(33.758166, -116.373083);
			this.html = '<strong>Cornerstone</strong><br />74-000 Country Club Dr.<br />Palm Desert, CA 92260';
			this.default_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>';     
			this.to_html = this.html + '<br /><br />Directions: <strong>To here</strong> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>' +
                '<br />Start address: ' +
                '<input type="text" id="start_address" name="start_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="end_address" name="end_address" value="' + this.point.lat() + ',' + this.point.lng() + '"/>';
			this.from_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <b>From here</b>' +
                '<br />End address: ' +
                '<input type="text" id="end_address" name="end_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="start_address" name="start_address" value="' + this.point.lat() + ',' + this.point.lng() + '" />';
            this.createMarker = function() {
				var default_html = this.default_html;
				var marker = new GMarker(this.point);
				this.marker = marker;
                map.addOverlay(marker);
                GEvent.addListener(marker, "click", function() {
                	marker.openInfoWindowHtml(default_html);
            	});
			}
			this.toHere = function() {
				this.marker.openInfoWindowHtml(this.to_html);
			}
			this.fromHere = function() {
				this.marker.openInfoWindowHtml(this.from_html);
			}
        }
		
		var monterey43585 = function() {
			this.className = 'monterey_43585';
			this.point = new GLatLng(33.732054, -116.391570);
			this.html = '43-585 Monterey Ave.<br />Palm Desert, CA 92260';
			this.default_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>';     
			this.to_html = this.html + '<br /><br />Directions: <strong>To here</strong> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>' +
                '<br />Start address: ' +
                '<input type="text" id="start_address" name="start_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="end_address" name="end_address" value="' + this.point.lat() + ',' + this.point.lng() + '"/>';
			this.from_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <b>From here</b>' +
                '<br />End address: ' +
                '<input type="text" id="end_address" name="end_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="start_address" name="start_address" value="' + this.point.lat() + ',' + this.point.lng() + '" />';
            this.createMarker = function() {
				var default_html = this.default_html;
				var marker = new GMarker(this.point);
				this.marker = marker;
                map.addOverlay(marker);
                GEvent.addListener(marker, "click", function() {
                	marker.openInfoWindowHtml(default_html);
            	});
			}
			this.toHere = function() {
				this.marker.openInfoWindowHtml(this.to_html);
			}
			this.fromHere = function() {
				this.marker.openInfoWindowHtml(this.from_html);
			}
        }
		
		var milestoneBuilding72980 = function() {
			this.className = 'milestone_building_72980';
			this.point = new GLatLng(33.7289270, -116.3916030);
			this.html = '<strong>Milestone Building</strong><br />72-980 Fred Waring Dr.<br />Palm Desert, CA 92260';
			this.default_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>';     
			this.to_html = this.html + '<br /><br />Directions: <strong>To here</strong> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>' +
                '<br />Start address: ' +
                '<input type="text" id="start_address" name="start_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="end_address" name="end_address" value="' + this.point.lat() + ',' + this.point.lng() + '"/>';
			this.from_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <b>From here</b>' +
                '<br />End address: ' +
                '<input type="text" id="end_address" name="end_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="start_address" name="start_address" value="' + this.point.lat() + ',' + this.point.lng() + '" />';
            this.createMarker = function() {
				var default_html = this.default_html;
				var marker = new GMarker(this.point);
				this.marker = marker;
                map.addOverlay(marker);
                GEvent.addListener(marker, "click", function() {
                	marker.openInfoWindowHtml(default_html);
            	});
			}
			this.toHere = function() {
				this.marker.openInfoWindowHtml(this.to_html);
			}
			this.fromHere = function() {
				this.marker.openInfoWindowHtml(this.from_html);
			}
        }
		
		var milestoneBuilding72960 = function() {
			this.className = 'milestone_building_72960';
			this.point = new GLatLng(33.7290800, -116.3920570);
			this.html = '<strong>Milestone Building</strong><br />72-960 Fred Waring Dr.<br />Palm Desert, CA 92260';
			this.default_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>';     
			this.to_html = this.html + '<br /><br />Directions: <strong>To here</strong> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>' +
                '<br />Start address: ' +
                '<input type="text" id="start_address" name="start_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="end_address" name="end_address" value="' + this.point.lat() + ',' + this.point.lng() + '"/>';
			this.from_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <b>From here</b>' +
                '<br />End address: ' +
                '<input type="text" id="end_address" name="end_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="start_address" name="start_address" value="' + this.point.lat() + ',' + this.point.lng() + '" />';
            this.createMarker = function() {
				var default_html = this.default_html;
				var marker = new GMarker(this.point);
				this.marker = marker;
                map.addOverlay(marker);
                GEvent.addListener(marker, "click", function() {
                	marker.openInfoWindowHtml(default_html);
            	});
			}
			this.toHere = function() {
				this.marker.openInfoWindowHtml(this.to_html);
			}
			this.fromHere = function() {
				this.marker.openInfoWindowHtml(this.from_html);
			}
        }
		
		var monterey4430044350 = function() {
			this.className = 'monterey_44300_44350';
			this.point = new GLatLng(33.726177, -116.390821);
			this.html = '44-300 & 44-350 Monterey Ave.<br />Palm Desert, CA 92260';
			this.default_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>';     
			this.to_html = this.html + '<br /><br />Directions: <strong>To here</strong> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>' +
                '<br />Start address: ' +
                '<input type="text" id="start_address" name="start_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="end_address" name="end_address" value="' + this.point.lat() + ',' + this.point.lng() + '"/>';
			this.from_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <b>From here</b>' +
                '<br />End address: ' +
                '<input type="text" id="end_address" name="end_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="start_address" name="start_address" value="' + this.point.lat() + ',' + this.point.lng() + '" />';
            this.createMarker = function() {
				var default_html = this.default_html;
				var marker = new GMarker(this.point);
				this.marker = marker;
                map.addOverlay(marker);
                GEvent.addListener(marker, "click", function() {
                	marker.openInfoWindowHtml(default_html);
            	});
			}
			this.toHere = function() {
				this.marker.openInfoWindowHtml(this.to_html);
			}
			this.fromHere = function() {
				this.marker.openInfoWindowHtml(this.from_html);
			}
        }
		
		var monterey4420044250 = function() {
			this.className = 'monterey_44200_44250';
			this.point = new GLatLng(33.727032, -116.390822);
			this.html = '44-200 & 44-250 Monterey Ave.<br />Palm Desert, CA 92260';
			this.default_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>';     
			this.to_html = this.html + '<br /><br />Directions: <strong>To here</strong> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>' +
                '<br />Start address: ' +
                '<input type="text" id="start_address" name="start_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="end_address" name="end_address" value="' + this.point.lat() + ',' + this.point.lng() + '"/>';
			this.from_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <b>From here</b>' +
                '<br />End address: ' +
                '<input type="text" id="end_address" name="end_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="start_address" name="start_address" value="' + this.point.lat() + ',' + this.point.lng() + '" />';
            this.createMarker = function() {
				var default_html = this.default_html;
				var marker = new GMarker(this.point);
				this.marker = marker;
                map.addOverlay(marker);
                GEvent.addListener(marker, "click", function() {
                	marker.openInfoWindowHtml(default_html);
            	});
			}
			this.toHere = function() {
				this.marker.openInfoWindowHtml(this.to_html);
			}
			this.fromHere = function() {
				this.marker.openInfoWindowHtml(this.from_html);
			}
        }
		
		var hmsPlazaEast = function() {
			this.className = 'hms_plaza_east';
			this.point = new GLatLng(33.719841, -116.371143);
			this.html = '<strong>HMS Plaza East</strong><br />74-133 El Paseo Ave.<br />Palm Desert, CA 92260';
			this.default_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>';     
			this.to_html = this.html + '<br /><br />Directions: <strong>To here</strong> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>' +
                '<br />Start address: ' +
                '<input type="text" id="start_address" name="start_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="end_address" name="end_address" value="' + this.point.lat() + ',' + this.point.lng() + '"/>';
			this.from_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <b>From here</b>' +
                '<br />End address: ' +
                '<input type="text" id="end_address" name="end_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="start_address" name="start_address" value="' + this.point.lat() + ',' + this.point.lng() + '" />';
            this.createMarker = function() {
				var default_html = this.default_html;
				var marker = new GMarker(this.point);
				this.marker = marker;
                map.addOverlay(marker);
                GEvent.addListener(marker, "click", function() {
                	marker.openInfoWindowHtml(default_html);
            	});
			}
			this.toHere = function() {
				this.marker.openInfoWindowHtml(this.to_html);
			}
			this.fromHere = function() {
				this.marker.openInfoWindowHtml(this.from_html);
			}
        }
		
		var hmsPlazaWest = function() {
			this.className = 'hms_plaza_west';
			this.point = new GLatLng(33.7191290, -116.3722470);
			this.html = '<strong>HMS Plaza West</strong><br />74-075 El Paseo Ave.<br />Palm Desert, CA 92260';
			this.default_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>';     
			this.to_html = this.html + '<br /><br />Directions: <strong>To here</strong> - <a href="javascript: ' + this.className + '.fromHere();">From here</a>' +
                '<br />Start address: ' +
                '<input type="text" id="start_address" name="start_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="end_address" name="end_address" value="' + this.point.lat() + ',' + this.point.lng() + '"/>';
			this.from_html = this.html + '<br /><br />Directions: <a href="javascript: ' + this.className + '.toHere();">To here</a> - <b>From here</b>' +
                '<br />End address: ' +
                '<input type="text" id="end_address" name="end_address" value="" style="width: 125px;" />' +
                '&nbsp;<input type="button" value="Go" onclick="setDirections(Ext.get(\'start_address\').getValue(), Ext.get(\'end_address\').getValue());">' +
                '<input type="hidden" id="start_address" name="start_address" value="' + this.point.lat() + ',' + this.point.lng() + '" />';
            this.createMarker = function() {
				var default_html = this.default_html;
				var marker = new GMarker(this.point);
				this.marker = marker;
                map.addOverlay(marker);
                GEvent.addListener(marker, "click", function() {
                	marker.openInfoWindowHtml(default_html);
            	});
			}
			this.toHere = function() {
				this.marker.openInfoWindowHtml(this.to_html);
			}
			this.fromHere = function() {
				this.marker.openInfoWindowHtml(this.from_html);
			}
        }
	map.setCenter(new GLatLng(33.719841, -116.371143), 15);
	hms_plaza_east = new hmsPlazaEast();
	hms_plaza_east.createMarker();
	hms_plaza_east.marker.openInfoWindowHtml(hms_plaza_east.default_html)
	}
});

function setDirections(fromAddress, toAddress) {
	directions.load("from: " + fromAddress + " to: " + toAddress);
}

function handleErrors(){
	if (directions.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
		alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + directions.getStatus().code);
	else if (directions.getStatus().code == G_GEO_SERVER_ERROR)
		alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + directions.getStatus().code);
	else if (directions.getStatus().code == G_GEO_MISSING_QUERY)
		alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + directions.getStatus().code);
	else if (directions.getStatus().code == G_GEO_BAD_KEY)
		alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + directions.getStatus().code);
	else if (directions.getStatus().code == G_GEO_BAD_REQUEST)
		alert("A directions request could not be successfully parsed.\n Error code: " + directions.getStatus().code);
	else alert("An unknown error occurred.");
}