<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<tr:document xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:tr="http://myfaces.apache.org/trinidad"
  xmlns:trh="http://myfaces.apache.org/trinidad/html"
  xmlns:jv="http://www.ilog.com/jviews/tlds/jviews-faces.tld"
  xmlns:jvd="http://www.ilog.com/jviews/tlds/custom.tld"
  xmlns:jvgf="http://www.ilog.com/jviews/tlds/jviews-gantt-faces.tld">
        <f:loadBundle basename="messages" var="msg" />
        <trh:head title="#{msg.ganttTrinidadTitle}" />
        <f:facet name="metaContainer">
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        </f:facet>
        <style>
.menuItem {
        background: #ece9d8;
        color: black;
        font-family: sans-serif;
        font-size: 12px;
}

.menuItemHighlighted {
        background: #316ac5;
        color: white;
}

.menuItemDisabled {
        background: #ece9d8;
        font-style: italic;
        color: #aca899;
}

.psheet {
        font-size: 8pt;
        font-family: sans-serif;
        border-collapse: collapse;
        border: 1px solid #3b619c;
}

.psheet-cell {
        background-color: #ECE9D8;
        border: 1px solid #7a8a99;
        padding: 5px;
        width: 70px;
}

.psheet-cell-title {
        background-color: #ECE9D8;
        border: 1px solid #7a8a99;
        padding: 5px;
        width: 250px;
}

.psheet-cell-value {
        background-color: white;
        border: 1px solid #7a8a99;
        padding: 5px;
        cursor: text;
        width: 80px;
}

.psheet-cell-selected {
        background-color: #bcd7ff;
        border: 1px solid #7a8a99;
        padding: 5px;
        width: 70px;
}

.psheet-text {
        font-size: 8pt;
        font-family: sans-serif;
}
</style>
  <script type="text/javascript">
<!-- Work around to call method from within facelets -->
<h:commandLink id="methodCall"/>
function insertActivity(){
   gantt.performJSFAction("#{methodCall.action}", "\#\{ganttBean.insertActivity\}", true);
}
function deleteSelectedActivity(){
   gantt.performJSFAction("#{methodCall.action}", "\#\{ganttBean.deleteSelectedActivity\}", true);
}
</script>
  <tr:form>
    <tr:panelTabbed position="above">
      <tr:showDetailItem id="fake_item" text="#{msg.FakeItem}">
        <p><tr:outputText value="#{msg.FakeitemPPR}"/></p>
      </tr:showDetailItem>
      <tr:showDetailItem id="gant_test" text="#{msg.GanttTest}">
        <!-- interactors -->
        <jvgf:rowExpandCollapseInteractor id="tableExpand" />
        <jvgf:rowExpandCollapseInteractor id="sheetExpand" />
        <jvgf:sheetScrollInteractor id="sheetScroll" />
        <jvgf:tableScrollInteractor id="tableScroll" />
        <jvgf:selectInteractor id="sheetSelect" />
        <jvgf:selectInteractor id="tableSelect" />
        <!-- first panel grid : the toolbar -->
        <tr:panelGroupLayout layout="horizontal">
          <jv:imageButton id="selectButton" style="width:22px;height:22px"
            onclick='gantt.setInteractors(tableSelect, sheetSelect)' selected="true"
            buttonGroupId="interactors" image="/images/arrow.gif" rolloverImage="/images/arrowh.gif"
            selectedImage="/images/arrowd.gif" message="#{msg.selectButtonMsg}" messageBoxId="messages" />
          <jv:imageButton id="expandButton" style="width:22px;height:22px"
            onclick='gantt.setInteractors(tableExpand, sheetExpand)' image="/images/arrowpm.gif"
            buttonGroupId="interactors" rolloverImage="/images/arrowpmh.gif"
            selectedImage="/images/arrowpmd.gif" message="#{msg.expandOrCollapseRowMsg}"
            messageBoxId="messages" />
          <jv:imageButton style="width:22px;height:22px" id="scrollButton"
            onclick='gantt.setInteractors(tableScroll, sheetScroll)' image="/images/pan.gif"
            buttonGroupId="interactors" rolloverImage="/images/panh.gif"
            selectedImage="/images/pand.gif" message="#{msg.panMsg}" messageBoxId="messages" />
          <jv:imageButton style="width:22px;height:22px" onclick='gantt.zoomToFit()'
            image="/images/zoomfit.gif" rolloverImage="/images/zoomfith.gif"
            selectedImage="/images/zoomfitd.gif" message="#{msg.showAllMsg}" messageBoxId="messages" />
          <jv:imageButton style="width:22px;height:22px" onclick='gantt.zoomIn()'
            image="/images/zoom.gif" rolloverImage="/images/zoomh.gif"
            selectedImage="/images/zoomd.gif" message="#{msg.zoomInMsg}" messageBoxId="messages" />
          <jv:imageButton style="width:22px;height:22px" onclick='gantt.zoomOut()'
            image="/images/unzoom.gif" rolloverImage="/images/unzoomh.gif"
            selectedImage="/images/unzoomd.gif" message="#{msg.zoomOutMsg}" messageBoxId="messages" />
          <h:outputText value="&nbsp;|&nbsp;" escape="false" />
          <jv:imageButton style="width:22px;height:22px" onclick='insertActivity()'
            image="/images/insertrow.gif" rolloverImage="/images/insertrowh.gif"
            selectedImage="/images/insertrowd.gif" message="#{msg.insertActivityMsg}" messageBoxId="messages" />
          <jv:imageButton style="width:22px;height:22px" onclick='deleteSelectedActivity()'
            image="/images/delete.gif" rolloverImage="/images/deleteh.gif"
            selectedImage="/images/deleted.gif" message="#{msg.deleteActivityMsg}"
            messageBoxId="messages" />
        </tr:panelGroupLayout>
        <!-- Second panel grid: the gantt view, messages and property sheet -->
        <table>
          <tr valign="top">
            <td><tr:panelGroupLayout layout="vertical">
              <jvgf:ganttView id="gantt" project="/data/gantt.igpr" style="width:800px;height:400px"
                imageFormat="PNG" tableInteractorId="tableSelect" sheetInteractorId="sheetSelect"
                messageBoxId="messages" waitingImage="/images/wait.gif" resizable="true"
                editable="true">
                <f:facet name="tableSelectionManager">
                  <jvgf:selectionManager imageMode="false" lineColor="#FF0000" lineWidth="1"
                    fillOn="true" forceUpdateProperties="false" />
                </f:facet>
                <f:facet name="sheetSelectionManager">
                  <jvgf:selectionManager propertyAccessor="#{ganttBean.propertyAccessor}"
                    imageMode="false" lineColor="#FF0000" lineWidth="1" fillOn="true"
                    forceUpdateProperties="true" />
                </f:facet>
              </jvgf:ganttView>
              <jv:messageBox id="messages" style="width:600px;height:20px" />
            </tr:panelGroupLayout></td>
            <td><jvd:propertySheet viewId="gantt" component="sheet" /></td>
          </tr>
        </table>
      </tr:showDetailItem>
    </tr:panelTabbed>
  </tr:form>
</tr:document>