<% 
	import javax.jcr.Node;
	import org.exoplatform.portal.webui.util.Util;
	import org.exoplatform.services.jcr.RepositoryService;
	
	def rcontext = _ctx.getRequestContext() ;
	def docBase = Util.getPortalRequestContext().getRequestContextPath();
	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.backoffice.private.WCMUtils', '/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", "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("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> <!-- End of UIHorizontalTabs -->
			
			<%/*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="name"><%=_ctx.appRes("WebContent.dialog.label.name")%>:</label>
									<div class="controls">
									<%
										String[] webContentFieldName = ["jcrPath=/node", "nodetype=wai:siteBreadcrumb", "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);
									%>
								</div>
							</div>
							<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="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">
					 			<label 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>
					 			</label>
					  			<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.hasNode("default.html")) {
											Node htmlNode = webContentNode.getNode("default.html");
											htmlContent = htmlNode.getNode("jcr:content").getProperty("jcr:data").getValue().getString();
										}
									}
									if("".equals(htmlContent)) {
										htmlContent = "<div id=\"breadcrumb-generator\"><div class=\"UIWCMBreadcrumbsPortlet content-display\"><div class=\"BCHome16x16Icon\"><span></span></div></div></div>";
									}
									String[] htmlArguments = ["jcrPath=/node/default.html/jcr:content/jcr:data", "options=toolbar:CompleteWCM,height:'410px',noSanitization", htmlContent];
			    					uicomponent.addRichtextField(htmlWYSIWYGFormId, htmlArguments) ;
			      				%>
								</div>
							</div>
						</div>
					</div>  <!-- End of UITabContent -->
					<!-- Start of Illustration tab -->
					<div id="tab2" class="tab-pane fade">
						<span class="helpBlock helpBlockTitle"><i class="uiIconHelp"></i><%=_ctx.appRes("WebContent.dialog.label.hintIllustration")%></span>
							
						<div class="form-horizontal">
						<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" alt="<%=_ctx.appRes("Ecm.dialog.label.remove")%>" width="100px" height="80px"/>
															<a class="actionIcon" href="$actionLink" rel="tooltip" data-placement="bottom" title="<%=_ctx.appRes("Ecm.dialog.label.remove")%>">
																<i class="uiIconTrash"></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.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.hasNode("css/default.css")) {
											Node cssNode = webContentNode.getNode("css/default.css");
											cssContent = cssNode.getNode("jcr:content").getProperty("jcr:data").getValue().getString();
										}
									}
									if("".equals(cssContent)) {
										cssContent = 	".UIWindow .UIBreadcrumbsPortlet {\n" +
																	"\tmargin: 0px;\n" +
																	"}\n" +
																	".UIBreadcrumbs a {\n" +
																	"\tfloat: left ; \n" +
																	"}\n" +
																	".UIBreadcrumbs a.FL {\n" +
																	"\tcolor:#000;\n" +
																	"\tfloat:left;\n" +
																	"\tfont-size:13px; \n" +
																	"}\n" +
																	".UIBreadcrumbs a.Selected {\n" +
																	"\tcolor:#005151;\n" +
																	"\tfont-size:13px;\n" +
																	"\tfont-weight:bold;\n" +
																	"}\n" +
																	".UIBreadcrumbs .BreadcrumbsInfoBar {\n" +
																	"\theight: 22px;\n" +
																	"\tpadding: 10px 10px 0px; \n" +
																	"\toverflow: hidden;\n" +
																	"}\n" +
																	".UIBreadcrumbs .RightBlackGridArrowIcon {\n" +
																	"\tfloat: left;\n" +
																	"\tmargin: 1px;\n" +
																	"\tbackground:url('$docBase/rest/jcr/$repository/collaboration/sites/{portalName}/web contents/site artifacts/breadcrumb/Default/medias/images/BreadcrumbsArrowIcon.gif') repeat 0 0;\n" +
																	"\theight:16px;\n" +
																	"\twidth:16px;\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.hasNode("js/default.js")) {
											Node jsNode = webContentNode.getNode("js/default.js");
											jsContent = jsNode.getNode("jcr:content").getProperty("jcr:data").getValue().getString();
										} 
									}
									if("".equals(jsContent)) {
										jsContent = 	"eXo.core.Browser.addOnLoadCallback('renderBreadcrumb', renderBreadcrumb);\n\n\t" +
																			"function renderBreadcrumb() {\n\t" +
																				"var breadcumbs = eXo.ecm.WCMBreadcrumbPortlet.getBreadcrumbs();\n" +
																				"var size = breadcumbs.length;\n" +
																				"var html = '';\n" +
																				"html += '<div class=\"UIWCMBreadcrumbsPortlet\">'+\n\t" +
																									"'<div class=\"UIBreadcrumbs\">' +\n\t" +
																										"'<div class=\"LeftBreadcrumbsBar\">' +\n\t" +
																											"'<div class=\"RightBreadcrumbsBar\">' +\n\t" +
																												"'<div class=\"BreadcrumbsInfoBar\">' +\n\t" +
																													"'<div class=\"HomeIcon\"><span></span></div>';\n" +
																				"if (size > 0) {\n\t" +
																					"var note = \"FL\";\n" +
																					"for (var i = 0; i < size; i++) {\n\t" +
																						"var breadcrumb = breadcumbs[i];\n" +
																						"if(i == size -1) note = \"Selected\";\n" +
																							"var link = (i == size -1) ? \"#\" : eXo.ecm.WCMUtils.getHostName() + eXo.env.portal.context + '/' + eXo.env.portal.portalName + '/' +  breadcrumb.uri;\n" +
																							"html += '<a href=\"' + link + '\" class=\"'+ note+'\">'+ breadcrumb.resolvedLabel+'</a>';\n" +
																							"if(i != size-1) {\n\t" +
																								"html += '<div class=\"RightBlackGridArrowIcon FL\"><span></span></div>';\n" +
																							"}\n" +
																					"}\n" +
																				"}\n" +
																				"html += 					'<div style=\"clear:left\"><span></span></div>' +\n" +
																											"'</div>' +\n" +
																										"'</div>' +\n" +
																									"'</div>' +\n" +
																								"'</div>' +\n" +
																							"'</div>';\n" +
																				"document.getElementById(\"breadcrumb-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 -->

