<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

  <link href="https://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>

<body ng-app="ionicApp">
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
</body>

<script id="templates/menu.html" type="text/ng-template">
    <ion-side-menus>
        <ion-side-menu-content>
            <ion-nav-bar class="bar-positive">
                <ion-nav-buttons side="left">
                    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
                </ion-nav-buttons>
                <ion-nav-back-button></ion-nav-back-button>
            </ion-nav-bar>
            <ion-nav-view name="menu-content"></ion-nav-view>
        </ion-side-menu-content>
        <ion-side-menu side="left" expose-aside-when="large">
            <ion-nav-view name="menu-left"></ion-nav-view>
        </ion-side-menu>
    </ion-side-menus>
</script>

<script id="templates/menu-anon.html" type="text/ng-template">
    <ion-view>
        <ion-header-bar>
            <h1 class="title">Menu</h1>
        </ion-header-bar>
        <ion-header-bar class="menu-header menu-header-anon bar-subheader">
            <ion-item class="item-icon-left" ng-click="auth.logged_in = true" href="#/app/tab/journal/{{conf.current}}">
                <i class="icon ion-log-in"></i>Login
            </ion-item>
        </ion-header-bar>
        <div ng-include="'templates/menu-bookmarks.html'"></div>
    </ion-view>
</script>

<script id="templates/menu-auth.html" type="text/ng-template">
    <ion-view>
        <ion-header-bar>
            <h1 class="title">Menu</h1>
        </ion-header-bar>
        <ion-header-bar class="menu-header menu-header-auth bar-subheader">
            <ion-item class="item-icon-left" ng-click="auth.logged_in = false" href="#/app/journal/{{conf.current}}">
                <i class="icon ion-log-out"></i>Logout
            </ion-item>


            <ion-item class="menu-tabs tabs tabs-secondary tabs-icon-top">
                <a class="tab-item" ng-click="main.show_list = 'bookmarks';" ng-class="{'active': main.show_list === 'bookmarks'}">
                    <i class="icon" ng-class="main.show_list === 'bookmarks' ? 'ion-ios-bookmarks' : 'ion-ios-bookmarks-outline'">
                    </i> Bookmarks
                </a>
                <a class="tab-item" ng-click="main.show_list = 'friends';" ng-class="{'active': main.show_list === 'friends'}">
                    <i class="icon" ng-class="main.show_list === 'friends' ? 'ion-ios-heart' : 'ion-ios-heart-outline'">
                    </i> Friends
                </a>
                <a class="tab-item" ng-click="main.show_list = 'groups';" ng-class="{'active': main.show_list === 'groups'}">
                    <i class="icon" ng-class="main.show_list === 'groups' ? 'ion-ios-chatboxes' : 'ion-ios-chatboxes-outline'">
                    </i> Groups
                </a>
            </ion-item>


        </ion-header-bar>

        <div ng-show="main.show_list === 'bookmarks'" ng-include="'templates/menu-bookmarks.html'"></div>
        <div ng-show="main.show_list === 'friends'" ng-include="'templates/menu-friends.html'"></div>
        <div ng-show="main.show_list === 'groups'" ng-include="'templates/menu-groups.html'"></div>

    </ion-view>
</script>

<script id="templates/menu-bookmarks.html" type="text/ng-template">
    <ion-view>
        <ion-content ng-class="auth.logged_in ? 'menu-list-auth' : 'menu-list-anon'">
            <ion-list>
                <ion-item nav-clear class="item-icon-left" collection-repeat="bookmark in bookmarks" href="#/app{{auth.logged_in ? '/tab' : ''}}/journal/{{bookmark.username}}" ng-click="conf.current = bookmark.username" ng-class="{active: bookmark.username == conf.current}">
                    <img class="icon menu-icon-avatar" ng-src="{{bookmark.picture.thumbnail}}">{{bookmark.username}}</ion-item>
            </ion-list>
        </ion-content>
    </ion-view>
</script>

<script id="templates/menu-friends.html" type="text/ng-template">
    <ion-view>
        <ion-content ng-class="auth.logged_in ? 'menu-list-auth' : 'menu-list-anon'">
            <ion-list>
                <ion-item nav-clear class="item-icon-left" collection-repeat="friend in friends" href="#/app/tab/journal/{{friend.username}}" ng-click="conf.current = friend.username" ng-class="{active: friend.username == conf.current}">
                    <img class="icon menu-icon-avatar" ng-src="{{friend.picture.thumbnail}}">{{friend.username}}</ion-item>
            </ion-list>
        </ion-content>
    </ion-view>
