<% 
	import javax.jcr.Node;
	import org.exoplatform.web.application.Parameter;
	import org.exoplatform.wcm.webui.reader.ContentReader;
	
	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.require("SHARED/wcm-utils", "util").
  addScripts("util.CKEditor.insertCSS('" + htmlWYSIWYGFormId + "', '" + cssFormId + "');");
	private String getDisplayTab(String selectedTab) {
		if ((uicomponent.getSelectedTab() == null && selectedTab.equals("mainWebcontent"))
				|| selectedTab.equals(uicomponent.getSelectedTab())) {
			return "display:block";	
		}
		return "display:none";
	}
	
	private String getSelectedTab(String selectedTab) {
		if (getDisplayTab(selectedTab).equals("display:block")) {
			return "SelectedTab";
		}
		return "NormalTab";
	}
	
	private void setUploadFields(name) {
		String[] illustrationHiddenField1 = ["jcrPath=/node/medias/images/illustration", "nodetype=nt:file", "mixintype=mix:referenceable", "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(name, 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="#tab4"><%=_ctx.appRes("WebContent.dialog.label.MainContent")%></a></li>
				<li><a data-toggle="tab" href="#tab5"><%=_ctx.appRes("WebContent.dialog.label.Illustration")%></a></li>
				<li><a data-toggle="tab" href="#tab6"><%=_ctx.appRes("WebContent.dialog.label.Advanced")%></a></li>
			</ul>
			<%/*Start UITabContentContainer*/%>
			<div class="tab-content" id="myTabContent"> 
				<div id="tab4" class="tab-pane fade in active">
					<div class="form-horizontal">
						<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=exo:article", "mixintype=mix:votable,mix:commentable,mix:i18n", "editable=if-null","validate=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);
										%>
							</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,exo:webContentChild", "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(webContentNode != null && webContentNode.hasNode("default.html")) {
										Node htmlNode = webContentNode.getNode("default.html");
										htmlContent = htmlNode.getNode("jcr:content").getProperty("jcr:data").getValue().getString();
										//htmlContent = ContentReader.getEscapeHtmlContent(htmlContent);
									}
									String[] htmlArguments = ["jcrPath=/node/default.html/jcr:content/jcr:data", "options=toolbar:CompleteWCM,height:'410px'", htmlContent];
									uicomponent.addRichtextField(htmlWYSIWYGFormId, htmlArguments) ;
										%>
							</div>
						</div>
					</div>
				</div>  <!-- End of UITabContent -->
				<!-- Start of Illustration tab -->
				<div id="tab5" 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">
								<%					
									String illustration = "illustration";
									if(webContentNode != null && webContentNode.hasNode("medias/images/illustration") && (uicomponent.findComponentById(illustration) == null)) {
										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>
													<image 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" class="actionIcon" rel="tooltip" data-placement="bottom" title="<%=_ctx.appRes("Ecm.dialog.label.remove")%>">
														<i class="uiIconDelete uiIconLightGray"></i>
													</a>
												</div>
											<%
										} else {
											setUploadFields(illustration);
										}
									} else {
										setUploadFields(illustration);
									}
								%>
							</div>
						</div>												
						<div class="control-group">
							<label class="control-label"><%=_ctx.appRes("WebContent.dialog.label.Summary")%>:</label>
							<div class="controls">
								<%
									String summaryContent = "";
									if (webContentNode != null && webContentNode.hasProperty("exo:summary")) { 
										summaryContent = webContentNode.getProperty("exo:summary").getValue().getString();
									}
									String[] fieldSummary = ["jcrPath=/node/exo:summary", "editable=if-null", summaryContent] ;
									uicomponent.addRichtextField("exo:summary", fieldSummary) ;
								%>
							</div>
						</div>
					</div>
				</div><!-- End of Illustration tab -->		
				<div id="tab6" 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,exo:webContentChild", "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(webContentNode != null && webContentNode.hasNode("css/default.css")) {
										Node cssNode = webContentNode.getNode("css/default.css");
										cssContent = cssNode.getNode("jcr:content").getProperty("jcr:data").getValue().getString();
									}
									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="cssContentHelp"></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,exo:webContentChild", "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(webContentNode != null && webContentNode.hasNode("js/default.js")) {
										Node jsNode = webContentNode.getNode("js/default.js");
										jsContent = jsNode.getNode("jcr:content").getProperty("jcr:data").getValue().getString();
									} 
									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-placement="left" data-content="<%=_ctx.appRes("WebContent.dialog.label.hintJS")%>">
								  <i class="uiIconQuestion uiIconLightGray" id="ContentJSHelp"></i>								
                </div>
							</div>
						</div>
					</div>
				</div>

				 <% if (!uiform.isShowActionsOnTop()) {
									 uiform.processRenderAction()
								}
				 %>
			</div>  

	<%uiform.end()%>						 
</div>  <!-- End of UITabPane -->
