{
  "namespace": "expanded_skin_pack",

  //--------------------------------------------------------------------------------
  // Common Controls
  //--------------------------------------------------------------------------------

  "banner_fill": {
    "type": "image",
    "texture": "textures/ui/Banners"
  },

  "title_label": {
    "type": "label",
    "size": [ "default", "default" ],
    "color": "$title_text_color"
  },

  "label": {
    "type": "label",
    "anchor_from": "center",
    "anchor_to": "center",
    "offset": [ 0, 0 ],
    "color": "$main_header_text_color"
  },

  "undo_image": {
    "type": "image",
    "texture": "textures/ui/undoArrow",
    "color": "$custom_color",
    "size": [ 14, 14 ]
  },

  "lock_icon": {
    "type": "image",
    "size": [ 8, 8 ],
    "texture": "textures/ui/lock"
  },

  "skin_button": {
    "type": "button",

    "$focus_id|default": "",
    "$focus_override_down|default": "",
    "$focus_override_up|default": "",
    "$focus_override_left|default": "",
    "$focus_override_right|default": "",
    "focus_identifier": "$focus_id",
    "focus_change_down": "$focus_override_down",
    "focus_change_up": "$focus_override_up",
    "focus_change_left": "$focus_override_left",
    "focus_change_right": "$focus_override_right",
    "focus_enabled": true,

    "layer": 3,
    "hover_control": "hover",
    "pressed_control": "pressed",
    "$highlight_size|default": [ "100% - 1px", "100% - 2px" ],
    "controls": [
      {
        "hover@common.focus_border_white": {
          "size": "$highlight_size"
        }
      },
      {
        "pressed@common.focus_border_white": {
          "size": "$highlight_size"
        }
      }
    ]
  },

  //--------------------------------------------------------------------------------
  // Preview Skin
  //--------------------------------------------------------------------------------

  "skin_rotation_arrows": {
    "type": "image",
    "layer": 6,
    "texture": "textures/ui/Rotate",
    "color": [ 0.6, 0.6, 0.6 ]
  },

  "skin_viewer_panel": {
    "type": "input_panel",
    "layer": 3,
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "gesture_tracking_button": "button.turn_doll",
    "always_handle_controller_direction": true,

    "button_mappings": [
      {
        "from_button_id": "button.menu_select",
        "to_button_id": "button.turn_doll",
        "mapping_type": "pressed",
        "button_up_right_of_first_refusal": true
      }
    ],
    "controls": [
      {
        "skin_model_panel": {
          "type": "panel",
          "size": [ "100%", "76%" ],
          "offset": [ 0, -38 ],
          "anchor_from": "bottom_middle",
          "anchor_to": "bottom_middle",

          "controls": [
            {
              "skin_model": {
                "type": "custom",
                "renderer": "paper_doll_renderer",
                "layer": 5,
                "use_selected_skin": false,
                "use_skin_gui_scale": true,
                "use_player_paperdoll": true,
                "rotation": "gesture_x",

                "animation_reset_name": "screen_animation_reset",
                "anims": [
                  "@expanded_skin_pack.screen_exit_size_animation_push",
                  "@expanded_skin_pack.screen_exit_size_animation_pop",
                  "@common.screen_entrance_size_animation_push",
                  "@common.screen_entrance_size_animation_pop"
                ],
                "bindings": [
                  {
                    "binding_type": "global",
                    "binding_name": "#preview_skin"
                  },
                  {
                    "binding_type": "view",
                    "source_control_name": "preview",
                    "source_property_name": "#gesture_delta_source",
                    "target_property_name": "#gesture_delta_source"
                  },
                  {
                    "binding_type": "view",
                    "source_control_name": "preview",
                    "source_property_name": "#gesture_mouse_delta_x",
                    "target_property_name": "#gesture_mouse_delta_x"
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "lock@expanded_skin_pack.lock_icon": {
          "size": [ 16, 16 ],
          "offset": [ -48, -6 ],
          "layer": 6,
          "anchor_from": "bottom_right",
          "anchor_to": "bottom_right",
          "bindings": [
            {
              "binding_name": "#show_preview_skin_lock",
              "binding_name_override": "#visible"
            }
          ]
        }
      }
    ]
  },

  "undo_skin_button@common_buttons.light_glyph_button": {
    "$pressed_button_name": "button.undo",
    "$button_content": "expanded_skin_pack.undo_image",
    "bindings": [
      {
        "binding_name": "#undo_button_enabled",
        "binding_name_override": "#enabled"
      }
    ]
  },

  "confirm_skin_button@common_buttons.light_text_button": {
    "$button_text": "skins.picker.accept.button",
    "$pressed_button_name": "button.confirm",
    "bindings": [
      {
        "binding_name": "#confirm_skin_button_enabled",
        "binding_name_override": "#enabled"
      }
    ]
  },

  "stack_item": {
    "type": "panel"
  },

  "accept_skin_panel": {
    "type": "stack_panel",
    "anchor_from": "bottom_middle",
    "anchor_to": "bottom_middle",
    "orientation": "horizontal",
    "size": [ "100% - 4px", "100% - 4px" ],
    "offset": [ 0, -2 ],
    "controls": [
      {
        "stack_item_0@stack_item": {
          "size": [ "25%", "100%" ],
          "controls": [
            {
              "undo_btn@undo_skin_button": {
                "default_focus_precedence": 0,
                "size": [ "100%", "100%" ],
                "offset": [ 0, 0 ],
                "anchor_from": "left_middle",
                "anchor_to": "left_middle",
                "layer": 2,
                "$focus_id": "undo_focus_id"
              }
            }
          ]
        }
      },
      {
        "stack_item_1@stack_item": {
          "size": [ "75% + 1px", "100%" ],
          "controls": [
            {
              "confirm_button@confirm_skin_button": {
                "default_focus_precedence": 1,
                "size": [ "100%", "100%" ],
                "offset": [ -1, 0 ],
                "anchor_from": "left_middle",
                "anchor_to": "left_middle",
                "layer": 1,
                "$focus_override_right": "FOCUS_OVERRIDE_STOP"
              }
            }
          ]
        }
      }
    ],
    "bindings": [
      {
        "binding_name": "#delay_right_side_buttons_visible",
        "binding_name_override": "#visible"
      }
    ]
  },

  "preview_skin_panel": {
    "type": "panel",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "offset": [ 2, 0 ],
    "size": [ "100%", "100% - 2px" ],
    "controls": [
      {
        "preview@expanded_skin_pack.skin_viewer_panel": {
          "size": [ "100%", "100% - 48px" ]
        }
      },
      {
        "button_frame": {
          "type": "stack_panel",
          "orientation": "vertical",
          "size": [ "100%", 50 ],
          "anchor_from": "bottom_middle",
          "anchor_to": "bottom_middle",
          "controls": [
            {
              "stack_item_0@expanded_skin_pack.stack_item": {
                "size": [ "100%", 12 ],
                "controls": [
                  {
                    "rotation@expanded_skin_pack.skin_rotation_arrows": {
                      "anchor_from": "top_middle",
                      "anchor_to": "top_middle",
                      "size": [ "50%", "100% - 4px" ]
                    }
                  }
                ]
              }
            },
            {
              "stack_item_1@expanded_skin_pack.stack_item": {
                "size": [ "100%", "fill" ],
                "controls": [
                  { "accept@expanded_skin_pack.accept_skin_panel": {} }
                ]
              }
            }
          ]
        }
      }
    ],
    "bindings": [
      {
        "binding_name": "#is_owned",
        "binding_name_override": "#visible"
      }
    ]
  },

  //--------------------------------------------------------------------------------
  // Change Skins Panel
  //--------------------------------------------------------------------------------

  "skin_model": {
    "type": "custom",
    "renderer": "paper_doll_renderer",
    "layer": 5,
    "anchor_from": "bottom_middle",
    "anchor_to": "bottom_middle",
    "size": [ "100%", "100%" ],
    "offset": [ 0, -10 ],
    "use_selected_skin": false,
    "enable_scissor_test": true,
    "animation_reset_name": "screen_animation_reset",
    "$skin_model_animations|default": [],
    "variables": [
      {
        "requires": "$screen_transitions_enabled",
        "$skin_model_animations": [
          "@expanded_skin_pack.screen_exit_size_animation_push",
          "@expanded_skin_pack.screen_exit_size_animation_pop",
          "@common.screen_entrance_size_animation_push",
          "@common.screen_entrance_size_animation_pop"
        ]
      }
    ],

    "anims": "$skin_model_animations",
    "bindings": [
      {
        "binding_type": "collection_details",
        "binding_collection_name": "skin_pack_collection"
      },
      {
        "binding_type": "collection",
        "binding_collection_name": "skin_pack_collection",
        "binding_name": "#skin_index"
      }
    ]
  },

  "screen_exit_size_animation_push": {
    "anim_type": "size",
    "easing": "out_cubic",
    "duration": "$transition_time_push_size",
    "from": [ 0, 0 ],
    "to": [ 0, 0 ],
    "play_event": "screen.exit_push",
    "reset_event": "screen_animation_reset"
  },

  "screen_exit_size_animation_pop": {
    "anim_type": "size",
    "easing": "out_cubic",
    "duration": "$transition_time_pop_size",
    "from": [ 0, 0 ],
    "to": [ 0, 0 ],
    "play_event": "screen.exit_pop",
    "reset_event": "screen_animation_reset"
  },

  //--------------------------------------------------------------------------------
  // Scrolling Skins Panel
  //--------------------------------------------------------------------------------

  "scrolling_content": {
    "type": "stack_panel",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "controls": [
      {
        "padding_0@common.empty_panel": {
          "size": [ "100%", 10 ]
        }
      },
      {
        "pack_info_panel": {
          "type": "panel",
          "size": [ "100%", "100%c" ],
          "controls": [
            {
              "pack_info_panel@expanded_skin_pack.pack_info_panel": {}
            }
          ]
        }
      },
      {
        "skin_grid_panel": {
          "type": "panel",
          "size": [ "100%", "100%c" ],
          "controls": [
            {
              "skins_grid@expanded_skin_pack.skins_grid": {}
            }
          ]
        }
      }
    ]
  },

  "pack_info_panel": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100% - 25px", 20 ],
    "offset": [ 17, 0 ],
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "controls": [
      {
        "lock_icon_panel": {
          "ignored": "$education_edition",
          "type": "panel",
          "size": [ 8, "100%" ],
          "controls": [
            {
              "lock_icon@expanded_skin_pack.lock_icon": {
                "anchor_from": "top_left",
                "anchor_to": "top_left",
                "offset": [ -1, 1 ],
                "bindings": [
                  {
                    "binding_name": "(not #is_owned)",
                    "binding_name_override": "#visible"
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "pack_info_panel": {
          "type": "stack_panel",
          "size": [ "100%", "100%" ],
          "controls": [
            {
              "pack_name": {
                "type": "label",
                "text": "#pack_name",
                "color": "$generic_button_text_color",
                "bindings": [
                  {
                    "binding_name": "#pack_name"
                  }
                ]
              }
            },
            {
              "creator_name": {
                "type": "label",
                "text": "#creator_name",
                "color": "$generic_button_text_color",
                "bindings": [
                  {
                    "binding_name": "#creator_name"
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },

  "skins_grid_item": {
    "type": "panel",
    "anchor_from": "bottom_left",
    "anchor_to": "bottom_left",
    "size": [ "20% - 2px", 85 ],
    "controls": [
      {
        "clip": {
          "type": "panel",
          "anchor_from": "top_left",
          "anchor_to": "top_left",
          "size": [ "100%", "100% - 2px" ],
          "offset": [ 0, 2 ],
          "controls": [
            {
              "model@expanded_skin_pack.skin_model": {
                "offset": [ 0, -15 ]
              }
            }
          ]
        }
      },
      {
        "lock@expanded_skin_pack.lock_icon": {
          "anchor_from": "bottom_right",
          "anchor_to": "bottom_right",
          "offset": [ -2, -5 ],
          "bindings": [
            {
              "binding_name": "#skin_locked",
              "binding_name_override": "#visible",
              "binding_type": "collection",
              "binding_collection_name": "skin_pack_collection"
            }
          ]
        }
      },
      {
        "button@expanded_skin_pack.select_skin_button": {}
      }
    ]
  },

  "skins_grid": {
    "type": "grid",
    "size": [ "100% - 8px", "default" ],
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "grid_item_template": "expanded_skin_pack.skins_grid_item",
    "grid_rescaling_type": "horizontal",
    "collection_name": "skin_pack_collection",
    "bindings": [
      {
        "binding_name": "#skins_grid_dimensions",
        "binding_name_override": "#maximum_grid_items"
      }
    ]
  },

  "select_skin_button@common.button": {
    "controls": [
      {
        "default@common.empty_panel": {}
      },
      {
        "hover@common.focus_border_white": {}
      },
      {
        "pressed@common.focus_border_white": {}
      }
    ],
    "bindings": [
      {
        "binding_type": "collection_details",
        "binding_collection_name": "skin_pack_collection"
      },
      {
        "binding_name": "#skin_default_focus",
        "binding_name_override": "#default_focus_precedence",
        "binding_type": "collection",
        "binding_collection_name": "skin_pack_collection",
        "binding_condition": "visible"
      }
    ],
    "button_mappings": [
      {
        "from_button_id": "button.menu_select",
        "to_button_id": "button.select_skin",
        "mapping_type": "pressed"
      },
      {
        "from_button_id": "button.menu_ok",
        "to_button_id": "button.select_skin",
        "mapping_type": "focused"
      },
      {
        "to_button_id": "button.skin_hovered",
        "mapping_type": "pressed"
      },
      {
        "to_button_id": "button.skin_unhovered",
        "mapping_type": "pressed"
      }
    ]
  },

  "all_skins_content": {
    "type": "input_panel",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "offset": [ 3, 0 ],
    "size": [ "100% - 3px", "100% - 2px" ],
    "focus_container": true,
    "use_last_focus": true,
    "controls": [
      {
        "scrolling_frame": {
          "type": "panel",
          "controls": [
            {
              "change_skin_scroll@common.scrolling_panel": {
                "$scrolling_pane_size": [ "100%", "100%" ],
                "$scroll_size": [ "5px", "100% - 4px" ],
                "$scrolling_content": "expanded_skin_pack.scrolling_content",
                "$show_background": false,
                "$bar_visible": false
              }
            }
          ]
        }
      }
    ]
  },

  "all_skins_frame": {
    "type": "panel",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "size": [ "100%", "100%" ],
    "offset": [ 0, 0 ],
    "controls": [
      { "all_skins_content@expanded_skin_pack.all_skins_content": {} }
    ]
  },

  //--------------------------------------------------------------------------------
  // Title bar
  //--------------------------------------------------------------------------------

  "title_bar": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%", 21 ],
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "controls": [
      {
        "padding_0": {
          "type": "panel",
          "size": [ 28, "100%" ]
        }
      },
      {
        "fill_panel": {
          "type": "panel",
          "size": [ "fill", "100%" ],
          "layer": 2,
          "controls": [
            {
              "title_holder": {
                "type": "panel",
                // This lets the main title start overlapping the padding
                // between it and the skin name once it can't move any farther
                // to the left as the skin name approaches its max size.
                "size": [ "100%", "100%" ],
                "min_size": [ "100%c", "100%" ],
                "anchor_from": "top_middle",
                "anchor_to": "top_middle",
                "controls": [
                  {
                    "change_skin_title@expanded_skin_pack.title_label": {
                      "text": "$back_button_text",
                      "anchor_from": "left_middle",
                      "anchor_to": "left_middle"
                    }
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "padding_1": {
          "type": "panel",
          "size": [ 17, "100%" ]
        }
      },
      {
        "skin_name_holder": {
          "type": "panel",
          "layer": 2,
          "min_size": [ "40% - 32px", "100%" ],
          "size": [ "100%c", "100%" ],
          "controls": [
            {
              "preview_skin_name@expanded_skin_pack.title_label": {
                "ignored": "$education_edition",
                "text": "#skin_name",
                // In the edge case where the skin name is too long to fit,
                // even with the main title pushed as far to the left as it can
                // go, then the skin name should truncate.  Since the label's
                // parent control has a width of "100%c", this truncation must
                // be due to a hard pixel limit for the label width.  This limit
                // should be the pixels available at the smallest possible
                // screen width (320 on pocket) with the largest possible main
                // title (es_ES, "Seleccionar aspecto").
                // 320 - 4 (padding around dialog) - 10 (padding around content)
                //     - 3 (padding to the left of main title)
                //     - 15 (close button) - 103 (texels for es_ES main title)
                //     - 4 (space between title and skin name)
                // = 181 pixels, or about 30 characters, plus a bit more if
                //     enough of those characters are narrow ones.
                // Marketing should avoid skin names longer than this.
                "size": [ "default", 10 ],
                "max_size": [ 181, 10 ],
                "bindings": [
                  {
                    "binding_type": "global",
                    "binding_name": "#skin_name"
                  },
                  {
                    "binding_name": "#is_owned",
                    "binding_name_override": "#visible"
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "padding_2": {
          "type": "panel",
          "size": [ 15, "100%" ]
        }
      }
    ]
  },

  //--------------------------------------------------------------------------------
  // Root Controls
  //--------------------------------------------------------------------------------

  "content": {
    "type": "panel",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "controls": [
      { "title@expanded_skin_pack.title_bar": {} },
      { "selector_area@expanded_skin_pack.selector_area": {} },
      { "content_area@expanded_skin_pack.content_area": {} },
      { "section_divider@expanded_skin_pack.section_divider": {} }
    ]
  },

  "expanded_skin_pack_screen@common.base_screen": {
    "button_mappings": [
      {
        "from_button_id": "button.menu_cancel",
        "to_button_id": "button.menu_exit",
        "mapping_type": "global"
      }
    ],
    "$screen_animations": [
      "@common.screen_exit_animation_push_fade",
      "@common.screen_exit_animation_pop_fade",
      "@common.screen_entrance_animation_push_fade",
      "@common.screen_entrance_animation_pop_fade"
    ],
    "$default_text_color": [ 0.3, 0.3, 0.3 ],
    "$screen_content": "expanded_skin_pack.skin_picker_screen_content",
    "$screen_bg_content": "persona_common.persona_screen_background_content",
    "$header_safezone_control": "common_store.store_top_bar_filler",
    "$header_bar_control": "common_store.store_top_bar",
    "$is_full_screen_layout": true
  },

  "skin_picker_screen_content@common.common_panel": {
    "type": "panel",
    "layer": 1,
    "controls": [
      {
        "bg@common.fullscreen_header": {
          "$dialog_background": "dialog_background_hollow_3",
          "$show_divider": true,
          "$divider_offset": [ "60% - 1px", "22px" ]
        }
      },
      {
        "container": {
          "type": "panel",
          "layer": 1,
          "controls": [
            { "content@expanded_skin_pack.content": {} }
          ]
        }
      }
    ]
  },

  //--------------------------------------------------------------------------------
  // Controller Focus
  //--------------------------------------------------------------------------------

  "scrollable_selector_area_content": {
    "type": "panel",
    "offset": [ "2px", "2px" ],
    "size": [ "100% - 4px", "100%c + 4px" ],
    "controls": [
      { "$selector_stack_panel@$selector_stack_panel": {} }
    ]
  },

  // left side
  "selector_area@common.modal_area_panel_base": {
    "offset": [ "0px", "23px" ],
    "size": [ "60%", "100% - 21px" ],
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "$menu_cancel_button_id": "button.menu_exit",
    "$modal_binding_name": "#selector_area_focused",
    "default_focus_precedence": 5,
    "layer": 2,
    "controls": [
      {
        "all_skins@expanded_skin_pack.all_skins_frame": {}
      },
      {
        "inactive_modal_pane_fade@common.inactive_modal_pane_fade": {
          "bindings": [
            {
              "binding_name": "#content_area_focused",
              "binding_name_override": "#visible"
            }
          ]
        }
      }
    ]
  },

  // right side
  "content_area@common.modal_area_panel_base": {
    "offset": [ -2, 23 ],
    "size": [ "40% - 4px", "100% - 21px" ],
    "anchor_from": "top_right",
    "anchor_to": "top_right",
    "$menu_cancel_button_id": "button.back_to_selector_area",
    "$modal_binding_name": "#content_area_focused",
    "layer": 1,
    "controls": [
      {
        "preview_skin@expanded_skin_pack.preview_skin_panel": {
          "visible": false
        }
      },
      {
        "inactive_modal_pane_fade@common.inactive_modal_pane_fade": {
          "bindings": [
            {
              "binding_name": "#selector_area_focused",
              "binding_name_override": "#visible"
            }
          ]
        }
      }
    ]
  },

  // divider between two sides
  "section_divider": {
    "type": "image",
    "offset": [ "60%", "22px" ],
    "size": [ "4px", "100% - 22px" ],
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "layer": 3,
    "texture": "textures/ui/HowToPlayDivider"
  }
}