var map
var marker_start
var marker_ziel
var directions
var geocoder
var polyline
var distance
var duration
var bounds
var startLatLng
var zielLatLng
var error
var oldHtml
var request

window.onload = function() {
    breakout_of_frame()
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("api"))
        map.disableDragging()
        map.disableInfoWindow()
        map.disableDoubleClickZoom()
        map.disableContinuousZoom()
        map.disableGoogleBar()
        map.disableScrollWheelZoom()
        map.removeMapType(G_SATELLITE_MAP)
        map.removeMapType(G_HYBRID_MAP)
        map.addMapType(G_NORMAL_MAP)
        map.addMapType(G_PHYSICAL_MAP)
        map.addControl(new GMapTypeControl())
        map.addControl(new GLargeMapControl())
        map.setCenter(new GLatLng(50.7, 9.9), 5)
                map.enableDragging()
        map.enableDoubleClickZoom()
        map.enableContinuousZoom()
        map.enableScrollWheelZoom()
        map.setCenter(new GLatLng(51.3316301346,6.55928349355), 12)
        GEvent.addListener(map, "click", click)
        geocoder = new GClientGeocoder();
            }
}
function breakout_of_frame()
{
  if (top.location != location) {
    top.location.href = document.location.href
  }
}
function showError(elemid, text) {
    error = true
    var elem = document.getElementById(elemid)
    elem.style.color = '#ff0000';
    document.getElementById(elemid+'_error').innerHTML = text
    document.getElementById(elemid+'_error').style.display = "block"
    document.getElementById(elemid+'_error').style.visibility = "visible"
    document.getElementById('preis').innerHTML = oldHtml
    document.getElementById('preis').style.textAlign = 'left'
}
function resetError() {
    error = false
    document.getElementById('start_error').innerHTML = ''
    document.getElementById('start_error').style.display = "none"
    document.getElementById('ziel_error').innerHTML = ''
    document.getElementById('ziel_error').style.display = "none"
    try {
        document.getElementById('start_error').style.visibility = "collapse"
        document.getElementById('ziel_error').style.visibility = "collapse"
    } catch(e) {/* f*ckin internet explorer */}
}
function getIcon(start) {
    icon = new GIcon(G_DEFAULT_ICON)
    icon.image = start ? "http://www.google.com/mapfiles/dd-start.png" : "http://www.google.com/mapfiles/dd-end.png"
    return icon
}
function click(marker, point) {
    if(marker || !point) return false
    if(!marker_start && (document.getElementById('start').value == 'Adresse hier oder Karte benutzen' || 'Adresse wurde nicht gefunden!')) {
        marker_start = new GMarker(point, {'icon':getIcon(true), 'title':'Startpunkt', 'draggable':true})
        GEvent.addListener(marker_start, 'dragend', dragendStart)
        map.addOverlay(marker_start)
        geocoder.getLocations(point, getStartAddress);
    }
    else if(!marker_ziel && (document.getElementById('ziel').value == 'Adresse hier oder Karte benutzen' || 'Adresse wurde nicht gefunden!')) {
        marker_ziel = new GMarker(point, {'icon':getIcon(false), 'title':'Zielpunkt', 'draggable':true})
        GEvent.addListener(marker_ziel, 'dragend', dragendZiel)
        map.addOverlay(marker_ziel)
        geocoder.getLocations(point, getZielAddress);
    }
}
function getStartAddress(response) {
    if (!response || response.Status.code != 200) {
        document.getElementById("start").value = "Adresse wurde nicht gefunden!"
        document.getElementById("start").style.color = "#ff0000"
        document.getElementById('preis').innerHTML = oldHtml
        document.getElementById('preis').style.textAlign = 'left'
        map.removeOverlay(marker_start)
        marker_start = false
    }
    else {
        place = response.Placemark[0]
        address = place.address
        address = address.replace(/^(.{5,}\d\d\d\d\d).*$/i, "$1")
        document.getElementById("start").value = address
        document.getElementById("start").style.color = "#000000"
    }
}
function getZielAddress(response) {
    if (!response || response.Status.code != 200) {
        document.getElementById("ziel").value = "Adresse wurde nicht gefunden!"
        document.getElementById("ziel").style.color = "#ff0000"
        document.getElementById('preis').innerHTML = oldHtml
        document.getElementById('preis').style.textAlign = 'left'
        map.removeOverlay(marker_ziel)
        marker_ziel = false
    }
    else {
        place = response.Placemark[0]
        address = place.address
        address = address.replace(/^(.{5,}\d\d\d\d\d).*$/i, "$1")
        document.getElementById("ziel").value = address
        document.getElementById("ziel").style.color = "#000000"
    }
}
function dragendStart() {
    point = marker_start.getLatLng()
    geocoder.getLocations(point, getStartAddress);
}
function dragendZiel() {
    point = marker_ziel.getLatLng()
    geocoder.getLocations(point, getZielAddress);
}
function loadLatLng() {
    oldHtml = document.getElementById('preis').innerHTML
    document.getElementById('preis').innerHTML = '<img src="/images/de/loading.gif" alt="lade..." width="32" height="32">'
    document.getElementById('preis').style.textAlign = 'center'
    start = 'Krefeld, '
    ziel = 'Krefeld, '
    geocoder.getLatLng(start, loadedStart)
    geocoder.getLatLng(ziel, loadedZiel)
}
function loadedStart(LatLng) {
    error = false
    if(!LatLng) {
        showError("start", "Die Adresse konnte leider nicht gefunden werden")
        return
    }
    startLatLng = LatLng
}
function loadedZiel(LatLng) {
    if(!LatLng) {
        showError("ziel", "Die Adresse konnte leider nicht gefunden werden")
        return
    }
    zielLatLng = LatLng
    showRoute()
}
function showRoute() {
    if (error) return false;
    directions = new GDirections(map)
    GEvent.addListener(directions, 'addoverlay', routeLoad)
    directions.loadFromWaypoints(new Array(startLatLng, zielLatLng))
}
function routeLoad() {
    polyline = directions.getPolyline()
    distance = polyline.getLength()
    duration = directions.getDuration()
    bounds = directions.getBounds()
    directions.clear()
    var redpolyline = createRedPolyline()
    map.addOverlay(redpolyline)
    marker_start = new GMarker(polyline.getVertex(0), {'icon':getIcon(true), 'title':'Startpunkt', 'draggable':true})
    GEvent.addListener(marker_start, 'dragend', dragendStart)
    GEvent.addListener(marker_start, 'dragend', recalculateRoute)
    map.addOverlay(marker_start)
    marker_ziel = new GMarker(polyline.getVertex(polyline.getVertexCount()-1), {'icon':getIcon(false), 'title':'Zielpunkt', 'draggable':true})
    GEvent.addListener(marker_ziel, 'dragend', dragendZiel)
    GEvent.addListener(marker_ziel, 'dragend', recalculateRoute)
    map.addOverlay(marker_ziel)
    requestPrice()
    map.zoomOut()
}
function createRedPolyline() {
    var vertexes = new Array();
    for(var i = 0; i<polyline.getVertexCount();i++) {
        vertexes[i] = polyline.getVertex(i)
    }
    var redpolyline = new GPolyline(vertexes, '#ff0000')
    return redpolyline
}
function recalculateRoute() {
    resetError()
    document.getElementById('preis').innerHTML = '<img src="/images/de/loading.gif" alt="lade..." width="32" height="32">'
    map.clearOverlays()
    startLatLng = marker_start.getLatLng()
    zielLatLng = marker_ziel.getLatLng()
    showRoute()
}
function requestPrice() {
    request = ajax();
    var target = "/rechner.php?distance="+distance+"&duration="+duration.seconds
    request.open('GET', target, true)
    request.onreadystatechange = displayPrice
    request.send(null)
}
function displayPrice() {
    if(request.readyState != 4) return
    prices = request.responseText
    if(prices == 'error') {
        document.getElementById('preis').innerHTML = '<span style="color:#ff0000;">Es ist ein Fehler w&auml;hrend der Berechnung Ihrer Anfrage aufgetreten!</span>'
        document.getElementById('preis').innerHTML += '<br /><br />Bitte versuchen Sie es <a href="/de/krefeld">sp&auml;ter erneut</a>.'
        document.getElementById('preis').innerHTML += '<br /><br />Bei wiederholtem Auftreten dieses Fehlers informieren Sie uns bitte'
        document.getElementById('preis').innerHTML += ' unter <a href="mailto:report@takeataxi.de">report@takeataxi.de</a>.'
        document.getElementById('preis').style.textAlign = 'left'
        return
    }
    var priceparts = prices.split("|")
    preisOhne = priceparts[0]
    preisNormal = priceparts[1]
    preisStark = priceparts[2]
    minOhne = parseInt(priceparts[3])
    minNormal = parseInt(priceparts[4])
    minStark = parseInt(priceparts[5])
    var html = ''
    html += (Math.round(distance/100)/10)+' km + Wartezeit'
    html += '<table style="width : 100%; margin : 0; margin-top : 30px;"><tr>';
    html += '<td style="height : 20px; font-family : georgia; color : #cccccc; font-size : 18px; text-align : left;">&euro;'+preisOhne+'</td>'
    html += '<td style="height : 27px; font-family : georgia; color : #000000; font-size : 25px; text-align : center;">&euro;'+preisNormal+'</td>'
    html += '<td style="height : 20px; font-family : georgia; color : #cccccc; font-size : 18px; text-align : center;">&euro;'+preisStark+'</td>'
    html += '</tr></table>'
    html += '<table style="width : 100%; background-color : #cccccc; margin : 0; margin-top : 5px; text-align : center;"><tr>';
    html += '<td style="height : 28px; text-align : center;">Preis<br />'+minOhne+' min</td>'
    html += '<td style="height : 28px; text-align : center; padding-top : 4px; padding-bottom : 4px;">normal Verkehr<br />'+(minOhne+minNormal)+' min</td>'
    html += '<td style="height : 28px; text-align : center;">stark<br />'+(minOhne+minStark)+' min</td>'
    html += '</tr></table>'
    document.getElementById('preis').innerHTML = html
    document.getElementById('preis').style.textAlign = 'center'
}