</script>

<script id="templates/menu-groups.html" type="text/ng-template">
    <ion-view>
        <ion-content ng-class="auth.logged_in ? 'menu-list-auth' : 'menu-list-anon'">
            <ion-list>
                <ion-item nav-clear class="item-icon-left" collection-repeat="group in groups" href="#/app/tab/journal/{{group.username}}" ng-click="conf.current = group.username" ng-class="{active: group.username == conf.current}">
                    <img class="icon menu-icon-avatar" ng-src="{{group.picture.thumbnail}}">{{group.username}}</ion-item>
            </ion-list>
        </ion-content>
    </ion-view>
</script>

<script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-color-active-positive">
        <ion-tab title="Journal" icon-off="ion-ios-person-outline" icon-on="ion-ios-person" href="#/app/tab/journal/{{conf.current}}">
            <ion-nav-view name="tab-journal"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Friends" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/app/tab/friends/posts">
            <ion-nav-view name="tab-friends"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Favourites" icon-off="ion-ios-star-outline" icon-on="ion-ios-star" href="#/app/tab/favourites">
            <ion-nav-view name="tab-favourites"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Messages" icon-off="ion-ios-email-outline" icon-on="ion-ios-email" href="#/app/tab/messages">
            <ion-nav-view name="tab-messages"></ion-nav-view>
        </ion-tab>
    </ion-tabs>
</script>

<script id="templates/tab-feed.html" type="text/ng-template">
    <ion-view view-title="{{title}}" hide-back-button="true">
        <ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-buttons>
        <ion-content>
            <ion-refresher on-refresh="doRefresh()"></ion-refresher>
            <ion-list>
                <ion-item class="item-avatar item-icon-right" collection-repeat="post in posts" type="item-text-wrap" href="#/app{{auth.logged_in ? '/tab' : ''}}/{{mode}}/{{journal}}/{{post.username}}">
                    <img ng-src="{{post.picture.thumbnail}}">
                    <h2>{{post.username}}</h2>
                    <p>{{post.sha256}}</p>
                    <i class="icon ion-chevron-right icon-accessory"></i>
                </ion-item>
            </ion-list>
            <ion-infinite-scroll on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>
        </ion-content>
    </ion-view>
</script>

<script id="templates/view-post.html" type="text/ng-template">
    <ion-view cache-view="false">
        <ion-nav-title>{{post.username}}</ion-nav-title>
        <ion-content>
            <div class="list card">

                <div class="item item-avatar">
                    <img actual-src="{{post.picture.thumbnail}}" ng-src="{{placeholder}}" />
                    <h2>{{post.username}}</h2>
                    <p>{{post.registered | date:'medium'}}</p>
                </div>

                <div class="item item-body">
                    <img class="full-image" actual-src="{{post.picture.large}}" ng-src="{{placeholder}}">
                    <p>
                        {{post.sha256}}
                    </p>
                    <p>
                        <a href="#" class="subdued">1 Like</a>
                        <a href="#" class="subdued">5 Comments</a>
                    </p>
                </div>

                <div class="item tabs tabs-secondary tabs-icon-left">
                    <a class="tab-item" href="#">
                        <i class="icon ion-thumbsup"></i> Like
                    </a>
                    <a class="tab-item" href="#">
                        <i class="icon ion-chatbox"></i> Comment
                    </a>
                    <a class="tab-item" href="#">
                        <i class="icon ion-share"></i> Share
                    </a>
                </div>

            </div>
        </ion-content>
    </ion-view>
</script>

<script id="messages/tab-messages.html" type="text/ng-template">
    <ion-tabs class="tabs-messages tabs-light tabs-top tabs-icon-top has-tabs-top">
        <ion-tab title="All" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" href="#/app/tab/messages/all">
            <ion-nav-view name="tab-messages-all"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Sent" icon-on="ion-ios-paperplane" icon-off="ion-ios-paperplane-outline" href="#/app/tab/messages/sent">
            <ion-nav-view name="tab-messages-sent"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Flagged" icon-on="ion-ios-flag" icon-off="ion-ios-flag-outline" href="#/app/tab/messages/flagged">
            <ion-nav-view name="tab-messages-flagged"></ion-nav-view>
        </ion-tab>
    </ion-tabs>
</script>

