<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
	<xsl:output method="xml" indent="yes"/>
	<xsl:template match="/*">
		<html>
			<head>
				<title>X-Smiles demos</title>
				<xsl:apply-templates select="script"/>
			<link rel="stylesheet" type="text/css" href="menu.css"/>
				<style type="text/css">
					body {padding-left:80px; font-family: arial,sans-serif; font-size: 12pt;}
					p.link {font-size: 10pt;margin-top: 3px; margin-bottom 0px; padding-left: 15px; padding-top: 0px; padding-bottom: 0px;; color:black;}
					p.link:hover {background-color:white;}
					div.section {background-color: #ddddee; border-width:2px; border-style:solid; margin-bottom: 10px; margin-right: 50px;}
					h1 {margin-top: 10px; margin-bottom: 5px;}
					h2 {margin-top: 0px;font-size: 14pt;align: center;background-color:blue; color:white; margin-bottom: 3px; padding-left: 5px;}
					a {text-decoration: none; }
                    p.mainimage {padding-left:00px;}
                    
                    /* these are just overrides to colors, the real logic is in menu.css */
                    div.menu * {font-size:9pt;font-family: arial,sans-serif;font-weight:bold;}
                    div.menu div.file  {position:absolute;top:50px;left:340px;}
                    div.menu label {position:relative;}

                    div.menu > ul ,div.menu > ul > li ,div.menu div.file, div.menu label {width:120pt;}
        			div.menu li:hover, div.menu li:hover li:hover, div.menu label {background-color:blue;color:white}
        			div.menu div, div.menu li:hover li,div.menu ul {color:black;background-color:#aaaaff;}
                    div.menu label {padding:3px;border-width:2px;border-color:black;border-style:solid;}
                    div.menu li {padding:1px;}
                    /*div.menu > div {border-style:solid;border-width:1px;border-color:black;}*/
                    div.menu > div > ul {border-width:2px;border-color:gray;border-style:solid;}
                    /*.animation * {display:none;}*/
                    div.animation {position:absolute;left:45px;top:50px;width:275px;height:50px;}
                    div.animation p{text-align:center;border-style:solid;background-color:#ddddff;color:#000077;;text-size:14px;font-style:italic;}
                    div.animation p.ad2 {background-color:#ffdddd;}
				</style>
              <time:time xmlns:time="http://www.x-smiles.org/2004/timesheet">
                <time:seq>
                      <time:item select="" dur="6s"/>
	                  <time:seq repeat="indefinite">
	                          <time:item select="#anim1" dur="3s"/>
	                          <time:item select="#anim2"  dur="3s"/>
    	                      <time:item select="#anim3"  dur="3s"/>
    	                      <time:item select="#anim4"  dur="3s"/>
                              <xsl:for-each select="//section">
			         	         <time:item select="{concat('#canim',position())}" dur="1200ms"/>
            		          </xsl:for-each>
    	                      <time:item select="#anim5"  dur="3s"/>
                              <xsl:for-each select="//section">
			         	         <time:item select="{concat('#canim',position())}" dur="200ms"/>
            		          </xsl:for-each>
    	                      <time:item select="#anim6"  dur="3s"/>
    	                      <time:item select="#empty"  dur="3s"/>
	                  </time:seq>                  
                 </time:seq>                  
              </time:time>
<!--
<script type="text/javascript">
function addapplet()
{
	var ns = "http://www.w3.org/1999/xhtml";
	//set div visible if running in non-xsmiles browser
	if (navigator.appName.indexOf("smiles")==-1)
	{
		var div=document.getElementById("appletdiv");
		var h2=document.createElementNS(ns,"h2");
		h2.appendChild(document.createTextNode("An applet showing this page in X-Smiles"));
		div.appendChild(h2);
		var applet=document.createElementNS(ns,"applet");
		applet.setAttribute("code","fi.hut.tml.xsmiles.gui.gui2.swing.XSmilesApplet");
		applet.setAttribute("width","800");
		applet.setAttribute("height","600");
		applet.setAttribute("codebase","http://sinex.tml.hut.fi/nightly/applet-swing");
		applet.setAttribute("archive","xsmiles-applet-swing.jar");
		var param=document.createElementNS(ns,"param");
		param.setAttribute("name","startpage");
		param.setAttribute("value","http://sinex.tml.hut.fi/nightly/demo/demos.xhtml");
		applet.appendChild(param);
		div.appendChild(applet);
	}
	
}
</script>
-->

			</head>
            <!--
			<body onload="addapplet()">
            -->
			<body>
				<p class="mainimage">
                    <a href="http://www.xsmiles.org">
					<img src="title.gif" alt="x-smiles"/>
                    </a>
				</p>
                <p id="empty" style="display:none!important;"></p>
                <div class="animation">
                    <p id="anim1" class="ad"><xsl:value-of select="//section[1]/@name"/></p>
                    <p id="anim2" class="ad">Making the Web as it should be.</p>
                    <p id="anim3" class="ad">With small steps...</p>
                    <p id="anim4" class="ad">We have demos about:</p>
                    <p id="anim5" class="ad">That was:</p>
                    <p id="anim6" class="ad">Got it?</p>
                                    <xsl:for-each select="//section">
                    <p id="{concat('canim',position())}" class="ad2">
							<xsl:value-of select="@name"/>
                        </p>
                        </xsl:for-each>
                </div>
                <xsl:call-template name="createmenu"/>
<div id="appletdiv"><!-- this element is set visible if running in non-xsmiles browser 
<h2>An applet showing this page in X-Smiles</h2><p> (does not work if Java Plugin is not installed)</p>
<applet code="fi.hut.tml.xsmiles.gui.gui2.swing.XSmilesApplet.class" width="800" height="600" 
archive="xsmiles-applet-swing.jar" codebase="http://sinex.tml.hut.fi/nightly/applet-swing">
	<param name="startpage" value="http://sinex.tml.hut.fi/nightly/demo/demos.xhtml"/>
</applet>
-->
</div>

<xsl:apply-templates select="section"/>
			</body>
		</html>
	</xsl:template>
	<xsl:template match="h1">
		<h1>
			<xsl:value-of select="."/>
		</h1>
	</xsl:template>
    <xsl:template name="createmenu">
        
        <div class="menu">
<div class="file">
    <label>Navigate</label>
    <ul>
     <xsl:for-each select="//section">
        <li><xsl:value-of select="@name"/> > 
            <ul>
		     <xsl:for-each select="link">
		        <li><a href="{@href}"><xsl:value-of select="@text"/></a></li> 
    		 </xsl:for-each>   
	                
            </ul>
            </li>
     </xsl:for-each>   
     </ul>
    <!--
<ul>
    <li>Item 1
        </li>
    <li>Item 2 >
    	   	<ul>
	    <li>Item 1.2</li>
	    <li>Item 1.3</li>
	</ul>
    	</li>
    <li>Item 3</li>
    <li>Item 6 >
     <ul>
	    <li>Item 6.2</li>
	</ul>
        
        </li>
    <li>Item 7</li>
</ul>
-->
</div>

    

</div> <!-- div class menu ends -->
        
        
        
        </xsl:template>
	<!-- *************** h2 *******************-->
	<xsl:template match="section">
	<div class="section">
		<h2>
			<xsl:value-of select="@name"/>
			
		</h2>
			<xsl:apply-templates select="link|para|p"/>
		</div>
	</xsl:template>
	<!-- *************** link *******************-->
	<xsl:template match="link">
		<p class="link">
			<a href="{@href}" style="color:black;">
				<xsl:value-of select="@text"/>
			</a>
		</p>
	</xsl:template>
	<!-- *************** para|p *******************-->
	<xsl:template match="para|p">
		<p>
			<xsl:value-of select="."/>
		</p>
	</xsl:template>
	<!-- *************** br *******************-->
	<xsl:template match="br">
		<p/>
	</xsl:template>
	<!-- *************** input *******************-->
	<xsl:template match="img">
		<img src="{@src}" alt=""/>
	</xsl:template>
	<!-- **** verbatim *****-->
	<xsl:template match="verb">
		<pre>
			<xsl:value-of select="."/>
		</pre>
	</xsl:template>
</xsl:stylesheet>

