<% 
	import javax.jcr.Node;
	import org.exoplatform.download.DownloadService;
	import org.exoplatform.download.InputStreamDownloadResource;
	import java.io.InputStream;
	
	def rcontext = _ctx.getRequestContext() ;
  def jsManager = rcontext.getJavascriptManager();
	def String htmlWYSIWYGFormId = "htmlData" + uicomponent.hashCode();
	def String cssFormId = "ContentCSS[" + uicomponent.hashCode() + "]";
	def String jsFormId = "ContentJS[" + uicomponent.hashCode() + "]";
	jsManager.importJavascript('eXo.webui.UIHorizontalTabs');
	jsManager.addOnLoadJavascript("eXo.ecm.CKEditor.insertCSS('" + htmlWYSIWYGFormId + "', '" + cssFormId + "')");
	
	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"] ;
      uicomponent.addUploadField("illustration", 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">
	<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="SelectedTab">
										<div class="LeftTab">
											<div class="RightTab">                
												<div class="MiddleTab" onClick="eXo.webui.UIHorizontalTabs.displayTabContent(this);"><%=_ctx.appRes("WebContent.dialog.label.MainContent")%></div>
											</div>
										</div>
									</div>
								</div>  
								
								<div class="UITab NormalTabStyle">
									<div class="NormalTab">
										<div class="LeftTab">
											<div class="RightTab">                
												<div class="MiddleTab" onClick="eXo.webui.UIHorizontalTabs.displayTabContent(this);"><%=_ctx.appRes("WebContent.dialog.label.Illustration")%></div>
											</div>
										</div>
									</div>
								</div>
											            
								<div class="UITab NormalTabStyle">
									<div class="NormalTab">
										<div class="LeftTab">
											<div class="RightTab">                
												<div class="MiddleTab" onClick="eXo.webui.UIHorizontalTabs.displayTabContent(this);"><%=_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*/%>
			<%uiform.begin()%>
			<div class="HorizontalLayout" style="border: none; margin:0px; background: none; padding: 0px">	  
				<div class="UITabContentContainer">
					<div class="UITabContent" style="display: block;">
						<table class="UIFormGrid">
		            		<tr>
		        				<td class="FieldLabel"><%=_ctx.appRes("WebContent.dialog.label.name")%></td>
		          				<td class="FieldComponent">
		            			<%
			              	 		String[] webContentFieldName = ["jcrPath=/node", "nodetype=exo:pictureOnHeadWebcontent", "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);
		            	   		%>
		          			 	</td>
		        			</tr>
							<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.image")%></td>
					      <td class="FieldComponent">
						      <%
						        if(uicomponent.isEditing()) { 
											if (webContentNode != null && webContentNode.hasProperty("exo:image")) {
												if(webContentNode.getProperty("exo:image").getStream().available() > 0) {
													DownloadService dservice = uicomponent.getApplicationComponent(DownloadService.class);
											    InputStream input = webContentNode.getProperty("exo:image").getStream();
											    InputStreamDownloadResource dresource = new InputStreamDownloadResource(input, "image");
											    dresource.setDownloadName(webContentNode.getName());
											    
											    def imgSrc = dservice.getDownloadLink(dservice.addDownloadResource(dresource));
													def actionLink = uicomponent.event("RemoveData", "exo:image");
										%>		
													<div>
														<image src="$imgSrc" width="100px" height="80px"/>
														<a href="$actionLink">
															<img src="/eXoResources/skin/DefaultSkin/background/Blank.gif" alt="" class="ActionIcon Remove16x16Icon"/>
														</a>
													</div>
										<%
												} else {
									        String[] fieldImage = ["jcrPath=/node/exo:image"] ;
									        uicomponent.addUploadField("imagee", fieldImage) ;								
												}
											}	else {
								        String[] fieldImage = ["jcrPath=/node/exo:image"] ;
								        uicomponent.addUploadField("imagee", fieldImage) ;								
											}
										} else {
											String[] fieldImage = ["jcrPath=/node/exo:image"] ;
							        uicomponent.addUploadField("imagee", fieldImage) ;
										}
						      %>
						    </td>
					    </tr>
					    <tr>
								<td class="FieldLabel"><%=_ctx.appRes("WebContent.dialog.label.imageWidth")%></td>
							  	<td class="FieldComponent">
									<%
							        String[] imageWidth = ["jcrPath=/node/exo:imageWidth", "validate=org.exoplatform.wcm.webui.ImageSizeValidator"];
							        uicomponent.addTextField("imageWidth", imageWidth) ;
							    %>
								</td>
							</tr>
							<tr>
								<td class="FieldLabel"><%=_ctx.appRes("WebContent.dialog.label.imageHeight")%></td>
							  	<td class="FieldComponent">
									<%
							        String[] imageHeight = ["jcrPath=/node/exo:imageHeight", "validate=org.exoplatform.wcm.webui.ImageSizeValidator"];
							        uicomponent.addTextField("imageHeight", imageHeight) ;
							    %>
								</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 = null;
									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 class=\"DropCap\">T</div>ype the text here <div style=\"clear: left; height: 20px;\"><span></span></div>";
									}
									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="display: none;">
						<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">
									<%						
										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) {
												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 href="$actionLink">
															<img src="/eXoResources/skin/DefaultSkin/background/Blank.gif" class="ActionIcon Remove16x16Icon"/>
														</a>
													</div>
												<%
											} else {
												setUploadFields();
											}
										} else {
											setUploadFields();
										}
									%>
								</td>
							</tr>
							<tr>
								<td class="FieldLabel"><%=_ctx.appRes("WebContent.dialog.label.Summary")%></td>
								<td class="FieldComponent">
								<%
									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", "editable=if-null", summaryContent] ;
									uicomponent.addRichtextField("exo:summary", fieldSummary) ;
								%>
								</td>
							</tr>
							
						</table>
					</div>
					<!-- End of Illustration tab -->		
								
					<div class="UITabContent" style="display: none;">
						<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(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();
										}
									}
									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>
							<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(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();
										} 
									} 
									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>  
		<%uiform.end()%>						 
		</div>   <!-- End of WorkingAreaWithHelp -->
	</div>  <!-- End of TabPaneContent -->
</div>  <!-- End of UITabPane -->

