<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<ws>
    <settings>
        <stage width="900px" height="460px" create="yes" center="yes" resize="yes" />
        <triggers>
            <trigger name="game_menu_key_trigger" event="keyup" key="ESCAPE" function="savegames" />
            <trigger name="next_on_right" event="keyup" key="RIGHT_ARROW" special="next" />
            <trigger name="next_on_space" event="keyup" key="SPACE" special="next" />
            <trigger name="sub_scene_by_key" event="keyup" key="UP_ARROW" sub="custom_event_scene" />
        </triggers>
        <setting name="host.stage.resize" value="true" />
        <setting name="host.inspector.enable" value="true" />
    </settings>
    <assets>
        <textbox name="tb_main" x="5px" y="355px" width="890px" height="100px" speed="50"></textbox>
        <textbox name="tb_top" x="0" y="0" z="30000" width="100%" height="100%" cssid="bla"></textbox>

        <rectangle name="rect" x="20px" y="20px" height="50px" width="100px" color="green" />

        <textbox name="tb_nvl" behaviour="nvl" cssid="NvlTb" names="no"
            width="890px" height="450px" x="5px" y="5px"></textbox>

        <audio name="music" loop="true" fade="true">
            <track title="legend">
                <source href="tests/audio/chaos-circus.mp3" type="mp3" />
                <source href="tests/audio/chaos-circus.ogg" type="ogg" />
            </track>
        </audio>

        <character name="n" textbox="tb_main"></character>
        <character name="nn" textbox="tb_top"></character>

        <imagepack name="backgrounds" x="0" y="0" z="0">
            <image src="assets/images/daytime_clouds_A_01.jpg" name="clouds01" />
            <image src="assets/images/Evening_clouds_C_01.jpg" name="clouds02" />
        </imagepack>

        <imagepack name="backgrounds2" x="0" y="0" z="0">
            <image src="assets/images/Rainbow_A_01.jpg" name="rainbow" />
        </imagepack>

        <curtain name="fog"></curtain>

        <curtain name="flash" color="white"></curtain>

        <button name="sg_button" text="S/L" function="savegames" x="862px" y="320px" z="100000" />

        <animation name="anim">
            <group>
                <do asset="backgrounds" action="move" x="-300px" y="-200px" duration="2000" easing="easeOutBounce" />
                <transform asset="tb_main" property="border-top-width" from="1" to="5" unit="px" />
            </group>
            <group>
                <transform asset="tb_main" property="border-top-width" from="5" to="1" unit="px" />
                <transform asset="backgrounds" property="left" from="-300" to="0" unit="px" duration="2000" easing="easeOutBounce" />
            </group>
            <group>
                <do asset="backgrounds" action="move" x="-300px" y="0px" duration="2000" easing="easeOutBounce" />
            </group>
            <group>
                <transform asset="backgrounds" property="left" from="-300" to="0" unit="px" duration="2000" easing="easeInQuint" />
            </group>
        </animation>

    </assets>
    <scenes>

        <scene id="start">
            <trigger name="next_on_right" action="activate" />
            <trigger name="next_on_space" action="activate" />
            <!-- <trigger name="sub_scene_by_key" action="activate" /> -->
            <trigger name="game_menu_key_trigger" action="deactivate" />

            <show asset="rect" />
            <show asset="sg_button" />

            <wait />

            <hello />

            <move asset="rect" x="200px" y="200px" />

            <wait />

            <choice>
                <option label="Continue">
                    <var name="main_menu_choice" value="continue" />
                </option>
                <option label="Load">
                    <var name="main_menu_choice" value="load" />
                </option>
            </choice>

            <show asset="tb_main" />

            <hide asset="rect" />

            <globalize name="main_menu_choice" />
            <global name="globals_test" value="worked" />

            <line s="n">
                Your choice: {$main_menu_choice}<br />
                Your choice as global: {$$main_menu_choice}<br />
                Globals test: {$$globals_test}
            </line>

            <show asset="tb_top" />

            <line s="nn">
                WebStoryEngine Docs: <a href="http://webstoryengine.org" target="_blank">Click here</a>
            </line>

            <hide asset="tb_top" />

            <line s="n">
                Localize (before): {$globals_test}
            </line>

            <localize name="globals_test" />

            <line s="n">
                Localize (after): {$globals_test}
            </line>

            <hide asset="tb_main" />
            <clear asset="tb_main" />
            <trigger name="game_menu_key_trigger" action="activate" />

            <goto scene="game_start" />
        </scene>

        <scene id="game_start">

            <var ifstate="set" name="increase_test" action="print" />

            <line s="n" stop="false">
                Welcome to the WebStory Engine demo!
            </line>

