<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<tr:document xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
  xmlns:tr="http://myfaces.apache.org/trinidad"
  xmlns:trh="http://myfaces.apache.org/trinidad/html"
  xmlns:jvd="http://www.ilog.com/jviews/tlds/custom.tld"
  xmlns:jv="http://www.ilog.com/jviews/tlds/jviews-faces.tld"
  xmlns:jvf="http://www.ilog.com/jviews/tlds/jviews-framework-faces.tld"
  xmlns:jvtf="http://www.ilog.com/jviews/tlds/jviews-tgo-faces.tld">
  <f:loadBundle basename="messages" var="msg" /> 
  <trh:head title="#{msg.tgoAndTrinidadTitle}"/>  
   <f:facet name="metaContainer">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </f:facet>

  <h1><tr:outputText value="#{msg.tgoAndTrinidadH1}"/></h1>
  <p><tr:outputText value="#{msg.tgoAndTrinidadP1}"/>
  <ul>
    <li><tr:outputText value="#{msg.tgoAndTrinidadLi1}"/></li>
    <li><tr:outputText value="#{msg.tgoAndTrinidadLi2}"/></li>
    <li><tr:outputText value="#{msg.tgoAndTrinidadLi3}"/></li>
    <li><tr:outputText value="#{msg.tgoAndTrinidadLi4}"/></li>
  </ul>
  </p>

  <style>
.buttonStyle {
        width: 22px;
        height: 22px;
}

.overviewComponentStyle {
        width: 155px;
        height: 100px;
}

.menuItem {
        background: #e5e5e5;
        font-family: sans-serif;
        font-size: 12px;
        color: black;
}

.menuItemHighlighted {
        background: #fefdfe;
}

.menuItemDisabled {
        color: #b19999;
}
</style>
  <tr:form>
    <tr:panelTabbed position="above">
      <tr:showDetailItem text="#{msg.FakeItem}">
        <p><tr:outputText value="#{msg.FakeitemPPR}"/></p>
      </tr:showDetailItem>
      <tr:showDetailItem id="tgo_test" text="#{msg.TGOTestLabel}">
        <!-- Declare the predefined interactors -->
        <jvf:zoomInteractor id="zoomInteractor" menuModelId="#{popupMenuFactory.zoomMenuModelId}" />
        <jvf:panInteractor id="panInteractor" menuModelId="#{popupMenuFactory.panMenuModelId}" />
        <jvtf:clientSelectInteractor id="selectInteractor"
          menuModelId="#{popupMenuFactory.selectMenuModelId}" />
        <tr:panelGroupLayout layout="horizontal">
          <!-- Declare the network JSF component -->
          <jvtf:networkView id="networkView" context="#{sampleContext.context}" width="700"
            height="400" network="#{sampleContext.network}" imageFormat="PNG">
            <f:facet name="selectionManager">
              <jvtf:selectionManager id="selectionManager" imageMode="false" lineColor="#D0D0D0"
                lineWidth="2" forceUpdateProperties="true" />
            </f:facet>
            <!-- Declare the contextual menu with given popup menu factory -->
            <jvf:contextualMenu factory="#{popupMenuFactory}" itemStyleClass="menuItem"
              itemHighlightedStyleClass="menuItemHighlighted"
              itemDisabledStyleClass="menuItemDisabled" />
          </jvtf:networkView>
          <tr:panelGroupLayout layout="vertical">
            <tr:panelBox text="#{msg.OverviewLabel}" background="light" contentStyle="width:155px">
              <jvf:overview id="overview" viewId="networkView" styleClass="overviewComponentStyle" />
            </tr:panelBox>
            <tr:panelBox text="#{msg.OperationsLabel}" background="light" contentStyle="width:155px">
              <tr:panelGroupLayout layout="horizontal">
                <jv:imageButton id="selectButton" styleClass="buttonStyle"
                  onclick="networkView.setInteractor(selectInteractor)"
                  image="/resources/images/toolbar/arrow.gif" buttonGroupId="interactors"
                  rolloverImage="/resources/images/toolbar/arrowh.gif"
                  selectedImage="/resources/images/toolbar/arrowd.gif" messageBoxId="messages"
                  title="#{msg.SelectInteractorTitle}" message="#{msg.SelectInteractorMsg}" />
                <jv:imageButton id="panButton" styleClass="buttonStyle"
                  onclick="networkView.setInteractor(panInteractor)"
                  image="/resources/images/toolbar/pan.gif" buttonGroupId="interactors"
                  rolloverImage="/resources/images/toolbar/panh.gif"
                  selectedImage="/resources/images/toolbar/pand.gif" messageBoxId="messages"
                  title="#{msg.PanInteractorTitle}" message="#{msg.PanInteractorMsg}" />
                <jv:imageButton id="zoomButton" styleClass="buttonStyle"
                  onclick="networkView.setInteractor(zoomInteractor)"
                  image="/resources/images/toolbar/zoomrect.gif" buttonGroupId="interactors"
                  rolloverImage="/resources/images/toolbar/zoomrecth.gif"
                  selectedImage="/resources/images/toolbar/zoomrectd.gif" messageBoxId="messages"
                  title="#{msg.ZoomInteractorTitle}" message="#{msg.ZoomInteractorMsg}" />
                <jv:imageButton id="showAllButton" styleClass="buttonStyle"
                  onclick="networkView.showAll(true)" image="/resources/images/toolbar/zoomfit.gif"
                  rolloverImage="/resources/images/toolbar/zoomfith.gif"
                  selectedImage="/resources/images/toolbar/zoomfitd.gif" messageBoxId="messages"
                  title="#{msg.ShowAllTitle}" message="#{msg.ShowAllMsg}" />
                <jv:imageButton id="zoomInButton" styleClass="buttonStyle"
                  onclick="networkView.zoomIn(true)" image="/resources/images/toolbar/zoom.gif"
                  rolloverImage="/resources/images/toolbar/zoomh.gif"
                  selectedImage="/resources/images/toolbar/zoomd.gif" messageBoxId="messages"
                  title="#{msg.ZoomInTitle}" message="#{msg.ZoomInMsg}" />
                <jv:imageButton id="zoomOutButton" styleClass="buttonStyle"
                  onclick="networkView.zoomOut(true)" image="/resources/images/toolbar/unzoom.gif"
                  rolloverImage="/resources/images/toolbar/unzoomh.gif"
                  selectedImage="/resources/images/toolbar/unzoomd.gif" messageBoxId="messages"
                  title="#{msg.ZoomOutTitle}" message="#{msg.ZoomOutMsg}" />
              </tr:panelGroupLayout>
              <jv:messageBox height="22" width="100" id="messages" styleClass="text" />
            </tr:panelBox>
          </tr:panelGroupLayout>
        </tr:panelGroupLayout>
      </tr:showDetailItem>
    </tr:panelTabbed>
  </tr:form>
</tr:document>