/*
 * byFranco 20100222
 *
 * utility per le mappe di google con percorso personalizzato
 *
 */
// API di google: http://code.google.com/intl/it/apis/maps/documentation/reference.html
function initialize() {
    if (GBrowserIsCompatible()) {
        map=new GMap2(document.getElementById(map_canvas));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(map_center, map_zoom);
        gdir = new GDirections();
        dest_marker= new GMarker(dest_point, ico_dest);
        map.addOverlay(dest_marker);
        openInfo();
        GEvent.addListener(dest_marker, "click", openInfo);
        GEvent.addListener(gdir,"load",onGDirectionsLoad );
        directionOptions= {
            locale: locale,
            getPolyline: true,
            getSteps:true
        };
    }
}

function openInfo()
{
    dest_marker.openInfoWindowTabsHtml(dest_point_tabs);
}


function onGDirectionsLoad(){
    setTimeout('customPanel(map,"map",gdir,document.getElementById('+map_detail+'))', 1);
    var poly = gdir.getPolyline();
    var count = poly.getVertexCount();
    var bounds = poly.getBounds();
    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
    map.addOverlay(poly);
    map.addOverlay(new GMarker(poly.getVertex(0), ico_start));
    map.addOverlay(new GMarker(poly.getVertex(count - 1), ico_dest));
}


function setDirections(fromAddress) {
    map.removeOverlay(dest_marker);
    gdir.load("from: "+ fromAddress+ " to: "+dest_point, directionOptions);

}



// ============ custom direction panel ===============
function customPanel(map,mapname,dirn,div)
{
    var html = "";

    // ===== local functions =====

    // === waypoint banner ===
    function waypoint(point, type, address) {
        var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
        html += '	<form action=""><input type="submit" value="Annulla percorso"></form>';
        html += '<table style="border: 1px solid silver; margin: 10px 0px; background-color: rgb(238, 238, 238); border-collapse: collapse; color: rgb(0, 0, 0);">';
        html += '  <tr style="cursor: pointer;" onclick='+target+'>';
        html += '    <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
        html += '      <img src="dove/ico_start.png" border=0>'
        html += '    </td>';
        html += '    <td style="vertical-align: middle; width: 100%;" class="testo">Da: ';
        html +=        address;
        html += '    </td>';
        html += '  </tr>';
        html += '</table>';
    }

    function waypointend(point, type, address) {
        var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
        html += '<table style="border: 1px solid silver; margin: 10px 0px; background-color: rgb(238, 238, 238); border-collapse: collapse; color: rgb(0, 0, 0);">';
        html += '  <tr style="cursor: pointer;" onclick='+target+'>';
        html += '    <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
        html += '      <img src="dove/ico_dest.png" border=0>'
        html += '    </td>';
        html += '    <td style="vertical-align: middle; width: 100%;" class="testo">'+ dest_descr;
        html += '    </td>';
        html += '  </tr>';
        html += '</table>';
    }

    // === route distance ===
    function routeDistance(dist) {
        html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '</div>';
    }

    // === step detail ===
    function detail(point, num, description, dist) {
        var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
        html += '<table style="margin: 0px; padding: 0px; border-collapse: collapse;">';
        html += '  <tr style="cursor: pointer;" class="testo" onclick='+target+'>';
        html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; text-align: right;">';
        html += '      <a href="javascript:void(0)"> '+num+'. </a>';
        html += '    </td>';
        html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; width: 100%;">';
        html +=        description;
        html += '    </td>';
        html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px 0.3em 0.5em; vertical-align: top; text-align: right;">';
        html +=        dist;
        html += '    </td>';
        html += '  </tr>';
        html += '</table>';
    }

    // === Copyright tag ===
    function copyright(text) {
        html += '<div style="font-size: 0.86em;">' + text + "</div>";
    }


    // === read through the GRoutes and GSteps ===

    for (var i=0; i<dirn.getNumRoutes(); i++) {
        if (i==0) {
            var type="play";
        } else {
            var type="pause";
        }
        var route = dirn.getRoute(i);
        var geocode = route.getStartGeocode();
        var point = route.getStep(0).getLatLng();
        // === Waypoint at the start of each GRoute
        waypoint(point, type, geocode.address);
        routeDistance(route.getDistance().html+" (about "+route.getDuration().html+")");

        for (var j=0; j<route.getNumSteps(); j++) {
            var step = route.getStep(j);
            // === detail lines for each step ===
            detail(step.getLatLng(), j+1, step.getDescriptionHtml(), step.getDistance().html);
        }
    }

    // === the final destination waypoint ===
    var geocode = route.getEndGeocode();
    var point = route.getEndLatLng();
    waypointend(point, "stop", geocode.address);

    // === the copyright text ===
    copyright(dirn.getCopyrightsHtml());

    // === drop the whole thing into the target div
    div.innerHTML = html;

} // ============ end of customPanel function ===========