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

        // store with data
        Ext.regModel('ListItem', {
            fields: [
                { name: 'id', type: 'string' },
                { name: 'text', type: 'string' },
                { name: 'shortText', type: 'string' },
                { name: 'info', type: 'string' },
                { name: 'timespan', type: 'string' },
                { name: 'organizer', type: 'string' },
                { name: 'count', type: 'integer' },
                { name: 'model', type: 'string' },
                { name: 'items', type: 'auto' }
            ]
        });
        var store = new Ext.data.TreeStore({
            model: 'ListItem',
            proxy: {
                type: 'ajax',
                url: '/events',
                reader: {
                    type: 'tree',
                    root: 'items'
                }
            }
        });
        store.on('load', function (store, records, options) {
            //Ext.getBody().unmask();
        });
        store.on('beforeload', function () {
            //Ext.getBody().mask(false, '<div class="loading">Syncing&hellip;</div>');
        });

        var nestedList = new Ext.NestedList({
            title: 'Bläddra',
            iconCls: 'bookmarks',
            displayField: 'text',
            cls: 'card5',
            store: store,
            emptyText: 'No Photos Available',
            loadingText: 'Laddar...',
            getDetailCard: function (item, parent) {
                var itemData = item.attributes.record.data,
                parentData = parent.attributes.record.data,
                detailCard = new Ext.Panel({
                    scroll: 'vertical'
                });
                this.backButton.setText(parentData.shortText);
                //this.title = 'Info';
                return detailCard;
            },
            getTitleTextTpl: function (item) {
                return '{shortText}'; //<tpl if="leaf !== true">/</tpl>';
            },
            getItemTextTpl: function (item) {
                return Ext.XTemplate.from('listItem').html;
            }
        });
        nestedList.on('leafitemtap', function (subList, subIdx, el, e, detailCard) {
            var ds = subList.getStore(), r = ds.getAt(subIdx);
            Ext.Ajax.request({
                url: '/events/' + r.get('id'),
                success: function (response) {
                    // Data
                    var eventData = Ext.decode(response.responseText);
                    // Ny instans av mallen skapas och innehållet sätts
                    var tpl = Ext.XTemplate.from('eventDetails')
                    var html = tpl.applyTemplate(eventData);
                    detailCard.update(html);
                },
                failure: function () {
                    //detailCard.setValue("Loading failed.");
                }
            });
        });


        var storeSearch = new Ext.data.Store({
            model: 'ListItem',
            proxy: {
                type: 'ajax',
                url: '',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            },
            listeners: {
                load: function (store, records) {
                    tabpanel.tabBar.items.getAt(4).setBadge(records.length);
                }
            }
        });
        var searchList = new Ext.List({
            itemTpl: Ext.XTemplate.from('listItem'),
            emptyText: '<div class="emptyText">Inga programpunkter hittades</div>',
            store: storeSearch,
            listeners: {
                itemtap: function (list, index, item, e) {
                    var r = list.store.getAt(index);
                    Ext.Ajax.request({
                        url: '/events/' + r.get('id'),
                        success: function (response) {
                            detailCard = new Ext.Panel({
                                scroll: 'vertical',
                                dockedItems: [{
                                    xtype: 'toolbar',
                                    dock: 'top',
                                    title: 'Info',
                                    cls: 'x-toolbar-light',
                                    items: [{
                                        text: 'Sök',
                                        ui: 'back',
                                        handler: function () {
                                            pnlSearchOuter.items.remove(pnlSearchOuter.getActiveItem());
                                            pnlSearchOuter.setActiveItem(pnlSearch, { type: 'slide', direction: 'right' });
                                        }
                                    }]
                                }]
                            });
                            pnlSearchOuter.add(detailCard);
                            pnlSearchOuter.setActiveItem(detailCard, 'slide');
                            setTimeout(function () { list.deselect(index); }, 500);
                            // Data
                            var eventData = Ext.decode(response.responseText);
                            // Ny instans av mallen skapas och innehållet sätts
                            var tpl = Ext.XTemplate.from('eventDetails')
                            var html = tpl.applyTemplate(eventData);
                            detailCard.update(html);
                        },
                        failure: function () {
                            //detailCard.setValue("Loading failed.");
                        }
                    });
                }
            }
        });
        // Skapa sökrutan
        var searchField = new Ext.form.Search({
            placeHolder: 'Sökord',
            name: 'query',
            cls: 'searchField',
            autoCorrect: false,
            autoComplete: false,
            autoCapitalize: false
        });
        // Skapa panel och lägg in listan
        var pnlSearch = new Ext.Panel({
            items: [searchList],
            cls: 'white',
            dockedItems: {
                dock: 'top',
                xtype: 'formpanel',
                cls: 'x-toolbar-light',
                baseCls: 'x-toolbar',
                height: 47,
                itemId: 'newQueryForm',
                submitOnAction: true,
                listeners: {
                    beforesubmit: function () {
                        storeSearch.proxy.url = '/events/search/' + searchField.getValue();
                        storeSearch.read();
                        return false;
                    }
                },
                items: [searchField]
            }
        });
        var pnlSearchOuter = new Ext.Panel({
            iconCls: 'search',
            layout: 'card',
            title: 'Sök',
            items: [pnlSearch]
        });

        var mapInfowindow = new google.maps.InfoWindow();
        var mapdemo = new Ext.Map({
            fullscreen: true,
            //useCurrentLocation: true,
            mapOptions: {
                center: new google.maps.LatLng(59.33276, 18.06669),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false,
                zoomControl: false,
                mapTypeControl: false,
                disableDefaultUI: true
            },
            listeners: {
                maprender: function (comp, map) {
                    var markerPartnerSwedbank1 = new google.maps.Marker({ position: new google.maps.LatLng(59.33540, 18.07343), icon: '/img/marker_swedbank.png', title: 'Birger jarlsgatan 18', map: map });
                    var markerPartnerSwedbank2 = new google.maps.Marker({ position: new google.maps.LatLng(59.32943, 18.05906), icon: '/img/marker_swedbank.png', title: 'Centralplan 1', map: map });
                    var markerPartnerSwedbank3 = new google.maps.Marker({ position: new google.maps.LatLng(59.33951, 18.09029), icon: '/img/marker_swedbank.png', title: 'Erikdahlbergsallén 10', map: map });
                    var markerPartnerSwedbank4 = new google.maps.Marker({ position: new google.maps.LatLng(59.33256, 18.06975), icon: '/img/marker_swedbank.png', title: 'Hamngatan 29', map: map });
                    var markerPartnerSwedbank5 = new google.maps.Marker({ position: new google.maps.LatLng(59.33245, 18.06705), icon: '/img/marker_swedbank.png', title: 'Hamngatan 37', map: map });
                    var markerPartnerSwedbank6 = new google.maps.Marker({ position: new google.maps.LatLng(59.31563, 18.03551), icon: '/img/marker_swedbank.png', title: 'Hornsgatan 164', map: map });
                    var markerPartnerSwedbank7 = new google.maps.Marker({ position: new google.maps.LatLng(59.34319, 18.04924), icon: '/img/marker_swedbank.png', title: 'Karlbergsvägen 12', map: map });
                    var markerPartnerSwedbank8 = new google.maps.Marker({ position: new google.maps.LatLng(59.33205, 18.06246), icon: '/img/marker_swedbank.png', title: 'Klarabergsgatan 25', map: map });
                    var markerPartnerSwedbank9 = new google.maps.Marker({ position: new google.maps.LatLng(59.33154, 18.06041), icon: '/img/marker_swedbank.png', title: 'Klarabergsgatan 37', map: map });
                    var markerPartnerSwedbank10 = new google.maps.Marker({ position: new google.maps.LatLng(59.33110, 18.05655), icon: '/img/marker_swedbank.png', title: 'Klarabergsviadukten 72', map: map });
                    var markerPartnerSwedbank11 = new google.maps.Marker({ position: new google.maps.LatLng(59.32877, 18.04333), icon: '/img/marker_swedbank.png', title: 'Kungsholmstorg 16', map: map });
                    var markerPartnerSwedbank12 = new google.maps.Marker({ position: new google.maps.LatLng(59.31533, 18.07034), icon: '/img/marker_swedbank.png', title: 'Medborgarplatsen 21', map: map });
                    var markerPartnerSwedbank13 = new google.maps.Marker({ position: new google.maps.LatLng(59.33097, 18.06799), icon: '/img/marker_swedbank.png', title: 'Regeringsgatan 19', map: map });
                    var markerPartnerSwedbank14 = new google.maps.Marker({ position: new google.maps.LatLng(59.30785, 18.07515), icon: '/img/marker_swedbank.png', title: 'Ringvägen 115', map: map });
                    var markerPartnerSwedbank15 = new google.maps.Marker({ position: new google.maps.LatLng(59.33459, 18.05540), icon: '/img/marker_swedbank.png', title: 'Vasagatan 27', map: map });
                    var markerPartnerSwedbank16 = new google.maps.Marker({ position: new google.maps.LatLng(59.32435, 18.07009), icon: '/img/marker_swedbank.png', title: 'Västerlånggatan 49', map: map });
                    var markerPartnerSwedbank16 = new google.maps.Marker({ position: new google.maps.LatLng(59.33624, 18.07928), icon: '/img/marker_swedbank.png', title: 'Östermalmstorg 1', map: map });

                    var markerPartnerAF = new google.maps.Marker({ position: new google.maps.LatLng(59.33671, 18.06312), icon: '/img/marker_af.png', title: 'Arbetsförmedlingen', map: map });
                    var markerPartnerHP = new google.maps.Marker({ position: new google.maps.LatLng(59.33590, 18.06533), icon: '/img/marker_hp.png', title: 'HP Kungsgatan', map: map });

                    var markerKungsan = new google.maps.Marker({ position: new google.maps.LatLng(59.33127, 18.07141), icon: '/img/marker_sight.png', title: 'Pride Kungsan', zIndex: 1100, map: map });
                    var markerSergel = new google.maps.Marker({ position: new google.maps.LatLng(59.33202, 18.06537), icon: '/img/marker_sight.png', title: 'Pride Sergel', zIndex: 1200, map: map });
                    var markerGallerian = new google.maps.Marker({ position: new google.maps.LatLng(59.33179, 18.06746), icon: '/img/marker_information.png', title: 'Infocenter Gallerian', zIndex: 1300, map: map });

                    google.maps.event.addListener(markerKungsan, 'mousedown', function (event) {
                        ShowInfoWindow('Pride Kungsan<br><small>Kungsträdgården<br><b>Öppettider:</b><br>måndag 18-01<br>tisdag-onsdag 10-01<br>torsdag-lördag 10-02</small>', event.latLng);
                    });
                    google.maps.event.addListener(markerSergel, 'mousedown', function (event) {
                        ShowInfoWindow('Pride Sergel<br><small>Kulturhuset, Sergels Torg 3<br><b>Öppettider:</b><br>Tisdag-fredag 10-22</small>', event.latLng);
                    });
                    google.maps.event.addListener(markerGallerian, 'mousedown', function (event) {
                        ShowInfoWindow('Pride Infocenter Gallerian<br><small><b>Öppettider:</b><br>Måndag-fredag 10-19<br>Lördag 10-18</small>', event.latLng);
                    });
                    google.maps.event.addListener(markerPartnerHP, 'mousedown', function (event) {
                        ShowInfoWindow('HP Kungsgatan', event.latLng);
                    });
                    google.maps.event.addListener(markerPartnerAF, 'mousedown', function (event) {
                        ShowInfoWindow('Arbetsförmedlingen', event.latLng);
                    });

                    function ShowInfoWindow(content, latLng) {
                        mapInfowindow.setContent(content);
                        mapInfowindow.setPosition(latLng);
                        mapInfowindow.open(map);
                    }
                }
            }
        });
        var pnlMap = new Ext.Panel({
            title: 'Karta',
            cls: 'card4',
            iconCls: 'maps',
            dockedItems: [{
                xtype: 'toolbar',
                cls: 'x-toolbar-light',
                dock: 'top',
                title: 'Karta',
                items: []
            }],
            items: [mapdemo]
        });

        var storeCurrent = new Ext.data.Store({
            model: 'ListItem',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: '/events/current',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            },
            listeners: {
                load: function (store, records) {
                    tabpanel.tabBar.items.getAt(2).setBadge(records.length);
                }
            }
        });
        var currentList = new Ext.List({
            itemTpl: Ext.XTemplate.from('listItem'),
            emptyText: '<div class="emptyText">Inga aktuella programpunkter</div>',
            deferEmptyText: false,
            store: storeCurrent,
            listeners: {
                itemtap: function (list, index, item, e) {
                    var r = list.store.getAt(index);
                    Ext.Ajax.request({
                        url: '/events/' + r.get('id'),
                        success: function (response) {
                            detailCard = new Ext.Panel({
                                scroll: 'vertical',
                                dockedItems: [{
                                    xtype: 'toolbar',
                                    dock: 'top',
                                    title: 'Info',
                                    cls: 'x-toolbar-light',
                                    items: [{
                                        text: 'Just nu',
                                        ui: 'back',
                                        handler: function () {
                                            pnlCurrentOuter.items.remove(pnlCurrentOuter.getActiveItem());
                                            pnlCurrentOuter.setActiveItem(pnlCurrent, { type: 'slide', direction: 'right' });
                                        }
                                    }]
                                }]
                            });
                            pnlCurrentOuter.add(detailCard);
                            pnlCurrentOuter.setActiveItem(detailCard, 'slide');
                            setTimeout(function () { list.deselect(index); }, 500);
                            // Data
                            var eventData = Ext.decode(response.responseText);
                            // Ny instans av mallen skapas och innehållet sätts
                            var tpl = Ext.XTemplate.from('eventDetails')
                            var html = tpl.applyTemplate(eventData);
                            detailCard.update(html);
                        },
                        failure: function () {
                            //detailCard.setValue("Loading failed.");
                        }
                    });
                }
            }
        });
        var pnlCurrent = new Ext.Panel({
            badgeText: '0',
            cls: 'white',
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                title: 'Just nu',
                cls: 'x-toolbar-light',
                layout: {
                    pack: 'right'
                },
                defaults: {
                    iconMask: true
                },
                items: [{
                    iconCls: 'refresh',
                    handler: function () {
                        storeCurrent.read();
                    }
                }]
            }],
            items: [currentList]
        });
        var pnlCurrentOuter = new Ext.Panel({
            iconCls: 'time',
            layout: 'card',
            title: 'Just nu',
            items: [pnlCurrent]
        });

        var compStartContent = new Ext.Component({
            scroll: 'vertical',
            html: ['<div class="with-12padding">',
                    '<div class="round-rect margin">',
				    '<div class="center-holder">',
                    '<img src="img/logo.gif" style="height: 142px; width: 278px;">',
					'<p>Välkommen till Stockholm Pride och denna mobila version av vårt program.</p>',
                    '</div>',
					'</div>',
                    '<div class="round-rect margin">',
				    '<div class="center-holder">',
                    '<h2>Huvudsponsorer</h2>',
                    '<p><a href="http://www.nissan.se" target="top"><img src="img/logo_nissan.jpg" style="height: 132px; width: 140px;"></a></p>',
                    '<p><a href="http://www.mbil.se" target="top"><img src="img/logo_mbil.jpg" style="height: 72px; width: 250px;"></a></p>',
                    '<p><a href="http://www.swedbank.se" target="top"><img src="img/logo_swedbank.gif" style="height: 74px; width: 250px;"></a></p>',
                    '</div>',
					'</div>',
                    '<div class="round-rect">',
				    '<div class="center-holder">',
                    '<h2>Stolt teknikpartner</h2>',
                    '<p><a href="http://www.hp.se" target="top"><img src="img/logo_hp.jpg" style="height: 141px; width: 140px;"></a></p>',
                    '</div>',
					'</div>',
                    '</div>'
					]
        });
        var pnlStart = new Ext.Panel({
            iconCls: 'home',
            layout: 'card',
            title: 'Start',
            scroll: 'vertical',
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                title: 'Start',
                cls: 'x-toolbar-light',
                layout: {
                    pack: 'right'
                },
                items: [{
                    text: 'Hjälp',
                    hidden: true,
                    handler: function () { }
                }]
            }],
            items: [compStartContent]
        });

        var tabpanel = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: true,
            cardSwitchAnimation: false, //'slide',
            defaults: {
                scroll: false
            },
            items: [pnlStart, pnlMap, pnlCurrentOuter, nestedList, pnlSearchOuter
            ]
        });
    }
});