<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs 
	title="MapMyRun.com Run Finder" 
	height="200"
	author="Jeff Kalikstein"
	author_email="feedback@mapmyfitness.com"
	screenshot="http://static.mapmyfitness.com/mapmyrun.com/images/runfinder_screenshot.gif"
	thumbnail="http://static.mapmyfitness.com/mapmyrun.com/images/runfinder_thumb.gif">
  <Require feature="sharedmap"/>
</ModulePrefs>
<Content type="html"><![CDATA[

<div style="width:98%">

<div style="border-top: 1px dashed #9DBEE1; border-bottom: 1px dashed #9DBEE1; padding:2px; height:33px; ">
<a target="_blank" href="http://www.mapmyrun.com"><img src="http://mmf.cachefly.net/mapmyrun.com/images/logo_mapmyrun_small.gif" width="150" height="33" border="0" align="right" /></a>
<font color="#666666" style="font-size: 11px;">Find running routes around the world</font></b></div>
<div style="background-color: #EFEFEF; padding: 7px; font-size: 11px; border-bottom: 1px solid #9DBEE1;">
Navigate to the area you wish to search, and complete the form below.
</div>
<form onsubmit="doSearch(this); return false;" style="display:inline;">
    <div style="padding: 3px; font-size: 11px; background-color: #F4F4F4;">
		<div style="padding: 3px;">
	            <img src="http://mmf.cachefly.net/mapmyrun.com/images/bullet_dbl_blue_arrow.gif" align="absmiddle"/>
                Show the

                <select name="maxRoutes" style="font-size: 11px;">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                        <option value="50">50</option>
                </select>
                <select name="sortBy" style="font-size: 11px;">
                        <option value ="created_date desc">most recently created routes</option>
                        <option value ="view_count desc">most viewed routes</option>
                        <option value ="average_rating desc">highest rated routes</option>
                </select>
		</div>
		<div style="padding: 3px;">
                <img src="http://mmf.cachefly.net/mapmyrun.com/images/bullet_dbl_blue_arrow.gif" align="absmiddle"/>
                Show runs between

                <input type="text" name="minDist" value="1.0" size="3" style="font-size: 11px;" />
                and
                <input type="text" name="maxDist" value="5.0" size="3" style="font-size: 11px;" />
                <small id="map_search_unit">miles</small>
		</div>
		
		<div style="background-color: #EFEFEF; padding: 2px; text-align: center; border-top: 1px solid #9DBEE1;">
			<input name="searchBtn" type="submit" value="Search" style="font-size: 11px; background-color: #9DBEE1;	height: 18px;margin-left: 2px;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;	border-top-style: solid;	border-right-style: solid;	border-bottom-style: solid;border-left-style: solid;border-top-color: #999999;border-right-color: #666666; border-bottom-color: #666666; border-left-color: #999999;"/>		
		</div>

    </div>

</form>

<p style="margin:0px; padding:3px; font-size:11px;">
  <a target="_blank" href="http://www.mapmyrun.com">Map new runs and log your training online, visit 
  MapMyRun.com</a>.
</p>

</div>

<script>
var map = new GMap2();

var routeIcon = new GIcon(G_DEFAULT_ICON, "http://mmf.cachefly.net/mapmyrun.com/images/run_marker.png");

routeIcon.shadow = "http://mmf.cachefly.net/mapmyrun.com/images/marker_shadow.png";
routeIcon.iconSize = new GSize(24, 29);
routeIcon.shadowSize = new GSize(40, 29);
routeIcon.iconAnchor = new GPoint(24, 29);
routeIcon.infoWindowAnchor = new GPoint(24, 29);
routeIcon.infoShadowAnchor = new GPoint(24, 29);


function createRouteMarker(point, desc) {
var marker = new GMarker(point, {icon: routeIcon});
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(desc);
  });
  return marker;
}


var searchMarkers = [];
function clearMarkers() {
	while(searchMarkers.length > 0) {
		map.removeOverlay(searchMarkers.pop());
	}
}
function doSearch(frm) {
	map.getBoundsAsync(function(bounds) {
                var sw = bounds.getSouthWest();
                var ne = bounds.getNorthEast();
             
      

        var url = "http://ws.mapmyfitness.com/route_api/public_routes";
        url += "?m=" + frm.maxRoutes.value;
        url += "&minlat=" + sw.lat();
        url += "&maxlat=" + ne.lat();
        url += "&minlng=" + sw.lng();
        url += "&maxlng=" + ne.lng();

        var minDist = parseFloat(frm.minDist.value);
        var maxDist = parseFloat(frm.maxDist.value);

        url += "&minmiles=" + minDist;
        url += "&maxmiles=" + maxDist;
        url += "&s=" + frm.sortBy.value;
        url = encodeURI(url);
	frm.searchBtn.disabled = true;
        frm.searchBtn.value = "please wait...";
	//frm.innerHTML += '<a href="' + url + '">xml</a>';

        _IG_FetchXmlContent(url, function(routeXml) {
		var bounds = new GLatLngBounds();
                var routes = routeXml.documentElement.getElementsByTagName("route");
                for(var i=0; i < routes.length; i++) {
                        var route = routes[i];

                        var lat = parseFloat(route.getAttribute("lat"));
                        var lng = parseFloat(route.getAttribute("lng"));
                        var key = route.getAttribute("key");
                        var point = new GLatLng(lat, lng);
                        bounds.extend(point);
                        var dist = parseFloat(route.getAttribute("distance"));

                        var routeUrl = "http://www.mapmyrun.com/view_route?r="+key;
                        var routeUrlTarget = "_blank";

                        var description = decodeURI(route.getAttribute("description"));
                        if (description.length > 175) {
                                description = description.substring(0,175) + ' ... [<a target="' + routeUrlTarget + '" href="' + routeUrl + '">read more</a>]';
                        }

                        var routeHtml = '';
                        routeHtml += '<div>\n';
                        routeHtml += '   <b><a target="' + routeUrlTarget + '" href="' + routeUrl + '">' + decodeURI(route.getAttribute("name")) + '</b></a><br/>\n';
                        routeHtml += '   ' + (Math.round(dist * 100) / 100) + " miles"+ '<br/>\n';
                        routeHtml += '   <small>' + description + '</small><br/>\n';
                        routeHtml += '</div>\n';

			var newMarker = createRouteMarker(point, routeHtml);

                        map.addOverlay(newMarker);
                        searchMarkers.push(newMarker);
                }
                frm.searchBtn.disabled = false;
                frm.searchBtn.value = "Search";
        });
        });

}

                              

</script>



]]></Content>
</Module>


