                        FreeAmp Theme HOWTO
                        -------------------
                            written by
                            Robert Kaye
                         (rob@emusic.com)
        $Id: ThemeHowTo.txt,v 1.16.4.1 2000/03/07 23:05:32 robert Exp $
                    (Updated for version 2.0.5)

INTRODUCTION

FreeAmp 2.0 supports fully customizable themes -- anyone with experience
in Photoshop/Gimp and HTML should be able to create their own Themes.
These themes are platform independent -- they will look exactly the same
on Windows as they will on Linux. 

Unlike WinAmp, FreeAmp themes are not limited to having one layout for the 
controls. The FreeAmp window can be any shape and the button layouts
can be anything the theme designer desires. Care to leave out some 
buttons or display items you don't care for? Go ahead leave them out --
FreeAmp doesn't care.

This HOWTO will get you started writing themes for FreeAmp. Please note
that this HOWTO is still in the beta stages, much like FreeAmp 2.0.
If you find any problems with this HOWTO, please mail rob@emusic.com
with your comments, or better yet head over to Bugzilla and enter a 
bug report <http://www.freeamp.org/bugzilla>.


GETTING STARTED

To get started working on FreeAmp themes, I recommend that you 
grab FreeAmp.fat from the themes directory in your FreeAmp
installation and decompile it using the supplied program MakeTheme:
(If MakeTheme is not in the distribution for some reason, you can
get it from the FreeAmp website)

   MakeTheme -d freeamp.fat

Take a brief look at the theme.xml file and the bitmaps that get
unpacked. Or you can look at Appendix B. :-) Then read on.


THEMES

A theme consists of at least four files that get packaged into one
.fat file:

  1) A bitmap for buttons/controls
  2) A background bitmap for the player
  3) theme.xml, which is an XML document that describes the layout 
     of the theme
  4) A title.txt file which contains a descriptive name of the
     theme. Please place only a simple descriptive name in this file.
     Use the ThemeInfo tag in theme.xml for giving detailed theme credits.
     Only the first line of this file is used.

Don't be scared by the XML -- in this case you might as well call it
an HTML-like syntax, which sounds less intimidating. :-)

A theme designer creates these three or more files in a separate 
directory and then points FreeAmp to these files. 

The ThemePath preference should point to the theme directory or a 
completed .fat file. To do this under Linux, edit the ThemePath preference 
in ~/.freeamp/preferences, or under Windows edit the 
HKEY_CURRENT_USER/Software/FreeAmp/FreeAmp v2.0/Main/ThemePath 
registry value to point to your theme directory.

If your theme supports the ReloadTheme button, you can edit the
theme on disk and then click the ReloadTheme button to re-parse and
reload the theme without exiting FreeAmp.

When you are done with your theme and want to ship it off to the
FreeAmp theme repository or to your friends, package it up using
the MakeTheme program bundled with FreeAmp. Simply do:

    MakeTheme mytheme.fat theme.xml title.txt *.bmp
    
in your theme directory. You can then add the mytheme.fat in
the options dialog to load your theme. 

Note: The .fat format is simple (no symlinks, no directories) 
implementation of a tar'ed, gzipped file. If you prefer you can
do:

    tar -czf mytheme.fat theme.xml title.txt *.bmp
    
It will give you the same result. NOTE: You must use _gzip_ not
the windows based pkzip or winzip.


BITMAPS

