GameSidePanel < UIMiniWindowContainer
  image-source: /images/ui/panel_side
  image-border: 4
  padding: 3
  padding-top: 0
  width: 198
  focusable: false
  on: true
  layout:
    type: verticalBox
  $mobile:
    padding: 0
    width: 200
  

GameMapPanel < UIGameMap
  padding: 4
  image-source: /images/ui/panel_map
  image-border: 4

  $on:
    padding: 0
    
GameAction < UIButton
  size: 64 64
  phantom: false
    
  UIButton
    id: image
    size: 48 48
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    phantom: true
    $checked:
      opacity: 1.0
      background: #00FF0033
    $!checked:
      opacity: 0.6
      background: alpha


UIWidget
  id: gameRootPanel
  anchors.fill: parent
  
  GameMapPanel
    id: gameMapPanel
    anchors.left: gameLeftPanels.right
    anchors.right: gameRightPanels.left
    anchors.top: parent.top
    anchors.bottom: gameBottomPanel.top
    focusable: false    
    
  Panel
    id: gameLeftActions
    focusable: false
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    width: 64
    
    $!mobile:
      visible: false
      width: 0
    
    layout:
      type: verticalBox
      fit-children: true
      
    GameAction
      id: use
      @onSetup: self.image:setImageSource("/images/game/mobile/use")
    GameAction
      id: attack
      @onSetup: self.image:setImageSource("/images/game/mobile/attack")
    GameAction
      id: follow
      @onSetup: self.image:setImageSource("/images/game/mobile/follow")
    GameAction
      id: look
      @onSetup: self.image:setImageSource("/images/game/mobile/look")
    GameAction
      id: chat
      @onSetup: self.image:setImageSource("/images/game/mobile/chat")
    
  Panel
    id: gameLeftPanels
    focusable: false
    anchors.top: parent.top
    anchors.bottom: parent.bottom    
    $!mobile:
      anchors.left: parent.left
    $mobile:
      anchors.left: gameLeftActions.right

    layout:
      type: horizontalBox
      fit-children: true
      spacing: -1

  Panel
    id: gameLeftActionPanel
    phantom: true
    focusable: false
    anchors.top: gameTopBar.bottom
    anchors.left: gameLeftPanels.right
    anchors.bottom: bottomSplitter.top
    margin-top: 3

    $mobile:
      visible: false
      
    layout:
      type: horizontalBox
      fit-children: true
      
  Panel
    id: gameRightPanels
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    focusable: false
    layout:
      type: horizontalBox
      fit-children: true      
      spacing: -1

  Panel
    id: gameRightActionPanel
    phantom: true
    focusable: false
    anchors.top: gameTopBar.bottom
    anchors.right: gameRightPanels.left
    anchors.bottom: bottomSplitter.top
    margin-top: 3

    $mobile:
      visible: false
      
    layout:
      type: horizontalBox
      fit-children: true
    
  Splitter
    id: bottomSplitter
    anchors.left: gameLeftPanels.right
    anchors.right: gameRightPanels.left
    anchors.bottom: parent.bottom
    height: 5
    relative-margin: bottom
    margin-bottom: 150
    @canUpdateMargin: function(self, newMargin) if modules.client_options.getOption('dontStretchShrink') then return self:getMarginBottom() end return math.max(math.min(newMargin, self:getParent():getHeight() - 150), 80) end
    @onGeometryChange: function(self) self:setMarginBottom(math.min(math.max(self:getParent():getHeight() - 150, 80), self:getMarginBottom())) end
    
    $mobile:
      visible: false
      
  Panel
    id: gameBottomActionPanel
    phantom: true
    focusable: false

    $!mobile:
      anchors.left: bottomSplitter.left
      anchors.right: bottomSplitter.right
      anchors.top: bottomSplitter.top
      margin-top: 3

    $mobile:
      anchors.left: gameLeftPanels.right
      anchors.right: gameRightPanels.left
      anchors.bottom: gameBottomPanel.top    
      
    layout:
      type: verticalBox
      fit-children: true
    
  Panel
    id: gameBottomPanel    
    $!mobile:
      anchors.left: gameBottomActionPanel.left
      anchors.right: gameBottomActionPanel.right
      anchors.top: gameBottomActionPanel.bottom
      anchors.bottom: parent.bottom

    $mobile:
      anchors.left: gameLeftPanels.right
      anchors.right: gameRightPanels.left
      anchors.bottom: parent.bottom
      
  UIWidget
    id: mouseGrabber
    focusable: false
    visible: false

  Panel
    id: gameTopBar
    image-source: /images/ui/panel_bottom2
    anchors.top: parent.top
    anchors.left: gameBottomActionPanel.left
    anchors.right: gameBottomActionPanel.right
    focusable: false

    $mobile:
      height: 0

    layout:
      type: verticalBox
      fit-children: true