<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" 
  xmlns:java="http://xml.apache.org/xslt/java"
  exclude-result-prefixes="java">

  <xsl:include href="libpage.xsl"/>
  <xsl:include href="libremote.xsl"/>

  <xsl:param name="user"/>
  <!-- used to control rendering -->
  <xsl:param name="render"/>
  <!-- styles in include in csv format -->
  <xsl:param name="styles"/>
  
  <xsl:output method="html" indent="yes"/>
  
  <xsl:template match="/">
    <xsl:param name="helpCtx"/>
    <html>
      <head>
        <xsl:call-template name="page.nocache"/>
        <xsl:call-template name="page.title"/>        
        <xsl:call-template name="page.styles"/>
        <xsl:call-template name="page.scripts"/>
        <xsl:call-template name="head"/>
        <script language="javascript" src="/js/org.benow.util.Util.js">;</script>
      </head>

      <xsl:variable name="bodyStyle"><xsl:value-of select="java:get($render,'bodyStyle')"/></xsl:variable>
      <body onLoad="doOnLoad()">
        <xsl:if test="$bodyStyle!=''"><xsl:attribute name="style"><xsl:value-of select="$bodyStyle"/></xsl:attribute></xsl:if>
        <xsl:variable name="hideHeader"><xsl:value-of select="contains($render,'supressHeader')"/></xsl:variable>
        
        
        <!--
        Render: <xsl:value-of select="$render"/><p/>
        Hide: <xsl:value-of select="$hideHeader"/><p/>
          -->
        <xsl:if test="$hideHeader='false'">
          <script>
          function toggleMainOperations() {
            var op=document.getElementById('mainOperations');
            var opArrow=document.getElementById('mainOpArrow');
            if (op.style.display=='none') {
              op.style.display='';
              opArrow.src='/images/icons/down.png';
            } else {
              opArrow.src='/images/icons/right.png';
              op.style.display='none';
            }
          }
          </script>
          <xsl:variable name="videoSel"><xsl:if test="contains(*/@url,'video/')">_sel</xsl:if></xsl:variable>
          <xsl:variable name="tvSel"><xsl:if test="contains(*/@url,'listings.page') or contains(*/@url,'airing.page')  or contains(*/@url,'watching.page') or contains(*/@url,'programme.page')">_sel</xsl:if></xsl:variable>
          <xsl:variable name="fileSel"><xsl:if test="contains(*/@url,'torrent')">_sel</xsl:if></xsl:variable>
          <xsl:variable name="musicSel"><xsl:if test="contains(*/@url,'music/')">_sel</xsl:if></xsl:variable>
          <xsl:variable name="npSel"><xsl:if test="contains(*/@url,'current.page')">_sel</xsl:if></xsl:variable>
          <div id="header">
            <xsl:if test="java:xsl.XSLUtil.exists('/images/logo.png')">
            <a href="/"><img id="logo" src="/images/logo.png" border="0"/></a>
            </xsl:if>
            <ol id="ipodmenu">
            <xsl:choose>
              <xsl:when test="$tvSel='_sel'">
                <li><a href="/listings.page"><img border="0" src="/images/ipod/tv{$tvSel}.png"/></a></li>
                <xsl:if test="java:ca.reachable.tv.web.remote.RemoteControlServiceImpl.hasNowPlayingItems()">
                <li><a href="/remote/current.page"><img border="0" src="/images/ipod/nowplaying{$npSel}.png"/></a></li>
                </xsl:if>
                <li><a onClick="toggleRemote()"><img border="0" src="/images/ipod/remote.png" id="remoteImg"/></a></li>
                <li>
                  <a onclick="toggleMainOperations()"><img id="mainOpArrow" style="padding-top: 10px" src="/images/icons/right.png"/></a>
                </li>
              </xsl:when>
              <xsl:when test="$fileSel='_sel'">
                <li><a href="/torrent/find.page"><img style="padding-top: 10px" src="/images/ipod/folder{$fileSel}.png"/></a></li>
                <li><a href="/torrent/find.page"><img border="0" src="/images/icons/bittorrent-med.png"/></a></li>
                <li><a href="/transmission/" target="_torrent"><img border="0" src="/images/icons/transmission_icon-30x30.png"/></a></li>
                <li>
                  <a onclick="toggleMainOperations()"><img id="mainOpArrow" style="padding-top: 10px" src="/images/icons/right.png"/></a>
                </li>
              </xsl:when>
              <xsl:when test="$videoSel='_sel'">
                <li>
                  <a href="/video/index.page"><img border="0" src="/images/ipod/video{$videoSel}.png"/></a>
                </li>
                <li>
                  <a onclick="toggleMainOperations()"><img id="mainOpArrow" style="padding-top: 10px" src="/images/icons/right.png"/></a>
                </li>
              </xsl:when>
              <xsl:when test="$musicSel='_sel'">
                <li><a href="/music/index.page"><img border="0" src="/images/ipod/music{$musicSel}.png"/></a></li>
                <li>
                  <a onclick="toggleMainOperations()"><img id="mainOpArrow" style="padding-top: 10px" src="/images/icons/right.png"/></a>
                </li>
              </xsl:when>
              <xsl:otherwise>
                <li><a href="/listings.page"><img border="0" src="/images/ipod/tv.png"/></a></li>
                <li><a href="/torrent/find.page"><img style="padding-top: 10px" src="/images/ipod/folder{$tvSel}.png"/></a></li>
                <li>
                  <a href="/video/index.page"><img border="0" src="/images/ipod/video{$videoSel}.png"/></a>
                </li>
              </xsl:otherwise>
            </xsl:choose>
            </ol>
                <!-- 
            <xsl:call-template name="page.menu"/>
            <xsl:call-template name="page.tools">
              <xsl:with-param name="helpCtx">
                <xsl:value-of select="$helpCtx"/>
              </xsl:with-param>
            </xsl:call-template>
             -->
          </div>
          <xsl:call-template name="page.helptip"/>
          <div id="mainOperations" style="display: none" onclick="toggleMainOperations()">
            <xsl:choose>
              <xsl:when test="$tvSel='_sel'">
                <a href="/video/index.page"><img border="0" src="/images/ipod/video{$videoSel}.png"/></a>
                <a href="/torrent/find.page"><img style="padding-top: 10px" src="/images/ipod/folder.png"/></a>
                <a href="/music/index.page"><img border="0" src="/images/ipod/music{$musicSel}.png"/></a>
              </xsl:when>
              <xsl:when test="$fileSel='_sel'">
                <a href="/listings.page"><img border="0" src="/images/ipod/tv{$tvSel}.png"/></a>
                <a href="/video/index.page"><img border="0" src="/images/ipod/video{$videoSel}.png"/></a>
                <a href="/music/index.page"><img border="0" src="/images/ipod/music{$musicSel}.png"/></a>
              </xsl:when>
              <xsl:when test="$videoSel='_sel'">
                <a href="/listings.page"><img border="0" src="/images/ipod/tv{$tvSel}.png"/></a>
                <a href="/torrent/find.page"><img style="padding-top: 10px" src="/images/ipod/folder{$tvSel}.png"/></a>
                <a href="/music/index.page"><img border="0" src="/images/ipod/music{$musicSel}.png"/></a>
              </xsl:when>
              <xsl:when test="$musicSel='_sel'">
                <a href="/listings.page"><img border="0" src="/images/ipod/tv{$tvSel}.png"/></a>
                <a href="/video/index.page"><img border="0" src="/images/ipod/video{$videoSel}.png"/></a>
                <a href="/torrent/find.page"><img style="padding-top: 10px" src="/images/ipod/folder{$tvSel}.png"/></a>
              </xsl:when>
              <xsl:otherwise>
                <a href="/video/index.page"><img border="0" src="/images/ipod/video{$videoSel}.png"/></a>
              </xsl:otherwise>
            </xsl:choose>
          </div>
        </xsl:if>
        
        <xsl:call-template name="page.test"/>
       <span id="loading" style="display: none"><xsl:text>&#160;</xsl:text></span>
        
        <xsl:call-template name="remote.dump"/>
        
        <div>
          <xsl:if test="$hideHeader='false'"><xsl:attribute name="id">content</xsl:attribute></xsl:if>
          <!-- result of dynamic processing is inserted at page comment -->
          <xsl:comment>page</xsl:comment>
        </div>
        <script>
          var e=document.getElementById('content');
          if (e)
            util_attachEvent(e,'click',remoteBodyToggle);
        </script>
      </body>
    </html>
  </xsl:template>
  
  <xsl:template name="head">
        
        <!-- 
          iPod meta tags
          see: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/ 
        -->
        <!-- show fullscreen -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=false"/>
        <!-- icon when site bookmarked to desktop --> 
        <link rel="apple-touch-icon" href="/images/ipod.png" />
        
  <script>
function updateOrientation()
{
  var orientation=window.orientation;
  switch(orientation)
  {
    case 0:
    case 180:
      document.body.style.className="portrait";
      document.body.style.height='440px';
      break;  

    case 90:
    case -90: 
      document.body.style.className="landscape";
      break;
  }

}

function doOnLoad() {
  updateOrientation();
  setTimeout(function(){
    if (scrollPos()==0)
      window.scrollTo(0, 1);
  },100);
}

function scrollPos() {
  var scrollTop = document.body.scrollTop;
  if (scrollTop == 0) {
    if (window.pageYOffset)
      scrollTop = window.pageYOffset;
    else
      scrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
  }
  return scrollTop;  
}
  </script>        
  </xsl:template>
  
  
</xsl:stylesheet>





