<!-- 
            Copyright: Copyright 1998-2005  W3C (MIT, ERCIM, Keio), All Rights Reserved.
See http://www.w3.org/Consortium/Legal/.
Author: Aaron M. Cohen   
         File Name: layout-hierarchical2.smil
  Media Components: 2 JPG
 Expected Behavior: Tests hierarchical layout with topLayout element.
                    show smile and frown for 10s, begin at the same time, smile will obscure frown,
                      frown will be clipped on its right at the level as the right smile edge.
                    show nothing for 2s.
                    show smile and then 1s later, frown for 10s, obscurring smile, 
		      the both smile and frown will be clipped on their right 
                    show nothing for 2s.
                    show smil for 10s, frown is obscurred, smile will be clipped on its right 
-->
<smil xmlns="http://www.w3.org/2005/SMIL21/Language">
    <head>
        <layout>
           <topLayout width="640px" height="480px">
               <region id="whole" top="0px" left="0px" width="640px" 
                                            height="480px" z-index="5"/>
               <region id="right" top="0px" left="0px" width="320px"
                                            height="480px" z-index="4">
                   <region id="inset" top="140px" left="80" width="400px" 
                                            height="400px" z-index="6"/>
                   <region id="inset2" top="140px" left="80" width="400px" 
                                            height="400px" z-index="6"/>
                   <region id="inset3" top="140px" left="80" width="400px" 
                                            height="400px" z-index="7"/>
               </region>
            </topLayout>
        </layout>
    </head>
    <body>
        <par>
            <seq>
                <par>
                        <img id="A" region="whole" src="../images/smile.jpg" dur="10s"/>
                        <img id="B" region="inset" src="../images/frown.jpg" dur="10s"/>
                </par>
                <par dur="2s"></par>
                <par>
                        <img id="D" region="inset2" src="../images/frown.jpg" begin="1s" dur="10s"/>
                        <img id="C" region="inset" src="../images/smile.jpg" begin="0s" dur="10s"/>
                </par>
                <par dur="2s"></par>
                <par>
                        <img id="E" region="inset2" src="../images/frown.jpg" dur="10s"/>
                        <img id="F" region="inset3" src="../images/smile.jpg" dur="10s"/>
                </par>
            </seq>
        </par>
    </body>
</smil>