All controls in FreeAmp are bitmaps, and to keep things simple
for all platforms all bitmaps are Windows bitmap format (BMP). 
(Sorry, all you Linux fans. :-( ) It doesn't matter which bit depth 
your theme bitmaps are, but usually 256 color bitmaps will suffice 
while keeping the size of the theme down.

For each bitmap the theme designer can specify a color which will
be used as the transparent color in the bitmap. All pixels in that
bitmap that are deemed to be transparent, will never be shown on
a FreeAmp theme. This allows theme designers to create arbitrarily
shaped FreeAmp windows and controls.

Each bitmap is given a name -- other controls will refer back to
this name in the theme.xml file.


FONTS

TrueType fonts are used both on Linux and Windows. If you use some fancy 
font in a theme, there is a good chance that other people will not have 
that font on their machine. In that case, you should include your font 
in the theme package. Please make sure that you have the right to
distribute that font with theme. If you are unsure of the rights regarding
fonts, you may want to use Microsoft's WebFonts, which you can redistribute.

A font is given a name, which TextControl controls will refer back to.


RECTS

All throughout a theme descriptions Rect attributes are used. A Rect
specifies a rectangular region on a bitmap. The Rect is defined as

   Rect="x1,y1,x2,y2"
   
Where x2 and y2 are inclusive of the Rect.


THEME.XML

The actual theme file is an XML document. Right now FreeAmp only
supports XML documents encoded in ISO8859/1 (and even that has
not been thoroughly tested). Just assume that the theme.xml
file is a regular text file.

XML differs from HTML in quite a few respects, but if you are
familiar with HTML you should have no problem with XML. Just think
as a theme as a special kind of HTML document.

There are two major differences between HTML and XML. First, XML 
is case sensitive. So ButtonControl is not the same as buttoncontrol.
Second, XML has the concept of an empty tag where the two following
constructs are equivalent:

   <Info Desc="Subvert the dominant paradigm"> </Info>

   <Info Desc="Subvert the dominant paradigm"/>

The default FreeAmp theme makes copious use of the empty tag construct
since many theme details are specified using attributes. 'Desc' in the 
example above is an attribute to the Info tag. Attributes values *must*
always be enclosed by double quotes and the attribute names are
case sensitive as well.

Also, we currently do not have a DTD specified for these XML files.
Once we get out of beta, I will bring this HOWTO and a DTD up to
the latest and greatest info.

TITLE.TXT

The file TITLE.TXT should contain one line of text that gives the theme
a descriptive name. This text will be shown in the options dialog
when all the available themes are listed. Note: Only the first line
of text of this file will be used.

Bitmap:
-------

To specify a bitmap for use with a theme you might use:

<Bitmap Name="Background" File="background.bmp" TransColor="#FF0000"/>

This give the bitmap the name 'Background' and it tells FreeAmp
that the bitmap resides in background.bmp, and that the Transparent
color is primary red. The TransColor attribute specifies the color
that is transparent. Just like HTML it does this with the triple
hex notation with the # symbol. #FF0000 is red because it specifies all
red, no green and no blue.

You will want to specify one bitmap for the main background of your
FreeAmp theme and one bitmap for buttons. You can use as many bitmaps
as you like, but loading your theme om FreeAmp will be slower if you
have many bitmaps. 


Font:
-----

To specify a font:

<Font Name="San Serif" Face="Arial,Helvetica" File="verdana.ttf"/>

The Name attribute specifies the given name for this font that 
TextControls will use. The Face attribute specifies which font to use.
This can be a comma separated list. FreeAmp will first attempt to
find a font named Arial, and if it can't find that it will attempt
to font font called Helvetica and so on. If FreeAmp can't find any
of the specified fonts, it will use the default font. 

If the File attribute is given, the system will load the given font 
file before attempting to use the font. This allows theme designers to 
embed their favorite TrueType fonts in their themes. If you intend to
make your Theme available to others (and we hope you will!) please
make sure that you have the rights to distribute the fonts you embed
in your themes.


Window:
-------

FreeAmp supports different windows in the same theme. The theme
that ships with beta 4 only has one window, but later themes will
have support for window shades and other cool layouts. 

The default window that FreeAmp opens a theme in is called 'MainWindow'.
You may define as many other windows as you care -- make sure to
include a ChangeWindow button to allow the user to change between
windows. (See below for details)

To specify the main window, use this construct:

<Window Name="MainWindow">

A Window cannot be an empty tag. Inside the Window tag you will need to
define <BackgroundBitmap> and <Controls>.


BackgroundBitmap:
-----------------

This tag tells FreeAmp which bitmap to use a the background for this
window:

    <BackgroundBitmap Name="Background" Rect="0, 0, 327, 191"/>

The attributes include the Name, which refers to a name of a Bitmap
as defined above, and a Rect which specifies the a rectangular area of
the bitmap to use as the background.


Controls:
---------

This tag has no attributes. It is a container for all the controls
that are to be placed on a window. Inside of the Controls tag you may
include <MultiStateControl>, <ButtonControl>, <TextControl>,
<SliderControl> and <VSliderControl> tags.


ButtonControl:
--------------

Ok, now we're getting to the heart of FreeAmp themes. A ButtonControl
presents a button to the user. The button may have 4 different states:
 
    Normal, MouseOver, Pressed, and Disabled
    
A ControlBitmap (see below) will define bitmaps for each of these
states. The ButtonControl tag only has one attribute:

    <ButtonControl Name="Stop">

The Name of the button is corresponds to a function in FreeAmp. In the
case above, the control is tied to the Stop function. If the user presses
this button the player will stop playing. See Appendix A at
the end of this howto for a list of buttons that can be defined.
The one exception to this rule are buttons that define a <ChangeWindow>
tag. These buttons are used to switch to a different window layout
and should use a name is not used by FreeAmp. I suggest that you use
the name of the window layout that the ChangeWindow switches to. (Don't
you hate people who end their sentences in prepositions?) 

Buttons can be any arbitrary shape if the source bitmap specifies a
transparent color with the TransColor attribute. Any portion of a button
that is visible will be considered to be part of the active area of the
button. When the user moves the mouse over an active portion of the
button, a hint for that button is displayed in the Info text field.
If the user clicks on the active area of a button it will be
interpreted as a button press.

For the 'Logo' button the theme designer can specifiy a 'URL' attribute,
which will pop open the web browser and go to that web page. If the
URL attribute is not specified, the button will open the browser to
http://www.freeamp.org


The ButtonControl will need to include the <Info>, <Position>, and
<ControlBitmap> and optionally include the <ChangeWindow> tag.

MultiStateControl:
------------------

A MultiStateControl is just like a button, but it can take on different
states. The PlayPause button is implemented as a MultiStateControl and it
therefore doubles as the Pause button as well:

    <MultiStateControl Name="PlayPause" NumStates="2">
    
The NumStates attribute defines how many different states a button
can have. This number depends on the type of control that is being
implemented. The PlayPause and the Shuffle controls will always have 2 states
(Play/Pause, ShuffleNone/Shuffle) and the Repeat control will always 
have 3 states (RepeatNone,RepeatOne,RepeatAll).    

The ButtonControl will need to include the <Info>, <Position>, and
<ControlBitmap> tags.


TextControl:
------------

A text control is an area where some information is displayed:

    <TextControl Name="Time">

The name of the TextControl is used to identify what information gets
displayed in the field. You can specify Title, Info, BufferInfo, and
Time TextControls. NOTE: For the Time field, you can hit the '@' key and
FreeAmp will put the time '23:59:59' into the time field so you can test
the size of the time field. (Time fields that are too small end up 
marqueeing back and forth and that looks nasty)

A TextControl will need to include the <Position> and <Style> tags.


SliderControl:
--------------

SliderControls are used to control volume and seek position:

    <SliderControl Name="Volume">  

The Name can either be Volume or Seek. The SliderControl needs to 
define the <Info>, <Position>, and <ControlBitmap> tags. The only
bitmaps associated with a slider control are the bitmaps for the
thumb of the slider control. The actual frame of the control is part
of the background bitmap. The thumb bitmap is specified by the
<ControlBitmap> tag and has three states:

    Normal, MouseOver, and Disabled

VSliderControl:
--------------

VSliderControls are used to control volume and seek position. A VSlider
is arranged vertically, where a normal Slider is horizontal:

    <VSliderControl Name="Volume">  

The Name can either be Volume or Seek. The VSliderControl needs to 
define the <Info>, <Position>, and <ControlBitmap> tags. The only
bitmaps associated with a VSlidercontrol are the bitmaps for the
thumb of the slider control. The actual frame of the control is part
of the background bitmap. The thumb bitmap is specified by the
<ControlBitmap> tag and has three states:

    Normal, MouseOver, and Disabled

Info:
-----

The Info tag is used to give the user feedback about a control:

    <Info Desc="Stop the player" Tip="Stop"/>

The text contained in the Desc attribute is displayed in the Info
TextControl when the user moves the mouse over the control that
specifies the Info tag. And, once we get tooltips implemented,
the Tip attribute will define the text shown in the tooltip when
the mouse hovers over a button.

For a MultiStateControl, set Desc and Tip attribute strings for each of
the states can be seperated by '||'. The play/pause button <Info>
tag looks like this:

    <Info Desc="Play the current track||Pause the current track" 
          Tip="Play||Pause"/>

If the Desc and Tip attributes are not seperated by '||' then the
entire Desc and Tip attribute text will be shown for all states of the
button.
          

Position:
---------

The position tag includes the Rect attribute to indicate where the
control should be placed on the background bitmap:

    <Position Rect="202,122,234,155"/>

The coordinates specified in the Rect attribute are in background bitmap
coordinates. In the example above, the button will be placed 202 
pixels to the right of the left edge of the control bitmap and
122 pixels below the top edge of the control bitmap.

In beta 4, the theme designer should also be able to specify a Pos
instead of a Rect, and the size of the button will be determined
from the information given in the ControlBitmap tag.


ControlBitmap:
--------------

The ControlBitmap tag specifies the bitmap to use for a control:

    <ControlBitmap Rect="237,148,288,163" Name="Buttons"/>
    
The coordinates specified in the Rect attribute are in "Buttons" bitmap
coordinates. In the above case, the control bitmap starts 237 pixels
to the right of the left edge of the Buttons bitmap, and 148 pixels
below the top edge of the Buttons bitmap.

The x2 and y2 coordinates of the control bitmap depend on how many 
'frames' the control expects in the ControlBitmap. For instance, the 
regular ButtonControl has 4 frames (Normal, MouseOver, Pressed and 
Disabled) and the ControlBitmap for a ButtonControl should be 4 times as 
wide as the specified Rect from the Position tag.

For instance:

    <Position Rect="182,100,246,115"/>
    <ControlBitmap Rect="0,203,259,218" Name="Buttons"/>

The Position Rect specifies a rectangular region that is 65 pixels
wide and 16 pixels high. (Remember that Rects are x2,y2 inclusive,
which means that you need to calculate the width like: w = x2 - x1 + 1.
Same goes for height)

Therefore the ControlBitmap needs to 65 * 4 = 260 pixels wide,
and 16 pixels high. If the control bitmap starts at 0,203 then you
arrive at: Rect="0,203,259,218"

For a SliderControl and VSliderControl thumb, you will need 3 frames. 
For a MultiStateControl you will need the ControlBitmap to be 4 frames 
wide and n frames high where n is the value defined by the NumStates 
attribute. State 0 will be in the first row of bitmaps, state 1 in 
the second row and so on.

Style:
------

The Style tag is used to define the style of a TextControl:

   <Style Align="Left" Font="Serif" Bold="Yes" Color="#FF00FF"/>

The Style tag must define the Font attribute which identifies 
the font (defined by the <Font> tag) to use. The Style tag may
also have an Align (Left, Center, Right), a Bold (Yes, No),
a Italic (Yes, No), an Underline (Yes, No) attribute, and a Color
tag that uses #RRGGBB colors in hex just like HTML does. Only the 
Font attribute is required, the others are optional.


ChangeWindow:
-------------

A ChangeWindow tag is used to specify that a button should change
the theme to a different window layout:

   <ChangeWindow Window="WindowShade">
   
The Window attribute defines which layout to activate when the user
clicks on this button. This layout must be defined in the current
theme.
   

ThemeInfo:
----------

The ThemeInfo tag allows the theme designers to give the theme a
name and to give themselves some credit. Pressing 'C' in the theme
ui or clicking on the Credits button brings up the credits in the
Title TextControl:

   <ThemeInfo Name="FreeAmp Theme" Author="Bill Bull & Robert Kaye" 
              EMail="info@freeamp.org" WebPage="http://www.freeamp.org"
              Misc="Based on artwork made from scanning my butt"/>

The Name attribute is the name of the theme, and the Author attribute
is the name of the Author(s). The EMail and WebPage attributes are
for authors to let the theme users know where to contact them and
which web page may have more info about the author/theme. The Misc
field is for whatever miscellaneous credit information you'd like to
include. Only the Name attribute is required.


Headlines: (Added for 2.0.2, updated for 2.0.5)
----------

FreeAmp now has the capabilities to download headlines from popular
websites such as Slashdot. The Headlines tag defines where to download
the headlines and what data to display:

<Headlines URL="http://www.slashdot.org/slashdot.xml"
           XMLPath="/backslash/story/title"
           XMLURLPath="/backslash/story/url"
		   DownloadInterval="3600"
		   ChangeInterval="10"/>

This Headlines tag shows the headlines from Slashdot in the 'HeadlineInfo'
TextField. The URL attribute specifies the HTTP location of the XML document 
that contains the headlines. This currently only works with XML documents
retrieved via HTTP! The XMLPath attribute defines which text fields to show 
as headlines. In this case each <title> tag that is nested inside of a 
<story> tag, which is in turn nested inside a <backslash> tag will be 
considered a headline. The XMLURLPath attribute defines which XML fields are 
URLs associated with the headlines. There must be an XMLURLPath field for 
every headline, otherwise the headline URLs will not function. For example, 
examine the following XML example:

    <?xml version="1.0"?><backslash
    xmlns:backslash="http://slashdot.org/backslash.dtd">
 
    <story>
       <title>Final Fantasy Movie Trailers</title>
       <url>http://slashdot.org/articles/00/03/07/0058211.shtml</url>

Given the above Headlines tag, it will show 'Final Fantasy Move Trailers'
in the HeadlineInfo field and if the user clicks on that text field,
FreeAmp will open a browser to http://slashdot.org/articles/00... 

The DownloadInterval attribute detemines how often the headlines should be 
downloaded, and the ChangeInterval attribute determines how quickly FreeAmp 
should flip through the headlines. Both intervals are specified in seconds, 
and in the example above, the headlines are grabbed once an hour and each 
headline is displayed for 10 seconds. All attributes except XMLURLPath 
are required.

The headlines are actually displayed in a TextField called HeadlineInfo.


QUICK REFERENCE

<Bitmap>
   -- specifies a bitmap for use in the theme
   
   Attributes:   

   Name -- The name of the bitmap as referenced by other controls
   File -- The file where this bitmap can be found
   TransColor -- An HTML color specification for use as the transparent color  
   
   Subtags:
   
   None.

<Font>

   -- specifies a font for use in the theme
   
   Attributes:   

   Name -- The name of the bitmap as referenced by other controls
   Face -- A comma separated list of font faces to use
   File -- The filename of the font to load from the theme package [optional]

   Subtags:
   
   None.

<Window>

   -- specifies a window layout.
   
   Attributes:
   
   Name -- The name of the window. Each theme must define a 'MainWindow'.

   Subtags:
   
   <BackgroundBitmap> (required)
   <Controls> (required)

<BackgroundBitmap>

   -- specifies which bitmap to use as the background bitmap
   
   Attributes:
   
   Name -- The name of the bitmap to use for the background
   Rect -- The which section of the bitmap to use as the background
   
   Subtags:
   
   None.
   

<Controls>
   
   -- specifies which controls to place in the window
   
   Attributes:
   
   None.
   
   Subtags:

   <MultiStateControl>
   <ButtonControl>
   <TextControl>
   <SliderControl>
   <VSliderControl>

   
<ButtonControl>

   -- specifies a name button control
   
   Attributes:
   
   Name -- the name of the control. See Appendix A for a list of
           possible control names.
   URL -- For the 'Logo' button only. This specifies the web page to
          go to if the user clicks on the button. Defaults to 
          http://www.freeamp.org if not specified.        

   Subtags:
   
   <Info> (required)
   <Position> (required)
   <ControlBitmap> (required) 

<TextControl>

   -- specifies a text display area
   
   Attributes:
   
   Name -- the name of the control. See Appendix A for a list of
           possible control names.

   Subtags:

   <Position> (required)
   <Style> (required) 

<SliderControl>

   -- specifies a slider control
   
   Attributes:
   
   Name -- the name of the control. See Appendix A for a list of
           possible control names.

   Subtags:

   <Info> (required)
   <Position> (required)
   <ControlBitmap> (required) 

<VSliderControl>

   -- specifies a vertical slider control
   
   Attributes:
   
   Name -- the name of the control. See Appendix A for a list of
           possible control names.

   Subtags:

   <Info> (required)
   <Position> (required)
   <ControlBitmap> (required) 

<Info>

   -- specifies textual information for this control such as the
      description and the tooltip.   

   Attributes:
   
   Desc -- the text displayed in the Info TextControl when the user
           moves the mouse over the control.
   Tip -- The tooltip text to display when the user places the mouse
          over the control. (Not currently implemented) [optional]
          
   Subtags:
   
   None.
   
<Position>

   -- specifies the location of the control on the window
   
   Attributes:
   
   Rect -- the location where the control should appear
   
   Subtags:
   
   None.
   
<ControlBitmap>

   -- specifies the source bitmap and source locations for a control
   
   Attributes:
   
   Rect -- the location where the multi-frame bitmap is located
   Name -- the name of the bitmap to take the bitmaps from
   
   Subtags:
   
   None.
  
<Style>

   -- specifies the font and font style for a TextControl
   
   Attributes:
   
   Font -- The name of the font to be used in this control 
   Align -- The text alignment within the control (Left, Center, Right) [optional]     
   Bold -- Show text in boldface (Yes, No) [optional]
   Italic -- Show text in italics (Yes, No) [optional]
   Underline -- Show text underlined (Yes, No) [optional]
   Color -- Show the text in the given color (#RRGGBB) [optional]

<ThemeInfo>

   -- specifies the credits for this theme
   
   Attributes:
   
   Name -- The name of the theme
   Author -- The name(s) of the theme author(s) [optional]
   EMail -- The email address of the theme author(s) [optional]
   WebPage -- The Web page associated with the author(s)/theme. [optional]


<Headlines>

   -- specified a what to display in the HeadlineInfo text field.
   
   URL -- The HTTP location where the XML headline document can be found.
   XMLPath -- The XML location where headlines can be found.
   XMLURLPath -- The XML location where headline URLs can be found.	[optional]
   DownloadInterval -- How frequently to download new headlines (seconds)
   ChangeInterval -- How frequently to show a new headline (seconds)

      

Troubleshooting:

Q: When I move the mouse over a button the button moves slightly.
   What's up with that?
   
A: The Rect specified in the ControlBitmap tag is of a different size
   than the Rect specified in the Position tag.

Q: Why does it hurt when I pee?

A: http://www.emusic.com/artists/48/


APPENDIX A


Available Control Names

MultiStateControls:

PlayPause     -- Play/Pause button
PlayStop      -- Play/Stop button
Repeat        -- Repeat None/Repeat One/Repeat All
Shuffle       -- Normal/Shuffle mode
MPause        -- Multistate Pause button. State 0 is shown when the player
                 is not paused, and state 1 is shown when the player is
				 paused to give the user visual feedback that the player is
				 paused.

ButtonControls:

Play          -- The play button that gets disabled during playback
Pause         -- The pause button that gets disabled during non playback
Stop          -- stop playing
Prev          -- go to previous track
Next          -- go to next track
Quit          -- quit the player
MyMusic       -- open musicbrowser
Options       -- open options dialog
Download      -- open the download manager
Logo          -- FreeAmp logo, clicking it will open a web browser to 
                 the FreeAmp site.
Minimize      -- Minimizes FreeAmp
ReloadTheme   -- Reload the current theme
Credits       -- Shows the theme credits in the title field
Help          -- Show the FreeAmp help files.
Files         -- Allows the user to select a file to play.

TextControls:

Title         -- The song title text area
Info          -- The area where button info and status messages get displayed
StreamInfo    -- Shows the bitrate, sample rate and stereo mode for the
                 current mp3.
BufferInfo    -- The input and output buffer states (for streaming only)
Time          -- The time display (use '@' key to test the size of the field)
TimeRemaining -- The time display used when in TimeRemaining mode 
        
SliderControls,VSliderControls:        
        
Volume        -- adjusts the volume
Seek          -- seek in a track

   
APPENDIX B

This is the current Emusic theme.xml file:

<Bitmap Name="Background" File="background.bmp" TransColor="#FF0000"/>
<Bitmap Name="Buttons" File="buttons.bmp" TransColor="#FF0000"/>
<Font Name="Main" File="verdana.ttf" Face="Verdana"/>

<ThemeInfo Name="EMusic Theme" Author="Bill Bull, Robert Kaye & Mark B. Elrod " 
           EMail="info@freeamp.org" WebPage="http://www.emusic.com"/>

<Window Name="MainWindow">
    <BackgroundBitmap Name="Background" Rect="0, 0, 327, 161"/>
    <Controls>
        <ButtonControl Name="Logo" URL="http://www.emusic.com">
        	<Info Desc="Go to the EMusic web site" Tip="EMusic"/>
            <Position Pos="17,126"/>
            <ControlBitmap Rect="0,236,327,260" Name="Buttons"/>
        </ButtonControl>
        <MultiStateControl Name="PlayStop" NumStates="2">
        	<Info Desc="Play the current track||Stop the current track" Tip="Play||Stop"/>
            <Position Pos="228,124"/>
            <ControlBitmap Rect="0,96,119,159" Name="Buttons"/>
        </MultiStateControl>
        <MultiStateControl Name="MPause" NumStates="2">
        	<Info Desc="Pause the current track||Continue playing" 
        	            Tip="Pause||Continue"/>
            <Position Pos="258,124"/>
            <ControlBitmap Rect="0,282,119,345" Name="Buttons"/>
        </ButtonControl>
        <ButtonControl Name="Prev">
        	<Info Desc="Move to previous track" Tip="Previous"/>
            <Position Pos="198,124"/>
            <ControlBitmap Rect="0,0,119,31" Name="Buttons"/>
        </ButtonControl>
        <ButtonControl Name="Next">
        	<Info Desc="Move to next track" Tip="Next"/>
            <Position Pos="287,124"/>
            <ControlBitmap Rect="0,32,119,63" Name="Buttons"/>
        </ButtonControl>	
        <ButtonControl Name="Quit">
        	<Info Desc="Quit EMusic" Tip="Quit"/>
            <Position Rect="303,0,315,15"/>
            <ControlBitmap Rect="212,264,263,272" Name="Buttons"/>
        </ButtonControl>
        <ButtonControl Name="Minimize">
        	<Info Desc="Minimize EMusic" Tip="Minimize"/>
            <Position Rect="289,0,301,15"/>
            <ControlBitmap Rect="159,264,210,272" Name="Buttons"/>
        </ButtonControl>
        <ButtonControl Name="Help">
        	<Info Desc="View EMusic help" Tip="Help"/>
            <Position Rect="275,0,287,15"/>
            <ControlBitmap Rect="106,264,157,272" Name="Buttons"/>
        </ButtonControl>
        <ButtonControl Name="ReloadTheme">
        	<Info Desc="Reload current theme" Tip="Reload theme"/>
            <Position Rect="12,0,24,15"/>
            <ControlBitmap Rect="53,264,104,272" Name="Buttons"/>
        </ButtonControl>
        <!--ButtonControl Name="WindowShade"!>
        	<!--Info Desc="Change to windowshade" Tip="Windowshade"/!>
            <!--Position Rect="269,4,280,13"/!>
            <!--ControlBitmap Rect="0,264,51,272" Name="Buttons"/!>
            <!--ChangeWindow Window="WindowShade"/!>
        <!--/ButtonControl!>
        <ButtonControl Name="MyMusic">
        	<Info Desc="Browse my music collection" Tip="MyMusic"/>
            <Position Pos="44,102"/>
            <ControlBitmap Rect="0,172,291,186" Name="Buttons"/>
        </ButtonControl>
        <ButtonControl Name="Options">
        	<Info Desc="Open the options window" Tip="Options"/>
            <Position Pos="119,102"/>
            <ControlBitmap Rect="0,188,263,202" Name="Buttons"/>
        </ButtonControl>
        <ButtonControl Name="Download">
        	<Info Desc="Open the download manager" Tip="Download"/>
            <Position Pos="187,102"/>
            <ControlBitmap Rect="0,204,303,218" Name="Buttons"/>
        </ButtonControl>
        <ButtonControl Name="Files">
        	<Info Desc="Open files/playlists to play" Tip="Files"/>
            <Position Pos="265,102"/>
            <ControlBitmap Rect="0,220,207,234" Name="Buttons"/>
        </ButtonControl>
        <MultiStateControl Name="Repeat" NumStates="3">
        	<Info Desc="Repeat no tracks||Repeat current track||Repeat all tracks" 
                  Tip="Repeat none||Repeat current||Repeat all"/>
            <Position Pos="151,126"/>
            <ControlBitmap Rect="123,11,286,85" Name="Buttons"/>
        </MultiStateControl>
        <MultiStateControl Name="Shuffle" NumStates="2">
        	<Info Desc="Play tracks in normal order||Play tracks in random order" Tip="Normal Play||Random Play"/>
            <Position Pos="109,126"/>
            <ControlBitmap Rect="123,87,286,136" Name="Buttons"/>
        </MultiStateControl>
        <TextControl Name="Title">
            <Position Rect="9,21,317,38"/>
            <Style Align="Left" Font="Main" Bold="Yes"/>
        </TextControl>
        <TextControl Name="Info">
            <Position Rect="9,53,179,67"/>
            <Style Font="Main"/>
        </TextControl>	 
        <TextControl Name="StreamInfo">
            <Position Rect="9,40,210,52"/>
            <Style Font="Main"/>
        </TextControl>
        <TextControl Name="Time">
        	   <Info Desc="Current time/time remaining"/>
            <Position Rect="210,41,317,67"/>
            <Style Font="Main" Align="Right" Bold="Yes"/>
        </TextControl>
        <TextControl Name="TimeRemaining">
        	   <Info Desc="Time remaining/Current Time"/>
            <Position Rect="210,41,317,67"/>
            <Style Font="Main" Align="Right" Bold="Yes" Color="#666666"/>
        </TextControl>
        <SliderControl Name="Volume">  
        	   <Info Desc="Change volume" Tip="Volume"/>
            <Position Rect="37,80,117,88"/>
            <ControlBitmap Rect="136,0,183,8" Name="Buttons"/>
        </SliderControl>
        <SliderControl Name="Seek">
        	<Info Desc="Seek in the current track" Tip="Seek"/>
            <Position Rect="151,80,308,88"/>
            <ControlBitmap Rect="136,0,183,8" Name="Buttons"/>
        </SliderControl>
    </Controls>
</Window>            
