vvtommy/gist_usage_example.js

## gist_usage_example.js
/**
 *  debug function
 *  dumps out objects
 * @param  {object} obj object that needs to bee printed to the log
 * @return {string}
 */function dump(obj) {
    var out = '';
    for (var i in obj) {
        out += i + ": " + obj[i] + "\n";
    }
    console.log(out);
}
	/**
	 * infoBubble Variable
	 * This variable is globally defined for defaults that are loaded.
	 */
	var infoBubbles = [];
	/**
	 * array of all of the markers that are on the map
	 *
	 * @type {Array}
	 * @author Mike DeVita
	 * @copyright 2011 MapIT USA
	 * @category map_Js
	 */
	var markersArray = [];
	/**
	 * array of all of the sidebar items for all of the markers on the map
	 *
	 * @type {Array}
	 * @author Mike DeVita
	 * @copyright 2011 MapIT USA
	 * @category map_Js
	 */
	var sidebarHtmlArray = [];


	var latLngList = [];
	var tabCount = 0;
	/**
	 * setPoints(locations)
	 *
	 * sets the marker, infoBubble and sidebarItem based on the locations
	 * that were returned from the JSON query.
	 *
	 * @param {array} locations array of all of the points, and their settings/htmlf
	 *
	 * @author Mike DeVita
	 * @author Google Maps API
	 * @copyright 2011 MapIT USA
	 * @category map_js
	 */
	function setPoints(locations){
		infoBubble = new InfoBubble({
			map: map,
			content: 'placeholder',
			disableAutoPan: false,
			hideCloseButton: false,
			arrowPosition: 30,
			padding:12,
			arrowStyle: 0
		});

		for (var i = 0; i < locations.length; i++) {
			/** @type {array} reassigns locations array to be point, isolates it to the setPoints() function */
			var point = locations;
			/** @type {google} generates Googles API form of the lat lng passed from var point */
		    var myLatLng = new google.maps.LatLng(point[i].lat, point[i].lng);

		    latLngList.push(myLatLng);

		    /**
		     * marker variable, stores all of the information pertaining to a specific marker
		     * this variable creates the marker, places it on the map and then also sets some
		     * custom options for the infoBubbles.
		     *
		     * @type {google}
		     */
			var marker = new google.maps.Marker({
				position: myLatLng,
				map: map,
				animation: google.maps.Animation.DROP,
				icon: point[i].marker_icon,
				infoBubble_minWidth: point[i].min_width,
				infoBubble_maxWidth: point[i].max_width,
				infoBubble_minHeight: point[i].min_height,
				infoBubble_maxHeight: point[i].max_height,
				infoBubble_tabs: point[i].tabs
			});
			/** push the marker to the markersArray to delete or show the overlays */
			markersArray.push(marker);

			var sidebarItem = point[i].sidebarHtmlView;
			sidebarHtmlArray.push(sidebarItem);
			/**
			 * add the listeners for the markerClicks and the sideBarClicks
			 *
			 * @type {google}
			 * @todo eventDomListener does not work yet, this is the click listener of the sidebar item's
			 */
	    	google.maps.event.addListener(marker, 'click', function(){
	    		var pan = -70;
	    		map.panBy(0,pan);
	    		console.log('panned by '+pan);
	    		/** remove all of the tabs from the infobubble, early prototype */
	    		if (tabCount > 0){
		    		for (var i = 0; i < tabCount; i++){
	    				infoBubble.removeTab(0);
		    		}
		    		tabCount = 0;
		    	}

	    		/** setup the min/max width and heights for the bubble */
	    		infoBubble.setMinWidth(this.infoBubble_minWidth);
				infoBubble.setMaxWidth(this.infoBubble_maxWidth);
				infoBubble.setMinHeight(this.infoBubble_minHeight);
				infoBubble.setMaxHeight(this.infoBubble_maxHeight);

				var tabs = this.infoBubble_tabs;

				/** @type {Number} set the counter to 1, since tab index starts at 1 */
				for (var ii = 0; ii < tabs.length; ii++) {
					infoBubble.addTab(tabs[ii].tabTitle, tabs[ii].tabContent);
					/** count the amount of tabs there are */
					tabCount++;
				}
	    		/** open the infoBubble */
	    		infoBubble.open(map, this);

	    	});
		}

		var bounds = new google.maps.LatLngBounds();
		//  Go through each...
		for (var i = 0, LtLgLen = latLngList.length; i < LtLgLen; i++) {
		  //  And increase the bounds to take this point
		  bounds.extend (latLngList[i]);
		}
		//  Fit these bounds to the map
		map.fitBounds (bounds);
		google.maps.event.addListenerOnce(map, "idle", function() {
		  if (map.getZoom() > 12) map.setZoom(12);
		});
	}


	function handleMarkerClick(marker,index) {
		return function() {
			if (!infoBubbles[index].isOpen()) {
				infoBubbles[index].open(map, marker);
				map.panBy(0,-70);
			}else{
				infoBubbles[index].close(map, marker);
			}
		}
	}
	function launchInfoWindow(x) {

	    google.maps.event.trigger(markersArray[x], "click");
	}
	/**
	 * addmarker(location)
	 *
	 * adds the marker to the map and pushes the marker
	 * to the end of the markersArray
	 *
	 * @param {google} location LatLng of where the marker should be put
	 *
	 * @author Mike DeVita
	 * @author Google API
	 * @copyright 2011 MapIT USA
	 * @category map_js
	 */
	function addMarker(location, marker_icon){
		marker = new google.maps.Marker({
			position: location,
			map: map,
			animation: google.maps.Animation.DROP,
			icon: marker_icon
		});
		markersArray.push(marker);
	}

	/**
	 * addSidebarItem(sidebarItem, i)
	 *
	 * appends a div of the point's html to the right hand
	 * sidebar.
	 *
	 * @param {html} sidebarItem html string that was generated by the controller
	 * @param {numerical} i numerical index to link the sidebarItem with the map point
	 */
	function addSidebarItem(sidebarItem, i){
		$(document).ready(function(){
			$('#map_items').append('<div id="point_'+i+'" onClick="google.maps.event.trigger(markersArray['+i+'], \'click\');" class="item">'+sidebarItem+'</div>');
		});

	}

	/**
	 * showOverlays()
	 *
	 * display the Overlays that are in markersArray, infoBubbles, sidebarHtmlArray
	 *
	 * @author Mike DeVita
	 * @author Google API
	 * @copyright 2011 MapIT USA
	 * @category map_js
	 *
	 * @todo add display of infoBUbbles
	 */
	function showOverlays() {
		/** show the markers */
		if (markersArray) {
			for (i in markersArray) {
				markersArray[i].setMap(map);
			}
		}
		/** show the side bar items*/
		if (sidebarHtmlArray) {
			for (i in sidebarHtmlArray) {
				var sidebarItem = sidebarHtmlArray[i];
				addSidebarItem(sidebarItem, i);
			}
		}
	}

	/**
	 * deleteOverlays()
	 *
	 * delete all of the Overlays that are in markersArray, infoBubbles, sidebarHtmlArray
	 *
	 * @author Mike DeVita
	 * @author Google API
	 * @copyright 2011 MapIT USA
	 * @category map_js
	 */
	function deleteOverlays() {
		/** if markersArray is set, remove the marker off the map, and set it to length 0 */
		if (markersArray) {
			for (i in markersArray) {
				markersArray[i].setMap(null);
			}
			markersArray.length = 0;
		}
		/** if sidebarHtmlArray is set, set it to length 0 */
	  	if (sidebarHtmlArray){
			sidebarHtmlArray.length = 0;
			$('#map_items .item').detach();
		}
	}

	/**
	 * showLoading()
	 *
	 * shows the loading animation for the sidebar and map points
	 * this helps to notify the user that the content they are trying
	 * to load is indeed loading.
	 *
	 * @author Jonathan Sampson
	 */
	function showLoading() {
		$("#loading").show();
		$("#sidebar-loading").show();
	}

	/**
	 * hideLoading()
	 *
	 * hides the loading animation for the sidebar and map points
	 * this helps to notify the user that the content they are trying to load
	 * has been loaded.
	 *
	 * @author Jonathan Sampson
	 */
	function hideLoading() {
		$("#loading").hide();
		$("#sidebar-loading").hide();
	}

	/**
	 * showError()
	 *
	 * this handles any errors that may be returned from the controller
	 * things such as no rows returned.
	 *
	 * @return {none}
	 * @author Mike DeVita
	 */
	function showError(message){

	}

	function hideError(){
		$("#loading").hide();
	}
	$(document).ready(function(){
		/**
		 * JSON/AJAX Submit for Categories
		 *
		 * On submit of #submit JSON query site/process controller
		 * returns json encoded arrays of points and their lat/lng, html and sidebarHtml
		 *
		 * @return {json_array}
		 *
		 * @author Mike DeVita
		 * @author Google API
		 * @copyright 2011 MapIT USA
		 * @category map_js
		 */
		$('.category').click(function(){
			/** make sure the checkbox that was clicked is checked, dont want to submit nothing, now do we? */
				var items = $('#categoryList').serialize();
				/** animate the sidebar, close it onclick, hides the sidebar to show the full map */
				$('#button').click();
				/** delete the overlays from the map, effectively starts fresh */
				deleteOverlays();
				/** just in case were loading a crap ton of points, throw up a loading notice */
				showLoading();
				/** set a timeout of 275ms, this is so the sidebar collapses first.. adds to the ui magic */
				setTimeout(function(){
					/** ajax post call to the controller */
					$.post("index/process/categorylist.html", { "items": items },
					function(data){
						/** @type {numerical} if the returned errorStatus is == 1 */
						if (data.messageType == 'error'){
							/** hide the loading notice */
							hideLoading();
							/** generate the error message, onClick dismiss the error message */
							$.jGrowl(data.message, { theme: data.messageType });

							/** generate the click event, to show the sidebar again */
							$('#button').click();
							$('#map-legend-button').click();
						/** no errorStatus, so continue with populating map */
						}else{
							/** @type {object} the returned point's information, set it to something more related */
							var points = data;
							/** setup the points, infobubbles, and sidebar */
						    setPoints(points);
						    $('#map-legend-button').click();
						    /** display the overlays (sidebar, infobbubles, markers) */
						    showOverlays();
						    /** throw a class on every odd row of the sidebar */
						    $('.item:odd').addClass('sidebarAltRow');
						    /** everythings done, hide the loading notice */
						    hideLoading();
						}
					}, "json"); //END Ajax post call to controller
				}, 275); //END TIMEOUT
		}); //END SUBMIT CLICK FOR AJAX

		/**
		 * JSON/AJAX Submit for Company Name
		 *
		 * on enter keypress, Hide the sidebar, delete everything on the map,
		 * show the loading notice, submit the form to index/process/companyname.html
		 * pass the serialized form of the input textbox. get the returned json
		 * data of the points, set the points up on the map, and show the overlays
		 * then alternate the row coloring on the sidebar. and Finally hide the
		 * loading notice.
		 *
		 * @param  {numerical} e ascii keycode id of key that was pressed
		 * @return {false}
		 */
		$("#search-by-companyname-list").autocomplete({
            minLength: 1,
            source: function(req, add){
                $.ajax({
                    url: 'index/process/companyname-lookup.html',
                    dataType: 'json',
                    type: 'POST',
                    data: req,
                    error: function(data){
                    	console.log('error');
                    },
                    success: function(data){
                        if (data.messageType == 'error'){
                           $.jGrowl(data.message, { theme: data.messageType });
                        }else{
                        	console.log('success, from line 372 mapit.js');
                        	var companynames = [];
                        	$.each(data, function(i, val){
                        		companynames.push(val.companyname);
                        	});
                        	add(companynames);
                        	$(".ui-menu-item:odd").addClass("lookupAltRow");
                        }
                    }
                });
            },
            select: function(e, ui){
				var companyname = ui.item.value;
				console.log('processed lin 383 var companyname: ');
				dump(companyname);
              	console.log('success, from line 383 mapit.js | ');
            }
        });


		$('#search-directory-form').submit(function(e) {
			var queryString = $('#search-by-companyname-list').val();
			/** animate the sidebar, close it onclick, hides the sidebar to show the full map */
			$('#button').click();
			$('#map-legend-button').click();
			/** delete the overlays from the map, effectively starts fresh */
			deleteOverlays();
			/** just in case were loading a crap ton of points, throw up a loading notice */
			showLoading();
			/** set a timeout of 275ms, this is so the sidebar collapses first.. adds to the ui magic */
			setTimeout(function(){
			/** ajax post call to the controller */
			$.post("index/process/companyname.html", { "items": queryString },
				function(data){
					/** @type {numerical} if the returned errorStatus is == 1 */
					if (data.messageType == 'error'){
						/** hide the loading notice */
						hideLoading();
						/** generate the error message, onClick dismiss the error message */
						$.jGrowl(data.message, { theme: data.messageType });
						/** generate the click event, to show the sidebar again */
						$('#button').click();
						$('#map-legend-button').click();

					/** no errorStatus, so continue with populating map */
					}else{
						/** @type {object} the returned point's information, set it to something more related */
						var points = data;
						/** setup the points, infobubbles, and sidebar */
					    setPoints(points);
					    $('#map-legend-button').click();
					    /** display the overlays (sidebar, infobbubles, markers) */
					    showOverlays();

					    /** throw a class on every odd row of the sidebar */
					    $('.item:odd').addClass('sidebarAltRow');
					    /** everythings done, hide the loading notice */
					    hideLoading();
					}
				}, "json"); //END Ajax post call to controller
			}, 275); //END TIMEOUT
			e.preventDefault();
			e.stopPropagation()
		});

		/**
		 * Reset MapIt Function
		 *
		 * Onclick of #reset, deleteOverlays, clear textboxes, and
		 * uncheck all checkboxes.
		 *
		 * @return {none}
		 */
		$('#reset').click(function(){
			$('#categoryList').find('input[type=checkbox]:checked').removeAttr('checked');
			$('#search-directory-form').clearForm();
			deleteOverlays();
		}); //END RESET CLICK FOR RESETTING POINTS AND CATEGORIES

	});

	/** load the init() function onLoad of the DOM Window */
	google.maps.event.addDomListener(window, 'load', init);
	/**
	* debug function
	* dumps out objects
	* @param {object} obj object that needs to bee printed to the log
	* @return {string}
	*/function dump(obj) {
	var out = '';
	for (var i in obj) {
	out += i + ": " + obj[i] + "\n";
	}
	console.log(out);
	}
	/**
	* infoBubble Variable
	* This variable is globally defined for defaults that are loaded.
	*/
	var infoBubbles = [];
	/**
	* array of all of the markers that are on the map
	*
	* @type {Array}
	* @author Mike DeVita
	* @copyright 2011 MapIT USA
	* @category map_Js
	*/
	var markersArray = [];
	/**
	* array of all of the sidebar items for all of the markers on the map
	*
	* @type {Array}
	* @author Mike DeVita
	* @copyright 2011 MapIT USA
	* @category map_Js
	*/
	var sidebarHtmlArray = [];


	var latLngList = [];
	var tabCount = 0;
	/**
	* setPoints(locations)
	*
	* sets the marker, infoBubble and sidebarItem based on the locations
	* that were returned from the JSON query.
	*
	* @param {array} locations array of all of the points, and their settings/htmlf
	*
	* @author Mike DeVita
	* @author Google Maps API
	* @copyright 2011 MapIT USA
	* @category map_js
	*/
	function setPoints(locations){
	infoBubble = new InfoBubble({
	map: map,
	content: 'placeholder',
	disableAutoPan: false,
	hideCloseButton: false,
	arrowPosition: 30,
	padding:12,
	arrowStyle: 0
	});

	for (var i = 0; i < locations.length; i++) {
	/** @type {array} reassigns locations array to be point, isolates it to the setPoints() function */
	var point = locations;
	/** @type {google} generates Googles API form of the lat lng passed from var point */
	var myLatLng = new google.maps.LatLng(point[i].lat, point[i].lng);

	latLngList.push(myLatLng);

	/**
	* marker variable, stores all of the information pertaining to a specific marker
	* this variable creates the marker, places it on the map and then also sets some
	* custom options for the infoBubbles.
	*
	* @type {google}
	*/
	var marker = new google.maps.Marker({
	position: myLatLng,
	map: map,
	animation: google.maps.Animation.DROP,
	icon: point[i].marker_icon,
	infoBubble_minWidth: point[i].min_width,
	infoBubble_maxWidth: point[i].max_width,
	infoBubble_minHeight: point[i].min_height,
	infoBubble_maxHeight: point[i].max_height,
	infoBubble_tabs: point[i].tabs
	});
	/** push the marker to the markersArray to delete or show the overlays */
	markersArray.push(marker);

	var sidebarItem = point[i].sidebarHtmlView;
	sidebarHtmlArray.push(sidebarItem);
	/**
	* add the listeners for the markerClicks and the sideBarClicks
	*
	* @type {google}
	* @todo eventDomListener does not work yet, this is the click listener of the sidebar item's
	*/
	google.maps.event.addListener(marker, 'click', function(){
	var pan = -70;
	map.panBy(0,pan);
	console.log('panned by '+pan);
	/** remove all of the tabs from the infobubble, early prototype */
	if (tabCount > 0){
	for (var i = 0; i < tabCount; i++){
	infoBubble.removeTab(0);
	}
	tabCount = 0;
	}

	/** setup the min/max width and heights for the bubble */
	infoBubble.setMinWidth(this.infoBubble_minWidth);
	infoBubble.setMaxWidth(this.infoBubble_maxWidth);
	infoBubble.setMinHeight(this.infoBubble_minHeight);
	infoBubble.setMaxHeight(this.infoBubble_maxHeight);

	var tabs = this.infoBubble_tabs;

	/** @type {Number} set the counter to 1, since tab index starts at 1 */
	for (var ii = 0; ii < tabs.length; ii++) {
	infoBubble.addTab(tabs[ii].tabTitle, tabs[ii].tabContent);
	/** count the amount of tabs there are */
	tabCount++;
	}
	/** open the infoBubble */
	infoBubble.open(map, this);

	});
	}

	var bounds = new google.maps.LatLngBounds();
	// Go through each...
	for (var i = 0, LtLgLen = latLngList.length; i < LtLgLen; i++) {
	// And increase the bounds to take this point
	bounds.extend (latLngList[i]);
	}
	// Fit these bounds to the map
	map.fitBounds (bounds);
	google.maps.event.addListenerOnce(map, "idle", function() {
	if (map.getZoom() > 12) map.setZoom(12);
	});
	}


	function handleMarkerClick(marker,index) {
	return function() {
	if (!infoBubbles[index].isOpen()) {
	infoBubbles[index].open(map, marker);
	map.panBy(0,-70);
	}else{
	infoBubbles[index].close(map, marker);
	}
	}
	}
	function launchInfoWindow(x) {

	google.maps.event.trigger(markersArray[x], "click");
	}
	/**
	* addmarker(location)
	*
	* adds the marker to the map and pushes the marker
	* to the end of the markersArray
	*
	* @param {google} location LatLng of where the marker should be put
	*
	* @author Mike DeVita
	* @author Google API
	* @copyright 2011 MapIT USA
	* @category map_js
	*/
	function addMarker(location, marker_icon){
	marker = new google.maps.Marker({
	position: location,
	map: map,
	animation: google.maps.Animation.DROP,
	icon: marker_icon
	});
	markersArray.push(marker);
	}

	/**
	* addSidebarItem(sidebarItem, i)
	*
	* appends a div of the point's html to the right hand
	* sidebar.
	*
	* @param {html} sidebarItem html string that was generated by the controller
	* @param {numerical} i numerical index to link the sidebarItem with the map point
	*/
	function addSidebarItem(sidebarItem, i){
	$(document).ready(function(){
	$('#map_items').append('<div id="point_'+i+'" onClick="google.maps.event.trigger(markersArray['+i+'], \'click\');" class="item">'+sidebarItem+'</div>');
	});

	}

	/**
	* showOverlays()
	*
	* display the Overlays that are in markersArray, infoBubbles, sidebarHtmlArray
	*
	* @author Mike DeVita
	* @author Google API
	* @copyright 2011 MapIT USA
	* @category map_js
	*
	* @todo add display of infoBUbbles
	*/
	function showOverlays() {
	/** show the markers */
	if (markersArray) {
	for (i in markersArray) {
	markersArray[i].setMap(map);
	}
	}
	/** show the side bar items*/
	if (sidebarHtmlArray) {
	for (i in sidebarHtmlArray) {
	var sidebarItem = sidebarHtmlArray[i];
	addSidebarItem(sidebarItem, i);
	}
	}
	}

	/**
	* deleteOverlays()
	*
	* delete all of the Overlays that are in markersArray, infoBubbles, sidebarHtmlArray
	*
	* @author Mike DeVita
	* @author Google API
	* @copyright 2011 MapIT USA
	* @category map_js
	*/
	function deleteOverlays() {
	/** if markersArray is set, remove the marker off the map, and set it to length 0 */
	if (markersArray) {
	for (i in markersArray) {
	markersArray[i].setMap(null);
	}
	markersArray.length = 0;
	}
	/** if sidebarHtmlArray is set, set it to length 0 */
	if (sidebarHtmlArray){
	sidebarHtmlArray.length = 0;
	$('#map_items .item').detach();
	}
	}

	/**
	* showLoading()
	*
	* shows the loading animation for the sidebar and map points
	* this helps to notify the user that the content they are trying
	* to load is indeed loading.
	*
	* @author Jonathan Sampson
	*/
	function showLoading() {
	$("#loading").show();
	$("#sidebar-loading").show();
	}

	/**
	* hideLoading()
	*
	* hides the loading animation for the sidebar and map points
	* this helps to notify the user that the content they are trying to load
	* has been loaded.
	*
	* @author Jonathan Sampson
	*/
	function hideLoading() {
	$("#loading").hide();
	$("#sidebar-loading").hide();
	}

	/**
	* showError()
	*
	* this handles any errors that may be returned from the controller
	* things such as no rows returned.
	*
	* @return {none}
	* @author Mike DeVita
	*/
	function showError(message){

	}

	function hideError(){
	$("#loading").hide();
	}
	$(document).ready(function(){
	/**
	* JSON/AJAX Submit for Categories
	*
	* On submit of #submit JSON query site/process controller
	* returns json encoded arrays of points and their lat/lng, html and sidebarHtml
	*
	* @return {json_array}
	*
	* @author Mike DeVita
	* @author Google API
	* @copyright 2011 MapIT USA
	* @category map_js
	*/
	$('.category').click(function(){
	/** make sure the checkbox that was clicked is checked, dont want to submit nothing, now do we? */
	var items = $('#categoryList').serialize();
	/** animate the sidebar, close it onclick, hides the sidebar to show the full map */
	$('#button').click();
	/** delete the overlays from the map, effectively starts fresh */
	deleteOverlays();
	/** just in case were loading a crap ton of points, throw up a loading notice */
	showLoading();
	/** set a timeout of 275ms, this is so the sidebar collapses first.. adds to the ui magic */
	setTimeout(function(){
	/** ajax post call to the controller */
	$.post("index/process/categorylist.html", { "items": items },
	function(data){
	/** @type {numerical} if the returned errorStatus is == 1 */
	if (data.messageType == 'error'){
	/** hide the loading notice */
	hideLoading();
	/** generate the error message, onClick dismiss the error message */
	$.jGrowl(data.message, { theme: data.messageType });

	/** generate the click event, to show the sidebar again */
	$('#button').click();
	$('#map-legend-button').click();
	/** no errorStatus, so continue with populating map */
	}else{
	/** @type {object} the returned point's information, set it to something more related */
	var points = data;
	/** setup the points, infobubbles, and sidebar */
	setPoints(points);
	$('#map-legend-button').click();
	/** display the overlays (sidebar, infobbubles, markers) */
	showOverlays();
	/** throw a class on every odd row of the sidebar */
	$('.item:odd').addClass('sidebarAltRow');
	/** everythings done, hide the loading notice */
	hideLoading();
	}
	}, "json"); //END Ajax post call to controller
	}, 275); //END TIMEOUT
	}); //END SUBMIT CLICK FOR AJAX

	/**
	* JSON/AJAX Submit for Company Name
	*
	* on enter keypress, Hide the sidebar, delete everything on the map,
	* show the loading notice, submit the form to index/process/companyname.html
	* pass the serialized form of the input textbox. get the returned json
	* data of the points, set the points up on the map, and show the overlays
	* then alternate the row coloring on the sidebar. and Finally hide the
	* loading notice.
	*
	* @param {numerical} e ascii keycode id of key that was pressed
	* @return {false}
	*/
	$("#search-by-companyname-list").autocomplete({
	minLength: 1,
	source: function(req, add){
	$.ajax({
	url: 'index/process/companyname-lookup.html',
	dataType: 'json',
	type: 'POST',
	data: req,
	error: function(data){
	console.log('error');
	},
	success: function(data){
	if (data.messageType == 'error'){
	$.jGrowl(data.message, { theme: data.messageType });
	}else{
	console.log('success, from line 372 mapit.js');
	var companynames = [];
	$.each(data, function(i, val){
	companynames.push(val.companyname);
	});
	add(companynames);
	$(".ui-menu-item:odd").addClass("lookupAltRow");
	}
	}
	});
	},
	select: function(e, ui){
	var companyname = ui.item.value;
	console.log('processed lin 383 var companyname: ');
	dump(companyname);
	console.log('success, from line 383 mapit.js \| ');
	}
	});


	$('#search-directory-form').submit(function(e) {
	var queryString = $('#search-by-companyname-list').val();
	/** animate the sidebar, close it onclick, hides the sidebar to show the full map */
	$('#button').click();
	$('#map-legend-button').click();
	/** delete the overlays from the map, effectively starts fresh */
	deleteOverlays();
	/** just in case were loading a crap ton of points, throw up a loading notice */
	showLoading();
	/** set a timeout of 275ms, this is so the sidebar collapses first.. adds to the ui magic */
	setTimeout(function(){
	/** ajax post call to the controller */
	$.post("index/process/companyname.html", { "items": queryString },
	function(data){
	/** @type {numerical} if the returned errorStatus is == 1 */
	if (data.messageType == 'error'){
	/** hide the loading notice */
	hideLoading();
	/** generate the error message, onClick dismiss the error message */
	$.jGrowl(data.message, { theme: data.messageType });
	/** generate the click event, to show the sidebar again */
	$('#button').click();
	$('#map-legend-button').click();

	/** no errorStatus, so continue with populating map */
	}else{
	/** @type {object} the returned point's information, set it to something more related */
	var points = data;
	/** setup the points, infobubbles, and sidebar */
	setPoints(points);
	$('#map-legend-button').click();
	/** display the overlays (sidebar, infobbubles, markers) */
	showOverlays();

	/** throw a class on every odd row of the sidebar */
	$('.item:odd').addClass('sidebarAltRow');
	/** everythings done, hide the loading notice */
	hideLoading();
	}
	}, "json"); //END Ajax post call to controller
	}, 275); //END TIMEOUT
	e.preventDefault();
	e.stopPropagation()
	});

	/**
	* Reset MapIt Function
	*
	* Onclick of #reset, deleteOverlays, clear textboxes, and
	* uncheck all checkboxes.
	*
	* @return {none}
	*/
	$('#reset').click(function(){
	$('#categoryList').find('input[type=checkbox]:checked').removeAttr('checked');
	$('#search-directory-form').clearForm();
	deleteOverlays();
	}); //END RESET CLICK FOR RESETTING POINTS AND CATEGORIES

	});

	/** load the init() function onLoad of the DOM Window */
	google.maps.event.addDomListener(window, 'load', init);