<% 
	import javax.jcr.Node;
	import org.exoplatform.web.application.Parameter;
	
	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.addOnLoadJavascript("eXo.ecm.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"] ;
      	uicomponent.addUploadField(name, fieldImage) ;	
	}
	
	Node webContentNode = uicomponent.getNode();
%>
<style>
	.UIForm .HorizontalLayout .textarea { 
	  font-size:11px;
	  height:275px;
	  width:525px;
	 }
	 
	 .UIForm .HorizontalLayout .FieldComponent {
	 	width: 750px;
	 }
	 
</style>
<div class="UITabPane">
<%uiform.begin()%>
	<div class="TabPaneContent"> 
		<div class="WorkingAreaWithHelp">
			<div class="UIHorizontalTabs" style="margin-top:5px;">
				<div class="LeftHorizontalTabs">
					<div class="RightHorizontalTabs">
						<div class="CenterHorizontalTabs">
							<div class="TabsContainer">
								<div class="UITab NormalTabStyle">
									<div class="<%= getSelectedTab("mainWebcontent")%>">
										<div class="LeftTab">
											<div class="RightTab">                
												<div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "mainWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.MainContent")%></div>
											</div>
										</div>
									</div>
								</div>  
								<div class="UITab NormalTabStyle">
									<div class="<%= getSelectedTab("illustrationWebcontent")%>">
										<div class="LeftTab">
											<div class="RightTab">                
												<div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "illustrationWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.Illustration")%></div>
											</div>
										</div>
									</div>
								</div>
								<div class="UITab NormalTabStyle">
									<div class="<%= getSelectedTab("contentCSSWebcontent")%>">
										<div class="LeftTab">
											<div class="RightTab">                
												<div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "contentCSSWebcontent");%>"><%=_ctx.appRes("WebContent.dialog.label.Advanced")%></div>
											</div>
										</div>
									</div>
								</div>
							</div> <!-- End of TabsContainer-->
						</div>	<!-- End of CenterHorizontalTabs -->
					</div>
				</div>
			</div> <!-- End of UIHorizontalTabs -->
			<%/*Start UITabContentContainer*/%>
				<div class="HorizontalLayout" style="border: none; margin:0px; background: none; padding: 0px">	  
					<div class="UITabContentContainer">
						<div class="UITabContent" style="<%=getDisplayTab("mainWebcontent")%>">
							<table class="UIFormGrid">
                <tr>
                  <td class="FieldLabel"><%=_ctx.appRes("WebContent.dialog.label.title")%></td>
                    <td class="FieldComponent">
                    <%
                          String[] webContentFieldTitle = ["jcrPath=/node/exo:title", "validate=empty", "editable=if-null"];
                          uicomponent.addTextField("title", webContentFieldTitle) ;
                      %>
                  </td>
                </tr>
        	    	<tr>
        					<td class="FieldLabel"><%=_ctx.appRes("WebContent.dialog.label.name")%></td>
          					<td class="FieldComponent">
            					<%
			              	 		String[] webContentFieldName = ["jcrPath=/node", "nodetype=exo:webContent", "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>
                    titleField = document.getElementById("title");
                    titleField.onchange = function() { eXo.ecm.SELocalization.cleanName(this.value, "name"); } ;
                    </script>
	          			 	</td>
	        			</tr>
						<tr>
        					<td class="FieldLabel"><%=_ctx.appRes("ElementSet.dialog.label.language")%></td>
							<td class="FieldComponent">
							<%
							  String lang = org.exoplatform.portal.webui.util.Util.getPortalRequestContext().getLocale().getLanguage();
							  String[] fieldLang = ["jcrPath=/node/exo:language", "options=en,fr,es,de", lang] ;
							  uicomponent.addSelectBoxField("lang", fieldLang) ;
							%>
							</td>
						</tr>
								<tr>
						 			<td class="FieldLabel">
						 				<div title="<%=_ctx.appRes("WebContent.dialog.label.Synchronize")%>" class="WebContentSynchronize Refresh16x16Icon" onclick="eXo.ecm.CKEditor.insertCSS('<%= htmlWYSIWYGFormId %>', '<%= cssFormId %>')"></div>
										<div class="WebContentMain"><%=_ctx.appRes("WebContent.dialog.label.WebContentHtml")%></div>
					 				</td>
					  				<td class="FieldComponent">
										<%
											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(webContentNode != null && webContentNode.hasNode("default.html")) {
												Node htmlNode = webContentNode.getNode("default.html");
												htmlContent = htmlNode.getNode("jcr:content").getProperty("jcr:data").getValue().getString();
											}
											String[] htmlArguments = ["jcrPath=/node/default.html/jcr:content/jcr:data", "options=toolbar:CompleteWCM,height:'410px'", htmlContent];
											uicomponent.addRichtextField(htmlWYSIWYGFormId, htmlArguments) ;
					      				%>
									</td>
								</tr>
							</table>
						</div>  <!-- End of UITabContent -->
						<!-- Start of Illustration tab -->
						<div class="UITabContent" style="<%=getDisplayTab("illustrationWebcontent")%>">
							<div class="FormHint"><%=_ctx.appRes("WebContent.dialog.label.hintIllustration")%></div>
							<table class="UIFormGrid">
								<tr>
									<td class="FieldLabel"><%=_ctx.appRes("WebContent.dialog.label.illustrationImage")%></td>
									<td class="FieldComponent">
										<%					
											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) {
													def imgSrc = uicomponent.getImage(imageNode, "jcr:content");
													def actionLink = uicomponent.event("RemoveData", "/medias/images/illustration/jcr:content");
													%>		
														<div>
															<image src="$imgSrc" width="100px" height="80px"/>
															<a onclick="$actionLink">
																<img src="/eXoResources/skin/DefaultSkin/background/Blank.gif" class="ActionIcon Remove16x16Icon"/>
															</a>
														</div>
													<%
												} else {
													setUploadFields(illustration);
												}
											} else {
												setUploadFields(illustration);
											}
										%>
									</td>
								</tr>												
								<tr>
									<td class="FieldLabel"><%=_ctx.appRes("WebContent.dialog.label.Summary")%></td>
									<td class="FieldComponent">
										<%
											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) ;
										%>
									</td>
								</tr>
							</table>
						</div><!-- End of Illustration tab -->		
						<div class="UITabContent" style="<%=getDisplayTab("contentCSSWebcontent")%>">
							<table class="UIFormGrid">
								<tr>
									<td class="FieldLabel"><%=_ctx.appRes("WebContent.dialog.label.ContentCSS")%></td>
									<td class="FieldComponent" style="width:520px">
										<%
											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(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) ;
										%>
									</td>
									<td width="260px">
										<div class="FormHint" style="margin-top:5px"><%=_ctx.appRes("WebContent.dialog.label.hintCSS")%></div>
									</td>
								</tr>
							</table>
							<table class="UIFormGrid">
								<tr>
									<td class="FieldLabel"><%=_ctx.appRes("WebContent.dialog.label.ContentJS")%></td>
									<td class="FieldComponent" style="width:520px">
										<%
											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(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", jsContent];
											uicomponent.addTextAreaField(jsFormId, fieldContentJS); 								
										%>
									</td>
									<td width="260px">
										<div class="FormHint" style="margin-top:5px"><%=_ctx.appRes("WebContent.dialog.label.hintJS")%></div>
									</td>
								</tr>
							</table>
						</div>
					</div>   <!-- End of UITabContentContainer -->     	
					<div class="UIAction"> 
						<table align="center" class="ActionContainer">
							<tr>
								<td align="center">
									<% 
										for(action in uicomponent.getActions()) { 
											String actionLabel = _ctx.appRes(uicomponent.getName() + ".action." + action) ;
											String link = uicomponent.event(action) ;
											%>
												<a href="$link" class="ActionButton LightBlueStyle">
													<div class="ButtonLeft">
														<div class="ButtonRight">
															<div class="ButtonMiddle">
																$actionLabel
															</div>
														</div>
													</div>
												</a>
											<%
										}
									%>          
								</td>
							</tr>
						</table>
					</div>  <!-- End of UIAction-->    	
				</div>  
		</div>   <!-- End of WorkingAreaWithHelp -->
	</div>  <!-- End of TabPaneContent -->
	<%uiform.end()%>						 
</div>  <!-- End of UITabPane -->