{
  "namespace": "create_world_upsell",

  //---------------------------------------------------------------------------
  // Images
  //---------------------------------------------------------------------------

  "world_icon": {
    "type": "image",
    "texture": "textures/ui/worldsIcon",
    "size": [ 16, 17 ]
  },

  "realms_icon": {
    "type": "image",
    "texture": "textures/ui/realmsIcon",
    "size": [ 11, 14 ]
  },

  "dark_banner": {
    "type": "image",
    "texture": "textures/ui/DarkBannerNoBorder"
  },

  "grey_banner": {
    "type": "image",
    "texture": "textures/ui/lightgreybars"
  },

  "checkmark": {
    "type": "image",
    "texture": "textures/ui/listcheck",
    "size": [ 14, 11 ],
    "color": [ 1, 1, 1 ]
  },

  "largex": {
    "type": "image",
    "texture": "textures/ui/listx",
    "size": [ 14, 11 ],
    "color": [ 0.66, 0.66, 0.66 ]
  },

  "realms_art_icon": {
    "type": "image",
    "texture": "textures/ui/realms_art_icon",
    "size": [ 647, 760 ]
  },

  //---------------------------------------------------------------------------
  // Buttons
  //---------------------------------------------------------------------------

  "new_world_button@common_buttons.light_content_button": {
    "size": [ "100% - 4px", 28 ],
    "$pressed_button_name": "button.new_world",
    "$button_content": "create_world_upsell.world_button_content"
  },

  "new_realm_button@common_buttons.light_content_button": {
    "size": [ "100% - 4px", 28 ],
    "$pressed_button_name": "button.new_realm",
    "$button_content": "create_world_upsell.realm_button_content"
  },

  "remove_trial_button@common_buttons.light_text_button": {
    "size": [ "100%", 28 ],
    "$pressed_button_name": "button.remove_trial",
    "$button_text": "createWorldUpsell.removeTrial",
    "$button_text_size": [ "100%", "default" ],
    "$button_text_max_size": [ "100%", 20 ]
  },

  "button_content": {
    "type": "stack_panel",
    "size": [ "100%", "100%" ],
    "orientation": "horizontal",
    "controls": [
      {
        "padding_0": {
          "type": "panel",
          "size": [ 4, "100%" ]
        }
      },
      {
        "icon_panel": {
          "type": "panel",
          "size": [ "100%c", "100%" ],
          "controls": [
            { "$button_icon@$button_icon": { } }
          ]
        }
      },
      {
        "padding_1": {
          "type": "panel",
          "size": [ 4, "100%" ]
        }
      },
      {
        "label_panel": {
          "type": "panel",
          "size": [ "fill", "100%" ],
          "controls": [
            { "$button_label_panel@$button_label_panel": { } }
          ]
        }
      }
    ]
  },

  "realm_button_content@create_world_upsell.button_content": {
    "$button_icon": "create_world_upsell.realms_icon",
    "$button_label_panel": "create_world_upsell.realms_button_text_panel"
  },

  "world_button_content@create_world_upsell.button_content": {
    "$button_icon": "create_world_upsell.world_icon",
    "$button_label_panel": "create_world_upsell.new_world_label"
  },

  "realms_button_text_panel": {
    "type": "stack_panel",
    "size": [ "100%", "100%c" ],    
    "controls": [
      { "new_realm_label@create_world_upsell.new_realm_label": { } },
      { "new_realm_trial_label@create_world_upsell.new_realm_trial_label": { } }
    ]
  },

  //---------------------------------------------------------------------------
  // Labels
  //---------------------------------------------------------------------------

  "price_label": {
    "type": "label",
    "size": [ "100% - 1px", 10 ],
    "offset": [ 1, 0 ],
    "text": "$label_text",
    "color": "$main_header_text_color",
    "bindings": [
      {
        "binding_type": "$price_binding_type",
        "binding_name": "$label_text",
        "binding_condition": "once"
      }
    ]
  },

  "new_realm_label": {
    "type": "label",
    "size": [ "100%", 10 ],
    "text": "#realm_button_text",
    "color": "$text_color",
    "bindings": [
      {
        "binding_name": "#realm_button_text",
        "binding_type": "global"
      }
    ]
  },

  "new_realm_trial_label": {
    "type": "label",
    "size": [ "100%", 10 ],
    "text": "createWorldUpsell.button.trialText",
    "color": "$realms_text_color",
    "bindings": [
      {
        "binding_name": "#realm_trial_available",
        "binding_name_override": "#visible",
        "binding_type": "global"
      }
    ]
  },

  "new_world_label": {
    "type": "label",
    "size": [ "100%", 10 ],
    "text": "createWorldUpsell.button.world",
    "color": "$text_color"
  },

  //---------------------------------------------------------------------------
  // Panels
  //---------------------------------------------------------------------------

  "button_and_price_panel": {
    "type": "stack_panel",
    "size": [ "100%", "100%c + 2px" ],
    "offset": [ 2, 0 ],
    "$button_control|default": "common.empty_panel",
    "$label_text|default": "",
    "controls": [
      {
        "padding": {
          "type": "panel",
          "size": [ "100%", 2 ]
        }
      },
      {
        "price_label_panel": {
          "type": "panel",
          "size": [ "100% - 4px", 10 ],
          "controls": [
            {
              "price@create_world_upsell.price_label": {
                "layer": 2
              }
            }
          ]
        }
      },
      {
        "$button_control@$button_control": { }
      }
    ]
  },


  "border_shell@common.focus_border_white": {
    "size": [ "100%", "100%" ],
    "color": [ 0, 0, 0 ],
    "$panel_content|default": "common.empty_panel",
    "controls": [
      { "$panel_content@$panel_content": { } }
    ]
  },

  "head_banner_panel@create_world_upsell.dark_banner": {
    "size": [ "100%", "100%c" ],
    "layer": 1
  },

  "create_new_realm_content": {
    "type": "stack_panel",
    "size": [ "100% - 2px", "100%c" ],
    "controls": [
      {
        "head_banner_panel@create_world_upsell.head_banner_panel": {
          "controls": [
            {
              "realm_button_price@create_world_upsell.button_and_price_panel": {
                "$button_control": "create_world_upsell.new_realm_button",
                "$label_text": "#realm_price",
                "$price_binding_type": "global"
              }
            }
          ]
        }
      },
      {
        "realm_grid": {
          "type": "grid",
          "grid_item_template": "create_world_upsell.create_world_upsell_grid_item",
          "grid_dimension_binding": "#realm_grid_dimension",
          "collection_name": "realm_list",
          "$collection_name": "realm_list",
          "anchor_to": "top_left",
          "anchor_from": "top_left",
          "size": [ "100%", "default" ],
          "bindings": [
            {
              "binding_name": "#realm_grid_dimension",
              "binding_type": "global",
              "binding_condition": "once"
            },
            {
              "binding_name": "#templates_visible",
              "binding_name_override": "#visible",
              "binding_type": "global"
            }
          ],
          "variables": [
            {
              "requires": "(not $pocket_edition)",
              "$grid_item_size": [ "100%", 26 ]
            },
            {
              "requires": "$pocket_edition",
              "$grid_item_size": [ "100%", 36 ]
            }
          ]
        }
      }
    ]
  },

  "create_world_upsell_grid_item": {
    "type": "panel",
    "size": "$grid_item_size",
    "controls": [
      {
        "db@create_world_upsell.dark_banner": {
          "layer": 1,
          "bindings": [
            {
              "binding_name": "#dark_banner_visible",
              "binding_name_override": "#visible",
              "binding_type": "collection",
              "binding_collection_name": "$collection_name"
            }
          ]
        }
      },
      {
        "gb@create_world_upsell.grey_banner": {
          "layer": 1,
          "bindings": [
            {
              "binding_name": "#grey_banner_visible",
              "binding_name_override": "#visible",
              "binding_type": "collection",
              "binding_collection_name": "$collection_name"
            }
          ]
        }
      },
      {
        "gp@create_world_upsell.grid_panel": {
          "layer": 2
        }
      }
    ]
  },

  "grid_panel": {
    "type": "stack_panel",
    "size": [ "100% - 6px", "100% - 4px" ],
    "offset": [ 3, 0 ],
    "anchor_from": "left_middle",
    "anchor_to": "left_middle",
    "orientation": "horizontal",
    "controls": [
      {
        "padding": {
          "type": "panel",
          "size": [ 2, "100%" ]
        }
      },
      {
        "upsell_text_panel": {
          "type": "panel",
          "size": [ "fill", "100%" ],
          "controls": [
            {
              "upsell_label": {
                "type": "label",
                "text": "#upsell_text",
                "size": [ "100%", "default" ],
                "max_size": [ "100%", 20 ],
                "color": "$body_text_color",
                "bindings": [
                  {
                    "binding_name": "#upsell_text",
                    "binding_type": "collection",
                    "binding_collection_name": "$collection_name"
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },

  "create_new_world_content": {
    "type": "stack_panel",
    "size": [ "100% - 2px", "100%c" ],
    "controls": [
      {
        "head_banner_panel@create_world_upsell.head_banner_panel": {
          "controls": [
            {
              "world_button_price@create_world_upsell.button_and_price_panel": {
                "$button_control": "create_world_upsell.new_world_button",
                "$label_text": "createWorldUpsell.price.world",
                "$price_binding_type": "none"
              }
            }
          ]
        }
      },
      {
        "world_grid": {
          "type": "grid",
          "grid_item_template": "create_world_upsell.create_world_upsell_grid_item",
          "grid_dimension_binding": "#world_grid_dimension",
          "collection_name": "world_list",
          "$collection_name": "world_list",
          "anchor_to": "top_left",
          "anchor_from": "top_left",
          "size": [ "100%", "default" ],
          "bindings": [
            {
              "binding_name": "#world_grid_dimension",
              "binding_type": "global",
              "binding_condition": "visible"
            }
          ],
          "variables": [
            {
              "requires": "(not $pocket_edition)",
              "$grid_item_size": [ "100%", 26 ]
            },
            {
              "requires": "$pocket_edition",
              "$grid_item_size": [ "100%", 36 ]
            }
          ]
        }
      }
    ]
  },

  "new_world_or_realm_scroll@common.scrolling_panel": {
    "anchor_to": "top_left",
    "anchor_from": "top_left",
    "$show_background": false,
    "$scrolling_content": "create_world_upsell.create_new_world_or_realm_content",
    "$scroll_size": [ 5, "100% - 4px" ],
    "$scrolling_pane_size": [ "100%", "100%" ]
  },

  "create_new_world_or_realm_content": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "anchor_from": "top_middle",
    "anchor_to": "top_middle",
    "size": [ "100% - 4px", "50%c + 4px" ],
    "offset": [ 2, 2 ],
    "controls": [
      {
        "world@create_world_upsell.border_shell": {
          "size": [ "50% - 1px", "100%c + 2px" ],
          "layer": 1,
          "$panel_content": "create_world_upsell.create_new_world_content"
        }
      },
      {
        "padding": {
          "type": "panel",
          "size": [ 2, 0 ] // Y size not specified so as to not affect parent sizing based on children
        }
      },
      {
        "realm_content@create_world_upsell.realm_content": { }
      }
    ]
  },

  "new_realm_scroll@common.scrolling_panel": {
    "anchor_to": "top_left",
    "anchor_from": "top_left",
    "$show_background": false,
    "$scrolling_content": "create_world_upsell.create_realm_upsell_content",
    "$scroll_size": [ 5, "100% - 4px" ],
    "$scroll_size_touch": [ 4, "100% - 4px" ],
    "$scrolling_pane_size": [ "100%", "100%" ]
  },

  "new_realm_content_panel": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "anchor_to": "top_left",
    "anchor_from": "top_left",
    "offset": [ 2, 0 ],
    "size": [ "100% - 2px", "100%" ],
    "controls": [
      {
        "key_art_panel": {
          "type": "panel",
          "size": [ "85.1315%y", "100% - 4px" ],
          "controls": [
            {
              "realms_art_icon@create_world_upsell.realms_art_icon": {
                "size": [ "100%", "100%" ],
                "offset": [ 0, 2 ],
                "layer": 1
              }
            }
          ]
        }
      },
      // The image is overdrawing it's size by a pixel
      // Believe this to be from some kind of floating point rounding problem, this padding is a hack to workaround
      // the shortened space between controls
      // Bug# 40571 tracking this issue
      {
        "padding_hack": {
          "type": "panel",
          "size": [ 0.5, "100%" ]
        }
      },
      {
        "padding_0": {
          "type": "panel",
          "size": [ 2, "100%" ]
        }
      },
      {
        "new_realm_scroll@create_world_upsell.new_realm_scroll": {
          "size": [ "fill", "100%" ],
          "$scroll_bar_right_padding_size": [ 0, 0 ]
        }
      },
      {
        "padding_1": {
          "type": "panel",
          "size": [ 2, "100%" ]
        }
      }
    ]
  },

  "create_realm_upsell_content": {
    "type": "stack_panel",
    "orientation": "vertical",
    "anchor_from": "top_left",
    "anchor_to": "top_left",
    "size": [ "100%", "100%c" ],
    "offset": [ 0, 2 ],
    "controls": [
      {
        "realm_content@create_world_upsell.realm_content": {
          "size": [ "100%", "100%c + 2px" ]
        }
      },
      {
        "padding_0": {
          "type": "panel",
          "size": [ "100%", 2 ],
          "ignored": "(not $show_button)"
        }
      },
      {
        "remove_trial_button@create_world_upsell.remove_trial_button": {
          "ignored": "(not $show_button)"
        }
      },
      {
        "padding_1": {
          "type": "panel",
          "size": [ "100%", 4 ]
        }
      }
    ]
  },

  "realm_content@create_world_upsell.border_shell": {
    "size": [ "fill", "100%c + 2px" ],
    "layer": 2,
    "$panel_content": "create_world_upsell.create_new_realm_content"
  },

  //---------------------------------------------------------------------------
  // Screen
  //---------------------------------------------------------------------------

  "create_world_upsell@common.base_screen": {
    "button_mappings": [
      {
        "from_button_id": "button.menu_cancel",
        "to_button_id": "button.menu_exit",
        "mapping_type": "global"
      },
      {
        "from_button_id": "button.menu_tab_left",
        "to_button_id": "button.menu_tab_left",
        "mapping_type": "global",
        "scope": "view"
      },
      {
        "from_button_id": "button.menu_tab_right",
        "to_button_id": "button.menu_tab_right",
        "mapping_type": "global",
        "scope": "view"
      }
    ],
    "$screen_content": "create_world_upsell.main_panel"
  },

  "create_world_upsell_realms@create_world_upsell": {
    "$screen_content": "create_world_upsell.variable_screen_size_panel"
  },

  "main_panel@common_dialogs.main_panel_no_buttons": {
    "size": "$create_world_upsell_screen_size",
    "max_size": "$max_create_world_upsell_screen_size",
    "offset": [ 0, 0 ],
    "$text_name": "createWorldUpsell.title",
    "$child_control": "create_world_upsell.new_world_or_realm_scroll"
  },

  "variable_screen_size_panel": {
    "type": "panel",
    "controls": [
      {
        "dialog_0@create_world_upsell.main_panel_realms_only": {
          "ignored": "(not $show_button)",
          "size": "$create_realm_upsell_play_screen_size"
        }
      },
      {
        "dialog_1@create_world_upsell.main_panel_realms_only": {
          "ignored": "$show_button",
          "size": "$create_realm_upsell_screen_size"
        }
      }
    ]
  },

  "main_panel_realms_only@common_dialogs.main_panel_no_buttons": {
    "max_size": "$max_create_world_upsell_screen_size",
    "offset": [ 0, 0 ],
    "$text_name": "createWorldUpsell.title.realm",
    "$child_control": "create_world_upsell.new_realm_content_panel"
  }

}