function cRoutes(sRouteElement){
    this.init = function(){
        this.getData();
    }

    this.getData = function(){
        GDownloadUrl("GeoStart/ajax/getRouteData.php", oGeoStart.oRoutes.loadData);
    }
        
    this.loadData = function(sJson) {    
        var oData = eval('('+sJson+')');        
        oGeoStart.oRoutes.oRouteData = oData;
        oGeoStart.oRoutes.initialize();       
        oGeoStart.oRoutes.show(); 
    }
    
    
    
    this.toggleAll = function(bState){
        if ( bState ) {
            oGeoStart.oRoutes.show();
        } else {
            oGeoStart.oRoutes.hide();
        }
    }
    
    
    
    this.initialize = function(){
        for ( var k in this.oRouteData ) {
            this.oRouteData[k].oPoly = oGeoStart.createPolyline(this.oRouteData[k]);
            
            //oGeoStart.oMap.addOverlay(this.oRouteData[k].oPoly);
            
            this.oRouteData[k]._PoiSort = Array();
            for ( var p in this.oRouteData[k]._PoiInfo ) {
                this.oRouteData[k]._PoiInfo[p].sg_id = "poi"+this.oRouteData[k].polykleur;
                this.createPoint(this.oRouteData[k]._PoiInfo[p], k);
                this.oRouteData[k]._PoiSort[this.oRouteData[k]._PoiInfo[p].sorteer] = this.oRouteData[k]._PoiInfo[p].id;
            }
            this.createStartEnd(k);            
        }            
    }
    
    this.createStartEnd = function(sRouteId){
        this.oRouteData[sRouteId].oPoints['end'] = new GMarker(this.oRouteData[sRouteId].oPoly.getVertex(0), oIconmanager.get('route_end'));
        this.oRouteData[sRouteId].oPoints['start'] = new GMarker(this.oRouteData[sRouteId].oPoly.getVertex(this.oRouteData[sRouteId].oPoly.getVertexCount()-1), oIconmanager.get('route_start'));
        
        
        oGeoStart.oMap.addOverlay(this.oRouteData[sRouteId].oPoints['start']);
        this.oRouteData[sRouteId].oPoints['start'].hide();
        
        oGeoStart.oMap.addOverlay(this.oRouteData[sRouteId].oPoints['end']);
        this.oRouteData[sRouteId].oPoints['end'].hide();
    }
    
    
    this.show = function(){
        for ( var k in this.oRouteData ) {
            if ( this.oRouteData[k].shows || this.oRouteData[k].shows == false ) {
                this.oRouteData[k].shows = true;
                oGeoStart.oMap.addOverlay(this.oRouteData[k].oPoly);
                            
                for ( var p in this.oRouteData[k].oPoints ) { 
                    oGeoStart.oMap.addOverlay(this.oRouteData[k].oPoints[p]);
                    if ( p == 'start' || p == 'end' ) {
                        this.oRouteData[k].oPoints[p].hide();
                    }
                }
            }
        }        
    }
    
    this.hide = function(){
        for ( var k in this.oRouteData ) {
            if ( this.oRouteData[k].shows || this.oRouteData[k].shows == true ) {
                this.oRouteData[k].shows = false;
                oGeoStart.oMap.removeOverlay(this.oRouteData[k].oPoly);
                            
                for ( var p in this.oRouteData[k].oPoints ) { 
                    oGeoStart.oMap.removeOverlay(this.oRouteData[k].oPoints[p]);
                }
            }
        }        
    }
    
    this.update = function(){
        this.show();
        for ( var k in this.oRouteData ) {
            if ( document.getElementById('GeoMenu_routes_' + k).className.indexOf("_open") != -1  ) {
                this.highlight(k);
            } else {
                this.unhighlight(k);
            }
        }
    }
    
    this.closeAll = function(sRoute) {
        var aInfo = document.getElementById('GeoMenu_hg_route').getElementsByTagName('li');
        var i = aInfo.length;
        while ( i-- ) {
            if ( aInfo[i].id.indexOf("GeoMenu_routes_") != -1 && aInfo[i].id != "GeoMenu_routes_"+sRoute ) {
                aInfo[i].className = 'GeoMenu_closed';
            }
        }
    }
    
    
    
    this.gotoPoiAnchor = function(iPoi){
        $('tab').scrollTop = 0;
        window.location.hash = '#poi_' + iPoi;
    }
    
    this.highlight = function(k){
        this.oRouteData[k].oPoly.color = "#FF0000";
        oGeoStart.oMap.addOverlay(this.oRouteData[k].oPoly);
                                        
        for ( var p in this.oRouteData[k].oPoints ) {
            if ( p == 'start' || p == 'end' ){
                this.oRouteData[k].oPoints[p].show();
            } else {
                this.oRouteData[k].oPoints[p].setImage(oIconmanager.get('route', 'FF0000').image);
            }
        }
    }
    
    this.unhighlight = function(sId){
        this.oRouteData[sId].oPoly.color = "#" + this.oRouteData[sId].polykleur;
        oGeoStart.oMap.addOverlay(this.oRouteData[sId].oPoly);
        for ( var k in this.oRouteData[sId].oPoints ) {
            if ( k == 'start' || k == 'end' ){
                this.oRouteData[sId].oPoints[k].hide();
            } else {
                this.oRouteData[sId].oPoints[k].setImage(oIconmanager.get('route', this.oRouteData[sId].polykleur).image);
            }
        }
    }   
    
    this.createPoint = function(aInfo, sRouteId){
        if ( !this.oRouteData[sRouteId].oPoints ) {
            this.oRouteData[sRouteId].oPoints = new Object();
        }
        
        var oIcon = oIconmanager.get('route', this.oRouteData[sRouteId].polykleur);
        var point = new GMarker( new GLatLng( parseFloat(aInfo.lat), parseFloat(aInfo.lng) ), oIcon);    // Create object
        var id = aInfo.id;
        
        point.title     = aInfo.titel;          // Define title
        point.tooltip   = aInfo[oSettings._sTooltipField];
        point.type      = "point";            // Set geometry type. Not used yet in 1.0
        point._GeoInfo  = aInfo;                // All information given by cGeoData(PHP!)

        this.pointListeners(point);

        this.oRouteData[sRouteId].oPoints[id] = point;               // Add object to factory
                
        /** Add the overlay to the map **/
        // oGeoStart.oMap.addOverlay(this.oRouteData[sRouteId].oPoints[id]);
        
    }


    this.oEle = document.getElementById(sRouteElement);
    this.aHtml = new Array();
    
    this.showTabInfo = function(sRoute){
        this.getHtml(sRoute);
        this.oEle.innerHTML = this.aHtml.join('');
        setTabContent('route');
        swap('tab', true);
    }
    
    this.getHtml = function(sRoute){
        this.aHtml = new Array();
    
        this.aHtml.push('<div style="float: right;"><a href="#" onclick="swap(\'tab\', false);return false;" class="funky left">Terug naar de kaart</a></div>');
        this.aHtml.push('<h2><img class="png" src="images/bol_bg_fefefe.png">' + this.oRouteData[sRoute].titel + '</h2>');
        this.aHtml.push('<div class="omschrijving">');
        // Hier een mini kaartje van de route?
        
        this.aHtml.push('<iframe src="http://172.16.0.1:8080/residentienet/?poimap=1&poiid=4" style="float:left;height:250px;width:250px;margin:15px 10px 10px 0;border:0;"></iframe>');
        this.aHtml.push('   <p>' + this.oRouteData[sRoute].omschrijving + '</p>');
        this.aHtml.push('</div><br>');
        
        this.getStatsHtml(sRoute);
        
        for ( var k in this.oRouteData[sRoute].oPoints ) {
            if ( typeof(this.oRouteData[sRoute].oPoints[k]._GeoInfo) != 'undefined') {
                this.getPointHtml(this.oRouteData[sRoute].oPoints[k]);
            }
        }
        
        this.aHtml.push('<div id="info_link">');
        this.aHtml.push('   Linken naar deze pagina:<br><input id="permLink" value="http://172.16.0.1:8080/residentienet/locatie/stadhuis" onclick="javascript:document.getElementById(\'permLink\').focus();document.getElementById(\'permLink\').select();" readonly="true" type="text">');
        this.aHtml.push('</div>');        
    }

    this.getPointHtml = function(oPoint){
        this.aHtml.push('  <a name="poi_' + oPoint._GeoInfo.route_poi_id + '"></a>');
        this.aHtml.push('<div class="info_extra info_route" style="height:200px;">');
        this.aHtml.push('   <div id="info_extra_middleborder">');
        this.aHtml.push('       <div id="info_adres">');
        if ( oPoint._GeoInfo.afbeelding != '' ) {
            this.aHtml.push('       <img src="' + sBaseUrl + oPoint._GeoInfo.afbeelding + '">');
        }
        this.aHtml.push('       </div>');        
        this.aHtml.push('       <div id="info_rubrieken" class="route_poi">');
        this.aHtml.push('           <h3>' + oPoint.title + '</h3>');
        this.aHtml.push('           ' + oPoint._GeoInfo.omschrijving);
        this.aHtml.push('       </div>');
        this.aHtml.push('   </div>');
        this.aHtml.push('   <a style="margin:-4px 0 0 0;float:right;" class="funky left" onclick="swap(\'tab\', false);oGeoStart.oRoutes.trigger(\'route_' + oPoint._GeoInfo.route_id + '\', \'routep' + oPoint._GeoInfo.route_poi_id + '\', \'click\');return false;" href="#">Toon op de kaart</a>');
        this.aHtml.push('</div>');        
    }
    
    
    this.getStatsHtml =function(sRoute){
        var iMeters = Math.round(this.oRouteData[sRoute].oPoly.getLength());
        var iPoiCount = 0;
        for ( var x in this.oRouteData[sRoute].oPoints ) { 
            iPoiCount++;
        }
        
        this.aHtml.push('<div class="info_extra info_route" style="height:25px;">');
        this.aHtml.push('   <div id="info_extra_middleborder">');
        this.aHtml.push('       <div id="info_adres">');
        this.aHtml.push('           Deze route is ' + iMeters + ' meter lang.');
        this.aHtml.push('       </div>');        
        this.aHtml.push('       <div id="info_rubrieken" class="route_poi">');
        this.aHtml.push('           ' + iPoiCount + ' bezienswaardigheden' );
        this.aHtml.push('       </div>');
        this.aHtml.push('   </div>');
        this.aHtml.push('</div>');        
    }
    
    
    this.poiIframe = function(iId){
        return '<iframe style="float:none;margin:2px;" src="' + sBaseUrl + '?poimap=1&poiid=' + iId + '" width="257" height="310"></iframe>';
    }
    
    
    
    this.pointListeners = function(oRef){
        GEvent.addListener(oRef, "mouseover", function() {
            if ( oRef.type == "point" ) {                
                oGeoStart.oRoutes.highlight('route_' + oRef._GeoInfo.route_id);
                
                if ( oGeoStart._bEnableHover ) {
                    oGeoStart._hoverListener.remove();
                
                    if ( oGeoStart._oTooltip.markerOnScreen(oRef.getPoint()) ) {                // Check if marker is onscreen
                        oGeoStart._oTooltip.checkAlign(oRef.g_type);
                        oGeoStart._oTooltip.setText(oRef.title);
                        oGeoStart._oTooltip.addCat('poi');
                        
                        oGeoStart._oTooltip.show(oRef.getPoint());
                    }
                }
            }
            
        });
        
        GEvent.addListener(oRef, 'mouseout', function(){ oGeoStart.oRoutes.update(); });
        
        GEvent.addListener(oRef, 'click', function(){            
            oRef.openInfoWindowHtml(oGeoStart.oRoutes.getInfoWindowHtml(oRef._GeoInfo['route_id'], oRef._GeoInfo['route_poi_id']));
        });
    }
    
    this.trigger = function(sRoute, sPoi, sEvent){
        if ( oGeoStart.oRoutes.oRouteData[sRoute].shows === true ) {
            GEvent.trigger(oGeoStart.oRoutes.oRouteData[sRoute].oPoints[sPoi], sEvent);
        }
    }
    
    
    this.getInfoWindowHtml = function(iRouteId, iPoiId){
        var aHtml = Array();
        
        aHtml.push('<div class="infoWindow">');
        aHtml.push('    <b>' + this.oRouteData['route_' + iRouteId].oPoints['routep'+iPoiId]._GeoInfo.titel + '</b><br />');
        
        aHtml.push('    <br /><a href="#" class="right" onclick="oGeoStart.oRoutes.showTabInfo(\'route_' + iRouteId + '\');oGeoStart.oRoutes.gotoPoiAnchor(\'' + iPoiId + '\');return false;">Meer informatie</a>');
        
        aHtml.push('    <div id="ballonSubgroepen">');
        aHtml.push('        <div class="ballonButton">');
        aHtml.push('            <a class="zoomAnchor" href="#" onclick="oGeoStart.oMap.zoomIn();return false;"><img src="GeoStart/images/controls/grey/small_plus.gif" alt="" /> Zoom in</a>');
        aHtml.push('            <a style="margin-left:10px;" class="zoomAnchor" onclick="oGeoStart.oMap.zoomOut();return false;" href="#"><img src="GeoStart/images/controls/grey/small_min.gif" alt="" /> Zoom uit</a>');
        
        aHtml.push('            <span style="display:block;clear:both;margin-top:3px;"><a class="zoomAnchor" href="#" onclick="oGeoStart.oRoutes.prevPoi('+iRouteId+', '+this.oRouteData['route_' + iRouteId].oPoints['routep'+iPoiId]._GeoInfo.sorteer+');return false;">Vorige</a> | <a class="zoomAnchor" onclick="oGeoStart.oRoutes.nextPoi('+iRouteId+', '+this.oRouteData['route_' + iRouteId].oPoints['routep'+iPoiId]._GeoInfo.sorteer+');return false;" href="#">Volgende</a></span>');
        
        aHtml.push('    </div>');
        aHtml.push('</div>');
        
        return aHtml.join('');        
    }
    
    
    this.nextPoi = function(iRoute, iSorteer){
        if ( iSorteer != this.oRouteData['route_' + iRoute]._PoiSort.length - 1 ) {
            this.trigger('route_' + iRoute, this.oRouteData['route_' + iRoute]._PoiSort[iSorteer + 1], 'click');
        } else {
            this.trigger('route_' + iRoute, this.oRouteData['route_' + iRoute]._PoiSort[1], 'click');
        }
    }
    
    this.prevPoi = function(iRoute, iSorteer){
        if ( iSorteer != this.oRouteData['route_' + iRoute]._PoiSort.length - 1 ) {
            this.trigger('route_' + iRoute, this.oRouteData['route_' + iRoute]._PoiSort[iSorteer - 1], 'click');
        } else {
            this.trigger('route_' + iRoute, this.oRouteData['route_' + iRoute]._PoiSort[this.oRouteData['route_' + iRoute]._PoiSort-1], 'click');
        }
    }
}