<script id="messages/tab-message-list.html" type="text/ng-template">
    <ion-view view-title={{data.title}}>

        <ion-nav-buttons side="primary">
            <button class="button button-icon icon ion-ios-minus-outline" ng-click="data.showDelete = !data.showDelete"></button>
        </ion-nav-buttons>

        <ion-content>
            <ion-list show-delete="data.showDelete">

                <ion-item ng-repeat="email in emails" class="email-item item-button-right item-icon-left item-remove-animate" ng-if="data.mode != 'flagged' || email.flagged" href="#/app/tab/messages/{{data.mode}}/{{email.id}}">
                    <i class="icon" ng-class="{'ion-ios-email-outline': email.was_read, 'ion-ios-email energized': !email.was_read}"></i>
                    <h2>{{email.subject}}</h2>
                    <p>
                        <span class="email-text">
      {{email.from}}
    </span>
                        <span class="item-note email-text">
      {{email.date | date:'EEE M/d/yyyy h:mm a'}}
    </span>
                    </p>
                    <button class="button button-clear email-flag-button" ng-click="onEmailFlag(email, $event)">
                        <i class="icon" ng-class="{'ion-flag assertive': email.flagged, 'ion-flag': !email.flagged}"></i>
                    </button>

                    <ion-delete-button class="email-delete-button ion-minus-circled" ng-click="onEmailDelete(email)">
                    </ion-delete-button>
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-view>
</script>

<script id="messages/view-message.html" type="text/ng-template">
    <ion-view view-title="E-Mail">
        <ion-content>

            <div class="list card">

                <ion-item class="item-icon-left">
                    <i class="icon ion-ios-email-outline"></i>
                    <h2>{{email.from}}</h2>
                    <p>
                        <span class="email-text">
      {{email.subject}}
    </span>
                        <span class="item-note email-text">
      {{email.date | date:'EEE M/d/yyyy h:mm a'}}
    </span>
                    </p>
                </ion-item>

                <ion-item class="item-text-wrap email-body-text">
                    {{email.body}}
                </ion-item>

            </div>
        </ion-content>
    </ion-view>
</script>

<script id="templates/tab-favourites.html" type="text/ng-template">
    <ion-view view-title="Favourites">
        <ion-content>
            <ion-list>
                <ion-item>Favourites</ion-item>
            </ion-list>
        </ion-content>
    </ion-view>
</script>

</html>
.menu-icon-avatar {
    border-radius: 100% !important;
    width: 36px !important;
    height: 36px !important;
    left: 8px !important;
    top: 8px !important;
}

.menu-header {
    padding: 0 !important;
    border: 0 !important;
}

.menu-header-anon {
    height: 52px !important;
}

.menu-header-auth {
    height: 106px !important;
}

.menu-list-anon {
    top: 97px !important;
    /* menu-header-anon.height + 44 + 1 */
}

.menu-list-auth {
    top: 149px !important;
    /* menu-header-auth.height + 44 + 1 */
}

.menu-tabs {
    height: 54px !important;
    width: auto !important;
}

.tabs-messages .tab-item.tab-item-active,
.tabs-messages .tab-item.active,
.tabs-messages .tab-item.activated {
    color: #444444 !important;
}

.aside-open [menu-toggle] {
    display: none;
}
/* Messages */

.email-flag-button {
    margin-top: 12px !important;
    padding: 0 !important;
}

.email-delete-button {
    padding-left: 4px !important;
}

.email-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.email-text {
    font-size: smaller !important;
    color: grey !important;
}

.email-body-text {
    font-size: smaller !important;
}

