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

    function buildMap(response){

        var branch = response.branches[0];
        var location = branch.location.split(',');

        if (location.length >= 3) {
            var point = new google.maps.LatLng(location[0], location[1]);

            var mapOptions = {
                zoom: location[2].toInt(),
                center: point,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

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


            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);
            });
        } else {
            $("map_canvas").setStyle("display", "none");
        }
    }

    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);
    }
});