function MapContainer(canvas, options) {
    var map = SetMap(canvas, options);

    function SetMap(canvas, options) {
        if (options == null) {
            var latlng = new google.maps.LatLng(46.190764243215256, 8.9198684692382812);
            var options = {
                zoom: 5,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            };
        }
        return new google.maps.Map(canvas, options);
    }

    this.AddEvent = function(event, action) {
        return google.maps.event.addListener(map, event, action);
    }


    //Event handler to place a marker on the map
    this.PlaceMarker = function(point) {
        point.Place(map);
        return point;
    }

    this.HideMarker = function(point) {
        point.Hide();
        return point;
    }

    this.SetZoom = function(zoomLevel) {
        map.setZoom(parseInt(zoomLevel));
    }
    this.GetZoom = function() {
        return map.getZoom();
    }

    this.SetCenter = function(center) {
        map.setCenter(center);
    }
    this.GetCenter = function() {
        return map.getCenter();
    }

    this.Reset = function() {

    }
}


var Point = Class.extend({
    init: function(location, text) {
        this.marker = new google.maps.Marker({ position: location });
        if (text == null || text == "") {
            text = location.toString();
        }
        this.infoWindow = new google.maps.InfoWindow({ content: text, size: new google.maps.Size(100, 20) });

        var marker = this.marker;
        var infoWindow = this.infoWindow;
        this.clickListener = google.maps.event.addListener(marker, "click", function() { infoWindow.open(marker.getMap(), marker); });
        this.dragListener = null;
    },

    Place: function(map, isVisible) {
        this.marker.setMap(map);

        var visible = true;
        if (isVisible == false) {
            visible = false;
        }
        this.marker.setVisible(visible);
    },

    RemoveListener: function(action) { },

    GetPosition: function() { return this.marker.getPosition(); },

    Hide: function() {
        if (this.infowindow != null) {
            this.infowindow.close();
        }

        this.marker.setVisible(false);
    },

    SetDraggable: function(draggable, action) {
        this.marker.setDraggable(draggable);

        if (action && draggable) {
            this.dragListener = google.maps.event.addListener(this.marker, "dragend", action);
        }
    }
});

var InfoPoint = Point.extend({
    init: function(location, text) {
        this._super(location, text);

        // this.marker.set_icon("http://maps.google.com/mapfiles/kml/pal3/icon56.png");
    }
});

var StartPoint = Point.extend({
    init: function(location, text) {
        if (text == null || text == "") {
            text = "Partenza";
        }
        this._super(location, text);

        this.marker.setIcon("http://maps.google.com/mapfiles/ms/micons/realestate.png");
    }
});

var StopPoint = Point.extend({
    init: function(location, text) {
        if (text == null || text == "") {
            text = "Arrivo";
        }
        this._super(location, text);

        this.marker.setIcon("http://maps.google.com/mapfiles/ms/micons/flag.png");
    }
});


/* 
    dom manpulations 
    GLOBAL variables in here
*/

var startPoint = null;
var stopPoint = null;

/* end dom */
function LoadHill() {
    var centerLatitude = $("#CenterLatitude").val();
    var centerLongitude = $("#CenterLongitude").val();
    var mapZoom = $("#MapZoom").val();
    var startLatitude = $("#StartLatitude").val();
    var startLongitude = $("#StartLongitude").val();
    var stopLatitude = $("#StopLatitude").val();
    var stopLongitude = $("#StopLongitude").val();

    map.SetZoom(mapZoom);
    map.SetCenter(new google.maps.LatLng(centerLatitude, centerLongitude));
    
    startPoint = new StartPoint(new google.maps.LatLng(startLatitude, startLongitude));
    map.PlaceMarker(startPoint);

    stopPoint = new StopPoint(new google.maps.LatLng(stopLatitude, stopLongitude));
    map.PlaceMarker(stopPoint);
}

function LoadHills() {
    for (i = 0; i < points.length; i++) {
        map.PlaceMarker(new InfoPoint(new google.maps.LatLng(points[i].Lat, points[i].Lon), GetHillTitle(points[i])));
    };
}

function PlaceHillBounds(isNew) {
    var action = function(marker, bound) {
    if (bound == "Start" || bound == "Stop") {
            $("#" + bound + "Latitude").val(marker.GetPosition().lat());
            $("#" + bound + "Longitude").val(marker.GetPosition().lng());
            
        }
        else {
            alert("DOM field not found.");
        }
    }

    if (isNew == true) {
        startPoint = new StartPoint(map.GetCenter());
        map.PlaceMarker(startPoint);
    }
    startPoint.SetDraggable(true, function() { action(startPoint, "Start"); });
    

    if (isNew == true) {
        stopPoint = new StopPoint(map.GetCenter());
        map.PlaceMarker(stopPoint);
    }
    stopPoint.SetDraggable(true, function() { action(stopPoint, "Stop"); });
    

    map.AddEvent("zoom_changed", function() { $("#MapZoom").val(map.GetZoom()); });
    map.AddEvent("center_changed", function() {
        $("#CenterLatitude").val(map.GetCenter().lat());
        $("#CenterLongitude").val(map.GetCenter().lng());
    });
}



function GetHillTitle(point) {
    var title = "<b>" + point.Name + ' da ' + point.Start + '</b><br />';
    var hill = '<a href="http://39x27.com/hills.mvc/detail/' + point.Id;
    var chart = '<a href="http://39x27.com/charts.mvc/open/' + point.Id + '">Classifica</a>';

    var detail = hill + '">Salita</a>';
    var stats = hill + '?show=stats">Statistiche</a>';
    var profile = hill + '?show=profile">Altimetria</a>';
    var map = hill + '?show=maps">Mappa</a>';

    var separator = "&nbsp;&nbsp;";

    var text = title + detail + separator + stats + separator + profile + separator + map + separator + chart;
    return text;
}