<%
  import  org.exoplatform.webui.core.UIContainer;
  import org.json.JSONArray;
  import org.json.JSONObject;

	categories = uicomponent.getItemCategories();
	UIContainer uicontainer = uicomponent.getAncestorOfType(UIContainer.class);	
	def data = new JSONArray();
%>
<div class="UIItemSelector" id="$uicomponent.id">	
	<div class="RightColumnStyle" style="width: 99.5%;">
		<%/*Begin ItemList*/%>
		<div class="ItemListContainer">
			<div class="ItemListTitle ClearFix">
				<div class="TitleIcon ItemListIcon"><span></span></div>
				<div class="Title"><%=_ctx.appRes(uicomponent.getName() + ".title")%></div>
			</div>
			<div class="ItemList">
				<%						
					for(category in categories) {							
						String itemSelected = "Item";
						
						def tmp = new JSONObject();
						tmp.put("componentName", uicomponent.name);
						tmp.put("categoryName", category.name);
						data.put(tmp);
						if (category.isSelected()) itemSelected = "SelectedItem Item";							
				 %>
						<div class="$itemSelected">
							<div class="LeftItem">
								<div class="RightItem">	
								<%
									String label = null;
									try
								    {
								       ResourceBundle res = _ctx.getRequestContext().getApplicationResourceBundle();
								       label = res.getString(uicontainer.getName() + "." + category.getName() + ".label");
								    }
								    catch (MissingResourceException ex)
								    {
								       label = category.getName();
								    }
								%>
									<div class="ItemTitle"><a href="javascript:;" tabindex="1"><%=label%></a></div>
								</div>
							</div>
						</div>
				<%
					}
					def rcontext = _ctx.getRequestContext(); 
					rcontext.getJavascriptManager().require("SHARED/selectors", "selectors")
							  .addScripts("selectors.UIItemSelector.init('#$uicomponent.id .ItemList > div', $data);");
				%>
			</div>
		</div>
		<%/*End ItemList*/%>
						
		<%/*Begin ItemDetailList*/%>
		<div class="ItemDetailList">
			<div class="ItemDetailTitle ClearFix">
				<div class="TitleIcon ViewListIcon"><span></span></div>
				<div class="Title"><%=_ctx.appRes(uicomponent.getName() + ".left.title")%></div>
			</div>
			<div class="ItemDetailContainer">
			<%					
				for(category in categories) {
					String display = "none";
					options = category.getSelectItemOptions();
					if(category.isSelected()) display = "block";								 
			%>
					<div class="ItemDetail" style="display: $display;">
						<%							 
							for(opt in options){
						%>
							<div class="TemplateContainer">
								<div class="Template">
									<div class="<%=opt.getIcon();%>Image"><span></span></div>
								</div>
							</div>
						<%}%>
					</div> 
			<%}%>
			</div>
		</div>	
		<%/*End ItemDetailList*/%>			
	</div>
</div>
