//
// File : bioprojects-rtwgmap-ui.js
//
// Description : Javascript functions for rendering components on the Bioenergy Projects Map
//               implementation. Overrides several functions found in the 
//               RTWGMap's javascript lib
//
// Contents    : 
//               renderMarkerForSideListing(marker)
//               returnFilteredMarkers(markers)


      //
   // Initialize the side listing with some simple instructions/overview
   //
   var initSideListing = function () {
		//var html = '<div class="textBoldGrey">Find a BioEnergy Project</div><div style="font-size: 8pt; font-family: Arial; font-weight: normal;"><br>';
		//html +='<b>Instructions:</b>&nbsp;Click on a region above the map to zoom in on a particular area.<p/>The area\'s projects will show up in this side bar. Click on a marker to view more information.';
		//logo
		//html +='<br/><div style="align: center" id="farmfreshlogo"><a href="http://www.albertafarmfresh.com/about_affpa.htm"><img border="0" src="/app21/rtw/icons/maps/farmfreshlogo.gif"></a></div><br><br>';

		//document.getElementById("sideListing").innerHTML = html;  
   }
   
    //
    // Custom Rendering for Dine AB Restaurant Listings on the sidebar
    //
    var renderMarkerForSideListing = function(marker){
        var html = "";
        if(marker != null)
        {
	        //
            // render the marker as a link that calls "myclick(marker.id)" when it's selected
            // (shows the gmap bubble - information bubble usually)
            // with the marker's icon changing colour if/when the mouse is over the link
            //
            // In this implementation the sideListing text will be : 
            //                 <marker.name> - with a href/link to call myclick() to show the info bubble
            //                 <marker.address>  
            //                 <marker.town>  
            //                	
            
            // open the marker's info bubble if the sideListing link is clicked
            html += '<a class="smallText" href="javascript:myclick(' + marker.id + '); hideTooltip(null);"';

            // add js to make the marker change it's icon if/when the mouse is over the link
            var highliteImage = '/app68/listings/icons/maps/green.png';
            normalImage = '/app68/listings/icons/maps/red.png';
                
            var tooltipText = marker.tooltip.entityify();  // replace all quotes with ''
     		
            html += '  onmouseover="bringToFront(' + marker.id + ');  showTooltip(gmarkers['+marker.id+'], \''+tooltipText+'\');  gmarkers['+marker.id+'].setImage(\''+ highliteImage + '\');"';
            html += '  onmouseout="hideTooltip();  gmarkers['+marker.id+'].setImage(\'' + normalImage + '\');"';
			
			//side listing text
            html += '  >' +marker.name + '</a><br/><span class="smallText">'  + marker.address  + '</span>' + '</a><br/><br/>';
        }
        
        return (html);
    }   
   
        
    //`
    // Overrides returnFilteredMarkers
    // Callback for parsing gmarkers from a filter into side listing
    //
    var returnFilteredMarkersxxxx = function(data){
        var groupLabel = "Listings";
        
        if(globalRegion)
           groupLabel = globalRegion.label;
           
     		
        var htmlList = '<div class="textBoldGrey">' + groupLabel + '</div><div class="smallTextCenter"><br/>';    
        
       if(data != null) {
            htmlList = htmlList + '<br/>';
            for(var i = 0; i < data.length; i++)  {
            	htmlList += renderMarkerForSideListing( data[i] );
            }

            htmlList = htmlList + '</div>';
            document.getElementById("sideListing").innerHTML = htmlList;
        }
    }

     //
    // Overrides showInfoTabs in rtwgmap-ui.js
    //
    // show the info tabs for a markerObj when the user clicks it's gmarker
    // see createGMarker(markerObj)
    //
    var showInfoTabs = function(gmarker, markerObj) {
              
       // Build the gmarker's window tabs 
       var i =0;
       var infoTabs = [];
       
       var infoHtml = markerObj.infoHtml;
       infoHtml += "<p/>";    
       //add a zoom-in link    
       //infoHtml += "<span class=\"smallTextCenter\"><a href=\"javascript:zoomIn('" + markerObj.id + "');\">Zoom In</a>" + "</span>&nbsp;&nbsp;";
  
       infoTabs[i++] = new GInfoWindowTab("Info", infoHtml);            

       if(markerObj.additionalInfo && markerObj.additionalInfo.productHtml) {
	       infoTabs[i++] = new GInfoWindowTab("Production", markerObj.additionalInfo.productionHtml);       
       }

       var opts = {maxWidth:300}; 
       gmarker.openInfoWindowTabs(infoTabs, opts);    
    }