<?xml version='1.0'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


  <!--
    In case you're wondering what you're looking at:

      This is the transformation sheet that converts
      the Codingdomain XML page sources to the online XHTML output.

    This is done by running "make" in the htdocs root folder.
    All pages will be parsed by "xsltproc" and the result
    is visible online. The final markup is applied with CSS.
  -->



  <!-- imports -->
  <xsl:import href="include/breadcrumb.xsl"/>
  <xsl:import href="include/forms.xsl"/>
  <xsl:import href="include/menubar.xsl"/>
  <xsl:import href="include/generate-sitemap.xsl"/>



  <!-- configure output -->
  <xsl:output method="xml" indent="yes" encoding="utf-8"
              omit-xml-declaration="yes"
              doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
              doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" />
  <xsl:preserve-space elements="pre,textarea"/>
  <!-- <xsl:strip-space elements="*"/> -->



  <!-- read external script parameters -->
  <xsl:param name="date" select=" 'unknown' "  />
  <xsl:param name="path" select=" '/' " />



  <!-- internal variables -->
  <xsl:variable name="template-name" select="  'Codingdomain XSLT template'  " />



  <!-- Page structure -->

  <!--
    All pages use the <page> root tag.
    It defines the common root structure, menu and sidebars.
    The site logo is displayed as background of the <h1> tag.
    The root structure should be written as:
     <page>
       <meta>
         <title>Page title</title>
       </meta>

       <section>
         ..
       </section>
       <section>
         ..
       </section>
     </page>
  -->
  <xsl:template match="/page">
    <html lang="en" xml:lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="imagetoolbar" content="no"/> <!-- hide IE image toolbars -->
        <title>Codingdomain.com: <xsl:value-of select="meta/title"/></title>

        <meta name="author" content="{meta/author}"/>
        <meta name="rating" content="general"/>
        <meta name="generator" content="{$template-name}, {$date}, libxml xslt processor"/>
        <xsl:if test="/meta/noindex">
          <meta name="robots" content="noindex,nofollow"/>
        </xsl:if>

        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="start" href="/" />
        <link rel="author" href="/about/" />
        <link rel="stylesheet" type="text/css" href="/resources/css/codingdomain.css" media="all" />
        <script type="text/javascript" src="/resources/js/jquery-1.4.2.min.js" />
        <script type="text/javascript" src="/resources/js/codingdomain.js" />
<xsl:comment>
   This page was generated with the libxml xslt processor.

     Date:         <xsl:value-of select="$date"/> 
     Source file:  <xsl:value-of select="$path"/>/index.xml
     Template:     resources/xsl/kmess.xsl

</xsl:comment>
      </head>

      <body>
        <h1>Codingdomain.com</h1>
        <xsl:call-template name="menubar">
          <xsl:with-param name="path" select="$path"/>
        </xsl:call-template>
        <div id="content">
          <h2><xsl:value-of select="meta/title"/></h2>
          <xsl:if test="not(/meta/noindex)">
            <xsl:call-template name="breadcrumb">
              <xsl:with-param name="path" select="$path"/>
            </xsl:call-template>
          </xsl:if>
          <xsl:apply-templates select="meta/icon"/>

          <xsl:apply-templates select="section"/>

          <xsl:call-template name="disquscomments" />
          <xsl:call-template name="showfootnotes" />
          <br/>
        </div>

        <xsl:call-template name="googleanalytics" />
      </body>
    </html>
  </xsl:template>

<!--
        <div id="browsernote">
          This site will work and look better in a browser that
          supports <a href="http://www.getfirefox.com" title="Firefox web browser.">web standards</a>,
          but it is accessible to any browser or Internet device.
        </div>
