(function(angular){
	var module = angular.module('framework.directives.UI',[]);

	module.directive('card', cardDirective);
	cardDirective.$inject=['$state', '$interval', '$parse'];
	function cardDirective($state, $interval, $parse) {
		return {
			restrict: 'E',
			transclude: true,
			replace: true,
			scope: true,
			template: function(element, attrs) {
				var template='';
				template += '<div class="card"><div class="card-container"';
				if(attrs.allowClick!="false") {
					template += ' ng-click="viewItem(item)"'
				}
				template += '><svg class="logo" style="background-image:url(\'{{::accessors.LogoUrl(item)}}\')" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="transparent" stroke-width="10" stroke-linecap="round" ng-show="showScore==true" stroke-location="outside"></circle></svg>';
				if(attrs.showTitle!="false") {
					template += '<strong>{{ ::accessors.Title(item) }}</strong>';
				}
				if(attrs.showSubtitle!="false") {
					template += '<small>{{ ::accessors.SubTitle(item) }}</small>';
				}
				template += '</div></div>';
				return template;
			},
			link: function(scope, elem, attrs, ctrls, transcludeFn) {
				if(attrs.item) {
					var getter = $parse(attrs.item);
					scope.item = getter(scope);
				}
				scope.viewItem = viewItem;
				if(scope.accessors.Score) {
					var percentScore = (2 * Math.PI*50)/100*scope.accessors.Score(scope.item);
					var percentColor = (percentScore < 90)? 'red': (percentScore >= 90 && percentScore <180)? 'orange' :(percentScore >= 180 && percentScore <270)? 'rgb(25, 195, 45)' : 'rgb(25, 195, 45);';
					elem.find("circle")
						.attr("stroke", percentColor)
						.attr("stroke-dasharray",percentScore+",10000");
				}

				function viewItem(item) {
         		   $state.go(scope.rNavTo, { Id: item.Id });
        		}
			}
		}
	}
})(angular);