.email-item-text {
    margin-left: 26px;
}
angular.module('ionicApp', ['ionic', 'ionicApp.controllers', 'ionicApp.services'])

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html',
        controller: 'AppCtrl'
    })

    .state('app.tab', {
        url: '/tab',
        abstract: true,
        views: {
            'menu-content': {
                templateUrl: 'templates/tabs.html'
            },
            'menu-left': {
                templateUrl: 'templates/menu-auth.html',
                controller: 'MenuCtrl'
            }
        }
    })

    .state('app.journal', {
        url: '/journal/:journal',
        views: {
            'menu-content': {
                templateUrl: 'templates/tab-feed.html',
                controller: 'JournalCtrl'
            },
            'menu-left': {
                templateUrl: 'templates/menu-anon.html'
            }
        }
    })

    .state('app.journal-post', {
        url: '/journal/:journal/:postId',
        views: {
            'menu-content': {
                templateUrl: 'templates/view-post.html',
                controller: 'PostCtrl'
            }
        }
    })

    .state('app.tab.journal', {
        url: '/journal/:journal',
        views: {
            'tab-journal': {
                templateUrl: 'templates/tab-feed.html',
                controller: 'JournalCtrl'
            }
        }
    })

    .state('app.tab.journal-post', {
        url: '/journal/:journal/:postId',
        views: {
            'tab-journal': {
                templateUrl: 'templates/view-post.html',
                controller: 'PostCtrl'
            }
        }
    })

    .state('app.tab.friends', {
        url: '/friends/posts',
        views: {
            'tab-friends': {
                templateUrl: 'templates/tab-feed.html',
                controller: 'FriendsCtrl'
            }
        }
    })

    .state('app.tab.friends-post', {
        url: '/friends/posts/:postId',
        views: {
            'tab-friends': {
                templateUrl: 'templates/view-post.html',
                controller: 'PostCtrl'
            }
        }
    })

    .state('app.tab.favourites', {
        url: '/favourites',
        views: {
            'tab-favourites': {
                templateUrl: 'templates/tab-favourites.html',
                controller: 'FavouritesCtrl'
            }
        }
    })

    .state('app.tab.messages', {
        url: '/messages',
        views: {
            'tab-messages': {
                templateUrl: 'messages/tab-messages.html',
                controller: 'MessagesCtrl'
            }
        }
    })

    .state('app.tab.messages.all', {
        url: '/all',
        views: {
            'tab-messages-all': {
                templateUrl: 'messages/tab-message-list.html',
                controller: 'MessageListCtrl'
            }
        },
        resolve: {
            mode: function() {
                return 'all';
            }
        }
    })

    .state('app.tab.messages.all-view', {
        url: '/all/:id',
        views: {
            'tab-messages-all': {
                templateUrl: 'messages/view-message.html',
                controller: 'MessageViewCtrl'
            }
        },
        resolve: {
            mode: function() {
                return 'all';
            }
        }
    })

    .state('app.tab.messages.sent', {
        url: '/sent',
        views: {
            'tab-messages-sent': {
                templateUrl: 'messages/tab-message-list.html',
                controller: 'MessageListCtrl'
            }
        },
        resolve: {
            mode: function() {
                return 'sent';
            }
        }
    })

    .state('app.tab.messages.sent-view', {
        url: '/sent/:id',
        views: {
            'tab-messages-sent': {
                templateUrl: 'messages/view-message.html',
                controller: 'MessageViewCtrl'
            }
        },
        resolve: {
            mode: function() {
                return 'sent';
            }
        }
    })

    .state('app.tab.messages.flagged', {
        url: '/flagged',
        views: {
            'tab-messages-flagged': {
                templateUrl: 'messages/tab-message-list.html',
                controller: 'MessageListCtrl'
            }
        },
        resolve: {
            mode: function() {
                return 'flagged';
            }
        }
    })

    .state('app.tab.messages.flagged-view', {
        url: '/flagged/:id',
        views: {
            'tab-messages-flagged': {
                templateUrl: 'messages/view-message.html',
                controller: 'MessageViewCtrl'
            }
        },
        resolve: {
            mode: function() {
                return 'flagged';
            }
        }
    });

    $urlRouterProvider.otherwise(function($injector, $location) {
        var path = '/app/journal/';
        var cs = $injector.get('ConfSrvc');
        var as = $injector.get('AuthSrvc');
        if (as.logged_in) {
            path = '/app/tab/journal/';
        }
        $location.path(path + cs.current);
    });

});

angular.module('ionicApp.controllers', [])

.controller('AppCtrl', function($scope, UserSrvc, AuthSrvc, ConfSrvc) {
    $scope.placeholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
    $scope.bookmarks = [];
    UserSrvc.GetUsers(5).then(function(items) {
        $scope.bookmarks = items;
    });
    $scope.friends = [];
    UserSrvc.GetUsers(7).then(function(items) {
        $scope.friends = items;
    });
    $scope.groups = [];
    UserSrvc.GetUsers(3).then(function(items) {
        $scope.groups = items;
    });
    $scope.auth = AuthSrvc;
    $scope.conf = ConfSrvc;
})

.controller('MenuCtrl', function($scope) {
    $scope.main = {
        show_list: 'bookmarks'
    };
})

