<?xml version="1.0" ?>

<!-- ========================================================== 
  ==  Style sheet for rendering line chart bussines graphics ==
  == ======================================================= -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns:svg="http://www.w3.org/2000/svg" >

  <!-- ======== outer  shell and structure ===== -->
  <xsl:template match="/">        
   <svg  xmlns:svg="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" 
         xmlns:link="http://www.w3.org/1999/xlink"
         viewBox="0 0 700 550"
         xmlns:a="http://www.adobe.com/svg10-extensions"
         a:timeline="independent"
   >
    <svg:defs>
      <!-- basic effects -->

      <linearGradient id="two_hues">
        <stop offset="0%" style="stop-color:#eeeeee;"/>
        <stop offset="40%" style="stop-color:#fefefe;"/>
        <stop offset="100%" style="stop-color:#ffffff;"/>
      </linearGradient>

      <filter y="0" x="0" id="shadow_filter">
        <feGaussianBlur stdDeviation="5"/>
        <feOffset dy="4" dx="4"/>
      </filter>

      <filter id="DropShadowFilter" filterUnits="objectBoundingBox" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="1.5" result="BlurAlpha"/>
        <feOffset in="BlurAlpha" dx="2" dy="2" result="OffsetBlurAlpha"/>
        <feMerge>
          <feMergeNode in="OffsetBlurAlpha"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
      <!-- end basic effects -->

      <!-- element icons -->

      <symbol id="linegraph">
        <xsl:call-template name="chart"/>
      </symbol>

    </svg:defs>


    <!-- the chart -->
    <title>Naturals</title>
    <desc>frequencies in scales</desc>
    <svg:use xlink:href="#linegraph"        width="700" height="550" x="0"   y="0" />
    <svg:text text-anchor="start" x="50" y="5" style='font: 4pt Arial'>xml-xsl-svg by Sat&#305;lm&#305;&#351; Yayla</svg:text>
   </svg>
  </xsl:template>



  <!-- ======== chart content ===== -->
  <xsl:template name="chart">

       <xsl:variable name="max_fr_value">
         <xsl:for-each select="//ses[hsp='0/0']">
           <xsl:sort select="fr" data-type="number" order="descending"/>
           <xsl:if test="position() = 1">
             <xsl:value-of select="fr"/>
           </xsl:if>
         </xsl:for-each>
       </xsl:variable>

       <xsl:variable name="min_fr_value">
         <xsl:for-each select="//ses[hsp='0/0']">
           <xsl:sort select="fr" data-type="number" order="ascending"/>
           <xsl:if test="position() = 1">
             <xsl:value-of select="fr"/>
           </xsl:if>
         </xsl:for-each>
       </xsl:variable>

       <xsl:variable name="graphheight" select="number(500)"/>

       <xsl:variable name="ypixs" select="number(10)"/>

     <path style="stroke-width:2; stroke:black; fill:none;fill-opacity:1" d="M 50 250 L 650 250"/>

     <g id="53temperescale">
       <xsl:for-each select="//ses[hsp='53']">

         <xsl:variable name="toright">
           <xsl:value-of select="( 50 + ((fr - $min_fr_value)*600 ) div ($max_fr_value - $min_fr_value) )"/>
         </xsl:variable>

         <svg:path id="$toright" fill="none" style="opacity:0.4;stroke:#00FF00">
           <xsl:attribute name="d">M <xsl:value-of select="$toright"/> 155 v99</xsl:attribute>
         </svg:path>

         <svg:text text-anchor="begin" y="150" style='font: 10pt Arial; writing-mode: tb-rl; color: #00FF00;'>
           <xsl:attribute name="x"><xsl:value-of select="-5+$toright"/></xsl:attribute>
               M<xsl:value-of select="fr"/><xsl:if test="ad!=''">(<xsl:value-of select="ad"/>)</xsl:if>
         </svg:text>

       </xsl:for-each>
     </g>
     <g id="12temperescale">
       <xsl:for-each select="//ses[hsp='12']">

         <xsl:variable name="toright">
           <xsl:value-of select="( 50 + ((fr - $min_fr_value)*600 ) div ($max_fr_value - $min_fr_value) )"/>
         </xsl:variable>

         <svg:path id="$toright" fill="none" style="opacity:0.4;stroke:#0000FF">
           <xsl:attribute name="d">M <xsl:value-of select="$toright"/> 245 v99</xsl:attribute>
         </svg:path>

         <svg:text text-anchor="begin" y="260" style='font: 10pt Arial; writing-mode: tb-rl; color: #0000FF;'>
           <xsl:attribute name="x"><xsl:value-of select="-5+$toright"/></xsl:attribute>
               W<xsl:value-of select="fr"/><xsl:if test="ad!=''">(<xsl:value-of select="ad"/>)</xsl:if>
         </svg:text>

       </xsl:for-each>
     </g>
     <g id="naturalscale">
       <xsl:for-each select="//ses[uc!='']">

         <xsl:variable name="toright">
           <xsl:value-of select="( 50 + ((fr - $min_fr_value)*600 ) div ($max_fr_value - $min_fr_value) )"/>
         </xsl:variable>

         <svg:path id="$toright" fill="none" style="opacity:0.4;stroke:#FF0000">
           <xsl:attribute name="d">M <xsl:value-of select="$toright"/> 245 v198</xsl:attribute>
         </svg:path>

         <svg:text text-anchor="begin" y="360" style='font: 10pt Arial; writing-mode: tb-rl; color: #FF0000;'>
           <xsl:attribute name="x"><xsl:value-of select="-5+$toright"/></xsl:attribute>
               N<xsl:value-of select="fr"/><xsl:if test="ad!=''">(<xsl:value-of select="ad"/>)</xsl:if>
         </svg:text>

       </xsl:for-each>
     </g>
     <g id="ratiosimplicity">
     <path style="stroke-width:3;fill:none;opacity:0.4;stroke:#00FFFF">
         <xsl:attribute name="d">
             <xsl:for-each select="//ses[uc!='']">
                <xsl:sort select="fr" data-type="number" order="ascending"/>
                <xsl:variable name="toright">
                  <xsl:value-of select="( 50 + ((fr - $min_fr_value)*600 ) div ($max_fr_value - $min_fr_value) )"/>
                </xsl:variable>
                <xsl:variable name="iki"><xsl:value-of select="iki"/></xsl:variable>
                <xsl:variable name="uc"><xsl:value-of select="uc"/></xsl:variable>
                <xsl:variable name="toup">
                  <xsl:value-of select="floor(500 - ((50 - $iki - $uc) * 10))"/>
                </xsl:variable>
                <xsl:if test="position() = 1"
                  >  M </xsl:if
                ><xsl:if test="position() != 1"
                  >  L </xsl:if
                ><xsl:value-of select="$toright"
                />,<xsl:value-of select="$toup"
                /><!--xsl:value-of select="floor($graphheight - ((50 - $iki - $uc) div $ypixs))"
                /-->
             </xsl:for-each>
         </xsl:attribute>
      </path>
     </g>


     <path style="stroke-width:2; stroke:#000000; fill:none;fill-opacity:1" d="M 50 455 L 150 455"/>
     <svg:text text-anchor="start" x="160" y="460" style='font: 10pt Arial'>
         bir oktavlik frekans cizgisi,  frequency interval covering 1 octave
     </svg:text>

     <path style="stroke-width:1; stroke:#FF0000; fill:none;fill-opacity:1" d="M 50 475 L 150 475"/>
     <svg:text text-anchor="start" x="160" y="480" style='font: 10pt Arial'>
         Dogal frekanslar,  frequencies corresponding to natural ratios
     </svg:text>

     <path style="stroke-width:1; stroke:#0000FF; fill:none;fill-opacity:1" d="M 50 495 L 150 495"/>
     <svg:text text-anchor="start" x="160" y="500" style='font: 10pt Arial'>
         Bati frekanslari,  frequency corresponding to western ratios (12 tempere system)
     </svg:text>

     <path style="stroke-width:1; stroke:#00FF00; fill:none;fill-opacity:1" d="M 50 515 L 150 515"/>
     <svg:text text-anchor="start" x="160" y="520" style='font: 10pt Arial'>
         Orta dogu frekanslari,  frequencies corresponding to middle eastern ratios (53 ts)
     </svg:text>

     <path style="stroke-width:2; stroke:#00FFFF; fill:none;fill-opacity:1" d="M 50 535 L 150 535"/>
     <svg:text text-anchor="start" x="160" y="540" style='font: 10pt Arial'>
         kulaga hos gelis egrisi, a crude function of simplicity/beauty for natural ratios
     </svg:text>

     <svg:text text-anchor="start" x="150" y="30" style='opacity:0.4; font: 16pt Arial'>
         Natural vs 53 + 12 Tempere intervals
     </svg:text>

     <svg:text text-anchor="start" x="190" y="50" style='opacity:0.4; font: 10pt Arial'>
         ctrl-click to zoom, alt-drag to move the graphic
     </svg:text>


  </xsl:template>


</xsl:stylesheet>








