var stationIcon = null;
var line_array = new Array();
var station_array = new Array();
var transparent_layer = null;

$(document).ready(function() {
    loadMap();
    initTubeLines();
});

function loadMap() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(initial['lat'], initial['lng']), initial['zoom']);
        addTransparentLayer();
        
        GEvent.addListener(map, "move", addTransparentLayer);
               
        stationIcon = new GIcon();
        stationIcon.iconSize         = new GSize(14, 12)
        stationIcon.shadowSize       = new GSize(0, 0);
        stationIcon.iconAnchor       = new GPoint(6, 6);
        stationIcon.infoWindowAnchor = new GPoint(9, 2);
        stationIcon.infoShadowAnchor = new GPoint(6, 6);
        stationIcon.image = "/gfx/icon_tube.png";
        
    }
}

function initTubeLines() {
    $('.tubeline').each(function() {
        var id = $(this).attr("id");
        $(this).parent().addClass(id);
        $(this).click(function() {
            showLine(id, this.checked);
        });
    });
}

function addTransparentLayer() {
    if (transparent_layer != null) {
        map.removeOverlay(transparent_layer);
    }
    var north = map.getBounds().getNorthEast().lat();
    var east = map.getBounds().getNorthEast().lng();
    var south = map.getBounds().getSouthWest().lat();
    var west = map.getBounds().getSouthWest().lng();
    
    transparent_layer = new GPolygon([
        new GLatLng(north, west),
        new GLatLng(north, east),
        new GLatLng(south, east),
        new GLatLng(south, west),
        new GLatLng(north, west)
    ], "", 0, 0, "#cccccc", 0.2);
    map.addOverlay(transparent_layer);
}

function showLine(line, toggle) {
    if (toggle) {
        station_array[line] = null;
        station_array[line] = new Array();
        for (var i=0; i<_lines.length; i++) {
            var current_line = _lines[i];
            if (current_line.name == line) {
                var stations = current_line.stations;
                var poly = [];
                for (var j=0; j<stations.length; j++) {
                    var station = stations[j];
                    var latlng  = new GLatLng(station.lat, station.lng);
                    poly.push(latlng);
                    var marker = new GMarker(latlng, { icon: stationIcon });
                    addStation(marker, station.name);
                    station_array[line].push(marker);
                }
                var line_poly = new GPolyline(poly, current_line.color, 5, 0.9);
                map.addOverlay(line_poly);
                line_array[line] = line_poly;
            }
        }
    }
    else {
        map.removeOverlay(line_array[line]);
        for (var i=0;i<station_array[line].length;i++) {
            map.removeOverlay(station_array[line][i]);
        }
    }
}

function showLines(toggle) {
    if (toggle) {
        $('.tubeline').each(function() {
            this.checked = true;
            showLine($(this).attr("id"), true);
        });
    }
    else {
        $('.tubeline').each(function() {
            this.checked = false;
            showLine($(this).attr("id"), false);
        });
    }
}

function addStation(marker, name) {
    map.addOverlay(marker);
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml("<b class='tube'>" + name + "</b>");
    });
}