Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {

        var timeline = new Ext.Component ({
            title: 'Timeline',
            cls: 'timeline',
            scroll: 'vertical',
            tpl: [
                '<tpl for=".">',
                     '<div class="tweet">',
                    '<div class="avatar"><img src="{profile_image_url}" /></div>',
                    '<div class="tweet-content">',
                        '<h2>{from_user}</h2>',
                        '<p>{text}</p>',
                        '</div>',
                     '</div>',
                '</tpl>'
                ]
        });

        var map = new Ext.Map ({
            title: 'Map',
            useCurrentLocation: true,   //changed from getLocation
            mapOptions: {
                zoom: 12
            }
        });
           
        var panel = new Ext.TabPanel ({
            fullscreen: true,
            cardSwitchAnimation: 'slide',
            items: [map, timeline]
        });                        

        var refresh = function() {
            var coords = map.geo.coords;
            Ext.util.JSONP.request({
                url: 'http://search.twitter.com/search.json',
                callbackKey: 'callback',
                params: {
                    geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
                    rpp: 30
                },
               callback: function(data) {
                data = data.results;
                timeline.update(data);
               
                for (var i = 0, ln = data.length; i < ln; i++) {
                    var tweet = data[i];
   
                    if (tweet.geo && tweet.geo.coordinates) {
                        var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
                        addMarker (tweet, position);
                    }  
                }
               }
            });
        };
       
        var addMarker = function(tweet, position) {
            var marker = new google.maps.Marker({
                map: map.map,
                position: position
            });

            google.maps.event.addListener(marker, "click", function() {  //added this function
                tweetBubble.setContent(tweet.text);
                tweetBubble.open(map.map, marker);  
            });

           
        };

        tweetBubble = new google.maps.InfoWindow(); //added to display tweets on marker click
   
        map.geo.on('update', refresh);

        var tabBar = panel.getTabBar ();
        tabBar.addDocked({
            xtype: 'button',
            ui: 'mask',
            iconCls: 'refresh',
            dock: 'right',
            stretch: false,
            align: 'center',
            handler: refresh
        });
       

    }
   

});