/*
 * Google map generator for a list of locations 
 * Adam Greenbaum
 *
 * How this works
 * 1) Get a Google Maps API key for your website, which you can here: http://code.google.com/apis/maps/signup.html
 *
 * 2) At the top of your page, include the following line
 *    <script src="URL THAT GOOGLE GAVE YOU FOR MAPS CODE" type="text/javascript"></script>
 *
 * 3) Below that, include the following two script includes
 *    <script src="gmaps.js" type="text/javascript"></script>
 *    <script src="locations.js" type="text/javascript"></script>
 *
 * 4) Declare the location_objs variable like so, just below the above includes
 *      <script type="text/javascript">
 *        var location_objs = YOUR JSON OBJECT;
 *      </script>
 *       
 *    You absolutely must include this line for anything to work, and you must use the location_objs name
 *    What is JSON OBJECT? This is an array of JSON objects that must have the following fields
 *       name
 *       address
 *       city
 *       state
 *    The following fields are optional
 *       neighborhood
 *       website
 *
 *  5) Declare a div id="map" where you want the map. For example, put this somewhere
 *     <div id="map" style="width: 98%; height: 300px; float: left; border: 1px solid black"></div>
 *
 *  6) Declare a div id=location_list where you want a list of your locations.
 *     Included in this div should be div id=location_list_left and div id=location_list_right
 *     This allows for a two column (floated) layout
 *
 *  7) Declare a div id=directions_panel where you want the directions to be displayed.
 */

function load() {
	/* Load all the locations into the specified div */
	location_list_load();

 	/* Load all the locations into the gmap */
	gmap_load();
}

/*
 * Creates a two column layout for the location listings
 * Creates it in div id="location_list"
*/
function location_list_load(){
	var div = document.getElementById("location_list_left");
	if (!div){
		alert("Please create a div id='location_list'");
		return;
	}
	var newdiv;
	
	if (location_objs.length == 0) {
		div.innerHTML = "There are no locations with the given criteria.";
		return;
	}

	for (i = 0; i < location_objs.length; ++i) {
	 	if (i == Math.ceil(location_objs.length / 2)) {
	 	 	// Switch to the second column
			div = document.getElementById("location_list_right");
		}
		newdiv = document.createElement("div");
		newdiv.className = "location_listing";
		newdiv.id = "location" + i;
		newdiv.innerHTML = toHTML(location_objs[i]);
		div.appendChild(newdiv);
	}
	return;
}