.controller('JournalCtrl', function($scope, $stateParams, UserSrvc) {
    $scope.journal = $stateParams.journal;
    $scope.title = 'Journal - ' + $scope.journal;
    $scope.mode = 'journal';
    $scope.posts = [];
    UserSrvc.GetUsers(20).then(function(items) {
        $scope.posts = items;
    });
    $scope.doRefresh = function() {
        UserSrvc.GetUsers(1).then(function(items) {
            $scope.posts = items.concat($scope.posts);
            $scope.$broadcast('scroll.refreshComplete');
        });
    };
    $scope.loadMore = function() {
        UserSrvc.GetUsers(10).then(function(items) {
            $scope.posts = $scope.posts.concat(items);
            $scope.$broadcast('scroll.infiniteScrollComplete');
        });
    };
})

.controller('FriendsCtrl', function($scope, UserSrvc) {
    $scope.journal = 'posts';
    $scope.title = 'Friends';
    $scope.mode = 'friends';
    $scope.posts = [];
    UserSrvc.GetUsers(20).then(function(items) {
        $scope.posts = items;
    });
})

.controller('PostCtrl', function($scope, $stateParams, UserSrvc) {
    $scope.post = {};
    UserSrvc.GetUsers(1).then(function(items) {
        $scope.post = items[0];
    });
    //$scope.post = JournalSrvc.get($stateParams.postId);
})

.controller('FavouritesCtrl', function($scope) {

})

.controller('MessagesCtrl', function($scope) {

})

.controller('MessageListCtrl', function(mode, $rootScope, $rootScope, $scope, EmailService) {

    $scope.emails = [];

    $scope.data = {
        showDelete: false,
        mode: mode,
        title: ''
    };

    $scope.setListData = function() {
        switch (mode) {
            case 'all':
                $scope.data.title = 'All';
                $scope.emails = EmailService.getInboxEmails();
                break;
            case 'flagged':
                $scope.data.title = 'Flagged';
                $scope.emails = EmailService.getInboxEmails();
                break;
            case 'sent':
                $scope.data.title = 'Sent';
                $scope.emails = EmailService.getOutboxEmails();
                break;
            default:
                $scope.data.title = 'E-Mails';
        }
    };

    $scope.setListData();

    $scope.onEmailFlag = function(email, e) {
        email.flagged = !email.flagged;
        e.preventDefault();
        $rootScope.emailCounts.flaggedCount = EmailService.getFlaggedEmailCount();
    };

    $scope.onEmailDelete = function(email) {
        $scope.emails.splice($scope.emails.indexOf(email), 1);
    };
})

.controller('MessageViewCtrl', function(mode, $stateParams, $scope, $timeout, EmailService) {
    if (mode == 'sent') {
        $scope.email = EmailService.getOutboxEmail($stateParams.id);
    } else {
        $scope.email = EmailService.getInboxEmail($stateParams.id);
    }
    $timeout(function() {
        $scope.email.was_read = true;
    }, 500);
});

angular.module('ionicApp.services', [])

.factory('UserSrvc', function($http) {
    var BASE_URL = 'https://api.randomuser.me/';
    var items = [];

    return {
        GetUsers: function(count) {
            return $http.get(BASE_URL + '?results=' + count).then(function(response) {
                items = response.data.results;
                return items;
            });
        }
    };
})

.service('ConfSrvc', function() {
    this.current = 'muahaha';
})

.service('AuthSrvc', function() {
    this.logged_in = true;
})

.directive('navClear', [
    '$ionicViewService',
    '$state',
    '$location',
    '$window',
    '$rootScope',
    function($ionicHistory, $location, $state, $window, $rootScope) {
        $rootScope.$on('$stateChangeError', function() {
            $ionicHistory.nextViewOptions(null);
        });
        return {
            priority: 100,
            restrict: 'AC',
            compile: function($element) {
                return {
                    pre: prelink
                };

                function prelink($scope, $element, $attrs) {
                    var unregisterListener;

                    function listenForStateChange() {
                        unregisterListener = $scope.$on('$stateChangeStart', function() {
                            $ionicHistory.nextViewOptions({
                                disableAnimate: true,
                                disableBack: true
                            });
                            unregisterListener();
                        });
                        $window.setTimeout(unregisterListener, 300);
                    }

                    $element.on('click', listenForStateChange);
                }
            }
        };
    }
])

.directive('actualSrc', function() {
    return {
        link: function postLink(scope, element, attrs) {
            attrs.$observe('actualSrc', function(newVal, oldVal) {
                if (newVal !== undefined) {
                    var img = new Image();
                    img.src = attrs.actualSrc;
                    angular.element(img).bind('load', function() {
                        element.attr("src", attrs.actualSrc);
                    });
                }
            });
        }
    };
})

