;
angular.module('fluro').directive('menu', function() {
    return {
        restrict: 'E',
        replace: true, 
        template: '<ul><li ng-if="trigger != \'click\'" ng-repeat="menuItem in model" ng-class="{\'dropdown\':menuItem.items.length, \'open\':isExpanded(menuItem)}"><a ng-class="{\'hidden-xs\':menuItem.items.length}" class={{menuItem.class}} ui-sref={{getSref(menuItem)}} ui-sref-opts=menuItem.stateRefOptions 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}" class={{menuItem.class}} 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 {{menuItem.class}}" 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={{getSref(subMenuItem)}} ui-sref-opts=subMenuItem.stateRefOptions class={{menuItem.class}} 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}}" class={{menuItem.class}} ng-href={{subMenuItem.url}} ng-switch-default><span compile-html=subMenuItem.title></span></a></li></ul></li><li ng-if="trigger == \'click\'" ng-repeat="menuItem in model" ng-class="{\'dropdown\':menuItem.items.length, \'open\':isExpanded(menuItem)}"><a ui-sref={{getSref(menuItem)}} ui-sref-opts=menuItem.stateRefOptions ng-if="menuItem.type == \'state\' && !menuItem.items.length" class={{menuItem.class}} ui-sref-active=active><span compile-html=menuItem.title></span> <span ng-if=menuItem.items.length class=caret></span> </a><a ng-attr-target="{{(menuItem.target.length) ? menuItem.target : undefined}}" ng-href={{menuItem.url}} class={{menuItem.class}} ng-if="menuItem.type != \'state\' && !menuItem.items.length"><span compile-html=menuItem.title></span> <span ng-if=menuItem.items.length class=caret></span> </a><a ng-click=isolateToggle(menuItem) ng-if=menuItem.items.length class={{menuItem.class}}><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={{getSref(subMenuItem)}} ui-sref-opts=subMenuItem.stateRefOptions ng-switch-when=state class={{menuItem.class}} ui-sref-active=active><span compile-html=subMenuItem.title></span> </a><a ng-attr-target="{{(subMenuItem.target.length) ? subMenuItem.target : undefined}}" class={{menuItem.class}} ng-href={{subMenuItem.url}} ng-switch-default><span compile-html=subMenuItem.title></span></a></li></ul></li></ul>', 
        scope: {
            model: '=ngModel',
            trigger:'=?',
        },
        link: function(scope, element, attrs) {
          scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false;
        },
        controller:function($scope, $rootScope) {

            console.log('Menu component');
            
            if(!$scope.trigger) {
                $scope.trigger = 'hover';
            }
            
            /////////////////////////////
            
            //Keep track of which menu items are expanded
            $scope.expanded =  [];
            
            
            $scope.getSref = function(menuItem) {
                
                if(menuItem.stateParams) {
                    return menuItem.state + '('+JSON.stringify(menuItem.stateParams)+')';
                }
                return menuItem.state;
            }
            
            
            /////////////////////////////
            
            //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);
                }
            }
            
            //console.log('menu component after');
        }
    }
});;