var Mapping = {
    markers: [],
    levels: {
        COUNTRY: { zoom: 6, lat: 53.195, lon: -1.8206 },
        REGIONAL: { zoom: 9 },
        PROPERTY: { zoom: 12 }
    }
};

Mapping.init = function () {

    var centre;

    if (!Mapping.level) { return; }

    if (Mapping.level == Mapping.levels.COUNTRY) {
        centre = new google.maps.LatLng(Mapping.levels.COUNTRY.lat, Mapping.levels.COUNTRY.lon);
    } else if (Mapping.level == Mapping.levels.REGIONAL) {
        var lat = Mapping.region.coords[1].lat - ((Mapping.region.coords[1].lat - Mapping.region.coords[0].lat) / 2);
        var lon = Mapping.region.coords[1].lon - ((Mapping.region.coords[1].lon - Mapping.region.coords[0].lon) / 2);
        centre = new google.maps.LatLng(lat, lon);
        
    } else { //property
        centre = new google.maps.LatLng(Mapping.lat, Mapping.lon);
    }

    var myOptions = {
        zoom: Mapping.level.zoom,
        center: centre,
        mapTypeControl: true,
        scrollwheel: false,
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        navigationControl: true,
        navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    Mapping.map = new google.maps.Map(document.getElementById("map"),
                                  myOptions);

    if (Mapping.level == Mapping.levels.COUNTRY || Mapping.level == Mapping.levels.REGIONAL) {

        for (var i = 0; i < Mapping.data.length; i++) {

            var point = new google.maps.LatLng(Mapping.data[i].lat, Mapping.data[i].lon);

            var html = "<p><strong>" + Mapping.data[i].nom + "</strong></p>"
            html += "<p><img style=\"float:right;margin-left:1em;\" src=\"/images/thumbnail/" + Mapping.data[i].id + "/80/64/"+Mapping.data[i].default_photo+"\" height=\"64\" width=\"80\" /></p>";
            html += "<p class=\"occupancy\">Sleeps <span class=\"number\">" + Mapping.data[i].occupancy.max + "</span></p><p><a href=\"/property/" + Mapping.data[i].id + "/"+Mapping.data[i].slug+"/\">Read more...</a></p>";

            var marker = Mapping.createMarker(point, Mapping.data[i].nom, html, false);
            Mapping.markers.push({ 'data': Mapping.data[i], 'marker': marker });
        }

        if (Mapping.level == Mapping.levels.REGIONAL) {
            //zoom to best fit for the region.
            var swLatLng = new google.maps.LatLng(Mapping.region.coords[0].lat, Mapping.region.coords[0].lon);
            var neLatLng = new google.maps.LatLng(Mapping.region.coords[1].lat, Mapping.region.coords[1].lon);
            Mapping.map.fitBounds(new google.maps.LatLngBounds(swLatLng, neLatLng));
        }

    } else if (Mapping.level == Mapping.levels.PROPERTY) {
        var point = new google.maps.LatLng(Mapping.data.lat, Mapping.data.lon);
        var marker = Mapping.createMarker(point, Mapping.data.nom, "<p><strong>" + Mapping.data.nom + "</strong></p><p>" + Mapping.data.address.replace(/\n/g, ",<br />") + "</p><p>" + Mapping.data.phone + "</p>", true);
    }

    Mapping.geocoder = new google.maps.Geocoder();

}

Mapping.createMarker = function (point, name, html, showInfoWindow) {
    // use a custom icon with letter A - Z

    var infowindow = new google.maps.InfoWindow({
        content: html
    });

    var marker = new google.maps.Marker({
        position: point,
        map: Mapping.map,
        icon: image,
        title: name
    });

    if (showInfoWindow) { infowindow.open(Mapping.map, marker); }
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(Mapping.map, marker);
    });

    return marker;
}

//http://code.google.com/apis/maps/documentation/v3/reference.html#Map

Mapping.updateMap = function () {

    address = document.getElementById('close_to').value;
    if (address != '' && Mapping.close_to != address) {
        Mapping.close_to = address;

        Mapping.geocoder.geocode({ 'address': address }, function (results, status) {

            if (status == google.maps.GeocoderStatus.OK) {
                Mapping.map.setCenter(results[0].geometry.location);
                Mapping.map.setZoom(11);

            } else {
                alert("Map search was not successful for the following reason: " + status);
            }
        });
    }

    for (var i = 0; i < Mapping.markers.length; i++) {
        if (Mapping.markers[i].data.occupancy.max >= parseInt(document.getElementById('max_occupancy').options[document.getElementById('max_occupancy').selectedIndex].text, 10)) {
            if (Mapping.markers[i].marker.getMap() != Mapping.map) {
                Mapping.markers[i].marker.setMap(Mapping.map);
            }

        } else {
            Mapping.markers[i].marker.setMap(null);
        }
    }
}



Mapping.goToRegion = function (region) {
    //var lat = region.coords[1].lat - ((region.coords[1].lat - region.coords[0].lat) / 2);
    //var lon = region.coords[1].lon - ((region.coords[1].lon - region.coords[0].lon) / 2);
    //Mapping.map.setCenter(new google.maps.LatLng(lat, lon), 9);

    
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(new google.maps.LatLng(region.coords[0].lat, region.coords[0].lon));
    bounds.extend(new google.maps.LatLng(region.coords[1].lat, region.coords[1].lon));
    Mapping.map.fitBounds(bounds);
}

var image = new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_red.png',
            new google.maps.Size(12, 20),
            new google.maps.Point(0, 0),
            new google.maps.Point(6, 20)
);

var shadow = new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_shadow.png',
            new google.maps.Size(28, 20),
            new google.maps.Point(-6, 0)
);

google.maps.event.addDomListener(window, "load", Mapping.init);