<?xml version="1.0" encoding="UTF-8"?>
<nifty xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="nifty.xsd">

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- register effects we want to use -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->

  <registerEffect name="nop" class="de.lessvoid.nifty.effects.general.Nop" />
  <registerEffect name="colorBar" class="de.lessvoid.nifty.effects.hover.ColorBar" />
  <registerEffect name="textColor" class="de.lessvoid.nifty.effects.hover.TextColor" />
  <registerEffect name="textSizeHover" class="de.lessvoid.nifty.effects.hover.TextSize" />
  <registerEffect name="textSizePulsate" class="de.lessvoid.nifty.effects.hover.TextSizePulsate" />
  <registerEffect name="imageSize" class="de.lessvoid.nifty.effects.general.ImageSize" />
  <registerEffect name="imageOverlay" class="de.lessvoid.nifty.effects.hover.ImageOverlay" />
  <registerEffect name="imageSizePulsate" class="de.lessvoid.nifty.effects.hover.ImageSizePulsate" />
  <registerEffect name="pulsate" class="de.lessvoid.nifty.effects.hover.Pulsate" />
  <registerEffect name="fade" class="de.lessvoid.nifty.effects.general.Fade" />
  <registerEffect name="move" class="de.lessvoid.nifty.effects.general.Move" />
  <registerEffect name="particle" class="de.lessvoid.nifty.effects.general.Particle" />
  <registerEffect name="textSize" class="de.lessvoid.nifty.effects.general.TextSize" />
  <registerEffect name="shake" class="de.lessvoid.nifty.effects.general.Shake" />
  <registerEffect name="imageSizeHover" class="de.lessvoid.nifty.effects.hover.ImageSize" />
  <registerEffect name="playSound" class="de.lessvoid.nifty.effects.general.PlaySound" />
  <registerEffect name="playSoundHover" class="de.lessvoid.nifty.effects.hover.PlaySound" />
  <registerEffect name="plasmaBackground" class="de.lessvoid.nifty.demo.tutorial.effect.PlasmaBackground" />
  
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- register sounds -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->

  <registerSound id="select" filename="tutorial/select.wav" />
  <registerSound id="intro" filename="tutorial/intro.wav" />
  <registerSound id="hover" filename="tutorial/hover.wav" />

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- effect group definitions -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->

  <!-- effect for the next button hover -->
  <effectGroup id="nextButtonHover">
    <onHover name="imageOverlay" post="true" filename="tutorial/next-hover.tga"/>
    <onHover name="imageOverlay" post="true" filename="tutorial/next-hover-ring.tga" hoverFalloffType="linear" hoverFalloffConstraint="both" hoverWidth="228px" hoverHeight="228px"/>
    <onClick name="playSound" sound="select" />
  </effectGroup>

  <!-- effect for the back button hover -->
  <effectGroup id="backButtonHover">
    <onHover name="imageOverlay" post="true" filename="tutorial/back-hover.tga"/>
    <onHover name="imageOverlay" post="true" filename="tutorial/back-hover-ring.tga" hoverFalloffType="linear" hoverFalloffConstraint="both" hoverWidth="228px" hoverHeight="228px"/>
    <onClick name="playSound" sound="select" />
  </effectGroup>

  <!-- panel effect -->
  <effectGroup id="panelEffect">
    <onStartScreen name="move" directionType="in" direction="right" length="300" startDelay="0" alternateDisable="back" inherit="true"/>
    <onStartScreen name="move" directionType="in" direction="left" length="300" startDelay="0" alternateEnable="back" inherit="true"/>
    <onStartScreen name="fade" startColor="#ffffff00" endColor="#ffffffff" length="300" startDelay="0" inherit="true"/>
    <onEndScreen name="move" directionType="out" direction="left" length="300" startDelay="0" alternateDisable="back" inherit="true"/>
    <onEndScreen name="move" directionType="out" direction="right" length="300" startDelay="0" alternateEnable="back" inherit="true"/>
    <onEndScreen name="fade" startColor="#ffffffff" endColor="#ffffff00" length="300" startDelay="0" inherit="true"/>
  </effectGroup>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- layer groups -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->

  <!-- background layer stuff -->
  <layerGroup id="background">
    <layer id="background" layout="vertical" backgroundColor="#000000ff">
      <panel height="106px" layout="center">
        <image filename="tutorial/demo-2-background-top.tga" backgroundColor="#ffffffff" align="center">
          <effect>
            <onStartScreen name="move" directionType="in" direction="left" length="200" startDelay="0" alternateEnable="start"/>
            <onStartScreen name="fade" startColor="#ffffff00" endColor="#ffffffff" length="200" alternateEnable="start" startDelay="0"/>
          </effect>
        </image>
      </panel>
      <panel height="556px" layout="center">
        <image filename="tutorial/demo-2-background-main.tga">
          <effect>
            <onStartScreen name="fade" startColor="#ffffff00" endColor="#ffffffff" length="400" alternateEnable="start" startDelay="0"/>
          </effect>
        </image>
      </panel>
      <panel height="106px" layout="center">
        <image filename="tutorial/demo-2-background-bottom.tga">
          <effect>
            <onStartScreen name="move" directionType="in" direction="right" length="200" alternateEnable="start" startDelay="0"/>
            <onStartScreen name="fade" startColor="#ffffff00" endColor="#ffffffff" length="200" alternateEnable="start" startDelay="0"/>
          </effect>
        </image>
      </panel>
    </layer>
  </layerGroup>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- start screen -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="start" controller="de.lessvoid.nifty.demo.tutorial.Splash">
    <layer id="logo" layout="center">
      <panel height="60%" layout="center">
        <image filename="splash-logo.tga" align="center">
          <effect>
            <onEndScreen name="playSound" sound="intro" length="1200"/>
            <onEndScreen name="fade" startColor="#ffffffff" endColor="#ffffff00" length="1200" startDelay="0"/>
            <onEndScreen name="imageSize" factor="0.5" startSize="0.7" endSize="1.0" length="1200" startDelay="0"/>
          </effect>
        </image>
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- welcome -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="welcome" controller="de.lessvoid.nifty.demo.tutorial.Welcome">
    <!-- background -->
    <layerGroup id="background" alternate="start"/>
  
    <!-- data --> 
    <layer layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="vertical">
        <panel height="46px" layout="center"/>
        <panel layout="center">
          <panel layout="vertical">
            <text font="verdana-48-regular.fnt" align="center" text="Nifty Introduction" effectGroup="textEffect">
              <effect>
                <onStartScreen name="textSize" length="300" startDelay="0" factor="2" startSize="1.5" endSize="1.0"/>
                <onStartScreen name="fade" startColor="#ffffff00" endColor="#ffffffff" length="300" startDelay="0"/>
                <onEndScreen name="move" directionType="out" direction="left" length="300" startDelay="0"/>
                <onEndScreen name="fade" startColor="#ffffffff" endColor="#ffffff00" length="300" startDelay="0"/>
              </effect>
            </text>
            <text font="verdana-small-regular.fnt" align="center" text="press next in the bottom right corner to continue">
              <effect>
                <onStartScreen name="fade" startColor="#ffffff00" endColor="#ffffffff" length="1000" startDelay="0"/>
                <onEndScreen name="move" directionType="out" direction="left" length="300" startDelay="0"/>
                <onEndScreen name="fade" startColor="#ffffffff" endColor="#ffffff00" length="300" startDelay="0"/>
              </effect>
            </text>
          </panel>
        </panel>
        <panel height="64px" layout="center">
          <image id="welcome-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover">
            <effect>
              <onStartScreen name="fade" startColor="#ffffff00" endColor="#ffffffff" length="500" startDelay="0"/>
            </effect>
          </image>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- welcome when we visit it again -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="welcome2" controller="de.lessvoid.nifty.demo.tutorial.Welcome">
    <!-- background -->
    <layerGroup id="background" />
    
    <!-- data -->
    <layer layout="vertical">
      <panel height="106px" layout="center"/>
      <panel height="556px" layout="vertical">
        <panel height="46px" layout="center"/>
        <panel layout="center">
          <panel layout="vertical" effectGroup="panelEffect">
            <text font="verdana-48-regular.fnt" align="center" text="Nifty Introduction" />
            <text font="verdana-small-regular.fnt" align="center" text="press next in the bottom right corner to continue" />
          </panel>
        </panel>
        <panel height="64px" layout="horizontal">
          <panel/>
          <image id="welcome2" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- introduction -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="introduction" controller="de.lessvoid.nifty.demo.tutorial.Introduction">
    <!-- background -->
    <layerGroup id="background" />

    <!-- background -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="So what exactly is Nifty GUI?"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Nifty GUI is a Java Library that supports the building of interactive user interfaces for games or similar&#10;applications. It utilizes lwjgl for OpenGL rendering. The configuration of the GUI is stored in xml files with&#10;little supporting Java code.&#10;&#10;In short Nifty helps you to layout stuff, display it in a cool way and interact with it :)"/>
                <text font="verdana-48-regular.fnt" align="left" text="&#10;And what is it not?"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Nifty is not a complete Widget Toolkit (like AWT, SWT or Swing) or an application framework. If you're&#10;looking for a more traditional approach (e.g. use Java to create and manage the UI) or if you need a&#10;more complete solution with windows, dialog boxes, lots of controls and so on, you might want to look&#10;somewhere else.&#10;&#10;Two great options are&#10;&#10;- SUI (http://code.google.com/p/slick-sui/) or&#10;- fenggui (https://fenggui.dev.java.net/)&#10;"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="But ;) with Nifty your GUI will look a lot cooler and of course niftier ;)&#10;&#10;"/>
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- java -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="java" controller="de.lessvoid.nifty.demo.tutorial.Java">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: The Java side of things"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Nifty is a jar File. So all you need is &quot;nifty.jar&quot; (and depending on your version maybe some supporting&#10;jars like slick.jar and lwjgl.jar) in your classpath.&#10;&#10;Initializing lwjgl and setting the display mode is up to you. Now you are ready to create Nifty and load the&#10;xml definition of your GUI:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="// create nifty&#10;Nifty nifty = new Nifty(new RenderDeviceLwjgl());&#10;nifty.fromXml(&quot;tutorial/tutorial.xml&quot;);"/>
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;It is important that you initialize the display mode before nifty, because the loader uses the dimension&#10;of the current lwjgl display mode for initialisation.&#10;&#10;All what is left to do now, is to call the render method of nifty in your render loop:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="// render nifty&#10;while (!done) {&#10;  if (nifty.render()) {&#10;    // nifty has reached the end point ... stop the rendering loop or change state&#10;  }&#10;  // ... &#10;}"/>
                </panel>
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- xml 1 -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="xml1" controller="de.lessvoid.nifty.demo.tutorial.Xml1">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: The XML side of things"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Nifty stores the definition of your GUI (position of elements, effects, etc.) in xml files. So you could easily&#10;modify the xml to change your GUI and you don't need to recompile everything.&#10;&#10;Nifty, isn't it? ;)&#10;"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="The basic building block of your XML file is the concept of a screen. Everything you can see on the screen .)&#10;right here on this page is stored within a single &lt;screen&gt; element. So a Nifty GUI consists of several screens&#10;that are interconnected. Which screen connects to which screen is defined in a simple java class (more on&#10;this later).&#10;"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Every screen must be given a unique name with the id attribute of the screen tag. This way every screen&#10;can be identified. However there is one special id. The screen with the &quot;start&quot; id will be used as the entry&#10;point for nifty and will be the very first screen Nifty will display. Example:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="&lt;nifty&gt;&#10;  &lt;screen id=&quot;start&quot;&gt;&#10;    ...&#10;  &lt;/screen&gt;&#10;&lt;/nifty&gt;&#10;"/>
                </panel>
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- xml 2 -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="xml2" controller="de.lessvoid.nifty.demo.tutorial.Xml2">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: The XML side of things, continued"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Within a screen you can have several layers of elements. So you could use a layer for your background. A&#10;layer for your menu and another layer on the top to display a logo or something. Layers are rendered as&#10;they appear in the xml file. So you should define your background layer first.&#10;"/>
                <panel align="left" layout="horizontal">
                  <panel align="left" layout="vertical">
                    <text id="text" font="verdana-small-regular.fnt" align="left" text="Another example:&#10;"/>
                    <panel align="left" layout="vertical" backgroundColor="#a00c">
                      <text id="text" font="courier-new.fnt" align="left" text="...&#10;&lt;screen id=&quot;start&quot;&gt;&#10;  &lt;layer id=&quot;background&quot;&gt;&#10;   ...&#10;  &lt;/layer&gt;&#10;  &lt;layer&gt;&#10;   ...&#10;  &lt;/layer&gt;&#10;&lt;/screen&gt;&#10;"/>
                    </panel>
                  </panel>
                  <panel align="left" layout="vertical" width="20px"/>
                  <panel align="left" layout="vertical">
                    <text id="text" font="verdana-small-regular.fnt" align="left" text="Some Image of what is going on:&#10;"/>
                    <image filename="tutorial/layers.tga" align="left"/>
                  </panel>
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;Opposite to screen definitions you don't have to name layers with an id attribute. You can give it a name but&#10;it's not neccessary.&#10;"/>
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- layout 1 -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="layout1" controller="de.lessvoid.nifty.demo.tutorial.Layout1">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: The XML side of things, Layout"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Now that you have a Layer you can begin to arrange Elements on it. Elements are Niftys Controls like&#10;Images, Text or Invisible Helper Objects (Panels). The Key to understanding layout in Nifty is, that every&#10;Element can have a certain number of children and that the parent element decided how the child&#10;elements are arranged within that element. The layer you've already defined is basically the root Element&#10;and it has by default the width and height of the screen.&#10;"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Don't be afraid, it will all make sense very soon ;) Currently Nifty supports the following layouts:&#10;"/>
                <panel align="left" layout="horizontal">
                  <panel align="left" layout="vertical">
                    <text id="text" font="verdana-small-regular.fnt" align="left" text="Vertical:&#10;"/>
                    <image filename="tutorial/layout-vertical.tga" align="left"/>
                  </panel>
                  <panel align="left" layout="vertical">
                    <text id="text" font="verdana-small-regular.fnt" align="left" text="Horizontal:&#10;"/>
                    <image filename="tutorial/layout-horizontal.tga" align="left"/>
                  </panel>
                </panel>
              </panel>
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- layout 2 -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="layout2" controller="de.lessvoid.nifty.demo.tutorial.Layout2">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: The XML side of things, Layout, cont."/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="There are two more layout types available.&#10;"/>
                <panel align="left" layout="horizontal">
                  <panel align="left" layout="vertical">
                    <text id="text" font="verdana-small-regular.fnt" align="left" text="Center:&#10;"/>
                    <image filename="tutorial/layout-center.tga" align="left"/>
                  </panel>
                  <panel align="left" layout="vertical">
                    <text id="text" font="verdana-small-regular.fnt" align="left" text="Absolute:&#10;"/>
                    <image filename="tutorial/layout-absolute.tga" align="left"/>
                  </panel>
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;Well, you look somwhat puzzled - probably an example helps :)"/>
              </panel>
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- layout 3 -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="layout3" controller="de.lessvoid.nifty.demo.tutorial.Layout3">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: The XML side of things, Layout Example"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Let's say you have a panel with a layout type of vertical and 3 child elements, two panels with different&#10;backgroundcolors and one text element:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="&lt;panel layout=&quot;vertical&quot; backgroundColor=&quot;#0f0f&quot;&gt;&#10;  &lt;panel backgroundColor=&quot;#080f&quot;/&gt;&#10;  &lt;text font=&quot;regular.fnt&quot; text=&quot;&amp;#10;Hello Nifty World!&amp;#10;&quot; align=&quot;center&quot; color=&quot;#000f&quot;/&gt;&#10;  &lt;panel backgroundColor=&quot;#080f&quot;/&gt;&#10;&lt;/panel&gt;"/>
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;This would look something like this:&#10;"/>
                <panel layout="vertical" height="150px" backgroundColor="#0f0f">
                  <panel backgroundColor="#080f"/>
                  <text font="verdana-small-regular.fnt" align="center" text="&#10;Hello Nifty World!&#10;" color="#000f"/>
                  <panel backgroundColor="#080f"/>
                </panel>                
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;Wow, that was not that bad, was it? =)"/>
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- effects 1 -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="effects1" controller="de.lessvoid.nifty.demo.tutorial.Effects1">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: Effects"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Well, now that you have all your elements arranged on screen you can add effects to it. An effect is just&#10;some change of render state before or after an element is rendered. Most effects are time aware and can&#10;change over time.&#10;&#10;You can attach effects to the following events:&#10;&#10;- onStartScreen&#10;- onEndScreen&#10;- onHover&#10;- onClick&#10;- Focus&#10;"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="You can add effects to every element using the &lt;element&gt; tag:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="&lt;text font=&quot;regular.fnt&quot; align=&quot;center&quot; text=&quot;&amp;#10;Hello Nifty World!&amp;#10;&quot; color=&quot;#000f&quot;&gt;&#10;  &lt;effect&gt;&#10;    &lt;onStartScreen name=&quot;move&quot; directionType=&quot;in&quot; direction=&quot;left&quot; length=&quot;1000&quot;/&gt;&#10;  &lt;/effect&gt;&#10;&lt;/text&gt;&#10;" />
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;See this example in action on the next screen."/>
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- effects 2 -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="effects2" controller="de.lessvoid.nifty.demo.tutorial.Effects2">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: Effects, continued"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="The example in action:&#10;"/>                
                <panel layout="vertical" height="150px" backgroundColor="#0f0f">
                  <panel backgroundColor="#080f"/>
                  <text font="verdana-small-regular.fnt" align="center" text="&#10;Hello Nifty World!&#10;" color="#000f">
                    <effect>
                      <onStartScreen name="move" directionType="in" direction="left" length="1000" startDelay="0" />
                    </effect>
                  </text>
                  <panel backgroundColor="#080f"/>
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;One thing to note is that all effects are based on the final position of the element. So when you use some&#10;move effect - like in the example above - the final position of the element will always be the position you&#10;have definied within layout.&#10;"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="Effect tags can all have individual attributes but they all have a name and a post flag. The post flag decided&#10;if the effect is to be applied before the element is rendered. In this case post should be set to false which is&#10;the default when you omit it. If you set post to true the effect is applied after the element is rendered. This&#10;could be used for overlays for instance.&#10;&#10;Most effects are time aware which means that they change over time."/>
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- effects 3 -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="effects3" controller="de.lessvoid.nifty.demo.tutorial.Effects3">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: Effects, continued"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="The name of an Effect links the effect to the implementing class. So you're not bound to the build in effects&#10;and it would be easily possible to extend nifty with your own effects. Just implement the Nifty &quot;Effect&quot;&#10;interface and register it with an name:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="&lt;registerEffect name=&quot;move&quot; class=&quot;de.lessvoid.nifty.effects.general.Move&quot; /&gt;&#10;&lt;registerEffect name=&quot;my-cool-effect&quot; class=&quot;my.package.MyCoolEffect&quot; /&gt;&#10;...&#10;&lt;effect&gt;&#10;  &lt;onStartScreen name=&quot;move&quot; ... /&gt;&#10;  &lt;onStartScreen name=&quot;my-cool-effect&quot; ... /&gt;&#10;&lt;/effect&gt;"/>
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;Hover effects are a special kind of an effect. Additional to the normal effect parameters they can take the&#10;distance of the mouse cursor position into account and change some effect parameter accordingly.&#10;&#10;Here is an example:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="&lt;onHover name=&quot;textSizeHover&quot; maxSize=&quot;120%&quot; hoverFalloffConstraint=&quot;vertical&quot;&#10;         hoverFalloffType=&quot;linear&quot; hoverHeight=&quot;100%&quot;/&gt;"/>
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text=""/>
                <panel layout="vertical" backgroundColor="#0f0f">
                  <text font="verdana-small-regular.fnt" align="center" text="&#10;Hello Nifty World!&#10;" color="#000f">
                    <effect>
                      <onHover name="textSizeHover" maxSize="120%" hoverFalloffConstraint="vertical" hoverFalloffType="linear" hoverHeight="200%" />
                    </effect>
                  </text>
                </panel>                
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- interact 1 -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="interact1" controller="de.lessvoid.nifty.demo.tutorial.Interact1">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: Puting it all together"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="There's one last thing missing in your knowledge about Nifty, the ScreenController. The ScreenController is an&#10;Interface you have to implement that controls a single Screen.&#10;&#10;Here is the ScreenController interface:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="public interface ScreenController {&#10;  void bind(RenderDevice renderDevice, Nifty nifty, Screen screen);&#10;  void onStartScreen();&#10;  void onStartInteractive();&#10;  void onEndScreen();&#10;}"/>
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;So the ScreenController interface gives you access to the Screen class, the java representation of the current&#10;screen as well as the main events like the starting and ending of a screen. You can connect a Screencontroller&#10;to a screen with the controller attribute of the Screen tag:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="&lt;screen id=&quot;start&quot; controller=&quot;de.lessvoid.nifty.demo.tutorial.Start&quot;&gt;&#10;   ...&#10;&lt;/screen&gt;"/>
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;So whenever something interessting happens on the current screen Nifty will call the attached ScreenController.&#10;The ScreenController is also the place wherer Nifty will look for additional callback methods as you will&#10;see on the next page."/>
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- interact 2 -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="interact2" controller="de.lessvoid.nifty.demo.tutorial.Interact2">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="How does it work: Puting it all together, Make it respond"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="A GUI makes only sense if you can interact with it. At the moment Nifty only supports the onClick event.&#10;So whenever you click on some element you can tell Nifty to call a method on the ScreenController of the&#10;current screen.&#10;&#10;The way this is realized is with reflection. Say you have a button that should trigger some event. You'll&#10;first add an onClick to the element:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="&lt;image filename=&quot;tutorial/next.tga&quot; onClick=&quot;next&quot;/&gt;&#10;   ..."/>
                </panel>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;Whenever Nifty encounters an &quot;onClick&quot; attribute it looks for an appropriate method at the ScreenController&#10;class of the current screen and calls it:&#10;"/>
                <panel align="left" layout="vertical" backgroundColor="#a00c">
                  <text id="text" font="courier-new.fnt" align="left" text="public class Start implements ScreenController {&#10;  ...&#10;  // the callback.&#10;  public void next() {&#10;    System.out.println(&quot;next() called \o/&quot;);&#10;  }&#10;}" />
                </panel>
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <!-- done -->
  <!-- +++++++++++++++++++++++++++++++++++++++ -->
  <screen id="done" controller="de.lessvoid.nifty.demo.tutorial.Done">
    <!-- background -->
    <layerGroup id="background" />

    <!-- data -->
    <layer id="stuff" layout="vertical">
      <panel height="106px" layout="center">
      </panel>
      <panel height="556px" layout="center">
        <panel layout="vertical">
          <panel height="46px" layout="center"/>
          <panel layout="vertical">
            <panel layout="horizontal" height="*">
              <panel width="64px" />
              <panel layout="vertical" height="*" effectGroup="panelEffect">
                <text font="verdana-48-regular.fnt" align="left" text="Wow, that's all!"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="So, that's all for now! You now know how to build nifty GUIs :)&#10;&#10;Of course there is still a lot more to learn about Nifty. For instance &quot;layerGroups&quot; or &quot;effectGroups&quot; to&#10;remove duplicated xml code and make your life easier. These will be documented in the coming&#10;weeks on the Nifty Blog you can find here:&#10;"/>
                <text font="verdana-48-regular.fnt" align="center" text="http://nifty-gui.lessvoid.com/"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;And now grab the latest nifty.jar and try it for yourself :)"/>
                <text id="text" font="verdana-small-regular.fnt" align="left" text="&#10;Have a lot of fun!"/>
              </panel>
              <panel width="64px" />
            </panel>
          </panel>
          <panel height="64px" layout="horizontal">
            <image filename="tutorial/back.tga" align="left" onClick="back" onClickAlternate="back" effectGroup="backButtonHover"/>
            <panel/>
            <image id="intro-next" filename="tutorial/next.tga" align="right" onClick="next" effectGroup="nextButtonHover"/>
          </panel>
        </panel>
      </panel>
      <panel height="106px" layout="center">
      </panel>
    </layer>
  </screen>

</nifty>
