(function() {
	'use strict';
	
	var module = angular.module('app');

	/**
	 * Cria um componente para o menu.
	 */
	module.directive('menu', menu);

	menu.$inject = [ 'MenuService' ];

	function menu( MenuService ) {
		var directive = {
			restrict: 'E',
			template: templateFn,
			link: linkFn
		};

		return directive;

		function linkFn( scope, element, attrs ) {
			element.attr('layout', 'row');

			scope.selected = undefined;
			scope.items = MenuService.getItems();

			scope.$watch(function() {
				return MenuService.selected;
			}, function(item) {
				scope.selected = item;
			})
		}
	}

	function templateFn() {
		return [
			'<div ng-repeat="item in items" ng-class="{\'selected\': selected.id == item.id}"',
			'  ui-sref="{{item.state}}" layout layout-align="center center"',
			'>{{item.name}}</div>'
		].join('');
	}

}());
