<!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 name="viewport" content="initial-scale=1.0, user-scalable=no" />
                <meta http-equiv="content-type" content="text/html/xml; charset=utf-8"/>
                <meta name="description" content="Star Wars Interactive Galaxy Map">
                <meta name="keywords" content="star, wars, galaxy, map, interactive">
                <meta name="author" content="Orcrist">
                <meta name="robots" content="index, follow">
                <meta name="googlebot" content="index, follow">

                <title>Star Wars Interactive Galaxy Map</title>
                <style>h2{ cursor: pointer; }</style>

                <!--
                        Thanks you for watching this source code :-)

                        Credits goes to:
                        - Master Jedi Hyqs for his 2d map
                                http://www.incomcorp.net/
                        - BSDoblivion for his navcomp engine
                                http://d6holocron.com/
                        - Holonet community
                                http://www.starwars-holonet.com/ [fr]

                        Using these free softwares:
                        - GMapImageCutter (designed by Richard Milton, Centre for Advanced Spatial Analysis (CASA), University College London (UCL))
                                http://www.bartlett.ucl.ac.uk/casa/latest/software/gmap-image-cutter
                        - GMap API Javascript
                                https://developers.google.com/maps/documentation/javascript/
                        - Gimp
                        - Imagemagick
                        - jQuery
                                http://www.jquery.com/

                        License:
                        - Creative Commons - Attribution - NonCommercial - ShareAlike
                                http://creativecommons.org/licenses/by-nc-sa/4.0/

                        Have a nice day

                        Orcrist
                                http://infinite-vertigo.net [fr]
                -->

                <!--loading GMap API javascript -->
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>

                <!-- GMapCutter code (minor changes commented) -->
                <script type="text/javascript">
                        //<![CDATA[

                        /* return GET variables in array
                        i.e. infinite-vertigo.net/?var1=str&var2=10
                        var urlVars = getUrlsVars();
                        urlVars['var1'] return "str"
                        urlVars['var2'] return 10 */
                        function getUrlVars(){
                                var vars = [], hash;
                                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                                for(var i = 0; i < hashes.length; i++)
                                {
                                        hash = hashes[i].split('=');
                                        vars.push(hash[0]);
                                        vars[hash[0]] = hash[1];
                                }
                                return vars;
                        }

                        // catch all GET variables
                        var urlVars = getUrlVars();

                        // 1 will not display new marker and will store title in searchNames for search use
                        // 0 will add marker, display it and write it in loadedMarkers
                        var silentAdd = 0;

                        // store all markers here
                        var markers = [];
                                var loadedMarkers = [];
                                var drawedMarkers = [];
                                var searchMarkers = [];
                                        var searchNames = []; // will contain the title of all silentAdded markers
                        var polylines = [];
                                var loadedPolylines = [];

                         // GMapCutter
                         var centreLat=0.0;
                         var centreLon=0.0;
                         var initialZoom=3;
                         var imageWraps=false; //SET THIS TO false TO PREVENT THE IMAGE WRAPPING AROUND

                         var map; //the GMap3 itself
                         var gmicMapType;

                         function GMICMapType() {
                                this.Cache = Array();
                                this.opacity = 1.0;
                         }
                         GMICMapType.prototype.tileSize = new google.maps.Size(256, 256);
                         GMICMapType.prototype.maxZoom = 19;
                         GMICMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
                                var c = Math.pow(2, zoom);
                                var c = Math.pow(2, zoom);
                                var tilex=coord.x,tiley=coord.y;
                                if (imageWraps) {
                                        if (tilex<0) tilex=c+tilex%c;
                                        if (tilex>=c) tilex=tilex%c;
                                        if (tiley<0) tiley=c+tiley%c;
                                        if (tiley>=c) tiley=tiley%c;
                                }
                                else {
                                        if ((tilex<0)||(tilex>=c)||(tiley<0)||(tiley>=c))
                                        {
                                                var blank = ownerDocument.createElement('DIV');
                                                blank.style.width = this.tileSize.width + 'px';
                                                blank.style.height = this.tileSize.height + 'px';
                                                return blank;
                                        }
                                }
                                var img = ownerDocument.createElement('IMG');
                                var d = tilex;
                                var e = tiley;
                                var f = "t";
                                for (var g = 0; g < zoom; g++) {
                                 c /= 2;
                                 if (e < c) {
                                        if (d < c) { f += "q" }
                                        else { f += "r"; d -= c }
                                 }
                                 else {
                                        if (d < c) { f += "t"; e -= c }
                                        else { f += "s"; d -= c; e -= c }
                                 }
                                }
                                img.id = "t_" + f;
                                img.style.width = this.tileSize.width + 'px';
                                img.style.height = this.tileSize.height + 'px';
                                img.src = "http://infinite-vertigo.net/sw/sky/online/tiles/"+f+".jpg"; // online folder of all tiles (5000+)
                                this.Cache.push(img);
                                return img;
                         }
                         GMICMapType.prototype.realeaseTile = function(tile) {
                                var idx = this.Cache.indexOf(tile);
                                if(idx!=-1) this.Cache.splice(idx, 1);
                                tile=null;
                         }
                         GMICMapType.prototype.name = "SW Galaxy Map";
                         GMICMapType.prototype.alt = "SW Galaxy Map";
                         GMICMapType.prototype.setOpacity = function(newOpacity) {
                                this.opacity = newOpacity;
                                for (var i = 0; i < this.Cache.length; i++) {
                                 this.Cache[i].style.opacity = newOpacity; //mozilla
                                 this.Cache[i].style.filter = "alpha(opacity=" + newOpacity * 100 + ")"; //ie
                                }
                         }

                         function getWindowHeight() {
                                if (window.self&&self.innerHeight) {
                                 return self.innerHeight;
                                }
                                if (document.documentElement&&document.documentElement.clientHeight) {
                                 return document.documentElement.clientHeight;
                                }
                                return 0;
                         }

                         function resizeMapDiv() {
                                //Resize the height of the div containing the map.

                                //Do not call any map methods here as the resize is called before the map is created.
                                var d=document.getElementById("map");

                                var offsetTop=0;
                                for (var elem=d; elem!=null; elem=elem.offsetParent) {
                                 offsetTop+=elem.offsetTop;

                                }
                                var height=getWindowHeight()-offsetTop-16;

                                if (height>=0) {
                                 d.style.height=height+"px";
                                }
                         }

                        function load() {
                                resizeMapDiv();
                                var latlng = new google.maps.LatLng(centreLat, centreLon);
                                var myOptions = {
                                        zoom: initialZoom,
                                        minZoom: 0,
                                        maxZoom: 6,
                                        center: latlng,
                                        panControl: true,
                                        zoomControl: true,
                                        mapTypeControl: false, // originaly true
                                        scaleControl: false,
                                        streetViewControl: false,
                                        overviewMapControl: false,
                                        mapTypeControlOptions: { mapTypeIds: ["ImageCutter"] },
                                        mapTypeId: "ImageCutter"
                                }

                                map = new google.maps.Map(document.getElementById("map"), myOptions);
                                gmicMapType = new GMICMapType();
                                map.mapTypes.set("ImageCutter",gmicMapType);

                                /////////////////////////////////////////////////////////////////////////////////////
                                //Add any markers here e.g.
                                // var marker = new google.maps.Marker({
                                // map:map,
                                // position: new google.maps.LatLng(x,y),
                                // title: "My Marker"
                                // });
                                /////////////////////////////////////////////////////////////////////////////////////


                                // don't display the Drawing manager if ?hideDM=1 at loading
                                if( !urlVars['hideDM'] ){

                                        // Drawing manager (http://jsfiddle.net/8bwG2/)
                                        var drawingManager = new google.maps.drawing.DrawingManager({
                                                //~ drawingMode: google.maps.drawing.OverlayType.POLYLINE,
                                                drawingControl: true,
                                                drawingControlOptions: {
                                                        position: google.maps.ControlPosition.TOP_CENTER,
                                                        drawingModes: [google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.POLYGON ]
                                                },
                                                markerOptions: {
                                                        title: 'My Marker',
                                                        icon: "http://maps.google.com/mapfiles/marker_white.png"
                                                },
                                                polylineOptions: {
                                                        strokeWeight: 2,
                                                        strokeColor: '#ee9900',
                                                        clickable: false,
                                                        zIndex: 1,
                                                        editable: false
                                                },
                                                polygonOptions: {
                                                        strokeColor: '#ee9900',
                                                        editable:false
                                                }
                                        });
                                        drawingManager.setMap(map);

                                }

                                /* add this function to be displayed latitude & longitude at each click on the map
                                google.maps.event.addListener(map, 'click', function(event) {
                                        alert(event.latLng);
                                });
                                */

                                // when drawing a marker with the Drawing Manager
                                google.maps.event.addDomListener(drawingManager, 'markercomplete', function(marker) {

                                        // ask or title
                                        var title = prompt( 'New marker title:', '' );
                                        if( title )
                                                marker.title = title;
                                        else title = '';

                                        // ask for content
                                        var content = prompt( 'New marker content', '' ); //<img src=\'http://www.starwars-holonet.com/holonet/dictionnaire/photos/planete_'+ title.toLowerCase() +'.jpg\' />
                                        if( content )
                                                marker.content = content;
                                        else content = '';

                                        // info window popup at click, displaying "content"
                                        var infowindow = new google.maps.InfoWindow({
                                                content: content
                                        });
                                        google.maps.event.addListener(marker, 'click', function() {
                                                infowindow.open(map,marker);
                                        });

                                        // send new code line in Edition pannels's textarea
                                        var res = '<marker><title>'+ title +'</title><content>'+ content +'</content><coordX>'+ marker.getPosition().lat() +'</coordX><coordY>'+ marker.getPosition().lng() +'</coordY></marker>\n' ;
                                        document.getElementById("action").value += res ;

                                        // save the marker in "markers" & drawedMarkers for further manipulations
                                        markers.push( marker );
                                        drawedMarkers.push( marker );
                                });

                                google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function(line) {
                                        path = line.getPath();
                                        document.getElementById("action").value += '<polyline><color>'+ line.strokeColor +'</color>\n';
                                        for(var i = 0; i < path.length; i++) {
                                                document.getElementById("action").value += '<path>'+ path.getAt(i).lat() +','+ path.getAt(i).lng() + '</path>\n';
                                        }
                                        document.getElementById("action").value += "</polyline>\n";

                                        polylines.push( line );
                                });

                                google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) {
                                        path = polygon.getPath();
                                        document.getElementById("action").value += "#polygon\n";
                                        for(var i = 0; i < path.length; i++) {
                                                document.getElementById("action").value += path.getAt(i) + '\n';
                                        }
                                });

                        }// end of the load function

                        // additionnals functions for manipulate markers from the outside of this script

                        // add a new marker and window
                        function addMarker( title, content, icone , x, y ){
                                var title = ( !title ) ? ' ' : title ;
                                var icone = ( icone ) ? icone : "http://maps.google.com/mapfiles/marker_white.png";

                                var marker = new google.maps.Marker({
                                        map:map,
                                        position: new google.maps.LatLng(x,y),
                                        title: title,
                                        icon: icone
                                });

                                if( silentAdd > 0 ) content = '<center><img src=\'http://www.starwars-holonet.com/holonet/dictionnaire/photos/planete_'+ title.toLowerCase() +'.jpg\' /><br /><a href=\'http://www.starwars-holonet.com/encyclopedie/planete-'+ title.toLowerCase() +'.html\'>Holonet</a> / <a href=\'http://starwars.wikia.com/wiki/'+ title +'\'>Wookieepedia</a></center>';

                                if( content ){
                                        var infowindow = new google.maps.InfoWindow({
                                                content: content
                                        });
                                        google.maps.event.addListener(marker, 'click', function() {
                                                infowindow.open(map,marker);
                                        });

                                }

                                // store marker in markers
                                markers.push( marker );
                                loadedMarkers.push( marker );

                                // if silentAdd defined, don't display the ne marker and store title to searchMarkers
                                if( silentAdd > 0 ) {
                                        marker.setMap(null);
                                        searchMarkers.push( marker );
                                        searchMarkers[ title ] = marker ;
                                        searchNames.push( title );
                                }
                        }

                        // add polyline
                        function addPolyline( title, color, weight, path ){
                                var weight = ( weight ) ? weight : 2 ;

                                var poly = new google.maps.Polyline({
                                title: title,
                                path: path,
                                geodesic: false,
                                strokeColor: color,
                                strokeOpacity: 1.0,
                                strokeWeight: weight
                                });

                                poly.setMap(map);

                                polylines.push( poly );
                                loadedPolylines.push( poly );
                        }

                        // markers manipulation
                        // https://developers.google.com/maps/documentation/javascript/examples/marker-remove
                        // markersArr specify witch array of markers to use: markers, searchMarkers, loadedMarkers or drawedMarkers

                        // Sets the map on all markers
                        // map = map for being displayed, map = null for being hidden
                        function setAllMap(map, markersArr) {
                                for (var i = 0; i < markersArr.length; i++) {
                                        markersArr[i].setMap(map);
                                }
                        }

                        // Removes the markers from the map, but keeps them in the array.
                        function clearMarkers( markersArr ) {
                                setAllMap( null, markersArr );
                        }

                        // Shows any markers currently in the array.
                        function showMarkers( markersArr ) {
                                setAllMap(map, markersArr);
                        }

                        // Deletes all markers in the array by removing references to them.
                        function deleteMarkers(markersArr) {
                                clearMarkers(markersArr);
                                markersArr = [];
                        }

                        // find one marker
                        function showMarker( i, markersArr ){
                                // show it on the map
                                markersArr[i].setMap(map, markersArr );
                                // and pan to position
                                map.panTo(markersArr[i].getPosition());
                        }

                        // load map at window load (initialize)
                        google.maps.event.addDomListener(window, 'load', load);

                        //]]>
                </script>

                <!-- CSS style is attached here (not in .css file) for making this page a stand-alone-single-page application.
                Feel free to add your own scripts with <link rel="stylesheet" href="style.css" type="text/css" /> to improve source visibility.
                -->
                <style type="text/css">
                        body { height: 100%; width: 100%; margin: 0px; padding: 0px; background: #000; }

                        a{ color: #80b5d5; text-decoration: none; }
                        a:hover{ color: #80b5d5; text-decoration: underline; }

                        h2{ border-bottom: 1px solid #353535; }
                        textarea { width: 100%; border: 0px; height: 250px;}

                        #menu{ z-index: 5; display: none; position: absolute; top: 0px; right: 0px; background: #FFF; color: #353535; opacity: 0.9; padding: 15px; margin: 15px; height: 85%; width: 225px;}
                        #load{ display: none;}
                        #navcompRes { text-align: right; }
                        #iframe { display: none; z-index: 6; position: absolute; top: 0px; left: 0px; background: #FFF; color: #353535; padding: 15px; margin: 15px;}
                        .iframe { width : 900px; height: 800px; border: 0px; scrollbar: yes; }
                        .pannel{ display: none; }
                        .searchNames{ display: none; }
                </style>
        </head>

        <body OnResize="resizeMapDiv()">
                <!-- THIS IS WHERE THE MAP IS DISPLAYED -->
                <div id="map" style="background: #000;"></div>

                <!-- The Navcomp Iframe Window -->
                <div id="iframe">
                        <a id="closeW" href="#">Close X</a><br />
                        <iframe class="iframe" name="navcomp" src="http://d6holocron.com/astrogation/"></iframe>
                </div>

                <!-- building menu -->
                <div id="menu">

                        <h2 id="infosH">Infos</h2>
                        <div class="pannel" id="infos">
                                <a href="?hidePannel=1&hideDM=1">Light version</a><br />
                                <br />
                                Special thanks to <a href="http://www.incomcorp.net/swgndb/">Master Jedi Hyqs</a> &
                                <a href="http://d6holocron.com/">BSDOblivion</a><br />
                                <br />
                                <a href="source.php">Source / Full Credits</a><br />
                                <br />
                                <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br />
                                <a href="http://infinite-vertigo.net">http://infinite-vertigo.net</a>
                        </div>

                        <h2 id="searchH">Search system</h2>
                        <div class="pannel" id="search">
                                Enter system name:<br />
                                <input type="text" id="searchName" value="Loading data..." disabled="disabled" /><br />
                                <input type="button" id="clearSearch" value="Clear search" /><br />
                                <div id="searchRes"></div>
                        </div>

                        <h2 id="navcompH">Navcomp</h2>
                        <div class="pannel" id="navcomp">
                                <!-- From:<br />
                                <input type="text" id="from" /><br />
                                To:<br />
                                <input type="text" id="to" /><br />
                                Speed:<br />
                                <input type="text" value="1" id="speed" /><br />
                                <input type="button" id="calculate" value="Calculate" />
                                <div id="navcompRes"></div> -->
                        </div>

                        <h2 id="editionH">Edit</h2>
                        <div class="pannel" id="edition">

                                <!-- this textarea allow to execute xml code (exemple below) -->

                                XML Code<br />
                                <textarea id="action">
                                <marker>
<title>Exemple</title>
<content>This is an exemple.</content>
<coordX>0</coordX>
<coordY>-20</coordY>
</marker>

<marker>
<title>Exemple with icone</title>
<content>This is another exemple.</content>
<icone>http://icons.iconarchive.com/icons/artua/star-wars/48/Death-Star-icon.png</icone>
<coordX>0</coordX>
<coordY>0</coordY>
</marker>

<polyline>
<title>Exemple</title>
<color>#FFFFFF</color>
<weight>2</weight>
<path>0,0</path>
<path>20,0</path>
<path>0,20</path>
<path>-20,0</path>
<path>0,-20</path>
</polyline>
                                </textarea><br />
                                <input type="button" id="exe" value="Execute Code" />
                                <!--<input type="button" id="clearMarkers" value="Clear Drawed Markers" Onclick="clearMarkers( drawedMarkers );" />
                                <input type="button" id="showMarkers" value="Show Drawed Markers" OnClick="showMarkers( drawedMarkers );" />
                                -->

                                <!-- this is an exemple of file loading all the stars' locations (this file is used for the search engine -->
                                <input type="text" id="mapURL" value="http://infinite-vertigo.net/online/all.xml" /><br />
                                <!-- <input type="file" id="file" /> -->
                                <input type="button" id="loadMap" value="Load map" /><br />
                                <input type="button" id="clearMarkers" value="Clear" Onclick="clearMarkers( loadedMarkers );clearMarkers( loadedPolylines );" /><br />
                                <input type="button" id="showMarkers" value="Show" OnClick="showMarkers( loadedMarkers ); showMarkers( loadedPolylines );" />

                        </div>

                </div>

                <!-- load jQuery and our jquery script at the end of body -->
                <script src="http://code.jquery.com/jquery.js"></script>
                <script>
                        // jQuery code
                        $(function() {

                                // additionnal jQuery functions
                                //----------------------------------------------------------------------------------------------

                                // first char upper case
                                // ie: 'mystring'.ucfirst() will return 'Mystring'
                                String.prototype.ucfirst = function(){
                                        return this.charAt(0).toUpperCase() + this.substr(1);
                                }

                                // return true if n is a number
                                function isNumber(n) {
                                        return !isNaN(parseFloat(n)) && isFinite(n);
                                }

                                // sub menu display
                                function show( id ){
                                        $('.pannel:not(#'+ id +')').hide();
                                        $('#'+ id).toggle();
                                        if( id == "navcomp" ){ // open/close the navcomp iframe
                                                $('#iframe').toggle();
                                        }
                                }

                                // select the text in #id
                                function selectAll(id){
                                 document.getElementById(id).focus();
                                 document.getElementById(id).select();
                                }

                                // XML to jquery object to gmap marker
                                function parseXml( data ){
                                        var xml = data,
                                         xmlDoc = $.parseXML( xml ),
                                         $xml = $( xmlDoc );

                                         // for each <title></title> in xml <marker>
                                        $title = $xml.find( "marker" ).each( function(){
                                                var title = $(this).find('title').text();
                                                var content = $(this).find('content').text();
                                                var icone = $(this).find('icone').text();
                                                var coordX = $(this).find('coordX').text();
                                                var coordY = $(this).find('coordY').text();
                                                // add marker
                                                addMarker( title, content, icone, coordX, coordY );
                                        });

                                        // for each <title></title> in xml <polyline>
                                        $title = $xml.find( "polyline" ).each( function(){
                                                var title = $(this).find('title').text();
                                                var weight = $(this).find('weight').text();
                                                var color = $(this).find('color').text();

                                                var polyPath = [];
                                                var path = $(this).find('path').each( function(){
                                                        var coords = $(this).text().split( ',' );
                                                        var newPath = new google.maps.LatLng( coords[0], coords[1] );
                                                        polyPath.push( newPath );
                                                });
                                                // add marker
                                                addPolyline( title, color, weight, polyPath );
                                        });
                                }

                                // ajax request will put url's data between 'script' balises and execute it in a hidden div
                                /* loadMap.php must be on the same server
                                and must contain:

                                <?PHP

                                // xml data
                                if( !empty( $_POST['mapURL'] ) ){
                                        $buffer = file_get_contents ( $_POST['mapURL'] );
                                        echo $buffer;
                                }

                                // travel time data
                                if( !empty( $_POST['from'] ) && !empty( $_POST['to'] ) && !empty( $_POST['speed'] ) ){
                                        $from = htmlentities( $_POST['from'] );
                                        $to = htmlentities( $_POST['to'] );
                                        $speed = htmlentities( $_POST['speed'] );

                                        $buffer = file_get_contents ( 'http://d6holocron.com/astrogation/traveltime.php?System1='. $from .'&System2='. $to .'&Submit2=Enter&mult='. $speed .'' );

                                        preg_match('#<b>(.*)</b>#isU', $buffer, $matches);
                                        $buffer = trim($matches[1]);

                                        echo $buffer;
                                }
                                ?>

                                // NB it means that the data loaded could be anything. Is this secure ? No.
                                */
                                function loadURL( url, end ){

                                        $.post('loadMap.php', { mapURL: url },
                                        function( data ){
                                                // parse xml from data
                                                parseXml( data );

                                                end(); // execute the end function if exists
                                        });

                                }




                                // GET VARIABLES
                                //----------------------------------------------------------------------------------------------

                                // ?hidePannel=1, don't display the pannel
                                if( !urlVars['hidePannel'] ){
                                        $('#infos').show();
                                        $('#menu').fadeIn('slow');
                                }

                                // ?mapURL=url.txt, load it at first run
                                if( urlVars['mapURL'] ){
                                        $('#mapURL').val( urlVars['mapURL'] );
                                        loadURL( urlVars['mapURL'] );
                                }




                                // MENU CONTROL
                                //----------------------------------------------------------------------------------------------

                                // INFOS MENU
                                {
                                        // click these h2 to show sub menu
                                        $('#infosH').click( function(){ show('infos'); });
                                }

                                // SEARCH MENU
                                {
                                        // opening the search sub menu load all the markers for search purpose
                                        $('#searchH').click( function(){
                                                show('search');

                                                // at first run, the search input is disabled.
                                                if( $('#searchName').attr('disabled') == 'disabled' ){ // so at first run,

                                                        // silentAdd all markers in this file
                                                        silentAdd = 1;
                                                        var url = 'http://infinite-vertigo.net/online/all.xml' ; // contain all stars' locations

                                                        // load url with specific end
                                                        loadURL( url, function(){
                                                                $('#searchName').val('').attr('disabled', false); // enable the search input
                                                                silentAdd = 0; // turn silentAdd off
                                                        } );

                                                }
                                        });

                                        // search
                                        var searchNamesDiv = ''; // will contain one div by planet (1200+) for auto-completion purpose

                                        // when release key in search input
                                        $('#searchName').keyup( function(k){
                                                var search = $(this).val().ucfirst();
                                                $(this).val( search ); // upper case first letter of the search

                                                // write all names in search pannel, hidden, for auto completion
                                                if( searchNamesDiv.length == '' ){ // only once
                                                        for( var i=0; i < searchNames.length; i++){
                                                                searchNamesDiv += '<div class="searchNames">'+ searchNames[i] +'</div>';
                                                        }

                                                }
                                                $('#searchRes').html( searchNamesDiv ); // at each search: hidde all

                                                // show all div containing our search string
                                                // the rest stay hidden
                                                $('.searchNames:contains("'+ search +'"):lt(10)').toggle(); // only the 10 first propositions

                                                if( searchMarkers[ search ] && !isNumber( search ) ){
                                                        showMarker( search, searchMarkers );
                                                        map.setZoom(6); // zoom on it
                                                }
                                        });

                                        // clear all searchMarkers
                                        $('#clearSearch').click( function(){
                                                clearMarkers( searchMarkers );
                                        } );
                                }

                                // NAVCOMP MENU
                                {
                                        $('#navcompH').click( function(){ show('navcomp'); });

                                        // close the navcomp frame
                                        $('#closeW').click( function(){ show('navcomp')});

                                        // request our local loadMap.php with some POST var
                                        $('#calculate').click( function(){
                                                var from = $('#from').val();
                                                var to = $('#to').val();
                                                var speed = $('#speed').val(); // this is hyperdrive speed (Millenium Falcon: 0.5)

                                                // show result in this div
                                                $('#navcompRes').load('loadMap.php', { from: from, to: to, speed: speed } );
                                        });
                                }

                                // EDITION MENU
                                {
                                        $('#editionH').click( function(){ show('edition'); });

                                        $('#mapURL').click(function(){ selectAll( 'mapURL' ); });

                                        // delete all loaded markers and load the choosen url
                                        $('#loadMap').click( function(){
                                                deleteMarkers( loadedMarkers );
                                                deleteMarkers( loadedPolylines );
                                                loadURL( $('#mapURL').val() );
                                        });

                                        $('#exe').click( function(){
                                                deleteMarkers( loadedMarkers );
                                                deleteMarkers( polylines );
                                                parseXml( '<xml>'+ $('#action').val() +'</xml>' );

                                                addPolyline( path );
                                        });
                                }

                        });
                </script>
        </body>

</html>