<div id="<%=uicomponent.getId()%>">
	<a href="<%=uicomponent.event("PinOrUnpin", ""+(!uicomponent.isPinned()))%>" class="PinLink">
		<img src="<%=uicomponent.isPinned() ? "/eXoPlatformResources/skin/toolbarPin/unpin.png":"/eXoPlatformResources/skin/toolbarPin/pin.png"%>"/>
	</a>

	<script type="text/javascript">
	
		var platformAdminToolbarContainerElement = document.getElementById("PlatformAdminToolbarContainer");
		var toolbarContainerElement = document.getElementById("UIToolbarContainer");

		<%if(uicomponent.isPinned()) {%>
		 toolbarContainerElement.style.position = "fixed";
		 platformAdminToolbarContainerElement.style.paddingBottom = "31px";
		<%} else {%>
		 platformAdminToolbarContainerElement.style.paddingBottom = "";
		 toolbarContainerElement.style.position = "relative";
		<%}%>
	</script>
</div>
