var YWSID = "H9tbYW9Qk7mYiNYKn0Bc9A"; // common required parameter (api key)

var map = null;
var pano = null;
var icon = null;

/*
 * Creates the map object and calls setCenterAndBounds
 */
function load() {
	map = new GMap2(document.getElementById("map"));
	GEvent.addListener(map, "load", function() {updateMap();});	
	myPano = new GStreetviewPanorama(document.getElementById("pano"));
	GEvent.addListener(myPano, "error", handleNoFlash);
	map.setCenter(new GLatLng(34.0593,-118.2988),13);
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.setMapType(G_HYBRID_MAP);

	// setup our marker icon
	icon = new GIcon();
	icon.image = "images/marker_star.png";
	icon.shadow = "images/marker_shadow.png";
	icon.iconSize = new GSize(20, 29);
	icon.shadowSize = new GSize(38, 29);
	icon.iconAnchor = new GPoint(15, 29);
	icon.infoWindowAnchor = new GPoint(15, 3);
}

/*
 * Construct the URL to call for the API request
 */
function constructYelpURL() {
	var mapBounds = map.getBounds();
	var URL = "http://api.yelp.com/" +
		"business_review_search?"+
		"callback=" + "handleResults" +
		"&term=" + document.getElementById("term").value + 
		"&num_biz_requested=20" +
		"&location=90010" +
		"&radius=1.3" +
		"&ywsid=" + YWSID;
	return encodeURI(URL);
}

/*
 * Called on the form submission: updates the map by
 * placing markers on it at the appropriate places
 */
function updateMap() {
	// turn on spinner animation
	document.getElementById("spinner").style.visibility = 'visible';

	var yelpRequestURL = constructYelpURL();

	/* clear existing markers */
	map.clearOverlays();

	/* do the api request */
	var script = document.createElement('script');
	script.src = yelpRequestURL;
	script.type = 'text/javascript';
	var head = document.getElementsByTagName('head').item(0);
	head.appendChild(script);
	return false;
}

/*
 * If a sucessful API response is received, place
 * markers on the map.  If not, display an error.
 */
function handleResults(data) {
	// turn off spinner animation
	document.getElementById("spinner").style.visibility = 'hidden';
	if(data.message.text == "OK") {
		if (data.businesses.length == 0) {
			alert("Error: No businesses were found near that location");
			return;
		}
		for(var i=0; i<data.businesses.length; i++) {
			biz = data.businesses[i];
			createMarker(biz, new GLatLng(biz.latitude, biz.longitude), i);
		}
	}
	else {
		alert("Error: " + data.message.text);
	}
}

/*
 * Formats and returns the Info Window HTML 
 * (displayed in a balloon when a marker is clicked)
 */
function generateInfoWindowHtml(biz) {
	var text = '<div style="width:205px;height:115px;overflow:auto;"><p style="font-size: 11px;">';
	// image and rating
	text += '<img style="width:60px;height:60px;" align="left" class="businessimage" src="'+biz.photo_url+'"/>';
	// div start
	text += '';
	// name/url
	text += '<a href="'+biz.url+'" target="_blank">'+biz.name+'</a><br/><br/>';
	// stars
	text += '<img class="ratingsimage" src="'+biz.rating_img_url_small+'"/><br/>';
	// reviews
	text += biz.review_count + '&nbsp;reviews</p><p style="font-size: 10px;"><br/>';
	// categories
	text += formatCategories(biz.categories);
	// address
	text += biz.address1 + '<br/>';
	// address2
	if(biz.address2.length) 
		text += biz.address2+ '<br/>';
	// city, state and zip
	text += biz.city + ',&nbsp;' + biz.state + '&nbsp;' + biz.zip + '<br/>';
	// phone number
	if(biz.phone.length)
		text += formatPhoneNumber(biz.phone);
	// Read the reviews
	text += '<br/><a href="'+biz.url+'" target="_blank">Read the reviews &raquo;</a>';
	// div end
	text += '</p></div>';
	return text;
}

/*
 * Formats the categories HTML
 */
function formatCategories(cats) {
	var s = 'Categories: ';
	for(var i=0; i<cats.length; i++) {
		s+= cats[i].name;
		if(i != cats.length-1) s += ', ';
	}
	s += '<br/>';
	return s;
}

/*
 * Formats the phone number HTML
 */
function formatPhoneNumber(num) {
	if(num.length != 10) return '';
	return '(' + num.slice(0,3) + ') ' + num.slice(3,6) + '-' + num.slice(6,10) + '<br/>';
}

/*
 * Creates a marker for the given business and point
 */
function createMarker(biz, point, markerNum) {
	var infoWindowHtml = generateInfoWindowHtml(biz)
	var marker = new GMarker(point, icon);
	map.addOverlay(marker);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(infoWindowHtml);
		//marker.openInfoWindowHtml(infoWindowHtml, {maxHeight:100, autoScroll:true});
		myPano.setLocationAndPOV(point);
	});
	// automatically open first marker
	if (markerNum == 0 && document.getElementById("term").value != '') {
		marker.openInfoWindowHtml(infoWindowHtml);
		//marker.openInfoWindowHtml(infoWindowHtml, {maxHeight:100, autoScroll:true});
	}
}

function handleNoFlash(errorCode) {
	if (errorCode == FLASH_UNAVAILABLE) {
		alert("Error: Flash doesn't appear to be supported by your browser");
		return;
	}
}