window.addEvent('domready', function (){
    var request = new Request.JSON({
        url: "?altTemplate=branch-json",
        onSuccess: buildMap
    }).get();

    function buildMap(response){
        var branches = response.branches;
        var point = new google.maps.LatLng(-41.37680856570233, 174.3310546875);
        var mapOptions = {
            'zoom': 5,
            'center': point,
            'mapTypeId': google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map($("map_canvas"), mapOptions);

        branches.each(function (branch){
            var location = branch.location.split(',');
            var point = new google.maps.LatLng(location[0], location[1]);
            var mark = new google.maps.Marker({
                'position': point,
                'map': map
            });

            var info = new google.maps.InfoWindow({
                'content': infoContent(branch)
            });

            google.maps.event.addListener(mark, 'click', function() {
                info.open(map,mark);
            });
        });
    }

    function infoContent(branch){
        var html =  "<h1>{company}</h1>" + 
        "<p>{street}</p>" +
        "<p>Postal Address: {postal}</p>" +
        "<p><a href=\"mailto:{email}\" >{email}</a>" + 
        "<p>Phone: {phone}</p>" +
        "<p>Fax: {fax}</p>";

        return html.substitute(branch);
    }
});