mapWrapper = {
        map:null,
        mgr:null,
        regions: [[30, -97.734, "North America"],[-11.523, -60.117, "South America"],[40, 20, "Europe"],[-10, 23.203, "Africa"],[20, 100, "Asia"], [-12, 200, "South Pacific"]],
        initialize: function(el)
        {
            this.map = new GMap2(document.getElementById(el));
            this.key = new GKeyboardHandler(this.map);
            this.map.addControl(new GLargeMapControl());
            this.map.addControl(new GMapTypeControl());
            this.map.setCenter(new GLatLng(20, -20), 1);
            //this.map.setCenter(new GLatLng(50, 0), 4);
            this.mgr = new GMarkerManager(this.map); 
            var batch = [];
            for (var i=0; i<this.regions.length; i++) batch.push(this.createZoomMarker(new GLatLng(this.regions[i][0], this.regions[i][1])));
            this.mgr.addMarkers(batch,1, 2);
            this.mgr.refresh(); 
            GDownloadUrl("locations.xml", function(data, responseCode) {  
                var xml = GXml.parse(data);
                var countries = xml.documentElement.getElementsByTagName("folder"); 
                var batch = [];
                for (var i=0 ; i<countries.length; i++)
                {
                    var cities = countries[i].getElementsByTagName("item"); 
                    for (var j=0; j<cities.length; j++)
                    {
                        var o =  cities[j];
                        var point = new GLatLng(parseFloat(o.getAttribute("latitude")), parseFloat(o.getAttribute("longitude")));
                        var city = o.getAttribute("name");
                        var country = countries[i].getAttribute("name");
                        batch.push(mapWrapper.createPhotoMarker(point, {'city':city, 'country': country}));
                    } 
                }
                mapWrapper.mgr.addMarkers(batch,3)
                mapWrapper.mgr.refresh();
            });
        },
        createZoomMarker:function(point)
        {
            var icon = new GIcon();
            icon.image = "images/google-maps-icon.png";
            icon.shadow = "images/google-maps-icon-shadow.png";
            icon.iconSize = new GSize(84, 30);
            icon.shadowSize = new GSize(84, 30);
            icon.iconAnchor = new GPoint(45, 15);
            //icon.infoWindowAnchor = new GPoint(5, 1);
            var marker = new GMarker(point, icon);
            GEvent.addListener(marker, "click", function(){mapWrapper.map.setCenter(marker.getPoint(), 3)});
            return marker;        
        },
        createPhotoMarker: function (point, args)
        {   
            var marker = new GMarker(point);
            for (prop in args) marker[prop] = args[prop];
            
            GEvent.addListener(marker, "click", function()
            {
                var request = GXmlHttp.create();
                request.open("GET", photoServiceURL+ "/SearchPhotos?searchText=&set=&city="+
                    escape(marker.city)+"&country=&recent=&favorite=&random=&limit=", true);
                request.onreadystatechange = function() { 
                    if (request.readyState == 4) {mapWrapper.addImages(marker, request.responseXML );}
                }
                request.send(null);
                mapWrapper.map.closeInfoWindow();
                marker.openInfoWindowHtml("Searching....");                         
            });
            return marker;
        }, 
        addImages:  function(marker, xml)
        { 
            var photos = xml.getElementsByTagName("Photo");
            var limit = Math.min(photos.length, 4)
            var html="<h1>"+marker.city +", "+ marker.country;
            if(!photos.length) 
                html+="</h1>No photos found."
            else{ 
                if(photos.length > limit)  html+= " (4 of "+photos.length+") <a href='#' onclick=\"PhotoFinder.search('city','"+marker.city+"')\">[view all]</a>";     
                html += "</h1>";
                for(var i=0; i<limit;i++)
                {
                    var id = photos[i].getElementsByTagName("photoID")[0].firstChild.nodeValue;
                    var title = photos[i].getElementsByTagName("title")[0].firstChild.nodeValue;
                    html+="<a class='thumbWrapper' id='"+id+"'>"+
                          "<img class='photoThumb' src='photothumb/"+id+".jpg' alt='"+title+"' title='"+title+"' >"+
                          "</a>";          
                }  
            }
            marker.openInfoWindowHtml(html);
            PhotoFinder.wrapPhotoThumbs();
        },        
        sizeImage: function(img)
        {   
            var attr = (img.offsetWidth>img.offsetHeight)?"height":"width";
            img.style[attr] = "60px" 
            img.style.visibility="visible"; 
        }
    }