// JavaScript Document
 var YWSID = "jTERxei5s3VStFWLLFqPdA"; // common required parameter (api key)

    var map = null;
    var icon = null;
	
	var trafficInfo = new GTrafficOverlay();
    var toggleState = 0;

    var markerArray=new Array();
    var bizArray=new Array(); 
         
    var mkrIdx=0;
    
    var start;
    
    /*
     * Creates the map object and calls setCenterAndBounds
     * to instantiate it.
     */
    function load() {
        map = new GMap2(document.getElementById("map")); 
        map.setCenter(new GLatLng(37.7916,-122.4418),13);	  
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());     
                
        //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 = "http://www.nomek.net/ecommerce/repository/content/web2.0/ypImg/marker_star.png";
        icon.shadow = "http://www.nomek.net/ecommerce/repository/content/web2.0/ypImg//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=10" +
            "&tl_lat=" + mapBounds.getSouthWest().lat() +
            "&tl_long=" + mapBounds.getSouthWest().lng() + 
            "&br_lat=" + mapBounds.getNorthEast().lat() + 
            "&br_long=" + mapBounds.getNorthEast().lng() +
            //"&category=Food"+
            "&ywsid=" + YWSID;
        return encodeURI(URL);
    }


   function locateAddress() {
      var address = document.getElementById("address").value;
      var geocoder = new GClientGeocoder();
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);		  
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
              start = point;
            }
          }
        );
      }
    }

 function toggleTraffic() {
      if (toggleState == 1) {
        map.removeOverlay(trafficInfo);
        toggleState = 0;
      } else {
        map.addOverlay(trafficInfo);
        toggleState = 1;
      }
    }
    /*
     * Called on the form submission: updates the map by
     * placing markers on it at the appropriate places
     */
    function updateMap() {
        // turn on spinner animation
		
		
		clearResults();
		var toggleState = 0;
		
        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.
        
        script.type = 'text/javascript';
        var head = document.getElementsByTagName('head').item(0);
        head.appendChild(script);
        
        return false;
    }


