angular.module('fluro').directive('bootstrapTopNav', function() {
    return {
        restrict: 'E', //Look for an element eg. <bootstrap-top-nav>
        replace: true, //Replace the element with our directive template
        template: '<div class=container><div class=navbar-header><button type=button class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed"><span class=sr-only>Toggle navigation</span> <i class="fa fa-bars"></i></button> <a class=navbar-brand href="/"><img class=logo ng-src="{{$root.asset.imageUrl(logo._id, 300)}}"></a></div><div id=navbar class="navbar-collapse collapse" collapse=!isCollapsed><ul class="nav navbar-nav navbar-right"><li ng-repeat="menuItem in menu" ng-class="{\'dropdown\':menuItem.items.length, \'open\':isExpanded(menuItem)}"><a ng-class="{\'hidden-xs\':menuItem.items.length}" ui-sref={{menuItem.state}} ng-if="menuItem.type == \'state\'" ui-sref-active=active><span compile-html=menuItem.title></span> <span ng-if=menuItem.items.length class=caret></span></a> <a ng-class="{\'hidden-xs\':menuItem.items.length}" ng-attr-target="{{(menuItem.target.length) ? menuItem.target : undefined}}" ng-href={{menuItem.url}} ng-if="menuItem.type != \'state\'"><span compile-html=menuItem.title></span> <span ng-if=menuItem.items.length class=caret></span></a> <a ng-click=isolateToggle(menuItem) class=visible-xs-block ng-if=menuItem.items.length><span compile-html=menuItem.title></span><span class=caret></span></a><ul class=dropdown-menu ng-if=menuItem.items.length><li ng-repeat="subMenuItem in menuItem.items" ng-switch=subMenuItem.type><a ui-sref={{subMenuItem.state}} ng-switch-when=state ui-sref-active=active><span compile-html=subMenuItem.title></span></a> <a ng-attr-target="{{(subMenuItem.target.length) ? subMenuItem.target : undefined}}" ng-href={{subMenuItem.url}} ng-switch-default><span compile-html=subMenuItem.title></span></a></li></ul></li></ul></div></div>', //This will be replaced with the html on the right hand side
        scope: {
            logo: '=',
            menu: '=' //Ask for a menu retrieved from $root.menu.get()
        },
        controller:function($scope, $rootScope) {

            /////////////////////////////
            
            //Keep track of which menu items are expanded
            $scope.expanded =  [];
            
            /////////////////////////////
            
            //Helper function for checking which items are expanded
            $scope.isExpanded = function(menuItem) {
                return _.contains($scope.expanded, menuItem)
            }
            
            /////////////////////////////
            
            //Helper function for checking which items are expanded
            $scope.expand = function(menuItem) {
                if(!_.contains($scope.expanded, menuItem)) {
                    return $scope.expanded.push(menuItem);
                }
            }
            
            /////////////////////////////
            
            //Helper function for checking which items are expanded
            $scope.isolateToggle = function(menuItem) {
                if(!_.contains($scope.expanded, menuItem)) {
                    $scope.expanded = [menuItem];
                } else {
                    $scope.collapse(menuItem);
                }
            }
            
            /////////////////////////////
            
            //Helper function for checking which items are expanded
            $scope.toggleExpanded = function(menuItem) {
                if($scope.isExpanded(menuItem)) {
                   $scope.collapse(menuItem);
                } else {
                    $scope.expand(menuItem);
                }
            }
            
            /////////////////////////////
            
            //Helper function for checking which items are expanded
            $scope.collapse = function(menuItem) {
                if(_.contains($scope.expanded, menuItem)) {
                    _.pull($scope.expanded, menuItem);
                }
            }
            
            /////////////////////////////
            
            
            $rootScope.$on('$stateChangeStart', function(evt, to, params) {
                //Close the menu when we choose a different page
               $scope.isCollapsed = false;
               $scope.expanded =  [];
               
               console.log('State changed')
            });
        }
    };
});