<link rel="import" href="../../../../../bower_components/paper-spinner/paper-spinner.html">

<dom-module id="nav-level-element">
	<style>
		:host{
			display: block;
			height: 100%;
		}
		.circle {
			width: 25px;
			height: 25px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
		}
		.empty{
			line-height:25px;
		}
		.current{
			background: #87CEFA;
		}
		.green{
			background: #86C67C;
		}
		.gray{
			border: 1px solid black;
		}
		.wrapper{
			text-align:center;
			margin: 7px;
		}
	</style>
	<template>
		<div class="wrapper" on-click="_onClick">
			<div class$="{{divClass}}">
				<span class="empty"></span>
			</div>
		</div>
	</template>
	<script>
	 Polymer({
		 is: 'nav-level-element',
		 properties:{
			 divClass: {
				 type: String,
				 notify: true,
				 value: 'circle gray'
			 },
			 state: {
				 value: 'default'
			 }
		 },
		 observers: [
			 '_stateChanged(state)'
		 ],
		 _onClick: function(){
			 this.fire('task-switch', this.index);
		 },
		 _stateChanged: function(state){
			 if(state === 'completed'){
				 this.divClass = 'circle green';
			 }else if(state === 'current'){
				 this.divClass = 'circle current';
			 }else{
				 this.divClass = 'circle gray';
			 }
		 },
		 setState: function(state){
			 this.state = state;
		 }
	 });
 </script>
</dom-module>
