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

    var map = null;
    var icon = null;
	var category = null;
	var loc = null;
	var dist = null;

    /*
     * Creates the map object and calls setCenterAndBounds
     * to instantiate it.
     */
    function load() {
        //map = new GMap2(document.getElementById("map"));
        //GEvent.addListener(map, "load", function() {updateMap();});    
        //map.setCenter(new GLatLng(37.7916,-122.4418),13);
       // map.addControl(new GLargeMapControl());
       // map.addControl(new GMapTypeControl());
        //map.setMapType(G_HYBRID_MAP);
                
        //if (window.attachEvent) window.attachEvent("onresize", function() { map.checkResize()} );
        //else if (window.addEventListener) window.addEventListener("resize", function() { map.checkResize()}, false);

        // 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=" + category + 
            "&num_biz_requested=10" +
			//"&category=dog_parks" +
            //"&tl_lat=" + mapBounds.getSouthWest().lat() +
            //"&tl_long=" + mapBounds.getSouthWest().lng() + 
            //"&br_lat=" + mapBounds.getNorthEast().lat() + 
            //"&br_long=" + mapBounds.getNorthEast().lng() +
			"&location=" + loc +
			"&radius=" + dist+
            "&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("Please select a category.");
                return;
            }
			
            for(var i=0; i<data.businesses.length; i++) {
                biz = data.businesses[i];
				var el = generateInfoWindowHtml(biz);
				//alert(el);
				document.getElementById("results-container").innerHTML+=el;
				//alert(el);
                //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 class="biz-result">';
		
			// biz result listing
			text += '<div id="biz-' + biz.id + '">';
			
				// image and rating
				text += '<img class="biz-image" src="'+biz.photo_url+'" />';
				
				// biz info
				text += '<div class="biz-info">';
					text += '<a class="biz-name" href="' + biz.url + '" target="_blank">' + biz.name + '</a><br />';
					
					// I want to keep the rating star and the "based on X reviews" in the same span class (biz-rating).
					// but how do i give it a new div or new span.. each line needs to have "text += ..." so..idk im all confused.
					text += '<span class="biz-rating"><img class="ratingsimage" src="'+biz.rating_img_url+'"/>';
						text +=	'<div class="reviews-based-on">&nbsp;based&nbsp;on&nbsp;';
							text += biz.review_count + '&nbsp;reviews</span></div><br/>';
					
					
							
							
					if(biz.phone.length)
						text += '<span class="biz-phone">' + formatPhoneNumber(biz.phone) + '</span>';
					if(biz.address1.length) 
						text += '<span class="biz-address">' + biz.address1+ '<br/>';
					if(biz.address2.length) 
						text += biz.address2+ '<br/>';
					// city, state and zip
					text += biz.city + ',&nbsp;' + biz.state + '&nbsp;' + biz.zip + '</span><br/>';
					if(biz.url)
						text += '<a class="biz-url" href="#" onclick="$(\'#reviews-modal-' + biz.id + '\').modal()">view reviews</a>&nbsp;|&nbsp;<a class="biz-url" href="' + biz.url + '" target="_blank">view more</a>';
					
					text += "&nbsp;|&nbsp;<a class='biz-url' target='_blank' href='http://maps.google.ca/maps?daddr=" + biz.address1 + "+" + biz.address2 + "+" + biz.city + "+" + biz.state + "+" + biz.zip + "&hl=en'>get directions</a>";
			text += '</div>';  /* biz-' + biz.id END */
			
			text += '<div style="clear:both;width:100%;height:1px;overflow:hidden;">&nbsp;</div>';
			text += '</div>'; /* clear div END */

        text += '</div>';   /* .biz-result END */
		
		/* Code for MODAL popup */
		text += '<div class="modal-popup" id="reviews-modal-' + biz.id + '">';
		
		text += '<span class="biz-rating-modal"><img class="ratingsimage-modal" src="'+biz.rating_img_url+'"/>&nbsp;based&nbsp;on&nbsp;';
		text += biz.review_count + '&nbsp;reviews:</span><br/>';
		// Read the reviews
		for(var i=0;i<biz.reviews.length;i++){
			text +="<div class='review-wrapper'>";
			text += "<p>" + biz.reviews[i].text_excerpt;
			text += '(<a href="' + biz.reviews[i].url + '" target="_blank">more</a>)</p></div>';/* .review-wrapper END */
		}
		
		text += '<br/><a class="biz-url-modal" href="' + biz.url + '" target="_blank">view more reviews</a>';
		
		text += '</div>'; /* .modal-popup END */
		
        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 neighborhoods HTML
     */
    function formatNeighborhoods(neighborhoods) {
        s = 'Neighborhoods: ';
        for(var i=0; i<neighborhoods.length; i++) {
            s += '<a href="' + neighborhoods[i].url + '" target="_blank">' + neighborhoods[i].name + '</a>';
            if (i != neighborhoods.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, {maxWidth:400});
        });
        // automatically open first marker
        if (markerNum == 0)
            marker.openInfoWindowHtml(infoWindowHtml, {maxWidth:400});
    }