
chat_area {
    x = 8,
    y = (parent_height/2) - 200,
    width = 600,
    height = 400,

    layout = "rows_inv",
}

chat_area > chat_message {
    width = 600,
    background_color = rgba(0, 0, 0, 0.4),
    line_height = 26,
    height = 26,
    layout = "lined",
}

chat_area > chat_message > @text {
    font_size = 25,
    font_color = rgb(255, 255, 255),
    text_shadow = text_shadow(2.0, 2.0, "#000000", 2.0),
}

chat_area > chat_message > @text(color=color) {
    font_color = color,
}

chat_area > chat_message > @text(special=true) {
    text_shadow = text_shadow(3.0, 3.0, "#ffa921", 2.0),
}

chat_area > chat_message > chat_image(img=img) {
    image = img,
    width = 25,
    height = 25,
}

textbox(id="chat_sendbox", on_key=on_key) {
    x = 8,
    y = (parent_height/2) + 200,
    width = 600,
    height = 40,

    on_init = "init#node:focus()",

    on_key_up = list(on_key, "ui.textbox#
        if evt.input == 'Escape' then
            node.parent:remove_child(node)
            return true;
        end
        return key_up(node, evt)
    "),

    layout = "absolute",
}

textbox(id="chat_sendbox") > content {
    x = 8,
    y = 4,
    height = 32,
    width = 600 - (8 * 2),
}

actions {
    x = -4,
    y = parent_height - (100 - 8),
    width = 420,
    height = 100,
    border_width = border_width(40.0),
    border = border_image("ui/background_board", 40, 40,  true),
    layout = "grid",
    columns = 7,
    rows = 1,
    margin = 12,
    spacing = 6,

    can_hover = true,
    on_mouse_move = "init#return true",
}

action_area > action {
    y = (parent_height / 2) - 24,
    image = "ui/action_back",
    width = 48,
    height = 48,
    can_hover = true,

    on_init = "init#
        node:set_property_table('$hover', {
            time = 0.0,
            dir = 0,
        })
    ",
    on_update = "init#
        local hover = node:get_property_table('$hover')
        local lerp_time = 25.0
        if hover.dir ~= 0 then
            hover.time = hover.time + evt.delta * hover.dir
            if hover.time > lerp_time then
                hover.time = lerp_time
                hover.dir = 0
            elseif hover.time < 0.0 then
                hover.time = 0.0
                hover.dir = 0
            end
            local pin = node:query():name('pin'):matches()(nil, nil)
            local icon = node:query():name('icon'):matches()(nil, nil)
            pin:set_property_float('offset', hover.time / lerp_time)
            icon:set_property_float('offset', hover.time / lerp_time)
        end
    ",
}

action_area > action(on_click=click) {
    on_mouse_up = list(click, "init#
        audio.play_sound('click')
        return true
    "),
}

action_area > action(key=key, tooltip=tooltip) {
    on_mouse_move_over = "ui.tooltip#
        ui.set_cursor('base:ui/cursor/interact')
        local hover = node:get_property_table('$hover')
        hover.dir = 1

        local key = node:get_property_string('key')
        local tooltip = node:get_property_string('tooltip')
        local title = node:get_property_string('title')

        local content = ui.new('content')
        local img = node:query():name('icon'):matches()(nil, nil)
        local simg = ui.new('icon')
        simg:set_property_string('img', img:get_property_string('img'))
        content:add_child(simg)
        local title_node = ui.new_text(title .. '\\n')
        title_node:set_property_bool('title', true)
        content:add_child(title_node)
        add_text(content, tooltip)

        ui.show_tooltip(key, content, evt.x, evt.y)
        return true
    ",
    on_mouse_move_out = "init#
        ui.set_cursor('base:ui/cursor/normal')
        local hover = node:get_property_table('$hover')
        hover.dir = -1

        local key = node:get_property_string('key')
        ui.hide_tooltip(key)
        return true
    ",
    on_mouse_move = "init#
        local key = node:get_property_string('key')
        ui.move_tooltip(key, evt.x, evt.y)
        return true
    ",
}

action_area > action > icon(img=image) {
    image = image,
    width = 48,
    height = 48,
}

action_area > action > icon(offset=offset) {
    y = 3.0 * offset,
}

action_area > action > pin {
    image = "ui/pin_small",
    width = 24,
    height = 24,
    x = 40,
    y = -15,
}

action_area > action > pin(offset=offset) {
    y = (-15.0) - 10.0 * offset,
    x = 40.0 + 5.0 * offset,
}

action_area > action > pin(tint=tint) > pin_color {
    image = "ui/pin_small_tint",
    width = 24,
    height = 24,
    tint = tint,
}

stats {
    x = parent_width - (300 - 4),
    y = parent_height - (100 - 8),
    width = 300,
    height = 100,
    border_width = border_width(40.0),
    border = border_image("ui/background_grid", 40, 40,  true),
    shadow = shadow(-3.0, -3.0, rgba(0, 0, 0, 0.3), 5.0, 0.0, "outset"),
}

stats > money {
    x = 16,
    y = 13,
    layout = "lined",
    width = 200,
    line_height = 35,
}

stats > money > @text {
    font_size = 25,
    font_color = rgb(0, 40, 100),
}

stats > rating {
    x = (parent_width / 2) - 125,
    y = parent_height - 50,
    width = 250,
    height = 50,
    image = "ui/rating_bar",
}

stats > rating > rating_clip(value=value) {
    clip_overflow = true,
    height = 50,
    width = 250.0 * value,
}

stats > rating > rating_clip > rating_bar {
    width = 250,
    height = 50,
    image = "ui/rating_bar_color",
}

stats > rating > label {
    layout = "lined",
    width = 200,
    y = -8,
    x = (parent_width / 2) - 22,
    line_height = 24,
}

stats > rating > label > @text {
    font_size = 20,
    font_color = rgb(0, 10, 30),
}

notifications {
    x = parent_width - 300,
    y = 0,
    width = 300,
    height = parent_height - 200,
}

notifications > notification(index=index, slide_in=slide_in) {
    x = parent_width - int(320.0 + (slide_in/50.0) * 400.0),
    y = (parent_height - 120) - (35 * int(index)),
    width = 300,
    height = 32,
}

notifications > notification {
    can_hover = true,
}

notifications > notification(on_click=click) {
    on_mouse_up = list(click, "init#
        audio.play_sound('click')
        return true
    "),
}

notifications > notification(r=r, g=g, b=b) > background {
    width = 300,
    height = 32,
    border_width = border_width(32.0),
    border = border_image("ui/sticky_large_tint", 32, 32,  true),
    tint = rgb(r, g, b),
}

notifications > notification(hover=true) > background {
    shadow = shadows(
        shadow(0.0, 0.0, rgba(255, 255, 0, 0.5), 16.0, 0.0, "outset"),
        shadow(0.0, 0.0, rgba(255, 255, 0, 0.6), 16.0, 0.0, "inset")),
}

notifications > notification > content {
    width = 300,
    height = 32,
    shadow = shadow(2.0, 2.0, rgba(0, 0, 0, 0.3), 3.0, 0.0, "outset"),
}

notifications > notification > content > icon(img=image) {
    image = image,
    x = 5,
    y = 0,
    width = 32,
    height = 32,

}
notifications > notification > content > title {
    layout = "lined",
    width = 250,
    line_height = 35,
    x = 45,
    y = 0,
}

notifications > notification > content > title > @text {
    font_size = 25,
    font_color = rgb(0, 10, 30),
}


window > content(style="notification_window") {
    layout = "center",
}

window > content(style="notification_window") > description {
    layout = "lined",
    line_height = 31,
    width = parent_width - 100,
    align_height = false,
    y = 50,
}
window > content(style="notification_window") > description > @text {
    font_size = 23,
}

window > content(style="notification_window") > button {
    align_height = false,
    y = parent_height - 50,
    width = 250,
    height = 40,
}

active_notification {
    width = parent_width - 100,
    height = parent_height - 100,
    layout = "center",
}

active_notification(style="staff_pay") > content {
    align_height = false,
    layout = "lined",
    width = 250,
    line_height = 25,
    x = 8,
    y = 8,
}

active_notification(style="staff_pay") > content > @text {
    font_size = 21,
    font_color = rgb(0, 10, 30),
}

active_notification(style="staff_pay") > buttons {
    align_height = false,
    y = parent_height - 30*2 - 2,
    width = parent_width,
    height = 31*2,
    layout = "grid",
    columns = 2,
    rows = 2,

    margin = 2,
    spacing = 10,
}

active_notification(style="room_text") > content {
    align_height = false,
    layout = "lined",
    width = 250,
    line_height = 25,
    x = 8,
    y = 8,
}

active_notification(style="room_text") > content > @text {
    font_size = 21,
    font_color = rgb(0, 10, 30),
}

active_notification(style="room_text") > buttons {
    align_height = false,
    y = parent_height - 30,
    width = parent_width,
    height = 31,
    layout = "grid",
    columns = 2,
    rows = 1,

    margin = 2,
    spacing = 10,
}

clock_area {
    x = parent_width - (250 - 4),
    y = parent_height - (100 - 8) - 30,
    width = 250,
    height = 30,
    border_width = border_width(10.0),
    border = border_image("ui/time_back", 10, 10, true),
}

clock_area > day {
    x = 8,
    y = 2,
}
clock_area > day > @text {
    font_color = rgb(20, 20, 20),
    font_size = 22,
}

clock_area > time_period {
    x = 150,
    y = -20,
    width = 100,
    height = 50,
    layout = "center",
    border_width = border_width(10.0),
    border = border_image("ui/time_back", 10, 10, true),
}

clock_area > time_period > time {
    layout = "lined",
    align_height = false,
    y = 2,
}

clock_area > time_period > time > @text {
    font_size = 20,
    font_color = rgb(20, 20, 20),
}

clock_area > time_period > period {
    layout = "lined",
    align_height = false,
    y = 25,
}

clock_area > time_period > period > @text {
    font_size = 20,
    font_color = rgb(20, 20, 20),
}

notifications_fly_in {
    width = parent_width,
    height = parent_height,
}

notifications_fly_in > notification_icon(img=img, time=time, target_index=index) {
    image = img,
    width = 0,
    height = 0,
    x = (parent_width / 2),
    y = float(parent_height) * 0.3,

    on_update = "init#
        local index = node:get_property_int('target_index')
        local time = node:get_property_float('time')
        time = time + evt.delta * 0.005;

        local root = node.parent.parent
        local _, _, rw, rh = root:raw_position()

        local size = 32.0
        local x = 0.0
        local y = 0.0
        local alpha = 1.0

        -- Pop up
        if (time < 0.3) then
            local rel = time / 0.3
            size = 32 * rel
            y = rh * 0.4 - 100 * rel - (size/2)
        elseif (time < 0.6) then
            -- Hold
            local rel = (time - 0.3) / 0.3
            size = size + 8 * math.abs(math.sin(rel * math.pi * 2))
            y = rh * 0.4 - 100 - (size/2)
        else
            -- Fly
            local rel = (time - 0.6) / 0.4
            local base_y = rh * 0.4 - 100 - (size/2)
            local target_y = (rh - 320) - (35.0 * index)
            y = base_y + (target_y - base_y) * rel
            x = (rw * 0.5 - 320) * rel
            if time > 0.9 then
                local rel = (time - 0.9) / 0.1
                alpha = 1.0 - rel
            end
        end


        node:set_property_float('ani_w', size)
        node:set_property_float('ani_h', size)

        node:set_property_float('ani_x', x)
        node:set_property_float('ani_y', y)
        node:set_property_float('ani_alpha', alpha)

        node:set_property_float('time', time)
    ",
}

notifications_fly_in > notification_icon(ani_x=x,ani_y=y,ani_w=w,ani_h=h, ani_alpha=alpha) {
    x = (float(parent_width / 2) - (w/2.0)) + x,
    y = y,
    width = w,
    height = h,
    tint = rgba(255, 255, 255, alpha),
}