// initialise variables
var numberOfOffices = offices.office.length; // number of data items

var ln = [numberOfOffices], // array to store lat/long locations
    mk = [numberOfOffices], // array to store map location markers
    cs = [numberOfOffices], // array to store infowindow markup
    iw = [numberOfOffices], // array to store popups (infowindows)
    mk = [numberOfOffices] // array to store click listeners

var zedIndex = 99; // intial z-index value

function initialize() { // display the map
    
    // initialise map centre
    var mapCenter = new google.maps.LatLng(53.753475, -1.834717);
    
    // map display options
    var myOptions = {
            zoom:6,
            center: mapCenter,
            navigationControl: true,
            scaleControl: true,
            mapTypeControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    // instantiate map
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    for (i=0;i<offices.office.length;i++) {
        
        // set zIndex value
        zedIndex = zedIndex - i;
        
        // office location
        ln[i] = new google.maps.LatLng(offices.office[i].latitude, offices.office[i].longitude);
        
        // add map location marker
        mk[i] = new google.maps.Marker({
            position: ln[i],
            map: map,
            icon: '/assets/images/icon_gm_marker.png',
            title: offices.office[i].orgunit,
            zIndex: zedIndex
        });        
        
        // define markup for infowindow popup
        cs[i] = "<div class='gm-marker-popup vcard'>"
                    + "<div class='fn org'>"
                        + "<span class='organisation-name'>" + offices.office[i].orgname + "</span>"
                        + "<span class='organisation-unit'>" + offices.office[i].orgunit + "</span>"
                    + "</div>"
                    + "<div class='adr'>"
                        + "<span class='street-address'>"   + offices.office[i].street      + "</span>"
                        + "<span class='extended-address'>" + offices.office[i].extended    + "</span>"
                        + "<span class='locality'>"         + offices.office[i].locality    + "</span>"
                        + "<span class='region'>"           + offices.office[i].region      + "</span>"
                        + "<span class='postal-code'>"      + offices.office[i].postcode    + "</span>"
                    + "</div>"
                    + "<div class='tel'>"
                        + "<span>Tel: <span class='type'>work</span>"
                        + "<span class='value'>" + offices.office[i].telno + "</span></span>"
                    + "</div>"
                + "</div>";        
        
        // add popup to map
        iw[i] = new google.maps.InfoWindow({
            content: cs[i],
            maxWidth: 250
        });

    }

    // add click event listener to each map marker
    // for some reason these have to be stated explicitly...which is a shame
    // putting them in a for loop throws a 'iw[i] is undefined error'
    // on the addListener callback function
    
    google.maps.event.addListener(mk[0],  'click', function() { iw[0].open(map, mk[0]); });
    google.maps.event.addListener(mk[1],  'click', function() { iw[1].open(map, mk[1]); });
    google.maps.event.addListener(mk[2],  'click', function() { iw[2].open(map, mk[2]); });
    google.maps.event.addListener(mk[3],  'click', function() { iw[3].open(map, mk[3]); });
    google.maps.event.addListener(mk[4],  'click', function() { iw[4].open(map, mk[4]); });
    google.maps.event.addListener(mk[5],  'click', function() { iw[5].open(map, mk[5]); });
    google.maps.event.addListener(mk[6],  'click', function() { iw[6].open(map, mk[6]); });
    google.maps.event.addListener(mk[7],  'click', function() { iw[7].open(map, mk[7]); });
    google.maps.event.addListener(mk[8],  'click', function() { iw[8].open(map, mk[8]); });
    google.maps.event.addListener(mk[9],  'click', function() { iw[9].open(map, mk[9]); });
    google.maps.event.addListener(mk[10], 'click', function() { iw[10].open(map, mk[10]); });
    google.maps.event.addListener(mk[11], 'click', function() { iw[11].open(map, mk[11]); });
    google.maps.event.addListener(mk[12], 'click', function() { iw[12].open(map, mk[12]); });
    google.maps.event.addListener(mk[13], 'click', function() { iw[13].open(map, mk[13]); });
    google.maps.event.addListener(mk[14], 'click', function() { iw[14].open(map, mk[14]); });
    google.maps.event.addListener(mk[15], 'click', function() { iw[15].open(map, mk[15]); });
    google.maps.event.addListener(mk[16], 'click', function() { iw[16].open(map, mk[16]); });
    google.maps.event.addListener(mk[17], 'click', function() { iw[17].open(map, mk[17]); });
    google.maps.event.addListener(mk[18], 'click', function() { iw[18].open(map, mk[18]); });
    google.maps.event.addListener(mk[19], 'click', function() { iw[19].open(map, mk[19]); });
    google.maps.event.addListener(mk[20], 'click', function() { iw[20].open(map, mk[20]); });
    google.maps.event.addListener(mk[21], 'click', function() { iw[21].open(map, mk[21]); });

}