//
// File : ff-rtwgmap-ui.js
//
// Description : Javascript functions for rendering components on the Farm Fresh 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 Market</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. Upcoming markets will show up in this side bar. Click on the red markers to view more market information.';
		html +='<br/><br/><a class="smalltext" target="_new" href="printmarket.jsp?market=0">Print all Farmers\' Markets</a><br/>';
		html +='<div id="sunnygirl"><img src="/app21/rtw/icons/market/sunnygirllogo.png"></div><br><br>';

		document.getElementById("sideListing").innerHTML = html;  
   }
   
   var initialView = true;
   
	//
	// update the side listing for all the gmarkers for the current view
	//
	var updateSideListingForCurrentView = function(){    	
		if(initialView) {
			initSideListing();
			initialView = false;
			return;
		}
	
		if(isFiltering()) {
	        // list all the markers in the current view in the side listings    
    	    var markers = getMarkersInCurrentView();
        	returnFilteredMarkers( markers );
        
	        if(markers == null || markers.length == 0) 
    	    	initSideListing();
    	 }
	}
	
	//
	// Get the label/header for the side listings
	// @see returnFilteredMarkers
	//
	function getSideListingsLabel() {
        var label = "";

		var markerTypeLabel = "Markets";
        
        if(isFiltering()) {
            if(selectedFilters[0])
            	label = selectedFilters[0].label
        	return  label + ' ' + markerTypeLabel;
        }
        
    	if(globalRegion && globalRegion.label) { 
        	label = globalRegion.label + " " + markerTypeLabel;
        }
		
		return label;         
    }
    
	
	//
    // 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.replace(/\'/g,"\\\'");  // 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>'; 
            html += getDuration(marker);
            html += '<br/><br/>';
        }
        
        return (html);
    }   
   
    //
    // Get the duration (formatted string) for a Market
    //
    // The format depends on the filtering being applied and what is
    // set in the market's schedule
    //
    function getDuration(marker) {
    	var duration = '';
    	var style = 'style="font-size: 7pt;  font-family: Arial; font-weight: normal;"';
    	
    	if(isFiltering()) {
    	   	for(i=0;i< marker.schedule.length; i++) {
           	    var schedule = marker.schedule[i];
           	    if(selectedFilters[0]) { 
           			if(schedule.marketTypeName == selectedFilters[0].label) {
						duration += '<br/><span ' + style + '>' + marker.schedule[i].duration + '</span>';             	           		
					}
				}         		
           	}           	
    	}
		else {
			duration += '<br/>';
    		if(marker.beginTime && marker.endTime) {
            	duration += '<span ' + style + '>' + marker.beginTime + '-' + marker.endTime +  '</span>';
            } else {
				duration += '<span ' + style + '>' + marker.schedule[0].duration + '</span>';             	           		
            }
        }
            
    	return duration;
    }
    
        
    //
    // Overrides returnFilteredMarkers
    // Callback for parsing gmarkers from a filter into side listing
    //
    var returnFilteredMarkers = function(data){
       var htmlList = '<div class="textBoldGrey">' + getSideListingsLabel() + '</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;
        }
    }