<div class="b-data__left">
	<div class="b-rhombus">
		<div id="nodeRing" class="b-rhombus__inner js-rhombus-inner" ng-controller="clusterViewController">
			<span ng-repeat="node in nodelist">
				<!-- TODO : 
					- add conditional class
					- change icon 
				-->
				<div class="b-rhombus__item-inner js-rhombus-item b-rhombus__item-inner_state_hover" ng-style="{'-ms-transform': 'rotateZ(' + node.degree + 'deg)','-moz-transform': 'rotateZ(' + node.degree + 'deg)','-webkit-transform': 'rotateZ(' + node.degree + 'deg)'}" ng-mouseenter="hover(node)" ng-mouseleave="hover(node)">
					<div class="b-rhombus__item">
						<div ng-class="'b-rhombus__icon b-rhombus__icon_icon_' + node.icon" ng-style="{'-ms-transform': 'rotateZ(' + -(node.degree - 360) + 'deg)','-moz-transform': 'rotateZ(' + -(node.degree - 360) + 'deg)','-webkit-transform': 'rotateZ(' + -(node.degree - 360) + 'deg)'}" getsize></div>
					</div>
				</div>
				
				<!-- Popup part-->
				<div class="js-dropdown-inner">
					<div id="{{ $index }}_real" class="b-rhombus__dropdown-wrap js-rhombus-dropdown" ng-style="{'top': ((node.degree % 360) == 180)?245:top + 'px', 'left': left + 'px'}" ng-show="node.showTooltip" ng-mouseenter="hover(node)" ng-mouseleave="hover(node)">
						<div class="b-rhombus__dropdown">
							<div class="b-rhombus__dropdown-inner">
								<div class="b-rhombus__dropdown-head js-dropdown-title">{{node.id}}</div>
								<div class="b-rhombus__dropdown-content">
									<div class="b-data__label b-data__label_type_inline">
										<i class="b-data__label-icon"></i> 
										<i class="b-data__label-text js-dropdown-status">{{node.status}}</i>
									</div>
									<div class="b-rhombus__dropdown-text js-dropdown-text">IP : {{node.ip}}</div>
									<div class="b-rhombus__dropdown-text js-dropdown-text" ng-if="node.hostname != 'unknown'">Hostname : {{node.hostname}}</div>
								</div>
								<p class="b-rhombus__dropdown-more-inner">
									<a class="b-rhombus__dropdown-more-link js-dropdown-link" ng-click="showNode(node.id)">
										<i class="b-rhombus__dropdown-more-text">View node detail</i> 
										<i class="b-rhombus__dropdown-more-icon"></i>
									</a>
								</p>
							</div>
						</div>
						<div class="b-rhombus__dropdown-shadow"></div>
						<i class="b-rhombus__dropdown-corner-inner">
							<i class="b-rhombus__dropdown-corner"></i>
						</i>
					</div>
				</div>
			</span>
		</div>
	</div>
</div>