<%
	import org.exoplatform.commons.utils.ExpressionUtil;
	import org.exoplatform.portal.webui.workspace.UIPortalApplication;
%>
<style type="text/css">
	.PinToolbarContainer {
		height: 25px;
		margin: 6px 0 0 12px;
		width: 31px;
		cursor: hand;
	}
</style>
<div id="<%=uicomponent.getId()%>">
	<div class="PinToolbarContainer FloatLeft">
		<a href="<%=uicomponent.event("PinOrUnpin", ""+(!uicomponent.isPinned()))%>">
			<img src="<%=uicomponent.isPinned() ? "/officeResources/skin/toolbarPin/unpin.png":"/officeResources/skin/toolbarPin/pin.png"%>"/>
		</a>
	</div>

	<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";
		<%}%>
		
		var workingWorkspaceElement = document.getElementById("UIWorkingWorkspace");
		toolbarContainerElement.style.width = workingWorkspaceElement.offsetWidth+"px";
	</script>
</div>