<%@ page language="java"%>
<%@ taglib uri="http://www.infordata.net/taglibs/ifw2" prefix="ifw2"%>

<%
final String contextPath = request.getContextPath() == null ? "" : request.getContextPath();
final String pageController = (String)request.getAttribute("pageController");
%>

<!-- TinyMCE -->
<script type="text/javascript" src="<%= contextPath%>/wic.static/tiny_mce/tiny_mce.js"></script>
<!-- /TinyMCE -->

<link rel="stylesheet" type="text/css" href="<%= contextPath%>/wic.static/wic.css"/>

<ifw2:include flush="true" page="<%= pageController%>"/>

<ifw2:bnd-form bind="detailForm">

  ...
  
  <%-- Must have groupRefresh="true" --%>
  <ifw2:div id="mceDiv" groupRefresh="true" style="padding:1px">
    <%-- The text-area that will be replaced by tinyMCE editor --%>
    <ifw2:bnd-textarea bind="fieldName" rows="6" cols="110"/>
    <%
    {
      final boolean enabled = ctx.isChainEnabled("fieldName");
      if (!enabled) {
        %>
        <%-- This div replaces the tinyMCE toolbar wich is invisible when readonly --%>
        <div style="height:28px"></div> 
        <%
      }
    %>
      <script>
      {
        var id = <%= ctx.getClientScriptAccessCode("fieldName")%>.id;
        if (window.getComputedStyle) {
          var divId = <%= ctx.getClientScriptAccessCode("mceDiv")%>.id;
          var divEl = document.getElementById(divId);
          var taEl = document.getElementById(id);
          divEl.style.backgroundColor = window.getComputedStyle(taEl).backgroundColor;
        }
        var readonly = <%= !enabled %>;
        tinyMCE.init({
          mode : "exact",
          elements : id,
          language : 'en', /*'<%= LocaleContext.getLocale().getLanguage()%>',*/
          readonly : readonly,
          theme : "advanced", 
          plugins : "style",
          theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,bullist,numlist,outdent,indent,|,undo,redo,|,forecolor,backcolor,",
          theme_advanced_buttons2 : "",
          theme_advanced_buttons3 : "",
          theme_advanced_toolbar_location : "bottom",
          theme_advanced_toolbar_align : "left",
          theme_advanced_statusbar_location : "none",
          init_instance_callback : "$ifw_tinyMCEInit",
          handle_event_callback : "$ifw_tinyMCEEvent",
          onchange_callback : "$ifw_tinyMCEChange"
        });
      }
      </script>
    <%
    }
    %>
  </ifw2:div>
  
  ...
  
  <ifw2:bnd-action-group id="actions" keepFormStrokes="true">
    <ifw2:bnd-submit bind="cancel"/>
    <ifw2:bnd-submit bind="confirm"/>
    <ifw2:bnd-key-action bind="cancel" keyCode='<%=KeyEnum.ESC%>'/>
    <ifw2:bnd-key-action bind="confirm" keyCode='<%=KeyEnum.ENTER%>'/>
  </ifw2:bnd-action-group>
</ifw2:bnd-form>