// initially go to Brandenburger Tor
var lat = 52.516275,
    lon = 13.377704,
    zoom = 13;

var map;

var filling_stations = {};
var filling_station_markers;

query_location = function(updater) {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            lat = position.coords.latitude;
            lon = position.coords.longitude;
            if(updater){
                updater(lat, lon);
            }
        });
    }
}

update_map = function() {
    var lonLat = new OpenLayers.LonLat( lon, lat )
        .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
        );
    map.setCenter (lonLat, zoom);
    //load_filling_stations();
}

load_filling_stations = function() {
    var url = '/filling_stations?latitude=' + lat + '&longitude='+ lon + '&type=all&radius=5&sort=dist';
    $.ajax({
        type: 'GET',
        url: url,
        success: function(data) {
            data.stations.forEach(function(station) {
                if (!(station.id in filling_stations)) {
                    filling_stations[station.id] = station;
                    filling_stations[station.id].marker = false;
                }
            });
            update_filling_station_markers();
        }
    });
}

clicked_on_filling_station_marker = function(station) {
    return function() {
        console.log(station)
/*
        var desc =  '<div>'+
                    '<div class="row">' +
                    '<div class="col-md-6" style="text-align: left;">' + station.brand + '</div>' +
                    '<div class="col-md-3" style="text-align: left;">Super:</div>' +
                    '<div class="col-md-3" style="text-align: left;">'+ station.e5 + '€</div>' +
                    '</div>' +
                    '<div class="row">' +
                    '<div class="col-md-6" style="text-align: left;">' + station.name + '</div>' +
                    '<div class="col-md-3" style="text-align: left;">Super E10:</div>' +
                    '<div class="col-md-3" style="text-align: left;">'+ station.e10 + '€</div>' +
                    '</div>' +
                    '<div class="row">' +
                    '<div class="col-md-6"  style="text-align: left;">' + station.street + ' ' + station.houseNumber + '</div>' +
                    '<div class="col-md-3" style="text-align: left;">Diesel:</div>' +
                    '<div class="col-md-3" style="text-align: left;">'+ station.diesel + '€</div>' +
                    '</div>' +
                    '<div class="row">' +
                    '<div class="col-md-6"  style="text-align: left;">' + station.postCode + ' ' + station.place + '</div>' +
                    '<div class="col-md-3" style="text-align: left;">Open:</div>' +
                    '<div class="col-md-3" style="text-align: left;">'+ station.isOpen + '€</div>' +
                    '</div>' +
                    '</div>';
        $('#station_info').empty();
        $('#station_info').html(desc);
*/
    }
}

update_filling_station_markers = function() {
    for(id in filling_stations) {
        var station = filling_stations[id];
        if(!station.marker) {
            console.log(station.id);
            var lonLat = new OpenLayers.LonLat(station.lng, station.lat)
                            .transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
			var marker = new OpenLayers.Marker(lonLat);
			marker.events.register('click', marker, clicked_on_filling_station_marker(station));
			filling_station_markers.addMarker(marker);
            station.marker = true;
        }
    }
}

activate_map = function(map_div_id, button_ids, home_lat, home_long, home_zoom) {
    // resize to reasonable height
    $('#' + map_div_id).css('height',0.75*($('#' + map_div_id).css('width')));

    // init map
    map = new OpenLayers.Map(map_div_id);
    map.addLayer(new OpenLayers.Layer.OSM());
    map.events.register('moveend', null, function(e){
        var p = e.object.center.clone();
        var p = p.transform(map.getProjectionObject(), 'EPSG:4326');
        lon = p.lon;
        lat = p.lat;
        zoom = e.object.zoom;
    });
    filling_station_markers = new OpenLayers.Layer.Markers('Filling Stations');
    map.addLayer(filling_station_markers);
    update_map();
    if ((home_lat == 0) && (home_long == 0)) {
        query_location(update_map);
    } else  {
        lat = home_lat;
        lon = home_long;
        zoom = home_zoom;
        console.log(lat, long);
        update_map();
    }

    // get button
    $('#'+button_ids[0]).click(function(e){
        console.log('clicked get button');
        load_filling_stations();
    });
    // set home button
    $('#'+button_ids[1]).click(function(e){
        console.log('clicked set home');
        console.log(lon);
        console.log(lat);
        console.log(zoom);
        $.ajax({
            type: 'POST',
            url: '/account/home',
            data: JSON.stringify({'long': lon, 'lat': lat, 'zoom': zoom}),
            dataType: 'json',
            timeout: 1000,
            contentType : 'application/json'
        });
    });
    // go home button
    $('#'+button_ids[2]).click(function(e){
        console.log('clicked the go home button');
        $.ajax({
            type: 'GET',
            url: '/account/home',
            dataType: 'json',
            timeout: 1000,
            success: function(data) {
                console.log(data);
                lat = data.lat;
                lon = data.long;
                zoom = data.zoom;
                update_map();
            },
            contentType : 'application/json'
        });
    });
}