<!-- Simple Tutorial Skin - Relativepos.xml file  -->
<!-- Advanced topic: Relative position.  -->
<!-- Created by Ken Chen for the official Winamp3 skinning site. -->

<!-- Element definition -->
<elements>
  <bitmap id="blue" file="player/blue-vis-layer.png" gammagroup="Backgrounds"/>
  <bitmap id="red" file="player/red-vis-layer.png" gammagroup="Backgrounds"/>
</elements>

<!-- Group Definition 1: X&Y Coordinate; -->
<groupdef id="relativepos1" register_autopopup="1" name="RPos 1: X and Y Coord">
  <layer id="vis.blue"
    x="20" y="30" 
	ghost="1" 
	image="blue"
  />
</groupdef>

<!-- Group Definition 2: Specify the Height and Width -->
<groupdef id="relativepos2" register_autopopup="1" name="RPos 2: Height and Width">
  <layer id="vis.blue"
    x="20" y="30" 
	h="100" w="200"
	ghost="1" 
	image="blue"
  />
</groupdef>

<!-- Group Definition 3: RelatX & Negative X Coordinate -->
<groupdef id="relativepos3" register_autopopup="1" name="RPos 3: Neg X">
  <layer id="vis.blue"
    x="-120" y="30" 
	relatx="1"
	ghost="1" 
	image="blue"
  />
</groupdef>

<!-- Group Definition 4: RelatY & Negative Y Coordinate -->
<groupdef id="relativepos4" register_autopopup="1" name="RPos 4: Neg Y">
  <layer id="vis.blue"
    x="20" y="-80" 
	relaty="1"
	ghost="1" 
	image="blue"
  />
</groupdef>

<!-- Group Definition 5: Relatw and RelatH -->
<!-- a. Group Definition: inside blue squre-->
<groupdef id="relativepos.blue" name="RPos: blue">
  <layer id="vis.blue"
    x="0" y="0" 
	h="0" w="0"
	relath="1"	relatw="1"
	ghost="1" 
	image="blue"
  />
</groupdef>

<!-- b. Group Definition: Outside red squre containing blue square-->
 <groupdef id="relativepos.red" register_autopopup="1" name="RPos 5: RelatW and RelatH">
  <layer id="vis.red"
    x="0" y="0" 
	h="0" w="0"
	relath="1"	relatw="1"
	ghost="1" 
	image="red"
  />
  <group id="relativepos.blue"  x="10" y="10" w="-50" h="-50" relatw="1" relath="1"/>
</groupdef>