function clear()
	{
	  var distance= document.getElementById("distanceResult");
	  var duration= document.getElementById("durationResult");
	  var numGeo= document.getElementById("numGeo"); 
	  
	    distance.innerHTML ="";
	    duration.innerHTML ="";
		numGeo.innerHTML ="";
	}


    /*
     * 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';
        
        
        mkrIdx=0;
        
        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);
               
               bizArray[i]=data.businesses[i];
               
                mkrIdx=mkrIdx+1;
            }
			
			processMarkers(markerArray);
			
        }
        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="marker">';

        // image and rating
        text += '<img class="businessimage" src="'+biz.photo_url+'"/>';

        // div start
        text += '<div class="businessinfo">';
        // name/url
        text += '<a href="'+biz.url+'" target="_blank">'+biz.name+'</a><br/>';
        // stars
        text += '<img class="ratingsimage" src="'+biz.rating_img_url_small+'"/>&nbsp;based&nbsp;on&nbsp;';
        // reviews
        text += biz.review_count + '&nbsp;reviews<br/><br />';
        // categories
        text += formatCategories(biz.categories);
        // neighborhoods
        if(biz.neighborhoods.length)
            text += formatNeighborhoods(biz.neighborhoods);
        // 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 »</a><br/>';
        // div end
        text += '</div></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 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);
        
        markerArray[mkrIdx]=marker;
        
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(infoWindowHtml, {maxWidth:400});
        });
        // automatically open first marker
        if (markerNum == 0)
            marker.openInfoWindowHtml(infoWindowHtml, {maxWidth:400});
    }
	
	
	
	  function processMarkers(markers) {
      // note: markers is an array of LocalResult
	  
	 // clear();
	
	
      
      
	  showResults(markers, 0);
	  //bizArray=new Array(); 
	
    }



 
    




function clearResults()
{
	
  bizArray=new Array(); 
  
  var container= document.getElementById("resultUiContainer");
  
  container.innerHTML="";


}


 /*formatResults(dir,bizName,tr)

  {     
        
        var td = document.createElement('td');
     
        td.appendChild(document.createTextNode(bizName));
        tr.appendChild(td);
        var td = document.createElement('td');
        td.innerHTML = dir.getDistance().html;
        tr.appendChild(td);
        
        var td = document.createElement('td');
     
        tr.appendChild(td);
        var td2 = document.createElement('td');
        td2.innerHTML = dir.getDuration().html;
        tr.appendChild(td2);
        
       
 }*/
        

    function showResults(markers, num) {
    
   // clearResults();
   
      var lat = markers[num].getLatLng().lat();
      var lng = markers[num].getLatLng().lng();
      
      
      var dir = new GDirections();
      GEvent.addListener(dir, "load", function() {
      
      
      
      var container= document.getElementById("resultUiContainer");
	 
	  var panelDiv = document.createElement('div');
	
	 
	   panelDiv.setAttribute('class','CollapsiblePanel');
	   panelDiv.setAttribute('id','CollapsiblePanel'+num);
	  
	   
	   
	   var tabDiv = document.createElement('div');
	    tabDiv.setAttribute('class','CollapsiblePanelTab');
	   	   
		   
	   var html='<div class="tabBizName" >';
	   html+=bizArray[num].name;
	   html+='</div><div class="tabDir">' 
	   html+=dir.getDistance().html;
	   html+='&nbsp;';
	   html+='&nbsp;';
	   html+='&nbsp;';
	   
	   //html+='<br>';
       html+=dir.getDuration().html;
	   //html+=' </p> ';
	   html+='</div>';
		 
	   tabDiv.innerHTML=html;
	   
	   
	   
	   var table = document.createElement('div');	   
	   
	   table.setAttribute('width','100%');
     
	   
	  
	   
	   
	   var panContDiv = document.createElement('div');
	    panContDiv.setAttribute('class','CollapsiblePanelContent');
	    panContDiv.setAttribute('id','CollapsiblePanelContent'+num);
	   
	   panContDiv.innerHTML=generateInfoWindowHtml(bizArray[num]);
	   
	   
	   panelDiv.appendChild(tabDiv);
	   panelDiv.appendChild(panContDiv);	   
	   container.appendChild (panelDiv);
	  
	  if(num<1)   
	  {var oCollapsiblePanel = new Spry.Widget.CollapsiblePanel("CollapsiblePanel"+num, {contentIsOpen:true});}
	  
	  else
	{ var oCollapsiblePanel = new Spry.Widget.CollapsiblePanel("CollapsiblePanel"+num, {contentIsOpen:false});
	  }
	  
	    container.appendChild (panelDiv);
	  
	  
	  
        if ((num+1) < markers.length) showResults(markers, (num+1));
      });
      dir.load("from: " + start.lat() + "," + start.lng()  + " to: " + lat + "," + lng);
    }
	
	
	
	
	
	 function getDistances(markers, tbody, num) {
      var lat = markers[num].getLatLng().lat();
      var lng = markers[num].getLatLng().lng();
      
      
      var dir = new GDirections();
      GEvent.addListener(dir, "load", function() {
        var tr = document.createElement('tr');
        var td = document.createElement('td');
       // td.appendChild(document.createTextNode(markers[num].result.titleNoFormatting));
        td.appendChild(document.createTextNode(bizArray[num].name));
        tr.appendChild(td);
        var td = document.createElement('td');
        td.innerHTML = dir.getDistance().html;
        tr.appendChild(td);
        
          var td = document.createElement('td');
       // td.appendChild(document.createTextNode(markers[num].result.titleNoFormatting));
       
       //td.appendChild(document.createTextNode(bizArray[num].name));
       
        tr.appendChild(td);
        var td2 = document.createElement('td');
        td2.innerHTML = dir.getDuration().html;
        tr.appendChild(td2);
        
        
        tbody.appendChild(tr);
        if ((num+1) < markers.length) getDistances(markers, tbody, (num+1));
      });
      dir.load("from: " + start.lat() + "," + start.lng()  + " to: " + lat + "," + lng);
    }
	
	
	 function getDurations(markers, tbody, num) {
      var lat = markers[num].getLatLng().lat();
      var lng = markers[num].getLatLng().lng();
      
      
      var dir = new GDirections();
      GEvent.addListener(dir, "load", function() {
        var tr = document.createElement('tr');
        var td = document.createElement('td');
       // td.appendChild(document.createTextNode(markers[num].result.titleNoFormatting));
       
       td.appendChild(document.createTextNode(bizArray[num].name));
       
        tr.appendChild(td);
        var td = document.createElement('td');
        td.innerHTML = dir.getDuration().html;
        tr.appendChild(td);
        tbody.appendChild(tr);
        if ((num+1) < markers.length) getDurations(markers, tbody, (num+1));
      });
      dir.load("from: " + start.lat() + "," + start.lng()  + " to: " + lat + "," + lng);
    }
	
	
	 function getNumGeo(markers, tbody, num) {
     var lat = markers[num].getLatLng().lat();
     var lng = markers[num].getLatLng().lng();
      
      
      var dir = new GDirections();
      GEvent.addListener(dir, "load", function() {
        var tr = document.createElement('tr');
        var td = document.createElement('td');
       // td.appendChild(document.createTextNode(markers[num].result.titleNoFormatting));
       
       td.appendChild(document.createTextNode("Biz"));
       
        tr.appendChild(td);
        var td = document.createElement('td');
        td.innerHTML = dir.getStatus().html;
        tr.appendChild(td);
        tbody.appendChild(tr);
        if ((num+1) < markers.length) getNumGeo(markers, tbody, (num+1));
      });
      dir.load("from: " + start.lat() + "," + start.lng()  + " to: " + lat + "," + lng);
    }