-->

  <xsl:template match="/page/meta/icon">
    <div class="pageicon"><img class="icon" src="{@src}" width="{@width}" height="{@height}" alt=""/></div>
  </xsl:template>



  <!-- Section, title, par -->

  <!--
    The <section> tag is the common container for all content.
    You can add title,par,list,toc,shell tags into it.

     <section>
       <title>title1</title>
       <par>
         Text paragraph..
       </par>

       <title>title2</title>
       <par>
         more text
       </par>
     </section>
  -->
  <xsl:template match="section">
    <div class="section">
      <xsl:apply-templates/>
    </div>
  </xsl:template>


  <!--
    The <title> tag should be used in each <section>
    It can be used multiple times to add new titles
    without ending the section.
  -->
  <xsl:template match="section/title">
    <h3><xsl:value-of select="."/></h3>
  </xsl:template>

  <xsl:template match="section/subtitle">
    <h4><xsl:value-of select="."/></h4>
  </xsl:template>



  <!--
    The <par> tag holds one paragraph of text.
    Because of XHTML restrictions, you cannot
    place block elements in a paragaph.
    Add them to the <section> tag directly.
  -->
  <xsl:template match="section/par">
    <p>
      <xsl:apply-templates/>
    </p>
  </xsl:template>

  <xsl:template match="sidenote/par">
    <p>
      <xsl:apply-templates/>
    </p>
  </xsl:template>

  <xsl:template match="panel/par">
    <p>
      <xsl:apply-templates/>
    </p>
  </xsl:template>



  <!-- bullet lists -->

  <!--
    Bullet lists can be created with:
    <list>
      <item>item1</item>
      <item>item2</item>
      <item>itemN</item>
    </list>
  -->
  <xsl:template match="list">
    <ul>
      <xsl:if test="@class"><xsl:attribute name="class"><xsl:value-of select="@class"/></xsl:attribute></xsl:if>
      <xsl:apply-templates select="item"/>
    </ul>
  </xsl:template>

  <xsl:template match="list/item">
    <li class="bullet"><xsl:apply-templates/></li>
  </xsl:template>
  

  <xsl:template match="steps">
    <ol class="steps">
      <xsl:apply-templates select="step"/>
    </ol>
  </xsl:template>

  <xsl:template match="steps/step">
    <li>
      <dl class="stepitem">
        <dt><xsl:value-of select="@title"/></dt>
        <dd><xsl:apply-templates/></dd>
      </dl>  
    </li>
  </xsl:template>



  <!-- links -->

  <!--
    The link tag can be written as:
    1. <link>http://www.google.com/</link>
    2. <link href="http://www.google.com/">Google</link>
  -->
  <xsl:template match="link">
    <xsl:choose>
      <!-- two formats (from gentoo.org) -->
      <xsl:when test="@href">
        <!-- 1. <link href="...">test</link> -->
        <a href="{@href}"><xsl:apply-templates/></a>
      </xsl:when>
      <xsl:otherwise>
        <!-- 2. <link>...</link> -->
        <xsl:variable name="loc" select="."/>
        <a href="{$loc}"><xsl:apply-templates/></a>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>



  <!-- images -->

  <!--
    The image tag can be written as:
    1. <image src="test.gif" width="1" height="1" alt="" />
    2. <image src="test.gif" width="1" height="1" alt="">A caption</image>

    You can also specify a "largesrc" attribute, it will
    make the image clickable, and adds a "zoom icon to the caption.

    The "float" attribute will either float the image left or right.
  -->
  <xsl:template match="image">
    <span>
      <!-- optional float attribute -->
      <xsl:attribute name="class">
        <xsl:choose>
          <xsl:when test="@float">
            <xsl:value-of select="concat('image_box_',@float,' image_box')"/>
          </xsl:when>
          <xsl:otherwise>
            <xsl:value-of select="'image_box'"/>
          </xsl:otherwise>
        </xsl:choose>
      </xsl:attribute>
      <!-- image block -->
      <span class="image_main">
        <xsl:choose>
          <xsl:when test="@largesrc">
            <a href="{@largesrc}"><img src="{@src}" width="{@width}" height="{@height}" alt="{@alt}"/></a>
          </xsl:when>
          <xsl:otherwise>
            <img src="{@src}" width="{@width}" height="{@height}" alt="{@alt}"/>
          </xsl:otherwise>
        </xsl:choose>
      </span>
      <!-- add caption below -->
      <xsl:if test="text()">
        <span class="image_caption">
          <xsl:apply-templates/>
          <!-- Add zoom icon -->
          <xsl:if test="@largesrc">
            <a class="zoomlink" href="{@largesrc}"><img src="/resources/icons/zoom.png" width="16" height="16" alt="(zoom)" class="zoomicon"/></a>
          </xsl:if>
        </span>
      </xsl:if>
    </span>
  </xsl:template>



  <!-- table of contents -->

  <!--
    The <toc> tag is suitable to display a list of
    titles with descriptions (table-of-contents)
    It's written as:

    <toc>
      <item>
        <title>The title</title>
        <url>The url, is optional</title>
        <icon width="x" height="y">An icon, this is optional</icon>
        <description>
          A description of the item.
          Multiple description tags are supported
        </description>
      </item>
      <item>
        ..
      </item>
    </toc>
  -->
  <xsl:template match="section/toc">
    <dl class="clearfix">
      <xsl:attribute name="class">
        <xsl:text>toc</xsl:text>
        <xsl:if test="@class"><xsl:text> </xsl:text><xsl:value-of select="@class" /></xsl:if>
      </xsl:attribute>
      <xsl:apply-templates select="item"/>
    </dl>
  </xsl:template>

  <xsl:template match="toc/item">
    <dt>
      <!-- add the icon if there is one -->
      <xsl:if test="icon">
        <xsl:choose>
          <xsl:when test="url">
            <a>
              <xsl:attribute name="href">
                <xsl:apply-templates select="url"/>
              </xsl:attribute>
              <img class="toc_icon" src="{icon}" width="{icon/@width}" height="{icon/@height}" alt="" />
            </a>
          </xsl:when>
          <xsl:otherwise>
            <img class="toc_icon" src="{icon}" width="{icon/@width}" height="{icon/@height}" alt="" />
          </xsl:otherwise>
        </xsl:choose>
      </xsl:if>

      <!-- add the normal title -->
      <span class="toc_title">
        <xsl:choose>
          <xsl:when test="url">
            <a>
              <xsl:attribute name="href">
                <xsl:apply-templates select="url"/>
              </xsl:attribute>
              <xsl:apply-templates select="title"/>
            </a>
          </xsl:when>
          <xsl:otherwise>
            <xsl:apply-templates select="title"/>
          </xsl:otherwise>
        </xsl:choose>
      </span>
    </dt>
    <!-- TODO: short tag, but this is optional -->
    <xsl:apply-templates select="description"/>
  </xsl:template>

  <xsl:template match="item/description">
    <dd>
      <!-- find out what the class should be -->
      <xsl:variable name="class">
        <xsl:if test="../icon">with_icon</xsl:if>
        <xsl:if test="count(following-sibling::item/description) = 0"> last_description</xsl:if>
      </xsl:variable>

      <!-- add class if it's filled in -->
      <xsl:if test="normalize-space($class) != ''">
        <xsl:attribute name="class">
          <xsl:value-of select="normalize-space($class)"/>
        </xsl:attribute>
      </xsl:if>

      <!-- add contents -->
      <xsl:apply-templates/>
    </dd>
  </xsl:template>



  <!-- tabbar component -->

  <xsl:template match="tabbar">
    <div class="tabbar">
      <div class="tabtitles">
        <xsl:for-each select="panel">
          <div class="tabtitle">
            <xsl:choose>
              <xsl:when test="@icon"><a href="#tab-{@id}"><xsl:attribute name="class">tabtitle-icon<xsl:if test="position()=1"> tabtitle-active</xsl:if></xsl:attribute><img src="{@icon}" width="48" height="48" alt="{@title}" /></a></xsl:when>
              <xsl:otherwise><a href="#tab-{@id}"><xsl:attribute name="class">tabtitle-text<xsl:if test="position()=1"> tabtitle-active</xsl:if></xsl:attribute><xsl:value-of select="@title" /></a></xsl:otherwise>
            </xsl:choose>
          </div>
        </xsl:for-each>
      </div>
      <div class="tabpanels">
        <xsl:for-each select="panel">
        <div id="tab-{@id}">
          <xsl:attribute name="class">tabpanel<xsl:if test="position()=1"> tabpanel-active</xsl:if></xsl:attribute>
          <h4 class="nojs"><xsl:value-of select="@title"/></h4>
          <xsl:apply-templates/>
        </div>
        </xsl:for-each>
      </div>
    </div>
  </xsl:template>


  <!-- small blocks -->

  <xsl:template match="block">
    <blockquote class="block">
      <xsl:apply-templates/>
    </blockquote>
  </xsl:template>

  <xsl:template match="quote">
    <blockquote class="quote">
      <xsl:apply-templates/>
    </blockquote>
  </xsl:template>



  <!-- small font styles -->

  <xsl:template match="hint">
    <span class="hint"><xsl:value-of select="."/></span>
  </xsl:template>
  
  <xsl:template match="key">
    <b><xsl:apply-templates/></b>
  </xsl:template>
  
  <xsl:template match="code">
    <code class="code"><xsl:apply-templates/></code>
  </xsl:template>
  
  <xsl:template match="command">
    <tt class="command"><xsl:apply-templates/></tt>
  </xsl:template>

  <xsl:template match="argument">
    <code class="argument"><xsl:apply-templates/></code>
  </xsl:template>

  <xsl:template match="variable">
    <var class="variable"><xsl:value-of select="."/></var>
  </xsl:template>

  <xsl:template match="comment">
    <code class="comment"><xsl:apply-templates/></code>
  </xsl:template>

  <xsl:template match="character">
    <var class="character">(one character)</var>
  </xsl:template>

  <xsl:template match="number">
    <var class="number">number</var>
  </xsl:template>

  <xsl:template match="file">
    <code class="file"><xsl:value-of select="."/></code>
  </xsl:template>

  <xsl:template match="message">
    <span class="message"><xsl:value-of select="."/></span>
  </xsl:template>



  <!-- code and emphasized blocks -->

  <!--
    The <shell> tag should be used to display 
    commands in a monospaced font. Place it directly
    in the <section> tag (due XHTML restrictions).
    Example:
    <shell
