<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core" 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:view>  
    <f:loadBundle basename="messages" var="msg" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><h:outputText value="#{msg.tgoTitle}"/></title>
</head>
<body>
<style>
  body { font-family: sans-serif; }
</style>
<h1><h:outputText value="#{msg.tgoH1}"/></h1>
<p><h:outputText value="#{msg.tgoP1}"/>
<ul>
  <li><h:outputText value="#{msg.tgoli1}"/></li>
  <li><h:outputText value="#{msg.tgoli2}"/></li>
  <li><h:outputText value="#{msg.tgoli3}"/></li>
  <li><h:outputText value="#{msg.tgoli4}"/></li>
</ul></p>

<style>
.titleStyle {
        font-weight: bold;
}

.buttonStyle {
        width: 22px;
        height: 22px;
}

.operationsStyle {
        border: double;
        width: 175px;
}

.overviewStyle {
        border: double;
        width: 175px;
}

.messageBoxStyle {
        border: double;
        width: 175px;
}

.mainComponentStyle {
        border: groove;
        width: 900px;
}

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

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

.menuItemHighlighted {
        background: #fefdfe;
}

.menuItemDisabled {
        color: #b19999;
}
</style>
<h:form id="form">
  <!-- 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}" />
  <h:panelGrid columns="2" styleClass="mainComponentStyle">
    <h:panelGrid columns="1">
      <h:outputText id="networkTitle" value="#{msg.NetworkLabel}" styleClass="titleStyle" />
      <!-- 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" />
        </f:facet>
        <!-- Declare the contextual menu with given popup menu factory -->
        <jvf:contextualMenu factory="#{popupMenuFactory}" itemStyleClass="menuItem"
          itemHighlightedStyleClass="menuItemHighlighted" itemDisabledStyleClass="menuItemDisabled" />
      </jvtf:networkView>
    </h:panelGrid>
    <h:panelGrid columns="1" styleClass="tableStyle">
      <h:panelGrid columns="1" styleClass="overviewStyle">
        <h:outputText id="overviewTitle" value="#{msg.OverviewLabel}" styleClass="titleStyle" />
        <jvf:overview id="overview" viewId="networkView" styleClass="overviewComponentStyle" />
      </h:panelGrid>
      <h:panelGrid columns="1" styleClass="operationsStyle">
        <h:panelGrid columns="1">
          <h:outputText id="toolbarTitle" value="#{msg.OperationsLabel}" styleClass="titleStyle" />
        </h:panelGrid>
        <!-- Declare the six buttons -->
        <h:panelGrid columns="6">
          <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}" />
        </h:panelGrid>
      </h:panelGrid>
      <h:panelGrid id="messageGrid" columns="1" styleClass="messageBoxStyle">
        <h:outputText id="messageTitle" value="#{msg.MessagesLabel}" styleClass="titleStyle" />
        <jv:messageBox height="22" width="100" id="messages" styleClass="text" />
      </h:panelGrid>
    </h:panelGrid>
  </h:panelGrid>
</h:form>
</body>
</f:view>
</html>