.factory('EmailService', function($filter) {
    var inbox = [];
    var outbox = [];

    var data = {
        flagged: 0
    };

    function readInboxEmails() {
        if (inbox.length) {
            return;
        }
        inbox = [{
            id: 0,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 1,
            subject: 'Test subj #2',
            date: '0',
            from: 'John',
            body: 'Test e-mail body #2',
            was_read: false
        }, {
            id: 2,
            subject: 'Test subj #3',
            date: '0',
            from: 'dd John Doe',
            body: 'Test e-mail body #3',
            was_read: false
        }, {
            id: 3,
            subject: 'Test subj #4',
            date: '0',
            from: 'Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 4,
            subject: 'Test subj #1',
            date: '0',
            from: 'John',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 5,
            subject: 'dfhdsfhsdfhsdf',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 6,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 7,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false,
            flagged: true
        }, {
            id: 8,
            subject: 'dhfsdf dfhdasfhsdf',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false,
            flagged: true
        }, {
            id: 9,
            subject: 'Test subj #11',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false,
            flagged: true
        }, {
            id: 10,
            subject: 'Test subj #21',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 11,
            subject: 'Test subj #31',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 12,
            subject: 'Test subj #41',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 13,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 14,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 15,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 16,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 17,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 18,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 19,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 20,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 21,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 22,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 23,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 24,
            subject: 'Test subj #1',
            date: '1',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 25,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 26,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 27,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 28,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 29,
            subject: 'dfhsdfhsdf dfshsd',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 30,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 31,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 32,
            subject: 'Test subj #1',
            date: '0',
            from: 'ooo Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 33,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 34,
            subject: 'Test subj #1',
            date: '1',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 35,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 36,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 37,
            subject: 'Test subj #1',
            date: '1',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 38,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 39,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 40,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 41,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 42,
            subject: 'Test subj #1',
            date: '0',
            from: 'ooo Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 43,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 44,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 45,
            subject: 'Test subj #1',
            date: '0',
            from: 'aaa Doe',
            body: 'Test e-mail body #1',
            was_read: false
        }, {
            id: 46,
            subject: 'dfghsdfh fdhgs dfh',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: true
        }, {
            id: 47,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: true
        }, {
            id: 48,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: true
        }, {
            id: 49,
            subject: 'Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: true
        }, {
            id: 50,
            subject: 'Test subj last',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: true
        }];
    };

    function readOutboxEmails() {
        if (outbox.length) {
            return;
        }
        outbox = [{
            id: 0,
            subject: 'Out - Test subj #1',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: true
        }, {
            id: 1,
            subject: 'Out - Test subj #2',
            date: '0',
            from: 'John',
            body: 'Test e-mail body #2',
            was_read: true
        }, {
            id: 2,
            subject: 'Out - Test subj #3',
            date: '0',
            from: 'dd John Doe',
            body: 'Test e-mail body #3',
            was_read: true
        }, {
            id: 3,
            subject: 'Out - Test subj #4',
            date: '0',
            from: 'Doe',
            body: 'Test e-mail body #1',
            was_read: true
        }, {
            id: 4,
            subject: 'Out - Test subj #1',
            date: '0',
            from: 'John',
            body: 'Test e-mail body #1',
            was_read: true
        }, {
            id: 50,
            subject: 'Out - Test subj last',
            date: '0',
            from: 'John Doe',
            body: 'Test e-mail body #1',
            was_read: true
        }];
    };

    function setFlaggedEmailCount() {
        readInboxEmails();
        data.flagged = $filter('filter')(inbox, {
            flagged: true
        }).length;
        console.log(data.flagged);
    };

    return {
        getInboxEmailCount: function() {
            readInboxEmails();
            return inbox.length;
        },
        getFlaggedEmailCount: function() {
            setFlaggedEmailCount();
            return data.flagged;
        },
        getOutboxEmailCount: function() {
            readOutboxEmails();
            return outbox.length;
        },
        getInboxEmails: function() {
            readInboxEmails();
            return inbox;
        },
        getOutboxEmails: function() {
            readOutboxEmails();
            return outbox;
        },
        getInboxEmail: function(id) {
            for (i = 0; i < inbox.length; i++) {
                if (inbox[i].id == id) {
                    return inbox[i];
                }
            }
            return null;
        },
        getOutboxEmail: function(id) {
            for (i = 0; i < outbox.length; i++) {
                if (outbox[i].id == id) {
                    return outbox[i];
                }
            }
            return null;
        }
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.