<% 
	import javax.jcr.Node;
	import org.exoplatform.services.jcr.RepositoryService;
	
	def rcontext = _ctx.getRequestContext() ;
	def String htmlWYSIWYGFormId = "htmlData" + uicomponent.hashCode();
	def String cssFormId = "ContentCSS[" + uicomponent.hashCode() + "]";
	def String jsFormId = "ContentJS[" + uicomponent.hashCode() + "]";
	def jsManager = rcontext.getJavascriptManager();
	//jsManager.importJavascript('eXo.wcm.frontoffice.public.Breadcrumb', '/eXoWCMResources/javascript/') ;
	jsManager.require("SHARED/wcm-utils", "util").
  addScripts("util.CKEditor.insertCSS('" + htmlWYSIWYGFormId + "', '" + cssFormId + "');");
  RepositoryService rService = uicomponent.getApplicationComponent(RepositoryService.class) ;
  String repository = rService.getCurrentRepository().getConfiguration().getName() ;	
	
	private void setUploadFields() {
			String[] illustrationHiddenField1 = ["jcrPath=/node/medias/images/illustration", "nodetype=nt:file", "defaultValues=illustration"];
			String[] illustrationHiddenField2 = ["jcrPath=/node/medias/images/illustration/jcr:content", "nodetype=nt:resource", "mixintype=dc:elementSet", "visible=false"]; 
			String[] illustrationHiddenField3 = ["jcrPath=/node/medias/images/illustration/jcr:content/jcr:encoding", "visible=false", "UTF-8"];  
			String[] illustrationHiddenField4 = ["jcrPath=/node/medias/images/illustration/jcr:content/jcr:lastModified", "visible=false"];
			String[] illustrationHiddenField5 = ["jcrPath=/node/medias/images/illustration/jcr:content/dc:date", "visible=false"];									
			uicomponent.addHiddenField("illustrationHiddenField1", illustrationHiddenField1);
			uicomponent.addHiddenField("illustrationHiddenField2", illustrationHiddenField2);
			uicomponent.addHiddenField("illustrationHiddenField3", illustrationHiddenField3);
			uicomponent.addCalendarField("illustrationHiddenField4", illustrationHiddenField4);
			uicomponent.addCalendarField("illustrationHiddenField5", illustrationHiddenField5);			
   		String[] fieldImage = ["jcrPath=/node/medias/images/illustration/jcr:content/jcr:data", "mimetype=image/*"] ;
      uicomponent.addUploadField("illustration", fieldImage) ;	
	}
	
	Node webContentNode = uicomponent.getNode();			
