<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.canvas.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.*?>
<?import javafx.collections.*?>
<?import javafx.scene.image.*?>
<?import java.net.*?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="net.zamasoft.reader.book.ToolBarController"
      fx:id="root"
      AnchorPane.topAnchor="0"
      styleClass="tools">
  <fx:define>
    <ToggleGroup fx:id="toolToggleGroup"/>
  </fx:define>
  
  <!-- 検索 -->
  <HBox fx:id="toolbar"
        styleClass="tool-bar">
    <ToggleButton fx:id="searchButton" toggleGroup="$toolToggleGroup">
      <tooltip>
        <Tooltip text="%search"/>
      </tooltip>
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="normal">
            <Image url="@../icons/search.png"/>
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="selected">
            <Image url="@../icons/search-selected.png"/>
          </ImageView>
        </StackPane>
      </graphic>
    </ToggleButton>
    
    <!-- ウェブ検索 -->
    <ToggleButton fx:id="webSearchButton" toggleGroup="$toolToggleGroup">
      <tooltip>
        <Tooltip text="%webSearch"/>
      </tooltip>
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="normal">
            <Image url="@../icons/wsearch.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="selected">
            <Image url="@../icons/wsearch-selected.png" />
          </ImageView>
        </StackPane>
      </graphic>
    </ToggleButton>
    
    <!-- マーカー -->
    <ToggleButton fx:id="markButton" toggleGroup="$toolToggleGroup">
      <tooltip>
        <Tooltip text="%marker"/>
      </tooltip>
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="normal">
            <Image url="@../icons/marker.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="selected">
            <Image url="@../icons/marker-selected.png" />
          </ImageView>
        </StackPane>
      </graphic>
    </ToggleButton>
    
    <!-- しおり -->
    <ToggleButton fx:id="bookmarkButton" toggleGroup="$toolToggleGroup">
      <tooltip>
        <Tooltip text="%bookmark"/>
      </tooltip>
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="normal">
            <Image url="@../icons/bookmark.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="selected">
            <Image url="@../icons/bookmark-selected.png" />
          </ImageView>
        </StackPane>
      </graphic>
    </ToggleButton>
    
    <!-- 文字の大きさ -->
    <ToggleButton fx:id="textSizeButton" toggleGroup="$toolToggleGroup">
      <tooltip>
        <Tooltip text="%textSize"/>
      </tooltip>
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="normal">
            <Image url="@../icons/textsize.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="selected">
            <Image url="@../icons/textsize-selected.png" />
          </ImageView>
        </StackPane>
      </graphic>
    </ToggleButton>
    
    <!-- 書字方向 -->
    <ToggleButton fx:id="writingModeButton" toggleGroup="$toolToggleGroup">
      <tooltip>
        <Tooltip text="%writingMode"/>
      </tooltip>
      <graphic>
        <StackPane>
          <StackPane styleClass="normal">
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true">
            <Image url="@../icons/horizontal.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" visible="false">
            <Image url="@../icons/vertical.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" visible="false">
            <Image url="@../icons/twocol.png" />
          </ImageView>
          </StackPane>
          <StackPane styleClass="selected">
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true">
            <Image url="@../icons/horizontal-selected.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" visible="false">
            <Image url="@../icons/vertical-selected.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" visible="false">
            <Image url="@../icons/twocol-selected.png" />
          </ImageView>
          </StackPane>
        </StackPane>
      </graphic>
    </ToggleButton>
    
    <!-- 見開き -->
    <Button fx:id="spreadButton" onAction="#spreadAction">
      <tooltip>
        <Tooltip text="%spread"/>
      </tooltip>
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true">
            <Image url="@../icons/nospread.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" visible="false">
            <Image url="@../icons/spread.png" />
          </ImageView>
        </StackPane>
      </graphic>
    </Button>
    
    <!-- フルスクリーン -->
    <Button fx:id="fullScreenButton" onAction="#fullScreenAction">
      <tooltip>
        <Tooltip text="%fullScreen"/>
      </tooltip>
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true">
            <Image url="@../icons/window.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" visible="false">
            <Image url="@../icons/full.png" />
          </ImageView>
        </StackPane>
      </graphic>
    </Button>

    <!-- 反転 -->
    <Button fx:id="invertButton" onAction="#invertAction">
      <tooltip>
        <Tooltip text="%reverseMode"/>
      </tooltip>
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true">
            <Image url="@../icons/normal.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" visible="false">
            <Image url="@../icons/invert.png" />
          </ImageView>
        </StackPane>
      </graphic>
    </Button>

    <!-- 書棚に戻る -->
    <Button onAction="#toShelfAction">
      <tooltip>
        <Tooltip text="%toshelf"/>
      </tooltip>
      <graphic>
        <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true">
          <Image url="@../icons/to-shelf.png" />
        </ImageView>
      </graphic>
    </Button>
  </HBox>
  
  <!-- 検索ボックス -->
  <HBox fx:id="searchBox"
        styleClass="tool-bar"
        visible="false">
    <TextField fx:id="queryText"/>
    <Button onAction="#searchLeftAction">
      <graphic>
        <ImageView fitWidth="24" pickOnBounds="true" preserveRatio="true">
          <Image url="@../icons/search-left.png" />
        </ImageView>
      </graphic>
    </Button>
    <Button onAction="#searchRightAction">
      <graphic>
        <ImageView fitWidth="24" pickOnBounds="true" preserveRatio="true">
          <Image url="@../icons/search-right.png" />
        </ImageView>
      </graphic>
    </Button>
    <Button onAction="#searchListAction">
      <graphic>
        <ImageView fitWidth="24" pickOnBounds="true" preserveRatio="true">
          <Image url="@../icons/list.png" />
        </ImageView>
      </graphic>
    </Button>
  </HBox>
  
  <!-- しおりボックス -->
  <HBox fx:id="bookmarkBox"
        styleClass="tool-bar"
        visible="false">
    <Label text="%title"/>
    <TextField fx:id="bookmarkText"/>
    <Button onAction="#bookmarkAction" text="%addBookmark"/>
  </HBox>
  
  <!-- 書字方向ボックス -->
  <HBox fx:id="writingModeBox"
        styleClass="tool-bar"
        visible="false">
    <fx:define>
      <ToggleGroup fx:id="writingModeToggleGroup"/>
    </fx:define>
    <ToggleButton toggleGroup="$writingModeToggleGroup">
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="normal">
            <Image url="@../icons/horizontal.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="selected">
            <Image url="@../icons/horizontal-selected.png" />
          </ImageView>
        </StackPane>
      </graphic>
    </ToggleButton>
    <ToggleButton toggleGroup="$writingModeToggleGroup">
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="normal">
            <Image url="@../icons/vertical.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="selected">
            <Image url="@../icons/vertical-selected.png" />
          </ImageView>
        </StackPane>
      </graphic>
    </ToggleButton>
    <ToggleButton toggleGroup="$writingModeToggleGroup">
      <graphic>
        <StackPane>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="normal">
            <Image url="@../icons/twocol.png" />
          </ImageView>
          <ImageView fitWidth="48" pickOnBounds="true" preserveRatio="true" styleClass="selected">
            <Image url="@../icons/twocol-selected.png" />
          </ImageView>
        </StackPane>
      </graphic>
    </ToggleButton>
  </HBox>
  
  <!-- フォントサイズボックス -->
  <HBox fx:id="textSizeBox"
        styleClass="tool-bar"
        visible="false">
    <fx:define>
      <ToggleGroup fx:id="textSizeToggleGroup"/>
    </fx:define>
    <ToggleButton toggleGroup="$textSizeToggleGroup">
      <graphic>
        <StackPane>
          <Circle centerX="24" centerY="24" radius="4" styleClass="normal"/>
          <Group styleClass="selected">
            <Rectangle width="48" height="48"/>
            <Circle centerX="24" centerY="24" radius="4"/>
          </Group>
        </StackPane>
      </graphic>
    </ToggleButton>
    <ToggleButton toggleGroup="$textSizeToggleGroup">
      <graphic>
        <StackPane>
          <Circle centerX="24" centerY="24" radius="6" styleClass="normal"/>
          <Group styleClass="selected">
            <Rectangle width="48" height="48"/>
            <Circle centerX="24" centerY="24" radius="6"/>
          </Group>
        </StackPane>
      </graphic>
    </ToggleButton>
    <ToggleButton toggleGroup="$textSizeToggleGroup">
      <graphic>
        <StackPane>
          <Circle centerX="24" centerY="24" radius="8" styleClass="normal"/>
          <Group styleClass="selected">
            <Rectangle width="48" height="48"/>
            <Circle centerX="24" centerY="24" radius="8"/>
          </Group>
        </StackPane>
      </graphic>
    </ToggleButton>
    <ToggleButton toggleGroup="$textSizeToggleGroup">
      <graphic>
        <StackPane>
          <Circle centerX="24" centerY="24" radius="10" styleClass="normal"/>
          <Group styleClass="selected">
            <Rectangle width="48" height="48"/>
            <Circle centerX="24" centerY="24" radius="10"/>
          </Group>
        </StackPane>
      </graphic>
    </ToggleButton>
    <ToggleButton toggleGroup="$textSizeToggleGroup">
      <graphic>
        <StackPane>
          <Circle centerX="24" centerY="24" radius="12" styleClass="normal"/>
          <Group styleClass="selected">
            <Rectangle width="48" height="48"/>
            <Circle centerX="24" centerY="24" radius="12"/>
          </Group>
        </StackPane>
      </graphic>
    </ToggleButton>
    <ToggleButton toggleGroup="$textSizeToggleGroup">
      <graphic>
        <StackPane>
          <Circle centerX="24" centerY="24" radius="14" styleClass="normal"/>
          <Group styleClass="selected">
            <Rectangle width="48" height="48"/>
            <Circle centerX="24" centerY="24" radius="14"/>
          </Group>
        </StackPane>
      </graphic>
    </ToggleButton>
    <ToggleButton toggleGroup="$textSizeToggleGroup">
      <graphic>
        <StackPane>
          <Circle centerX="24" centerY="24" radius="16" styleClass="normal"/>
          <Group styleClass="selected">
            <Rectangle width="48" height="48"/>
            <Circle centerX="24" centerY="24" radius="16"/>
          </Group>
        </StackPane>
      </graphic>
    </ToggleButton>
    <ToggleButton toggleGroup="$textSizeToggleGroup">
      <graphic>
        <StackPane>
          <Circle centerX="24" centerY="24" radius="20" styleClass="normal"/>
          <Group styleClass="selected">
            <Rectangle width="48" height="48"/>
            <Circle centerX="24" centerY="24" radius="20"/>
          </Group>
        </StackPane>
      </graphic>
    </ToggleButton>
  </HBox>
</AnchorPane>