<!--             <alert title="A test alert" message="This is a test alert!" /> -->
            <var name="demo_started" value="true" />
            <var ifstate="unset" name="increase_test" value="0" />

            <set asset="backgrounds" image="clouds02" duration="0" />
            <set asset="music" track="legend" />

            <wait />

            <play asset="music" />
            <show asset="backgrounds" duration="500" />
            <show asset="tb_main" effect="slide" direction="bottom" easing="easeOutBounce"  />

            <wait />
            <wait duration="1000" /> <!-- Waits another second after all effects are finished. -->

            <prompt title="Who are you?" message="Please enter your name:" var="player_name" />

             <wait />

             <line s="n">Hello, {$player_name}!</line>

            <confirm title="Really?" message="Is this really your name? Are you sure?" var="player_name_is_correct" />

            <wait />

            <prompt ifvar="player_name_is_correct" ifvalue="false" title="What's your REAL name?"
                message="Please enter your real name now. Don't lie! Lies are bad." var="player_name" />

            <wait />

            <line s="n">Hello again, {$player_name}!</line>

            <flash asset="flash" duration="500" />

            <wait />

            <hide asset="tb_main" effect="slide" direction="bottom" />

            <wait />

            <show asset="tb_main" effect="slide" direction="bottom" easing="easeOutBounce" />
            <var name="increase_test" action="increase" />

            <line s="n">
                The increase_test variable is {$increase_test}.
            </line>

            <flicker asset="flash" duration="2000" times="10" opacity="0.5" />

            <wait />

            <var name="increase_test" action="decrease" />

            <line s="n">
                Variable decreased. The increase_test variable is {$increase_test}.
            </line>

            <stop asset="music" />
            <start asset="anim" />

            <sub scene="sub_scene_test" />
            <var name="increase_test" action="increase" />
            <clear asset="tb_main" />

            <line s="n">
                To start, click on the screen or press <b>space</b> / <b>right arrow</b> key.
            </line>

            <hide asset="tb_main" effect="slide" direction="bottom" />

            <wait />

            <show asset="tb_main" effect="slide" direction="bottom" easing="easeOutBounce" />

            <line s="n" stop="false">
                What are you interested in?
            </line>

            <choice>
                <option label="I want to learn more!">
                    <var name="learn_more_pressed" value="true" />
                </option>
                <option label="No, thanks.">
                    <var name="learn_more_pressed" value="false" />
                </option>
            </choice>

            <choice>
                <option label="I want green!">
                    <var name="color" value="green" ifvar="learn_more_pressed" ifvalue="true" />
                    <var name="color" value="red" ifvar="learn_more_pressed" ifvalue="false" />
                </option>
                <option label="I like blue!">
                    <var name="color" value="blue" ifvar="learn_more_pressed" ifvalue="true" />
                    <var name="color" value="red" ifvar="learn_more_pressed" ifvalue="false" />
                </option>
            </choice>

            <line s="n">
                You get this color: {$color}
            </line>

            <line s="n" ifvar="learn_more_pressed" ifvalue="true">
                You want to learn more.
            </line>

            <line s="n" ifvar="learn_more_pressed" ifvalue="false">
                You don't want to learn more, so we gave you red instead! Haha!
            </line>

            <goto scene="restart" />
        </scene>

        <scene id="sub_scene_test">
            <wait />
            <show asset="fog" effect="slide" direction="right" />

            <wait />

            <set asset="backgrounds2" image="rainbow" duration="0" />
            <show asset="backgrounds2" duration="0" />

            <wait />

            <hide asset="fog" effect="slide" direction="right" />

            <wait />

            <line s="n">
                Hello from the sub scene!
            </line>

            <fn name="savegames" />

            <line s="n">
                A sub scene is a scene that is called from within another scene, but
                not using the goto command; instead the sub command is used.
            </line>

            <line s="n">
               That means that after all of the sub scenes commands have been executed,
               the story continues from the point where the sub scene was called.
            </line>

            <line s="n">Let's go even one level deeper...</line>

            <sub scene="sub_scene_test_2" />

            <line s="n">And now we are back at the first sub scene.</line>

            <hide asset="backgrounds2" duration="500" />
        </scene>

        <scene id="sub_scene_test_2">
            <line s="n">
                This line is part of another sub scene called from within the previous sub scene.
            </line>
        </scene>

        <scene id="custom_event_scene">
            <line s="n">
                A custom event has been triggered.
            </line>
        </scene>

        <scene id="restart">
            <hide asset="backgrounds" duration="1000" />

            <wait />

            <clear asset="tb_main" />
            <move asset="backgrounds" x="0" y="0" duration="0" />
            <stop asset="sounds" />
            <stop asset="anim" />

            <wait />

            <restart />
        </scene>

    </scenes>
</ws>