%>
<div class="UITabPane uiTabNormal uiTabInPage">

	<%uiform.begin()%>
	<%/* start render action*/%>
	<% if (uiform.isShowActionsOnTop()) {
						uiform.processRenderAction()
				 }
	%>
	<%/* end render action*/%>
	<ul id="myTab" class="nav nav-tabs">              
		<li class="active"><a data-toggle="tab" href="#tab1"><%=_ctx.appRes("WebContent.dialog.label.MainContent")%></a></li>
		<li><a data-toggle="tab" href="#tab2"><%=_ctx.appRes("WebContent.dialog.label.Illustration")%></a></li>
		<li><a data-toggle="tab" href="#tab3"><%=_ctx.appRes("WebContent.dialog.label.Advanced")%></a></li>
	</ul>
	<%/*Start UITabContentContainer*/%>
	<div class="tab-content" id="myTabContent">
			<div id="tab1" class="tab-pane fade in active">
				<div class="form-horizontal">
					<div class="control-group">
						<label class="control-label" for="title"><%=_ctx.appRes("WebContent.dialog.label.title")%>:</label>
						<div class="controls">
							<%
								String[] webContentFieldTitle = ["jcrPath=/node/exo:title", "validate=empty", "editable=if-null"];
								uicomponent.addTextField("title", webContentFieldTitle) ;
							%>
						</div>
					</div> 
					<div class="control-group">
						<label class="control-label" for="name"><%=_ctx.appRes("WebContent.dialog.label.name")%>:</label>
						<div class="controls">
							<%
								String[] webContentFieldName = ["jcrPath=/node", "nodetype=wai:siteNavigationWebContent", "mixintype=mix:votable,mix:commentable,mix:i18n", "editable=if-null","validate=name,empty"] ;
								uicomponent.addTextField("name", webContentFieldName) ; 
								String[] cssFolder = ["jcrPath=/node/css", "nodetype=exo:cssFolder", "defaultValues=css"] ;
								String[] jsFolder = ["jcrPath=/node/js", "nodetype=exo:jsFolder", "defaultValues=js"] ;
								String[] documentsFolder = ["jcrPath=/node/documents", "nodetype=nt:unstructured","mixintype=exo:documentFolder", "defaultValues=documents"] ;
								String[] mediasFolder = ["jcrPath=/node/medias", "nodetype=exo:multimediaFolder", "defaultValues=medias"] ;
								String[] imagesFolder = ["jcrPath=/node/medias/images", "nodetype=nt:folder", "defaultValues=images"] ;
								String[] videoFolder = ["jcrPath=/node/medias/videos", "nodetype=nt:folder", "defaultValues=videos"] ;
								String[] audioFolder = ["jcrPath=/node/medias/videos", "nodetype=nt:folder", "defaultValues=audio"] ;
								uicomponent.addHiddenField("cssFolder", cssFolder) ;
								uicomponent.addHiddenField("jsFolder", jsFolder);
								uicomponent.addHiddenField("documentsFolder", documentsFolder);
								uicomponent.addHiddenField("mediasFolder", mediasFolder);
								uicomponent.addHiddenField("imagesFolder", imagesFolder);
								uicomponent.addHiddenField("videoFolder", videoFolder);
								uicomponent.addHiddenField("audioFolder", audioFolder);
							%>
							<script type="text/javascript">
								titleField = document.getElementById("title");
								titleField.onchange = function() { eXo.ecm.SELocalization.cleanName(this.value, "name"); } ;
							</script>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="content-lang"><%=_ctx.appRes("ElementSet.dialog.label.language")%></label>
						<div class="controls">
						<%
							String lang = org.exoplatform.portal.webui.util.Util.getPortalRequestContext().getLocale().toString();
							String[] fieldLang = ["jcrPath=/node/exo:language", "script=ecm-explorer/widget/FillSelectBoxWithLanguage.groovy", lang] ;
							uicomponent.addSelectBoxField("content-lang", fieldLang) ;
						%>
						</div>
					</div>	
					<div class="control-group">
						<div class="control-label">
							<%=_ctx.appRes("WebContent.dialog.label.WebContentHtml")%>
							<a class="actionIcon" rel="tooltip" data-placement="bottom" title="<%=_ctx.appRes("WebContent.dialog.label.Synchronize")%>" onclick="eXo.ecm.CKEditor.insertCSS('<%= htmlWYSIWYGFormId %>', '<%= cssFormId %>')"><i class="uiIconRefresh"></i></a>
						</div>
						<div class="controls">
						<%
							String[] htmlHiddenField1 = ["jcrPath=/node/default.html", "nodetype=nt:file", "defaultValues=default.html", "mixintype=exo:htmlFile"];
								String[] htmlHiddenField2 = ["jcrPath=/node/default.html/jcr:content", "nodetype=nt:resource", "mixintype=dc:elementSet", "visible=false"]; 
							String[] htmlHiddenField3 = ["jcrPath=/node/default.html/jcr:content/jcr:encoding", "visible=false", "UTF-8"];
							String[] htmlHiddenField4 = ["jcrPath=/node/default.html/jcr:content/jcr:lastModified", "visible=false"];
							String[] htmlHiddenField5 = ["jcrPath=/node/default.html/jcr:content/dc:date", "visible=false"];
							String[] htmlHiddenField6 = ["jcrPath=/node/default.html/jcr:content/jcr:mimeType", "visible=false", "text/html"];
							uicomponent.addHiddenField("htmlHiddenField1", htmlHiddenField1);
							uicomponent.addHiddenField("htmlHiddenField2", htmlHiddenField2);
							uicomponent.addHiddenField("htmlHiddenField3", htmlHiddenField3);
							uicomponent.addCalendarField("htmlHiddenField4", htmlHiddenField4);
							uicomponent.addCalendarField("htmlHiddenField5", htmlHiddenField5);
							uicomponent.addHiddenField("htmlHiddenField6", htmlHiddenField6);
							String htmlContent = "";
							if(uicomponent.isEditing()) {
								if(webContentNode != null && webContentNode.hasNode("default.html")) {
									Node htmlNode = webContentNode.getNode("default.html");
									htmlContent = htmlNode.getNode("jcr:content").getProperty("jcr:data").getValue().getString();
								}
							}
							if(htmlContent == null || htmlContent.equals("")) {
								htmlContent = 	"<div id=\"navigation-generator\">\n" + 
												"\t<div class=\"UIWCMNavigationPortlet\">\n" + 
												"\t\t<div class=\"UINavigationBar\">\n" + 
												"\t\t\t<div class=\"UIHorizontalTabs\"><span></span></div>\n" +
												"\t\t</div>\n" + 
												"\t</div>\n" + 
												"</div>" + 
												"<script type=\"text/javascript\">/* <![CDATA[ */ renderNavigations(); /* ]]> */</script>";
							}
							String[] htmlArguments = ["jcrPath=/node/default.html/jcr:content/jcr:data", "options=toolbar:CompleteWCM,noSanitization", htmlContent];
							uicomponent.addRichtextField(htmlWYSIWYGFormId, htmlArguments) ;
								%>
						</div>
					</div>
				</div>
			</div>  <!-- End of UITabContent -->
			<!-- Start of Illustration tab -->
			<div id="tab2" class="tab-pane fade">
				<div class="form-horizontal">
					<div class="control-group">
						<div class="controls-full"><span class="helpBlock helpBlockTitle"><i class="uiIconHelp"></i> <%=_ctx.appRes("WebContent.dialog.label.hintIllustration")%></span></div>
					</div>
					<div class="control-group">
						<label class="control-label"><%=_ctx.appRes("WebContent.dialog.label.illustrationImage")%>:</label>
						<div class="controls">
								<%						
									if(webContentNode != null && webContentNode.hasNode("medias/images/illustration")) {
										def imageNode = webContentNode.getNode("medias/images/illustration") ;
										def resourceNode = imageNode.getNode("jcr:content");
										if(resourceNode.getProperty("jcr:data").getStream().available() > 0 && !uicomponent.isDataRemoved("/medias/images/illustration/jcr:content") ){
											def imgSrc = uicomponent.getImage(imageNode, "jcr:content");
											def actionLink = uicomponent.event("RemoveData", "/medias/images/illustration/jcr:content");
											%>		
												<div>
													<img src="$imgSrc" rel="tooltip" data-placement="bottom" title="<%=_ctx.appRes("Ecm.dialog.label.remove")%>" alt="<%=_ctx.appRes("Ecm.dialog.label.remove")%>" width="100px" height="80px"/>
													<a  onclick="$actionLink"  data-placement="bottom" rel="tooltip" class="actionIcon"  data-original-title="<%=_ctx.appRes("Ecm.dialog.label.remove")%>"><i class="uiIconDelete uiIconLightGray"></i></a>
																	
												</div>
											<%
										} else {
											setUploadFields();
										}
									} else {
										setUploadFields();
									}
								%>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label"><%=_ctx.appRes("WebContent.dialog.label.Summary")%>:</label>
						<div class="controls">
						<%
							String summaryContent = "";
							if(uicomponent.isEditing()) {
								if (webContentNode != null && webContentNode.hasProperty("exo:summary")) 
									summaryContent = webContentNode.getProperty("exo:summary").getValue().getString();
							}
							String[] fieldSummary = ["jcrPath=/node/exo:summary", "options=noSanitization", "editable=if-null", summaryContent] ;
							uicomponent.addRichtextField("exo:summary", fieldSummary) ;
						%>
						</div>
					</div>
					
				</div>
			</div>
			<!-- End of Illustration tab -->		
						
			<div id="tab3" class="tab-pane fade">
				<div class="form-horizontal">
					<div class="control-group">
						<label class="control-label" for="$cssFormId"><%=_ctx.appRes("WebContent.dialog.label.ContentCSS")%>:</label>
						<div class="controls">
						<%
							String[] cssHiddenField1 = ["jcrPath=/node/css/default.css", "nodetype=nt:file", "defaultValues=default.css"] ;
							String[] cssHiddenField2 = ["jcrPath=/node/css/default.css/jcr:content", "nodetype=nt:resource", "mixintype=dc:elementSet", "visible=false"] ; 
							String[] cssHiddenField3 = ["jcrPath=/node/css/default.css/jcr:content/jcr:encoding", "visible=false", "UTF-8"] ;  
							String[] cssHiddenField4 = ["jcrPath=/node/css/default.css/jcr:content/jcr:lastModified", "visible=false"] ;
							String[] cssHiddenField5 = ["jcrPath=/node/css/default.css/jcr:content/dc:date", "visible=false"] ;
							String[] cssHiddenField6 = ["jcrPath=/node/css/default.css/jcr:content/jcr:mimeType", "visible=false", "text/css"] ;
							uicomponent.addHiddenField("cssHiddenField1", cssHiddenField1) ;
							uicomponent.addHiddenField("cssHiddenField2", cssHiddenField2) ;
							uicomponent.addHiddenField("cssHiddenField3", cssHiddenField3) ;
							uicomponent.addCalendarField("cssHiddenField4", cssHiddenField4) ;
							uicomponent.addCalendarField("cssHiddenField5", cssHiddenField5) ;
							uicomponent.addHiddenField("cssHiddenField6", cssHiddenField6) ;
							String cssContent = "";
							if(uicomponent.isEditing()) {
								if(webContentNode != null && webContentNode.hasNode("css/default.css")) {
									Node cssNode = webContentNode.getNode("css/default.css");
									cssContent = cssNode.getNode("jcr:content").getProperty("jcr:data").getValue().getString();
								}
							}
							if(cssContent == null || cssContent.equals("")) {
								cssContent = ".UIWCMNavigationPortlet {\n\t!position: relative;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UINavigationBar {\n\tpadding: 35px 40px 0 40px;\n}\n\n" + 
														 ".UIWCMNavigationPortlet .UINavigationBar .UIHorizontalTabs {\n\theight: 41px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UINavigationBar .UIHorizontalTabs .TabsContainer {\n\tfloat: none;\n}\n\n" + 
														 ".UIWCMNavigationPortlet .UINavigationBar .LeftNavigationBar {\n\tline-height: 41px;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/NavigationBar.gif') top left no-repeat;\n\tpadding-left: 3px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UINavigationBar .RightNavigationBar {\n\tline-height: 41px;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/NavigationBar.gif') top right no-repeat;\n\tpadding-right: 3px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UINavigationBar .MiddleNavigationBar {\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/NavigationBar.gif') left -41px repeat-x;\n\theight: 41px;\n\tpadding: 0 15px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer {\n\twhite-space: nowrap;\n\tborder: solid #b7b7b7 1px;\n\tbackground: #f3f3f3;\n\ttext-align: left;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer .MenuItemDecorator {\n\tborder: 1px solid #fcfcfc;\n\tbackground: #f3f3f3;\n\tpadding-bottom: 6px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer .MenuItem {\n\tborder-bottom: 1px solid #fff;\n\tcursor: pointer;\n\tline-height: 24px;\n\theight: 24px; width: auto;\n\tdisplay: block;\n\twhite-space: nowrap;\n\tfont-weight: normal;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer .MenuItem a {\n\tpadding: 0px 20px 0px 25px;\n\tdisplay: block;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer .MenuItem a:hover {\n\tcolor: #3e8df0;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/HoverItem.gif') repeat-x bottom;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer .SelectedItem {\n\tline-height: 24px;\n\twidth: auto;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/HoverItem.gif') repeat-x bottom;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer .SelectedItem a {\n\tcolor: #3e8df0;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer .ItemIcon {\n\theight: 24px; width: auto;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer .MenuItemLabel {\n\tline-height: 24px;\n\tpadding: 0px 5px 0px 3px;\n\tfont-weight: normal;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer .MenuItem .ArrowIcon {\n\theight: 24px;\n\twidth: auto;\n\tbackground-image: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/Button.gif');\n\tbackground-repeat: no-repeat;\n\tbackground-position: right -48px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .MenuItemContainer .PageNodeIcon {\n\theight: 24px ;\n\tbackground: url('/eXoSkin/skin/images/themes/default/Icons/skinIcons/16x16/DefaultPageIcon.gif') no-repeat 5px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .ScrollButtons {\n\tfloat: right;\n\tpadding-top: 10px;\n\tdisplay: none;\n}\n\n" +
														 ".UIWCMNavigationPortlet .ScrollLeftButton {\n\tcursor: pointer;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/Button.gif') no-repeat left -15px;\n\tpadding-left: 18px;\n\tmargin: 0px 5px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .ScrollRightButton {\n\tcursor: pointer;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/Button.gif') no-repeat right -15px;\n\twidth: 15px;\n\theight: 15px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .DisableScrollLeftButton {\n\tcursor: pointer;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/Button.gif') no-repeat left -30px;\n\tpadding-left: 18px;\n\tmargin: 0px 5px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .DisableScrollRightButton {\n\tcursor: pointer;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/Button.gif') no-repeat right -30px;\n\twidth: 15px;\n\theight: 15px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .HighlightScrollLeftButton {\n\tcursor: pointer;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/Button.gif') no-repeat left top;\n\tpadding-left: 18px;\n\tmargin: 0px 5px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .HighlightScrollRightButton {\n\tcursor: pointer;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/Button.gif') no-repeat right top;\n\twidth: 15px;\n\theight: 15px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .CenterHorizontalTabs {\n\toverflow-y: hidden;\n\tbackground: url('background/NormalTabStyle.gif') repeat-x center top;\n\tpadding: 0px 6px;\n\t}\n\n" +
														 ".UIWCMNavigationPortlet .TabsContainer {\n\theight: 41px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab {\n\tfloat: left;\n\ttext-align: center;\n\twidth: auto;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab  a{\n\tfont-size: 14px;\n\tfont-family: Arial;\n\tfont-weight: normal;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .NormalNavigationTab {\n\tmargin: 0px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .NormalNavigationTab .LeftTab {\n\tbackground: none;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .NormalNavigationTab .RightTab {\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/NavigationTab.gif') right -82px no-repeat;\n\tpadding-right: 2px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .NormalNavigationTab .MiddleTab {\n\tline-height: 20px;\n\tpadding: 13px 20px 6px 20px;\n\tbackground: none;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .NormalNavigationTab .TabIcon {\n\tcolor: #fff;\n\tline-height: 21px;\n}" +
														 ".UIWCMNavigationPortlet .UITab .NormalNavigationTab a {\n\tcolor: #FFFFFF;\n\tfont-size: 13px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .NormalNavigationTab .DefaultPageIcon {\n\tpadding: 2px 0 1px 20px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .HighlightNavigationTab {\n\tmargin: 0px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .HighlightNavigationTab .LeftTab  {\n\tbackground: none;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .HighlightNavigationTab .RightTab {\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/NavigationTab.gif') right -82px no-repeat;\n\tpadding-right: 2px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .HighlightNavigationTab .MiddleTab {\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/NavigationTab.gif') left -123px repeat-x;\n\tline-height: 20px;\n\tpadding: 13px 20px 6px 20px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .HighlightNavigationTab .TabIcon {\n\tcolor: #fff;\n\tline-height: 21px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .HighlightNavigationTab a {\n\tcolor: #FFFFFF;\n\tfont-size:13px;\n}\n\n" +																	
														 ".UIWCMNavigationPortlet .UITab .HighlightNavigationTab .DefaultPageIcon {\n\tpadding: 2px 0 1px 20px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .SelectedNavigationTab {\n\tmargin: 0px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .SelectedNavigationTab .LeftTab {\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/NavigationTab.gif') no-repeat left top;\n\tpadding-left: 4px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .SelectedNavigationTab .RightTab {\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/NavigationTab.gif') no-repeat right top;\n\tpadding-right: 4px;}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .SelectedNavigationTab .MiddleTab {\n\tline-height: 18px;\n\tbackground: url('/portal/rest/jcr/$repository/collaboration/sites/acme/web%20contents/site%20artifacts/navigation/Default/medias/images/NavigationTab.gif') repeat-x left -41px;\n\tpadding: 13px 20px 6px 20px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .SelectedNavigationTab .TabIcon {\n\tcolor: #f57a00;\n\tline-height: 16px;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .SelectedNavigationTab a {\n\tcolor:#000000;\n\tfont-size:18px;\n\tline-height: 22px;\n\tmargin: 0;\n}\n\n" +
														 ".UIWCMNavigationPortlet .UITab .SelectedNavigationTab .DefaultPageIcon {\n\tpadding: 2px 0 1px 20px;\n}";
							}
							String[] fieldContentCSS = ["jcrPath=/node/css/default.css/jcr:content/jcr:data", cssContent] ;
							uicomponent.addTextAreaField(cssFormId, fieldContentCSS) ;
							%>							
							
							<div style="display:inline-block;" onmouseover="(function(elm) {eXo.ecm.WCMUtils.showPopover(elm);})(this)"
			                onmouseout="(function(elm) {eXo.ecm.WCMUtils.hidePopover(elm);})(this)" data-toggle="popover" data-placement="left" data-content="<%=_ctx.appRes("WebContent.dialog.label.hintCSS")%>">
							  <i class="uiIconQuestion uiIconLightGray" id="ContentJSHelp"></i>									  
							  </div> 
						</div>
					</div>
				</div>
				<div class="form-horizontal">
					<div class="control-group">
						<label class="control-label" for="$jsFormId"><%=_ctx.appRes("WebContent.dialog.label.ContentJS")%>:</label>
						<div class="controls">
						<%
							String[] jsHiddenField1 = ["jcrPath=/node/js/default.js", "nodetype=nt:file", "defaultValues=default.js"];
							String[] jsHiddenField2 = ["jcrPath=/node/js/default.js/jcr:content", "nodetype=nt:resource", "mixintype=dc:elementSet", "visible=false"]; 
							String[] jsHiddenField3 = ["jcrPath=/node/js/default.js/jcr:content/jcr:encoding", "visible=false", "UTF-8"];  
							String[] jsHiddenField4 = ["jcrPath=/node/js/default.js/jcr:content/jcr:lastModified", "visible=false"];
							String[] jsHiddenField5 = ["jcrPath=/node/js/default.js/jcr:content/dc:date", "visible=false"];
							String[] jsHiddenField6 = ["jcrPath=/node/js/default.js/jcr:content/jcr:mimeType", "visible=false", "application/x-javascript"];
							uicomponent.addHiddenField("jsHiddenField1", jsHiddenField1);
							uicomponent.addHiddenField("jsHiddenField2", jsHiddenField2);
							uicomponent.addHiddenField("jsHiddenField3", jsHiddenField3);
							uicomponent.addCalendarField("jsHiddenField4", jsHiddenField4);
							uicomponent.addCalendarField("jsHiddenField5", jsHiddenField5);
							uicomponent.addHiddenField("jsHiddenField6", jsHiddenField6);
							String jsContent = "";
							if(uicomponent.isEditing()) {
								if(webContentNode != null && webContentNode.hasNode("js/default.js")) {
									Node jsNode = webContentNode.getNode("js/default.js");
									jsContent = jsNode.getNode("jcr:content").getProperty("jcr:data").getValue().getString();
								} 
							} 
							if(jsContent == null || jsContent.equals("")) {
								jsContent = 	"eXo.core.Browser.addOnLoadCallback('renderNavigations', function() {\n" +
															"\trenderNavigations();\n"  +
															"\teXo.portal.UIWCMNavigation.onLoad('UIWCMNavigationPortlet');\n"  +
															"\teXo.portal.UIWCMNavigation.loadScroll();\n"  +
															"});\n" +
															"function renderChildrenContainer(navigations) {\n" +
															"\tvar html =\t'<div class=\"MenuItemContainer\" style=\"display: none;\">' +\n" +
															"\t\t\t\t\t\t\t\t'<div class=\"MenuItemDecorator\">' +\n" +
															"\t\t\t\t\t\t\t\t\t'<div class=\"LeftTopMenuDecorator\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t'<div class=\"RightTopMenuDecorator\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t'<div class=\"CenterTopMenuDecorator\"><span></span></div>' +\n" +
															"\t\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t'<div class=\"LeftMiddleMenuDecorator\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t'<div class=\"RightMiddleMenuDecorator\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t'<div class=\"CenterMiddleMenuDecorator\">';\n" +
															"\tfor (var i in navigations) {\n" +
															"\t\tif (Array.prototype[i] || !navigations[i].visible) continue;\n" +
															"\t\thtml += renderChildNode(navigations[i]);\n" +
															"\t}\n" +
															"\thtml +=\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t'<div class=\"LeftBottomMenuDecorator\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t'<div class=\"RightBottomMenuDecorator\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t'<div class=\"CenterBottomMenuDecorator\"><span></span></div>' +\n" +
															"\t\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t'</div>';\n" +
															"\treturn html;\n" +
															"}\n" +
															"function renderChildNode(navigation) {\n" +
															"\tvar html = '';\n" +
															"\tvar tabStyleNavigation = 'NormalItem';\n" +
															"\tif (navigation.icon == null)\n" +
															"\t\tnavigation.icon = '';\n" +
															"\tvar title = navigation.resolvedLabel;\n" +
															"\tif (navigation.resolvedLabel.length > 40) {\n" +
															"\t\tnavigation.resolvedLabel = navigation.resolvedLabel.substring(0,37) + \"...\";\n" +
															"\t}\n" +
															"\tvar link = eXo.ecm.WCMUtils.getHostName() + eXo.env.portal.context + '/' + eXo.env.portal.portalName + '/' +  navigation.uri;\n" +
															"\tvar arrowIcon = '';\n" +
															"\tif (navigation.children && navigation.children.length)\n" +
															"\t\tarrowIcon = 'ArrowIcon';\n" +
															"\thtml += '<div class=\"MenuItem ' + tabStyleNavigation + '\">' + \n" +
															"\t\t\t\t\t\t'<div class=\"' + arrowIcon + '\" title=\"' + title + '\">' +\n" +
															"\t\t\t\t\t\t\t'<div class=\"ItemIcon ' + navigation.icon + '\">' +\n" +
															"\t\t\t\t\t\t\t\t'<a href=\"' + link + '\">' + navigation.resolvedLabel + '</a>' +\n" +
															"\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t'</div>';\n" +
															"\tif (navigation.children && navigation.children.length) {\n" +
															"\t\thtml += renderChildrenContainer(navigation.children);\n" +
															"\t}\n" +
															"\thtml += '</div>';\n" +
															"\treturn html;\n" +
															"}\n" +
															"function renderNavigations() {\n" +
															"\tvar navigations = eXo.env.portal.navigations;\n" +
															"\tvar html = \t'<div class=\"UIWCMNavigationPortlet\"><div class=\"UINavigationBar\">' +\n" +
															"\t\t\t\t\t'<div class=\"LeftNavigationBar\">' +\n" +
															"\t\t\t\t\t\t'<div class=\"RightNavigationBar\">' +\n" +
															"\t\t\t\t\t\t\t'<div class=\"MiddleNavigationBar\">' +\n" +
															"\t\t\t\t\t\t\t\t'<div class=\"UIHorizontalTabs\">' +\n" +
															"\t\t\t\t\t\t\t\t\t'<div class=\"TabsContainer\">';\n" +
															"\tfor (var ownerType in navigations) {\n" +
															"\t\tif (Array.prototype[ownerType]) continue;\n" +
															"\t\tfor (var i in navigations[ownerType].nodes) {\n" +
															"\t\t\tvar navigation = navigations[ownerType].nodes[i];\n" +
															"\t\t\tif (Array.prototype[i] || !navigation.visible) continue;\n" +
															"\t\t\tif (navigation.icon == null) \n" +
															"\t\t\t\tnavigation.icon = '';\n" +
															"\t\t\tvar title = navigation.resolvedLabel;\n" +
															"\t\t\tif (navigation.resolvedLabel.length > 30) {\n" +
															"\t\t\t\tnavigation.resolvedLabel = navigation.resolvedLabel.substring(0,29) + \"...\";\n" +
															"\t\t\t}\n" +
															"\t\t\tvar tabStyleNavigation = 'NormalNavigationTab';\n" +
															"\t\t\tvar currentNodes = eXo.ecm.Breadcrumb.getCurrentNodes(navigations, eXo.env.portal.selectedNodeUri);\n" +
															"\t\t\tif (navigation.uri == currentNodes[currentNodes.length - 1].uri)\n" +
															"\t\t\t\ttabStyleNavigation = 'SelectedNavigationTab';\n" +
															"\t\t\tvar link = eXo.ecm.WCMUtils.getHostName() + eXo.env.portal.context + '/' + eXo.env.portal.accessMode + '/' + eXo.env.portal.portalName + '/' +  navigation.uri;\n" +
															"\t\t\tvar arrowIcon = '';\n" +
															"\t\t\tif (navigation.children && navigation.children.length) \n" +
															"\t\t\t\tarrowIcon = 'DropDownArrowIcon';\n" +
															"\t\t\thtml += \t\t\t\t\t\t'<div class=\"UITab\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t'<div class=\"' + tabStyleNavigation + '\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t\t'<div class=\"LeftTab\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t\t\t'<div class=\"RightTab\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'<div class=\"MiddleTab\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'<div class=\"TabIcon\">' + \n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'<div class=\"' + arrowIcon + '\">';\n" +
															"\t\t\tif (navigation.uri)\n" +
															"\t\t\t\thtml += \t\t\t\t\t\t\t\t\t\t\t\t'<a class=\"TabLabel ' + navigation.icon + '\" title=\"' + title + '\" href=\"' + link + '\">' + navigation.resolvedLabel + '</a>';\n" +
															"\t\t\telse \n" +
															"\t\t\t\thtml += \t\t\t\t\t\t\t\t\t\t\t\t'<a class=\"TabLabel ' + navigation.icon + '\" title=\"' + title + '\">' + navigation.resolvedLabel + '</a>';\n" +
															"\t\t\thtml += \t\t\t\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t\t'</div>' + \n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t'</div>';\n" +
															"\t\t\tif (navigation.children && navigation.children.length) {\n" +
															"\t\t\t\thtml += renderChildrenContainer(navigation.children);\n" +
															"\t\t\t}\n" +
															"\t\t\thtml +=\t\t\t\t\t\t\t'</div>';\n" +
															"\t\t}\n" +
															"\t}\n" +
															"\thtml +=\t\t\t\t\t\t\t\t'<div class=\"ScrollButtons\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t'<div class=\"ScrollLeftButton\" title=\"Previous\">' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t\t'<div class=\"ScrollRightButton\" title=\"Next\"><span></span></div>' +\n" +
															"\t\t\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t\t'</div>' +\n" +
															"\t\t\t\t'</div></div>';\n" +
															"\tdocument.getElementById('navigation-generator').innerHTML = html;\n" +
															"}";
							}
								String[] fieldContentJS = ["jcrPath=/node/js/default.js/jcr:content/jcr:data", "options=noSanitization", jsContent];
								uicomponent.addTextAreaField(jsFormId, fieldContentJS); 								
							%>
							<div style="display:inline-block;" onmouseover="(function(elm) {eXo.ecm.WCMUtils.showPopover(elm);})(this)"
			                onmouseout="(function(elm) {eXo.ecm.WCMUtils.hidePopover(elm);})(this)" data-toggle="popover" data-placement="left" data-content="<%=_ctx.appRes("WebContent.dialog.label.hintJS")%>">
							  <i class="uiIconQuestion uiIconLightGray" id="ContentJSHelp"></i>									  
							  </div> 
						</div>
					</div>
				</div>
			</div>			
	</div>   <!-- End of UITabContentContainer -->
	<% if (!uiform.isShowActionsOnTop()) {
						uiform.processRenderAction()
				 }
	%> 
	<%uiform.end()%>						 

</div>  <!-- End of UITabPane -->
