<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
        <script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ?"https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost +"google-analytics.com/ga.js'type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            try {
                var pageTracker = _gat._getTracker("UA-407886-3");
                pageTracker._trackPageview();
            } catch(err) {}
        </script>       
        <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
        <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>
        <script type="text/javascript" src="scripts/cloudmade.js"></script>
        <script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script src="scripts/jquery.contextMenu.js" type="text/javascript"></script>
        <script src="scripts/jquery.tablesorter.js" type="text/javascript"></script>
        <script type="text/javascript">
            var lat=$latMap;
            var lon=$lonMap;
            var zoom=$zoom;
            var initialStartText="$addressStart";
            var initialDestText="$addressDest";
            var lonStart=$lonStart;
            var latStart=$latStart;
            var lonDest=$lonDest;
            var latDest=$latDest;
            var fromHash=$fromHash;
            var hurl="$hashUrl";
            var layers=$layers;
            var map; //complex object of type OpenLayers.Map
            var routeLayer;
            var proj4326 = new OpenLayers.Projection("EPSG:4326"); // longitude/latitude in decimal degrees
            var proj900913 = new OpenLayers.Projection("EPSG:900913"); // Google projection
            var nodes = {
                'start': null,
                'dest': null,
                'fmouse_start': false,
                'fmouse_dest': false            
            };
            var disableClickEvent = false;
            var icon_standard;
            var icon = {
                'start': null,
                'dest': null
            };
            var controlDrag = null;
            var bikeLayer = null;
            var layerMarkers = new OpenLayers.Layer.Vector("Markers");
            icon_standard = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
            icon_standard.graphicWidth = 25;
            icon_standard.graphicHeight = 35;
            icon_standard.graphicXOffset = -icon_standard.graphicWidth;
            icon_standard.graphicYOffset = -icon_standard.graphicHeight;
            icon_standard.graphicOpacity = 1.0;
            icon_standard.pointRadius = 6;
            icon['start'] = OpenLayers.Util.extend({}, icon_standard);
            icon['start'] .externalGraphic = "img/arrow-green.png";
            icon['dest']  = OpenLayers.Util.extend({}, icon_standard);
            icon['dest'] .externalGraphic = "img/arrow-finish.png";  
            var node_markers = {
                 'start': null,
                 'dest': null
             };
            var in_options = {'internalProjection': proj900913,'externalProjection': proj4326};  
            var geojson_reader = new OpenLayers.Format.GeoJSON(in_options);
            var features;
            var paths;
            var cacheStart;
            var cacheDest;
        </script>
        <script src="scripts/mumoro.js" type="text/javascript"></script>
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" /> 
        <link rel="icon" type="image/png" href="img/arrow.png" />
        <title>Mumoro demonstration</title>
    </head>

    <body onload="init();">
        <div id="header">
            <h1>Mumoro demonstration on the city of Rennes</h1>
            <h2>Multimodal and multiobjective routing <a href="/info">Read more here</a></h2>
        </div>  

        <div id="main">
            <div id="lefting">      
                <div id="address_form">
                    <form method="get" action="javascript:validateAddresses(this);">
                        <label for="startAdr">Start location:</label>
                        <span id="formError_start"></span>
                        <br/>           
                        <input type="text" name="startAdr" id="startAdr" tabindex="10" size="50" />
                        <br/>
                        <label for="endAdr">Destination:</label>
                        <span id="formError_dest"></span>
                        <br/>
                        <input type="text" name="endAdr" id="endAdr" tabindex="20" size="50" />
                        <br/>
                        <span class="tinyText">Example: 23 rue de la Chalotais 35000 Rennes France</span>
                        <br/>
                        <input type="button" value="Reverse" onclick="return reverseLocations(this)"/>
                        <input type="submit" value="Calculate route" />
                    </form>
                </div>
                <div id="info">
                    <p id="path_costs"></p>
                    <p id="routing_description"></p>
                    <p id="hash_url"></p>
                </div>
            </div>
            <div id="map">
                <div id="licences">
                   Data: <a href="http://www.openstreetmap.org/">Openstreetmap</a>(CC by-sa), <a href="http://data.keolis-rennes.com">VéloStar</a>(CC by-nc-nd), Routing algorithms(GPLv3)
                </div>
            </div>        
        </div>
        <ul id="myMenu" class="contextMenu"> 
            <li class="start"><a href="#start">Set Start</a></li> 
            <li class="dest"><a href="#dest">Set Destination</a></li> 
        </ul>
    </body>
</html>
