$(document).ready(function(){
	var contact_form = $('#contact_form'),
	   container     = $('#contact_container');
	
	create_map();
	
	contact_form.find('.submit').click(function(event) {
		var url   = contact_form.attr('action'),
				valid = true;
		
		contact_form.find('.field').each(function() {
			if (!validate_field(this)) {
				valid = false;
			}
		});
		
		if (valid) {
			$.post(url, contact_form.serializeArray(), function(reply) {
				container.html(reply);
			});
		}
		else {
			alert ('Please, be sure to fill out all of the fields. Thank you!');
		}
		
		return valid;
	});
});
					
function validate_field(obj) {
	if 	($.trim($(obj).val()) == '') {
		$(obj).css('background-color', '#ff9');
		return false;
	}
	
	$(obj).css('background-color', '#fff');
	return true;
}

var gmarkers = [];
var htmls    = [];
var i        = 0;

// arrays to hold variants of the info window html with get direction forms open
var to_htmls   = [];
var from_htmls = [];

// A function to create the map, and what not
function create_map() {
	if (GBrowserIsCompatible()) {
		var map = new GMap(document.getElementById('map'));
		
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.centerAndZoom(new GLatLng(43.041543,-71.063632),9);
		
		map.addOverlay(create_marker(
				new GLatLng(43.041543,-71.063632),
				'Telly\'s','235 Calef Hwy.<br/>Epping, NH 03042',''
			)
		);
	}
}

// A function to create the marker and set up the event window
function create_marker(point,name,address,html) {
	var marker = new GMarker(point);
	
	// The info window version with the "to here" form open
	to_htmls[i] =  '<div id="bubble_text"><br/>Directions:<br/> <b>To Restaurant</b> - <a href="javascript:from_here(' + i + 
	               ')">From Restaurant</a><br/>' +
	               '<br>Start address (include city and state):<form action="http://maps.google.com/maps" method="get" target="_blank">' +
	               '<input type="text" size=20 maxlength=40 name="saddr" id="saddr" value="" /><br>' +
								 '<input value="Get Directions" TYPE="submit">' +
								 '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + '"/></div>';
	
	// The info window version with the "to here" form open
	from_htmls[i] = '<div id="bubble_text"><br/>Directions:<br/> <a href="javascript:to_here(' + i + 
	                ')">To Restaurant</a> - <b>From Restaurant</b><br/>' +
	                '<br>End address (include city and state):<form action="http://maps.google.com/maps" method="get" target="_blank">' +
	                '<input type="text" size=20 maxlength=40 name="daddr" id="daddr" value="" /><br>' +
	                '<input value="Get Directions" type="SUBMIT">' +
	                '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() + '"/></div>';

	// The inactive version of the direction info
	var nav_html = '<div id="bubble_text"><strong>' + name + '</strong><br/>' + address + 
	               '<br/><br/>Directions:<br/> <a href="javascript:to_here(' + i + 
	               ')">To Restaurant</a> - <a href="javascript:from_here(' + i + 
	               ')">From Restaurant</a></div>';
	
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(nav_html);
	});
	
	// save the info we need to use later for the side_bar
	gmarkers[i] = marker;
	htmls[i]    = nav_html;
	i++;

	return marker;
}

function marker_click(i) {
	gmarkers[i].openInfoWindowHtml(htmls[i]);
}

function to_here(i) {
	gmarkers[i].openInfoWindowHtml(to_htmls[i]);
}

function from_here(i) {
	gmarkers[i].openInfoWindowHtml(from_htmls[i]);
}