>command1
command2</shell>
  -->
  <xsl:template match="shell">
    <xsl:choose>
      <xsl:when test="@title">
        <dl class="shell">
          <dt><em><xsl:value-of select="@title"/>:</em></dt>
          <dd><pre><xsl:apply-templates/></pre></dd>
        </dl>
      </xsl:when>
      <xsl:otherwise>
        <div class="shell"><pre><xsl:apply-templates/></pre></div>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>

  <xsl:template match="config">
    <dl class="config">
      <dt><em>
        <xsl:if test="@title"><xsl:value-of select="@title"/>: </xsl:if>
        <xsl:if test="@file"><span class="file"><xsl:value-of select="@file"/></span></xsl:if>
      </em></dt>
      <dd><pre><xsl:apply-templates/></pre></dd>
    </dl>
  </xsl:template>

  <xsl:template match="important">
    <dl class="important">
      <dt><em>Just to let you know...</em></dt>
      <dd><table><tr>
        <td><img src="/resources/icons/important.png" width="48" height="48" alt=""/></td>
        <td><xsl:apply-templates/></td>
      </tr></table></dd>
    </dl>
  </xsl:template>

  <xsl:template match="note">
    <dl class="note">
      <dt><xsl:value-of select="@title"/></dt>
      <dd>
        <xsl:apply-templates/>
      </dd>
    </dl>
  </xsl:template>

  <xsl:template match="sidenote">
    <dl class="sidenote">
      <dt><xsl:value-of select="@title"/></dt>
      <dd>
        <xsl:apply-templates/>
      </dd>
    </dl>
  </xsl:template>



  <!-- table tags -->

  <xsl:template match="table">
    <table class="tabular">
      <xsl:if test="header">
      <thead>
        <tr>
          <xsl:apply-templates select="header/cell" />
        </tr>
      </thead>
      </xsl:if>
      <tbody>
        <xsl:apply-templates select="row" />
      </tbody>
    </table>
  </xsl:template>

  <xsl:template match="header/cell">
    <th><xsl:apply-templates/></th>
  </xsl:template>

  <xsl:template match="table/row">
    <tr>
      <xsl:apply-templates select="cell"/>
    </tr>
  </xsl:template>

  <xsl:template match="row/cell">
    <td><xsl:apply-templates/></td>
  </xsl:template>



  <!-- special tags -->

  <!--
    The <html> tag is an ugly solution to add raw HTML code.
    Use <html><b>test</b></html> for example.
  -->
  <xsl:template match="html">
    <xsl:copy-of select="*|comment()|text()" /><!-- primitive solution, but it works. -->
  </xsl:template>


  <xsl:template match="sitemap">
    <xsl:call-template name="generate-sitemap" />
  </xsl:template>


  <!--
    Footnotes become a special section at the end.
  -->
  <xsl:template name="showfootnotes">
    <xsl:if test="footnote">
      <div class="footnotes">
        <h2>Footnotes</h2>
        <p><xsl:apply-templates select="footnote" /></p>
      </div>
    </xsl:if>
  </xsl:template>



  <!--
    Disqus comments
  -->
  <xsl:template name="disquscomments">
    <xsl:if test="not(/page//toc) or contains($path, '/')">
      <div id="disqus_thread"></div>
      <script type="text/javascript">
          var disqus_shortname = 'codingdomain';
          var disqus_identifier = '<xsl:value-of select="$path" />';
          var disqus_url = 'http://www.codingdomain.com/<xsl:value-of select="$path" />/';
          (function() {
              var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
              dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
              (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
          })();
      </script>
      <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
      <p id="disqus-powered"><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a></p>
    </xsl:if>
  </xsl:template>


  <!--
    Google Analytics
  -->
  <xsl:template name="googleanalytics">
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-25383750-2']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </xsl:template>


  <!-- Page formatting hacks -->

  <!--
    The <newline/> tag should be avoided when possible,
    but it's available if you really need it.
  -->
  <xsl:template match="newline"><br/></xsl:template> 


  <!--
    The clear tag to put the next elements below all floats.
  -->
  <xsl:template match="clearfix"><div class="clearfix"><xsl:apply-templates/></div></xsl:template>



  <!-- backwards compatibility -->

  <xsl:template match="oldpage">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Coding Domain: <xsl:value-of select="title" /></title>
        <meta http-equiv="Refresh" content="5; url={newurl}" />
        <style type="text/css"> @import "/resources/css/codingdomain.css"; </style>
      </head>

      <body>
        <h1>Codingdomain.com</h1>
        <xsl:call-template name="menubar">
          <xsl:with-param name="path" select="$path"/>
        </xsl:call-template>
        <div id="content">
          <h2><xsl:value-of select="title"/></h2>

          <h3>This page has moved</h3>
          <div class="section clearfix">
            <p>
              This page has moved to a 
              <a target="_top" href="{newurl}">new location</a>.
            </p>
            <p>
              Please update your bookmarks.
            </p>
          </div>
        </div>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>
