samples/tutorial-complete.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:ns1="http://sozi.baierouge.fr"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="1052.3622"
   height="744.09448"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.1 r9760"
   sodipodi:docname="tutorial-complete.svg">
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.98994949"
     inkscape:cx="530.48492"
     inkscape:cy="377.20487"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1280"
     inkscape:window-height="951"
     inkscape:window-x="0"
     inkscape:window-y="24"
     inkscape:window-maximized="1" />
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(0,-308.2677)"
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Calque 1">
    <path
       sodipodi:nodetypes="zzsz"
       inkscape:connector-curvature="0"
       id="path3771"
       d="M 173.14125,586.51952 C 206.4339,550.0583 365.501,571.22123 370.71812,620.93004 375.93524,670.63884 258.87946,793.89559 203.10482,744.56609 148.93187,696.65318 139.8486,622.98074 173.14125,586.51952 z"
       style="fill:#ff6600;fill-opacity:1;stroke:none" />
    <path
       style="fill:#ddafe9;fill-opacity:1;stroke:none"
       d="m 217.38309,415.2988 c 28.47157,-2.47072 87.9016,68.90909 70.63251,92.11978 -17.26909,23.2107 -115.43735,29.79447 -119.84344,-13.07795 -4.27956,-41.64124 20.73936,-76.5711 49.21093,-79.04183 z"
       id="path3775"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="zzsz" />
    <path
       style="fill:#ffcc00;fill-opacity:1;stroke:none"
       d="M 319.77681,866.84905 C 298.37492,800.86951 434.69706,621.3215 499.02302,649.4754 c 64.32597,28.1539 133.54216,256.70485 34.56505,290.55323 -96.13475,32.87643 -192.40937,-7.20005 -213.81126,-73.17958 z"
       id="path3777"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="zzsz" />
    <path
       sodipodi:nodetypes="zzsz"
       inkscape:connector-curvature="0"
       id="path3779"
       d="M 834.28679,816.06853 C 754.45448,836.55725 551.63476,661.57982 589.79195,587.3827 627.94914,513.18557 904.12098,448.04711 936.92352,567.93424 968.78415,684.37855 914.1191,795.57982 834.28679,816.06853 z"
       style="fill:#00ccff;fill-opacity:1;stroke:none" />
    <text
       sodipodi:linespacing="125%"
       id="text3781"
       y="497.36218"
       x="204.43761"
       style="font-size:64.84471893px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif"
       xml:space="preserve"><tspan
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Arial;-inkscape-font-specification:Arial"
         y="497.36218"
         x="204.43761"
         id="tspan3783"
         sodipodi:role="line">1</tspan></text>
    <text
       transform="matrix(0.2957047,0.9552794,-0.9552794,0.2957047,0,0)"
       xml:space="preserve"
       style="font-size:119.58699799px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif"
       x="668.36047"
       y="-13.250226"
       id="text3785"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan3787"
         x="668.36047"
         y="-13.250226"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Arial;-inkscape-font-specification:Arial">2</tspan></text>
    <text
       sodipodi:linespacing="125%"
       id="text3789"
       y="710.74768"
       x="-733.38251"
       style="font-size:183.23104858px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif"
       xml:space="preserve"
       transform="matrix(0.23949193,-0.97089835,0.97089835,0.23949193,0,0)"><tspan
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Arial;-inkscape-font-specification:Arial"
         y="710.74768"
         x="-733.38251"
         id="tspan3791"
         sodipodi:role="line">3</tspan></text>
    <text
       transform="matrix(0.98592388,-0.16719483,0.16719483,0.98592388,0,0)"
       xml:space="preserve"
       style="font-size:253.0272522px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif"
       x="594.2533"
       y="865.38843"
       id="text3793"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan3795"
         x="594.2533"
         y="865.38843"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Arial;-inkscape-font-specification:Arial">4</tspan></text>
    <rect
       y="404.46347"
       x="154.0847"
       height="131.71077"
       width="151.41325"
       id="rect3816"
       style="fill:none;stroke:#008080;stroke-width:0.86066729" />
    <rect
       transform="matrix(0.30081542,0.95368238,-0.95368238,0.30081542,0,0)"
       style="fill:none;stroke:#008080;stroke-width:1.36297953"
       id="rect3818"
       width="206.65941"
       height="242.01266"
       x="596.55493"
       y="-179.76996" />
    <rect
       transform="matrix(0.19330938,-0.98113785,0.98113785,0.19330938,0,0)"
       style="fill:none;stroke:#008080;stroke-width:1.85312784"
       id="rect3822"
       width="340"
       height="323.63068"
       x="-865.36676"
       y="441.14532" />
    <rect
       transform="matrix(0.98690129,-0.16132525,0.16132525,0.98690129,0,0)"
       style="fill:none;stroke:#008080;stroke-width:2.38407278"
       id="rect3824"
       width="425.6615"
       height="359.492"
       x="450.34412"
       y="597.13953" />
  </g>
  <ns1:frame
     ns1:refid="rect3816"
     ns1:title="Purple"
     ns1:sequence="1"
     ns1:hide="true"
     ns1:timeout-enable="false"
     ns1:timeout-ms="5000"
     ns1:transition-duration-ms="1000"
     ns1:transition-profile="linear" />
  <ns1:frame
     ns1:refid="rect3818"
     ns1:title="Orange"
     ns1:sequence="2"
     ns1:hide="true"
     ns1:timeout-enable="false"
     ns1:timeout-ms="5000"
     ns1:transition-duration-ms="1000"
     ns1:transition-profile="linear" />
  <ns1:frame
     ns1:refid="rect3822"
     ns1:title="Yellow"
     ns1:sequence="3"
     ns1:hide="true"
     ns1:timeout-enable="false"
     ns1:timeout-ms="5000"
     ns1:transition-duration-ms="1000"
     ns1:transition-profile="linear" />
  <ns1:frame
     ns1:refid="rect3824"
     ns1:title="Blue"
     ns1:sequence="4"
     ns1:hide="true"
     ns1:timeout-enable="false"
     ns1:timeout-ms="5000"
     ns1:transition-duration-ms="1000"
     ns1:transition-profile="linear" />
  <script
     ns1:version="11.04-23131513"
     id="sozi-script">Function.prototype.bind=function(c){var a=Array.prototype.slice.call(arguments,1),b=this;return function(){b.apply(c,a.concat(Array.prototype.slice.call(arguments)))}};var sozi=sozi||{};sozi.Display=function(a){this.controller=a;this.cx=0;this.cy=0;this.width=1;this.height=1;this.rotate=0;this.clip=true};sozi.Display.prototype.svgNs=&quot;http://www.w3.org/2000/svg&quot;;sozi.Display.prototype.onLoad=function(){var b,a=document.createElementNS(this.svgNs,&quot;clipPath&quot;);this.svgRoot=document.documentElement;this.svgRoot.removeAttribute(&quot;viewBox&quot;);this.initialBBox=this.svgRoot.getBBox();this.wrapper=document.createElementNS(this.svgNs,&quot;g&quot;);this.wrapper.setAttribute(&quot;id&quot;,&quot;sozi-wrapper&quot;);while(true){b=this.svgRoot.firstChild;if(!b){break}this.svgRoot.removeChild(b);this.wrapper.appendChild(b)}this.svgRoot.appendChild(this.wrapper);this.clipRect=document.createElementNS(this.svgNs,&quot;rect&quot;);this.clipRect.setAttribute(&quot;id&quot;,&quot;sozi-clip-rect&quot;);a.setAttribute(&quot;id&quot;,&quot;sozi-clip-path&quot;);a.appendChild(this.clipRect);this.svgRoot.appendChild(a);this.svgRoot.setAttribute(&quot;clip-path&quot;,&quot;url(#sozi-clip-path)&quot;);this.svgRoot.setAttribute(&quot;width&quot;,window.innerWidth);this.svgRoot.setAttribute(&quot;height&quot;,window.innerHeight)};sozi.Display.prototype.resize=function(){this.svgRoot.setAttribute(&quot;width&quot;,window.innerWidth);this.svgRoot.setAttribute(&quot;height&quot;,window.innerHeight);this.update()};sozi.Display.prototype.getFrameGeometry=function(){var a={};a.scale=Math.min(window.innerWidth/this.width,window.innerHeight/this.height);a.width=this.width*a.scale;a.height=this.height*a.scale;a.x=(window.innerWidth-a.width)/2;a.y=(window.innerHeight-a.height)/2;return a};sozi.Display.prototype.getElementGeometry=function(d){var j,g,a,k,h,f,i=d.getCTM(),e=Math.sqrt(i.a*i.a+i.b*i.b);if(d.nodeName===&quot;rect&quot;){j=d.x.baseVal.value;g=d.y.baseVal.value;a=d.width.baseVal.value;k=d.height.baseVal.value}else{h=d.getBBox();j=h.x;g=h.y;a=h.width;k=h.height}f=document.documentElement.createSVGPoint();f.x=j+a/2;f.y=g+k/2;f=f.matrixTransform(i);return{cx:f.x,cy:f.y,width:a*e,height:k*e,rotate:Math.atan2(i.b,i.a)*180/Math.PI}};sozi.Display.prototype.getDocumentGeometry=function(){return{cx:this.initialBBox.x+this.initialBBox.width/2,cy:this.initialBBox.y+this.initialBBox.height/2,width:this.initialBBox.width,height:this.initialBBox.height,rotate:0,clip:false}};sozi.Display.prototype.getCurrentGeometry=function(){return{cx:this.cx,cy:this.cy,width:this.width,height:this.height,rotate:this.rotate,clip:this.clip}};sozi.Display.prototype.drag=function(b,a){var c=this.getFrameGeometry(),d=this.rotate*Math.PI/180;this.cx-=(b*Math.cos(d)-a*Math.sin(d))/c.scale;this.cy-=(b*Math.sin(d)+a*Math.cos(d))/c.scale;this.clip=false;if(this.tableOfContentsIsVisible()){this.hideTableOfContents()}this.update()};sozi.Display.prototype.update=function(){var a=this.getFrameGeometry(),c=-this.cx+this.width/2+a.x/a.scale,b=-this.cy+this.height/2+a.y/a.scale;this.wrapper.setAttribute(&quot;transform&quot;,&quot;scale(&quot;+a.scale+&quot;)translate(&quot;+c+&quot;,&quot;+b+&quot;)rotate(&quot;+(-this.rotate)+&quot;,&quot;+this.cx+&quot;,&quot;+this.cy+&quot;)&quot;);this.clipRect.setAttribute(&quot;x&quot;,this.clip?a.x:0);this.clipRect.setAttribute(&quot;y&quot;,this.clip?a.y:0);this.clipRect.setAttribute(&quot;width&quot;,this.clip?a.width:window.innerWidth);this.clipRect.setAttribute(&quot;height&quot;,this.clip?a.height:window.innerHeight)};sozi.Display.prototype.showFrame=function(b){var a;for(a in b.geometry){if(b.geometry.hasOwnProperty(a)){this[a]=b.geometry[a]}}this.update()};sozi.Display.prototype.applyZoomFactor=function(d,b,e){var c=(1-d)*(b-window.innerWidth/2),a=(1-d)*(e-window.innerHeight/2);this.width/=d;this.height/=d;this.drag(c,a)};sozi.Display.prototype.installTableOfContents=function(){var c=document.createElementNS(this.svgNs,&quot;rect&quot;),g=5,d=0,a=0,f,b,e;this.tocGroup=document.createElementNS(this.svgNs,&quot;g&quot;);this.tocGroup.setAttribute(&quot;id&quot;,&quot;sozi-toc&quot;);this.tocGroup.setAttribute(&quot;visibility&quot;,&quot;hidden&quot;);this.tocGroup.appendChild(c);this.svgRoot.appendChild(this.tocGroup);c.setAttribute(&quot;id&quot;,&quot;sozi-toc-background&quot;);c.setAttribute(&quot;x&quot;,g);c.setAttribute(&quot;y&quot;,g);c.setAttribute(&quot;rx&quot;,g);c.setAttribute(&quot;ry&quot;,g);c.addEventListener(&quot;mouseout&quot;,function(i){var h=i.relatedTarget;while(h!=this.tocGroup&amp;&amp;h!=this.svgRoot){h=h.parentNode}if(h==this.svgRoot){this.hideTableOfContents();this.controller.restart();i.stopPropagation()}}.bind(this),false);for(b=0;b&lt;this.controller.frames.length;b++){e=document.createElementNS(this.svgNs,&quot;text&quot;);e.appendChild(document.createTextNode(this.controller.frames[b].title));this.tocGroup.appendChild(e);f=e.getBBox().width;a+=e.getBBox().height;if(f&gt;d){d=f}e.setAttribute(&quot;x&quot;,2*g);e.setAttribute(&quot;y&quot;,a+g);e.addEventListener(&quot;click&quot;,function(i,h){this.controller.previewFrame(i);h.stopPropagation()}.bind(this,b),false)}c.setAttribute(&quot;width&quot;,d+2*g);c.setAttribute(&quot;height&quot;,a+2*g)};sozi.Display.prototype.showTableOfContents=function(){this.clipRect.setAttribute(&quot;x&quot;,0);this.clipRect.setAttribute(&quot;y&quot;,0);this.clipRect.setAttribute(&quot;width&quot;,window.innerWidth);this.clipRect.setAttribute(&quot;height&quot;,window.innerHeight);this.tocGroup.setAttribute(&quot;visibility&quot;,&quot;visible&quot;)};sozi.Display.prototype.hideTableOfContents=function(){var a=this.getFrameGeometry();this.tocGroup.setAttribute(&quot;visibility&quot;,&quot;hidden&quot;);this.clipRect.setAttribute(&quot;x&quot;,a.x);this.clipRect.setAttribute(&quot;y&quot;,a.y);this.clipRect.setAttribute(&quot;width&quot;,a.width);this.clipRect.setAttribute(&quot;height&quot;,a.height)};sozi.Display.prototype.tableOfContentsIsVisible=function(){return this.tocGroup.getAttribute(&quot;visibility&quot;)===&quot;visible&quot;};var sozi=sozi||{};sozi.Animator=function(b,a,c){this.timeStepMs=b||40;this.onStep=a;this.onDone=c;this.durationMs=0;this.data={};this.initialTime=0;this.started=false;this.timer=0};sozi.Animator.prototype.start=function(a,b){this.durationMs=a;this.data=b;this.initialTime=Date.now();this.onStep(0,this.data);if(!this.started){this.started=true;this.timer=window.setInterval(this.step.bind(this),this.timeStepMs)}};sozi.Animator.prototype.stop=function(){if(this.started){window.clearInterval(this.timer);this.started=false}};sozi.Animator.prototype.step=function(){var a=Date.now()-this.initialTime;if(a&gt;=this.durationMs){this.stop();this.onStep(1,this.data);this.onDone()}else{this.onStep(a/this.durationMs,this.data)}};var sozi=sozi||{};sozi.Player=function(){this.display=new sozi.Display(this,false);this.animator=new sozi.Animator(40,this.onAnimationStep.bind(this),this.onAnimationDone.bind(this));this.frames=[];this.playing=false;this.waiting=false;this.sourceFrameIndex=0;this.currentFrameIndex=0};sozi.Player.prototype.profiles={linear:function(a){return a},accelerate:function(a){return Math.pow(a,3)},&quot;strong-accelerate&quot;:function(a){return Math.pow(a,5)},decelerate:function(a){return 1-Math.pow(1-a,3)},&quot;strong-decelerate&quot;:function(a){return 1-Math.pow(1-a,5)},&quot;accelerate-decelerate&quot;:function(a){var b=a&lt;=0.5?a:1-a,c=Math.pow(2*b,3)/2;return a&lt;=0.5?c:1-c},&quot;strong-accelerate-decelerate&quot;:function(a){var b=a&lt;=0.5?a:1-a,c=Math.pow(2*b,5)/2;return a&lt;=0.5?c:1-c},&quot;decelerate-accelerate&quot;:function(a){var b=a&lt;=0.5?a:1-a,c=(1-Math.pow(1-2*b,2))/2;return a&lt;=0.5?c:1-c},&quot;strong-decelerate-accelerate&quot;:function(a){var b=a&lt;=0.5?a:1-a,c=(1-Math.pow(1-2*b,3))/2;return a&lt;=0.5?c:1-c}};sozi.Player.prototype.soziNs=&quot;http://sozi.baierouge.fr&quot;;sozi.Player.prototype.dragButton=1;sozi.Player.prototype.defaultDurationMs=500;sozi.Player.prototype.defaultZoomPercent=-10;sozi.Player.prototype.defaultProfile=sozi.Player.prototype.profiles.linear;sozi.Player.prototype.scaleFactor=1.05;sozi.Player.prototype.defaults={title:&quot;Untitled&quot;,sequence:&quot;0&quot;,hide:&quot;true&quot;,clip:&quot;true&quot;,&quot;timeout-enable&quot;:&quot;false&quot;,&quot;timeout-ms&quot;:&quot;5000&quot;,&quot;transition-duration-ms&quot;:&quot;1000&quot;,&quot;transition-zoom-percent&quot;:&quot;0&quot;,&quot;transition-profile&quot;:&quot;linear&quot;};sozi.Player.prototype.onLoad=function(){var a=this.onWheel.bind(this);this.display.onLoad();this.readFrames();this.display.installTableOfContents();this.startFromIndex(this.getFrameIndexFromURL());this.display.svgRoot.addEventListener(&quot;click&quot;,this.onClick.bind(this),false);this.display.svgRoot.addEventListener(&quot;mousedown&quot;,this.onMouseDown.bind(this),false);this.display.svgRoot.addEventListener(&quot;mouseup&quot;,this.onMouseUp.bind(this),false);this.display.svgRoot.addEventListener(&quot;mousemove&quot;,this.onMouseMove.bind(this),false);this.display.svgRoot.addEventListener(&quot;keypress&quot;,this.onKeyPress.bind(this),false);this.display.svgRoot.addEventListener(&quot;keydown&quot;,this.onKeyDown.bind(this),false);window.addEventListener(&quot;hashchange&quot;,this.onHashChange.bind(this),false);window.addEventListener(&quot;resize&quot;,this.display.resize.bind(this.display),false);this.display.svgRoot.addEventListener(&quot;DOMMouseScroll&quot;,a,false);window.onmousewheel=a;this.dragButtonIsDown=false};sozi.Player.prototype.onMouseDown=function(a){if(a.button===0){this.dragButtonIsDown=true;this.dragged=false;this.dragClientX=a.clientX;this.dragClientY=a.clientY}else{if(a.button===1){this.toggleTableOfContents()}}a.stopPropagation()};sozi.Player.prototype.onMouseMove=function(a){if(this.dragButtonIsDown){this.stop();this.dragged=true;this.display.drag(a.clientX-this.dragClientX,a.clientY-this.dragClientY);this.dragClientX=a.clientX;this.dragClientY=a.clientY}a.stopPropagation()};sozi.Player.prototype.onMouseUp=function(a){if(a.button===0){this.dragButtonIsDown=false}a.stopPropagation()};sozi.Player.prototype.onClick=function(a){if(!this.dragged){this.moveToNext()}a.stopPropagation()};sozi.Player.prototype.onWheel=function(a){var b=0;if(!a){a=window.event}if(a.wheelDelta){b=a.wheelDelta;if(window.opera){b=-b}}else{if(a.detail){b=-a.detail}}if(b!==0){this.zoom(b,a.clientX,a.clientY)}a.stopPropagation();a.preventDefault()};sozi.Player.prototype.onKeyPress=function(a){switch(a.charCode){case 43:this.zoom(1,window.innerWidth/2,window.innerHeight/2);break;case 45:this.zoom(-1,window.innerWidth/2,window.innerHeight/2);break;case 61:this.moveToCurrent();break;case 70:case 102:this.showAll();break;case 84:case 116:this.toggleTableOfContents()}a.stopPropagation()};sozi.Player.prototype.onKeyDown=function(a){switch(a.keyCode){case 36:this.moveToFirst();break;case 35:this.moveToLast();break;case 38:this.jumpToPrevious();break;case 33:case 37:this.moveToPrevious();break;case 40:this.jumpToNext();break;case 34:case 39:case 13:this.moveToNext();break;case 32:this.moveToNext();break}a.stopPropagation()};sozi.Player.prototype.onHashChange=function(){var a=this.getFrameIndexFromURL();if(a!==this.currentFrameIndex){this.moveToFrame(a)}};sozi.Player.prototype.onAnimationStep=function(c,f){var e=1-c,d=f.profile(c),b=1-d,a,g;for(a in f.initialState){if(f.initialState.hasOwnProperty(a)){if(typeof f.initialState[a]===&quot;number&quot;&amp;&amp;typeof f.finalState[a]===&quot;number&quot;){this.display[a]=f.finalState[a]*d+f.initialState[a]*b}}}if(f.zoomWidth&amp;&amp;f.zoomWidth.k!==0){g=c-f.zoomWidth.ts;this.display.width=f.zoomWidth.k*g*g+f.zoomWidth.ss}if(f.zoomHeight&amp;&amp;f.zoomHeight.k!==0){g=c-f.zoomHeight.ts;this.display.height=f.zoomHeight.k*g*g+f.zoomHeight.ss}this.display.clip=f.finalState.clip;this.display.update()};sozi.Player.prototype.onAnimationDone=function(){this.sourceFrameIndex=this.currentFrameIndex;if(this.playing){this.waitTimeout()}};sozi.Player.prototype.getFrameIndexFromURL=function(){var a=window.location.hash?parseInt(window.location.hash.slice(1),10)-1:0;if(isNaN(a)||a&lt;0){return 0}else{if(a&gt;=this.frames.length){return this.frames.length-1}else{return a}}};sozi.Player.prototype.readAttribute=function(b,a){var c=b.getAttributeNS(this.soziNs,a);return c===&quot;&quot;?this.defaults[a]:c};sozi.Player.prototype.readFrames=function(){var a=document.getElementsByTagNameNS(this.soziNs,&quot;frame&quot;),c,b,d;for(b=0;b&lt;a.length;b++){c=document.getElementById(a[b].getAttributeNS(this.soziNs,&quot;refid&quot;));if(c){d={geometry:this.display.getElementGeometry(c),title:this.readAttribute(a[b],&quot;title&quot;),sequence:parseInt(this.readAttribute(a[b],&quot;sequence&quot;),10),hide:this.readAttribute(a[b],&quot;hide&quot;)===&quot;true&quot;,timeoutEnable:this.readAttribute(a[b],&quot;timeout-enable&quot;)===&quot;true&quot;,timeoutMs:parseInt(this.readAttribute(a[b],&quot;timeout-ms&quot;),10),transitionDurationMs:parseInt(this.readAttribute(a[b],&quot;transition-duration-ms&quot;),10),transitionZoomPercent:parseInt(this.readAttribute(a[b],&quot;transition-zoom-percent&quot;),10),transitionProfile:this.profiles[this.readAttribute(a[b],&quot;transition-profile&quot;)||&quot;linear&quot;]};if(d.hide){c.setAttribute(&quot;visibility&quot;,&quot;hidden&quot;)}d.geometry.clip=this.readAttribute(a[b],&quot;clip&quot;)===&quot;true&quot;;this.frames.push(d)}}this.frames.sort(function(f,e){return f.sequence-e.sequence})};sozi.Player.prototype.startFromIndex=function(a){this.playing=true;this.waiting=false;this.sourceFrameIndex=a;this.currentFrameIndex=a;this.display.showFrame(this.frames[a]);this.waitTimeout()};sozi.Player.prototype.restart=function(){this.startFromIndex(this.currentFrameIndex)};sozi.Player.prototype.stop=function(){this.animator.stop();if(this.waiting){window.clearTimeout(this.nextFrameTimeout);this.waiting=false}this.playing=false;this.sourceFrameIndex=this.currentFrameIndex};sozi.Player.prototype.waitTimeout=function(){var a;if(this.frames[this.currentFrameIndex].timeoutEnable){this.waiting=true;a=(this.currentFrameIndex+1)%this.frames.length;this.nextFrameTimeout=window.setTimeout(this.moveToFrame.bind(this,a),this.frames[this.currentFrameIndex].timeoutMs)}};sozi.Player.prototype.getZoomData=function(e,m,k){var n={ss:((e&lt;0)?Math.max(m,k):Math.min(m,k))*(100-e)/100,ts:0.5,k:0},i,h,g,f,l,j;if(e!==0){i=m-k;h=m-n.ss;g=k-n.ss;if(i!==0){f=Math.sqrt(h*g);l=(h-f)/i;j=(h+f)/i;n.ts=(l&gt;0&amp;&amp;l&lt;=1)?l:j}n.k=h/n.ts/n.ts}return n};sozi.Player.prototype.jumpToFrame=function(a){this.stop();if(this.display.tableOfContentsIsVisible()){this.display.hideTableOfContents()}this.sourceFrameIndex=a;this.currentFrameIndex=a;this.display.showFrame(this.frames[a]);window.location.hash=&quot;#&quot;+(a+1)};sozi.Player.prototype.previewFrame=function(b){var d=this.frames[b].geometry,a,c;d.clip=false;if(this.defaultZoomPercent!==0){a=this.getZoomData(this.defaultZoomPercent,this.display.width,d.width);c=this.getZoomData(this.defaultZoomPercent,this.display.height,d.height)}this.currentFrameIndex=b;this.animator.start(this.defaultDurationMs,{initialState:this.display.getCurrentGeometry(),finalState:d,profile:this.defaultProfile,zoomWidth:a,zoomHeight:c});window.location.hash=&quot;#&quot;+(b+1)};sozi.Player.prototype.moveToFrame=function(c){var b=this.defaultDurationMs,f=this.defaultZoomPercent,d=this.defaultProfile,a,e;if(this.waiting){window.clearTimeout(this.nextFrameTimeout);this.waiting=false}if(c===(this.currentFrameIndex+1)%this.frames.length){b=this.frames[c].transitionDurationMs;f=this.frames[c].transitionZoomPercent;d=this.frames[c].transitionProfile}if(this.display.tableOfContentsIsVisible()){this.display.hideTableOfContents()}if(f!==0){a=this.getZoomData(f,this.display.width,this.frames[c].geometry.width);e=this.getZoomData(f,this.display.height,this.frames[c].geometry.height)}this.playing=true;this.currentFrameIndex=c;this.animator.start(b,{initialState:this.display.getCurrentGeometry(),finalState:this.frames[this.currentFrameIndex].geometry,profile:d,zoomWidth:a,zoomHeight:e});window.location.hash=&quot;#&quot;+(c+1)};sozi.Player.prototype.moveToFirst=function(){this.moveToFrame(0)};sozi.Player.prototype.jumpToPrevious=function(){var a=this.currentFrameIndex;if(!this.animator.started||this.sourceFrameIndex&lt;=this.currentFrameIndex){a-=1}if(a&gt;=0){this.jumpToFrame(a)}};sozi.Player.prototype.moveToPrevious=function(){var a=this.currentFrameIndex,b;for(a--;a&gt;=0;a--){b=this.frames[a];if(!b.timeoutEnable||b.timeoutMs!==0){this.moveToFrame(a);break}}};sozi.Player.prototype.jumpToNext=function(){var a=this.currentFrameIndex;if(!this.animator.started||this.sourceFrameIndex&gt;=this.currentFrameIndex){a+=1}if(a&lt;this.frames.length){this.jumpToFrame(a)}};sozi.Player.prototype.moveToNext=function(){if(this.currentFrameIndex&lt;this.frames.length-1||this.frames[this.currentFrameIndex].timeoutEnable){this.moveToFrame((this.currentFrameIndex+1)%this.frames.length)}};sozi.Player.prototype.moveToLast=function(){this.moveToFrame(this.frames.length-1)};sozi.Player.prototype.moveToCurrent=function(){this.moveToFrame(this.currentFrameIndex)};sozi.Player.prototype.showAll=function(){this.stop();if(this.display.tableOfContentsIsVisible()){this.display.hideTableOfContents()}this.animator.start(this.defaultDurationMs,{initialState:this.display.getCurrentGeometry(),finalState:this.display.getDocumentGeometry(),profile:this.defaultProfile})};sozi.Player.prototype.zoom=function(b,a,c){this.stop();this.display.applyZoomFactor(b&gt;0?this.scaleFactor:1/this.scaleFactor,a,c)};sozi.Player.prototype.toggleTableOfContents=function(){if(this.display.tableOfContentsIsVisible()){this.display.hideTableOfContents();this.restart()}else{this.stop();this.display.showTableOfContents()}};window.addEventListener(&quot;load&quot;,sozi.Player.prototype.onLoad.bind(new sozi.Player()),false);</script>
  <style
     ns1:version="11.04-23131513"
     id="sozi-style">
#sozi-toc text {
   fill: #eff;
   font-family: Verdana, sans-serif;
   font-size: 12pt;
}

#sozi-toc text:hover {
   fill: #0cf;
   cursor: pointer;
}

#sozi-toc-background {
   stroke: #222;
   stroke-opacity: 0.1;
   stroke-width: 10;
   fill: #222;
   fill-opacity: 0.75;
}

</style>
</svg>