<!-- Default formatting -->
<Defaults>
  <Text color="#FFFFFF"
    alignment="MiddleLeft" />

  <Toggle isOn="False"
    rectAlignment="MiddleRight" />

  <Cell dontUseTableCellBackground="true"
    outlineSize="0 1"
    outline="grey" />

  <!-- options -->
  <Row class="nav_option-text"
    preferredHeight="45"/>
  <Cell class="nav_option-text"
    color="#333333"/>
  <Cell class="nav_option-button"
    color="#333333"/>
  <Text class="nav_option-header"
    fontSize="20"
    font="font_teutonic-arkham"/>
  <Cell class="claim"
    tooltip="Clicking this seat in the navigation overlay&#xA;will now only swap the playercolor for you."
    tooltipPosition="Right" />

  <!-- buttons at the bottom -->
  <Button class="bottomButtons"
    hoverClass="hover"
    pressClass="press"
    selectClass="select"
    color="#888888"
    minHeight="35"
    fontSize="24"
    font="font_teutonic-arkham"/>
  <Button class="hover"
    color="grey"/>
  <Button class="press"
    color="white"/>
  <Button class="select"
    color="white"/>

  <!-- Navigation Panels -->
  <Panel class="navPanel"
    active="false"
    allowDragging="true"
    rectAlignment="LowerRight"
    returnToOriginalPositionWhenReleased="false"
    offsetXY="-40 0">
  </Panel>
</Defaults>

<!-- full Panel -->
<Panel id="navPanelFull"
  height="358"
  width="455"
  class="navPanel">
</Panel>

<!-- Play Area only -->
<Panel id="navPanelPlay"
  height="208"
  width="205"
  class="navPanel">
</Panel>

<!-- Settings -->
<TableLayout id="navPanelSettings"
  active="false"
  width="300"
  height="380"
  color="#000000"
  outlineSize="2 2"
  outline="grey"
  rectAlignment="MiddleCenter">

  <!-- Header -->
  <Row preferredHeight="60">
    <Cell>
      <Panel padding="10 0 0 0">
        <Text font="font_teutonic-arkham"
          fontSize="35">Navigation Overlay</Text>
      </Panel>
    </Cell>
  </Row>

  <!-- Options -->
  <Row>
    <Cell>
      <TableLayout columnWidths="0 125"
        autoCalculateHeight="1"
        cellPadding="10 0 5 5">

        <!-- Option: Custom pitch -->
        <Row class="nav_option-text">
          <Cell class="nav_option-text">
            <Text class="nav_option-header">Viewing angle in degrees:</Text>
          </Cell>
          <Cell class="nav_option-button">
            <Slider id="sliderPitch"
              onValueChanged="797ede/updatePitch"
              wholeNumbers="true"
              minValue="0"
              maxValue="89"
              value="75"
              tooltip="This controls the camera pitch&#xA;('nodding your head')."
              tooltipPosition="Right"/>
          </Cell>
        </Row>

        <!-- Option: Custom distance -->
        <Row class="nav_option-text">
          <Cell class="nav_option-text">
            <Text class="nav_option-header">Viewing distance (relative):</Text>
          </Cell>
          <Cell class="nav_option-button">
            <Slider id="sliderDistance"
              onValueChanged="797ede/updateDistance"
              wholeNumbers="true"
              minValue="50"
              maxValue="200"
              value="100"
              tooltip="This controls the camera distance&#xA;(from 50% to 200% of the default settings)."
              tooltipPosition="Right"/>
          </Cell>
        </Row>

        <!-- Option: Claim White -->
        <Row class="nav_option-text">
          <Cell class="nav_option-text">
            <Text class="nav_option-header">Claim "White" seat</Text>
          </Cell>
          <Cell class="nav_option-button claim">
            <Toggle id="claimWhite"
              onValueChanged="797ede/claimColor(White)"/>
          </Cell>
        </Row>

        <!-- Option: Claim Orange -->
        <Row class="nav_option-text">
          <Cell class="nav_option-text">
            <Text class="nav_option-header">Claim "Orange" seat</Text>
          </Cell>
          <Cell class="nav_option-button claim">
            <Toggle id="claimOrange"
              onValueChanged="797ede/claimColor(Orange)"/>
          </Cell>
        </Row>

        <!-- Option: Claim Green -->
        <Row class="nav_option-text">
          <Cell class="nav_option-text">
            <Text class="nav_option-header">Claim "Green" seat</Text>
          </Cell>
          <Cell class="nav_option-button claim">
            <Toggle id="claimGreen"
              onValueChanged="797ede/claimColor(Green)"/>
          </Cell>
        </Row>

        <!-- Option: Claim Red -->
        <Row class="nav_option-text">
          <Cell class="nav_option-text">
            <Text class="nav_option-header">Claim "Red" seat</Text>
          </Cell>
          <Cell class="nav_option-button claim">
            <Toggle id="claimRed"
              onValueChanged="797ede/claimColor(Red)"/>
          </Cell>
        </Row>
      </TableLayout>
    </Cell>
  </Row>

  <!-- Buttons: Defaults and Close -->
  <Row preferredHeight="50">
    <Cell>
      <HorizontalLayout minHeight="55"
        flexibleHeight="0"
        padding="10 10 5 10"
        spacing="35">
        <Button class="bottomButtons"
          onClick="797ede/loadDefaultSettings">Load defaults</Button>
        <Button class="bottomButtons"
          onClick="797ede/toggleSettings">Close</Button>
      </HorizontalLayout>
    </Cell>
  </Row>
</TableLayout>