<?xml version="1.0"?>

<?xml-stylesheet href="pagman.css" type="text/css"?> 

<window id="main" align="center" valign="middle" autostretch="never" xmlns:html="http://www.w3.org/TR/REC-html40"
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	onload="onWindowLoad()"> 

<vbox>

<!--
   This is our layout. 
   1) create a stack. Stack just place each child on top of each other.
   2) inside the stack add the grid this will be our map.
   3) place a bulletin board on top it will contain all our sprites.
   4) place the ghosts inside our bulletin board.
-->

<stack>
  <grid>
    <columns>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
  	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
	   <column/>
    </columns>

    <rows>
        <row>
			<image class="upper-left-corner"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
 			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/> 
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/> 
			<image class="horizontal-wall"/> 
			<image class="horizontal-wall"/> 
			<image class="upper-right-corner"/> 
        </row>

        <row>
            <image class="vertical-wall" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
			<image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
			<image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="vertical-wall" />

        </row>

        <row>
            <image class="vertical-wall" />
            <image class="dot" />
            <image class="upper-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="upper-right-corner" />
            <image class="dot" />
            <image class="upper-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="upper-right-corner" />
            <image class="dot" />
            <image class="upper-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="upper-right-corner" />
            <image class="dot" />
            <image class="upper-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="upper-right-corner" />
            <image class="dot" />
            <image class="vertical-wall" />

   
        </row>

        <row>
            <image class="vertical-wall" />
            <image class="power-up" />
            <image class="vertical-wall" />
            <image class="blank" />
            <image class="blank" />
            <image class="vertical-wall" />
            <image class="power-up" />
            <image class="vertical-wall" />
            <image class="blank" />
            <image class="blank" />
            <image class="vertical-wall" />
            <image class="power-up" />
            <image class="vertical-wall" />
            <image class="blank" />
            <image class="blank" />
            <image class="vertical-wall" />
            <image class="power-up" />
            <image class="vertical-wall" />
            <image class="blank" />
            <image class="blank" />
            <image class="vertical-wall" />  
            <image class="power-up" />
            <image class="vertical-wall" />

        </row>

        <row>
            <image class="vertical-wall" />
            <image class="dot" />
            <image class="lower-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="lower-right-corner" />
            <image class="dot" />
            <image class="lower-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="lower-right-corner" />
            <image class="dot" />
            <image class="lower-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="lower-right-corner" />
            <image class="dot" />
            <image class="lower-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="lower-right-corner" />
            <image class="dot" />
            <image class="vertical-wall" />

        </row>
		 <row>
            <image class="vertical-wall" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
			<image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
			<image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="vertical-wall" />

        </row>

        <row>
            <image class="vertical-wall" />
            <image class="dot" />
            <image class="upper-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="upper-right-corner" />
            <image class="dot" />
            <image class="upper-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="upper-right-corner" />
            <image class="dot" />
            <image class="upper-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="upper-right-corner" />
            <image class="dot" />
            <image class="upper-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="upper-right-corner" />
            <image class="dot" />
            <image class="vertical-wall" />

        </row>

        <row>
            <image class="vertical-wall" />
            <image class="power-up" />
            <image class="vertical-wall" />
            <image class="blank" />
            <image class="blank" />
            <image class="vertical-wall" />
            <image class="power-up" />
            <image class="vertical-wall" />
            <image class="blank" />
            <image class="blank" />
            <image class="vertical-wall" />
            <image class="power-up" />
            <image class="vertical-wall" />
            <image class="blank" />
            <image class="blank" />
            <image class="vertical-wall" />
            <image class="power-up" />
            <image class="vertical-wall" />
            <image class="blank" />
            <image class="blank" />
            <image class="vertical-wall" />
            <image class="power-up" />
            <image class="vertical-wall" />

        </row>

        <row>
            <image class="vertical-wall" />
            <image class="dot" />
            <image class="lower-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="lower-right-corner" />
            <image class="dot" />
            <image class="lower-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="lower-right-corner" />
            <image class="dot" />
            <image class="lower-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="lower-right-corner" />
            <image class="dot" />
            <image class="lower-left-corner" />
            <image class="horizontal-wall" />
            <image class="horizontal-wall" />
            <image class="lower-right-corner" />
            <image class="dot" />
            <image class="vertical-wall" />
        </row>

		 <row>
            <image class="vertical-wall" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
			<image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
			<image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="dot" />
            <image class="vertical-wall" />
        </row>

        <row>
			<image class="lower-left-corner"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
	    	<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/> 
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
 			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/>
			<image class="horizontal-wall"/> 
			<image class="horizontal-wall"/> 
			<image class="horizontal-wall"/> 
			<image class="lower-right-corner"/> 
		</row>
	  </rows>
   </grid>

   <bulletinboard>
       <image class="ghost" id="pink-ghost" hidden="true"/>
       <image class="ghost" id="red-ghost"  hidden="true"/>
       <image class="ghost" id="green-ghost"  hidden="true"/>
       <image class="ghost" id="yellow-ghost"  hidden="true"/>
   </bulletinboard>	

  </stack>

</vbox>

</window>