angular.module('tasks', ['ngRoute'])

    .directive('tabs', function () {
        return {
            restrict: 'A',
            transclude: true,
            scope: { style: "@tabs" },
            controller: [ "$scope", function ($scope) {
                $scope.panels = [];

                $scope.select = function (i) {
                    angular.forEach($scope.panels, function (p) {
                        p.selected = false;
                    });
                    $scope.panels[i].selected = true;
                };

                this.addPanel = function (panel) {
                    if ($scope.panels.length === 0) {
                        panel.selected = true;
                    }
                    $scope.panels.push(panel);
                };
            }],
            template: '<div class="tabbable">' +
                '<ul class="nav nav-{{style||\'pills\'}}">' +
                '<li ng-repeat="panel in panels" ng-class="{active:panel.selected}">' +
                '<a href="" ng-click="select($index)">{{panel.title}}</a>' +
                '</li>' +
                '</ul><br/>' +
                '<div class="tab-content" ng-transclude></div>' +
                '</div>',
            replace: true
        };
    })
    .directive('panel', function () {
        return {
            require: '^tabs',
            restrict: 'A',
            transclude: true,
            scope: { title: "@panel" },
            link: function (scope, element, attrs, tabsCtrl) {
                tabsCtrl.addPanel(scope);
            },
            template: '<div class="tab-panel" ng-show="selected" ng-transclude>' +
                '</div>',
            replace: true
        };
    })

    .config(function ($routeProvider) {
        $routeProvider.
            when('/', {templateUrl: 'templates/main.html', controller: 'MainCtrl'}).
            otherwise({redirectTo: '/'});
    });