Ext.regController('Albums', {

    settingsStore: App.stores.Settings,

    settings: null,

    index: function() {
        //load settings object so we can customize view
        this.settings = this.settingsStore.first();

        if (model === undefined) {
            //load default model
            var model = Ext.ModelMgr.create({
               speed: '2000',
               effect: 'fade',
               loop: 0,
               emptyAlbums: 0,
               view: 'list',
               sort: 'created_time',
               direction: 'DESC'

            }, 'Setting');

            this.settingsStore.insert(1, model);

            this.settings = this.settingsStore.first();
        }

        App.views.viewport.reveal('albumPanel');
        this.loadAlbums();
    },

    loadAlbums: function() {
        App.views.albumList.setLoading({msg:'Loading Slideshows...'});

        var that = this;
        //Get a list of all the albums
        FB.api('/me/albums', function (response) {
          that.totalAlbums = response.data.length;
          albums = [];
          for (album in response.data) {
            if (response.data.hasOwnProperty(album)) {
                var album = response.data[album];

                //format name
                album.formatted_name  = '<div class="album-info-cont">';
                album.formatted_name += '<span class="album-name">';
                album.formatted_name += Ext.util.Format.ellipsis(album.name, 22, false);
                album.formatted_name += '</span>';

                //format photo count
                album.formatted_name += '<br/><span class="album-photo-count">';
                if (album.count !== undefined) {
                    album.formatted_name += (album.count > 1) ? (album.count + ' photos') : (album.count + ' photo');

                } else {
                    album.formatted_name += '';
                }
                album.formatted_name += '</span>';


                album.formatted_name += '</div>';

                
                var album = Ext.ModelMgr.create(album, 'Album');

                //formatted img tag
                photo = '<img class="album-images" src="';
                photo += 'https://graph.facebook.com/' + 
                album.get('id') + 
                '/picture?type=album&access_token=' + 
                App.fb.authResponse.accessToken; 

                photo += '" width="50px" height="50px" />';

                album.set('photo', photo);

                //console.log(album);

                albums.push(album);
            }
          }

          App.stores.Albums.loadData(albums, false);

          App.views.albumList.setLoading(false);
          
            Ext.dispatch({
                controller: 'Albums',
                action: 'refreshAlbumList'
            });
          
        });
    },

    refresh: function() {
        this.loadAlbums();
    },

    refreshAlbumList: function() {
        //filter based on show empty albums setting
        if (App.stores.Settings.first().data.emptyAlbums === 0) {
          App.stores.Albums.filterBy(function(rec, id) {
            return (rec.data.count > 0);
          });
        } else {
          App.stores.Albums.clearFilter();
        }

        //set the sort order
        var sort = App.stores.Settings.first().data.sort;
        var dir = App.stores.Settings.first().data.direction;
        App.stores.Albums.sort(sort,dir);
    },

    startSlideshow: function(options) {
        //console.log(options);
        //console.log(App.views.SlideshowsCarousel);
        App.views.slideshowCarousel.showLoading();
        App.views.slideshowCarousel.album = options.record.data;
                    
        FB.api(
            options.record.data.id + "/photos",
            {
                'since': +new Date('1970'),
                'limit': 100,
                'offset': 0,
                'since': '36000000',
                'until': +new Date()
            },
            this.startSlideshowCallback
        );
    },

    startSlideshowCallback: function(response) {
        //console.log('BACK FROM FB');
        //console.log(response);
        App.views.viewport.reveal('slideshowCarousel');

        //console.log(response);

        Ext.dispatch({
            controller: 'Albums',
            action: 'loadPhotos',
            photos: response
        });

        //remember album and photos in the carousel object
        //App.views.slideshowCarousel.album = 

        App.views.slideshowCarousel.init().start();
    },

    loadPhotos: function(params) {
        var response = params.photos;
        var photos = [];

        //clear the store
        App.stores.Photos.clearData();

        for (image in response.data) {
            var photo = {};
            if (response.data.hasOwnProperty(image)) {
                if (response.data[image].name !== undefined) {
                    photo.name = response.data[image].name;
                }
                photo.source = response.data[image].source;

                //preload image
                var img = new Image();
                img.src = photo.source;

                //console.log(photo);

                var photoModel = Ext.ModelMgr.create(photo, 'Photo');

                photos.push(photoModel);
            }
        }

        App.stores.Photos.loadData(photos, false);

        //check if there is more photos and do this step again, if not exit
        /*console.log(params);
        if (params.photos.paging !== undefined && 
            params.photos.paging.next !== undefined) {
            console.log('PAGING');
            FB.api(
                params.photos.paging.next, 
                this.startSlideshowCallback
            );
        }*/
    }
});