2d3d/2D/dicetower.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
   viewBox="0 0 399.99999 299.99999"
   sodipodi:docname="dicetower.svg"
   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
   version="1.1"
   id="svg3962"
   height="300mm"
   width="400mm">
  <sodipodi:namedview
     inkscape:document-rotation="0"
     inkscape:bbox-nodes="true"
     inkscape:snap-bbox="true"
     inkscape:snap-nodes="false"
     inkscape:guide-bbox="true"
     showguides="true"
     inkscape:object-paths="false"
     inkscape:object-nodes="true"
     inkscape:window-maximized="1"
     inkscape:window-y="-9"
     inkscape:window-x="-9"
     inkscape:window-height="1001"
     inkscape:window-width="1920"
     units="mm"
     showgrid="false"
     inkscape:current-layer="layer1"
     inkscape:document-units="mm"
     inkscape:cy="310.67374"
     inkscape:cx="118.39732"
     inkscape:zoom="1.2319838"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     borderopacity="1.0"
     bordercolor="#666666"
     pagecolor="#ffffff"
     id="base"
     inkscape:snap-smooth-nodes="true">
    <sodipodi:guide
       id="guide3374"
       orientation="0,1"
       position="209.26113,52.46408" />
    <sodipodi:guide
       id="guide3376"
       orientation="0,1"
       position="283.63939,72.804365" />
  </sodipodi:namedview>
  <defs
     id="defs3964" />
  <metadata
     id="metadata3967">
    <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
     style="display:inline"
     inkscape:label="Work"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,23.346473)">
    <path
       inkscape:connector-curvature="0"
       id="rect3340"
       d="M 186.39674,-11.163192 V 133.83675 h 80.00008 V -11.163192 Z m 73.50015,3.9952093 1.49986,2.598428 -25.98099,14.9996727 -1.49986,-2.5978794 z m -67.00022,17.5981007 43.30127,25.000369 -1.49986,2.597879 -43.30127,-24.99982 z m 67.00022,37.89054 1.49986,2.597878 -43.30128,24.999819 -1.49985,-2.597878 z m -67.00022,38.790123 69.28225,40.000039 -1.50041,2.59788 -69.2817,-40.000041 z"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.65;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10.6299;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
    <rect
       y="-11.163192"
       x="266.39639"
       height="113.27361"
       width="60.000004"
       id="rect3342"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.65;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10.6299;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
    <rect
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.65;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:11.1487;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="rect3378"
       width="65.999763"
       height="145.00002"
       x="5.8258758"
       y="-11.163196" />
    <path
       inkscape:connector-curvature="0"
       id="rect3362-0"
       d="m 8.8255854,133.83682 v 5.00008 H 5.8258758 v 29.9999 h 2.9997096 v 1.99981 h 1.4210196 c 3.95747,-2.68828 15.51605,-8.20244 28.57941,-8.20346 13.05359,0.004 24.598487,5.51719 28.552987,8.20346 h 1.44693 v -1.99981 h 2.99971 v -29.9999 h -2.99971 v -5.00008 z"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.65;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10.6299;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       sodipodi:nodetypes="cccccccccccccccc" />
    <path
       inkscape:connector-curvature="0"
       id="rect3346-3"
       d="m 102.82546,196.83688 h 5.00007 v 2.99971 h 50.00019 v -2.99971 h 1.99981 v -1.42102 c -2.68828,-3.95746 -8.20243,-15.51606 -8.20345,-28.57941 0.004,-13.05359 5.51718,-24.59846 8.20345,-28.55296 v -1.44696 h -1.99981 v -2.99971 h -50.00019 v 2.99971 h -5.00007 z"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.65;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10.6299;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       sodipodi:nodetypes="cccccccccccccccc" />
    <path
       inkscape:connector-curvature="0"
       id="rect3440-6"
       d="m 159.82553,196.83688 h 5.00008 v 3.00025 h 80.00008 v -3.00025 h 1.99981 v -1.42215 c -2.68815,-3.95728 -8.20227,-15.51501 -8.20345,-28.57774 0.004,-13.05359 5.51718,-24.59846 8.20345,-28.55296 v -1.44696 h -1.99981 v -3.00025 h -80.00008 v 3.00025 h -5.00008 z"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.65;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10.6299;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       sodipodi:nodetypes="cccccccccccccccc" />
    <path
       style="color:#000000;font-variation-settings:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.65;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10.6299;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
       d="m 246.82551,196.83688 h 5.00007 v 2.99971 h 50.0002 v -2.99971 h 1.99981 v -1.42102 c -2.68828,-3.95746 -8.20243,-15.51606 -8.20345,-28.57941 0.004,-13.05359 5.51718,-24.59846 8.20345,-28.55296 v -1.44696 h -1.99981 v -2.99971 h -50.0002 v 2.99971 h -5.00008 z"
       id="path3797"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cccccccccccccccc" />
    <path
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.65;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10.6299;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       d="M 167.34662,-11.163192 V 133.83675 H 87.346439 V -11.163192 Z m -73.500251,3.9952093 -1.49986,2.598428 25.981091,14.9996727 1.49986,-2.5978794 z m 67.000321,17.5981007 -43.30127,25.000369 1.49986,2.597879 43.30127,-24.99982 z m -67.000321,37.89054 -1.49986,2.597878 43.301381,24.999819 1.49985,-2.597878 z m 67.000321,38.790123 -69.282351,40.000039 1.50041,2.59788 69.281801,-40.000041 z"
       id="path3807"
       inkscape:connector-curvature="0" />
    <g
       id="g154">
      <g
         transform="matrix(1,0,0,-1.4999995,-2.8535004,28.759089)"
         id="g56">
        <rect
           style="opacity:0.65;fill:#ff00ff;stroke-width:9.75807;stop-color:#000000"
           id="rect52"
           width="3"
           height="5"
           x="74.679138"
           y="6.2815266" />
        <rect
           y="1.2815266"
           x="77.679138"
           height="10"
           width="3"
           id="rect54"
           style="opacity:0.65;fill:#ff00ff;stroke-width:13.8;stop-color:#000000" />
      </g>
      <rect
         transform="scale(-1,1)"
         y="-11.163196"
         x="-77.825638"
         height="23"
         width="6.0000038"
         id="rect96"
         style="opacity:0.65;fill:#ff00ff;stroke-width:29.5978;stop-color:#000000" />
      <g
         id="g104"
         transform="matrix(1,0,0,-1.4999995,-2.8534927,71.759112)">
        <rect
           y="6.2815266"
           x="74.679138"
           height="5"
           width="3"
           id="rect100"
           style="opacity:0.65;fill:#ff00ff;stroke-width:9.75807;stop-color:#000000" />
        <rect
           style="opacity:0.65;fill:#ff00ff;stroke-width:13.8;stop-color:#000000"
           id="rect102"
           width="3"
           height="10"
           x="77.679138"
           y="1.2815266" />
      </g>
      <g
         transform="matrix(1,0,0,-1.4999995,-2.8534927,112.75911)"
         id="g110">
        <rect
           style="opacity:0.65;fill:#ff00ff;stroke-width:9.75807;stop-color:#000000"
           id="rect106"
           width="3"
           height="5"
           x="74.679138"
           y="6.2815266" />
        <rect
           y="1.2815266"
           x="77.679138"
           height="10"
           width="3"
           id="rect108"
           style="opacity:0.65;fill:#ff00ff;stroke-width:13.8;stop-color:#000000" />
      </g>
      <rect
         style="opacity:0.65;fill:#ff00ff;stroke-width:27.6002;stop-color:#000000"
         id="rect114"
         width="6.0000076"
         height="20.000029"
         x="-77.825645"
         y="34.8368"
         transform="scale(-1,1)" />
      <rect
         transform="scale(-1,1)"
         y="77.836823"
         x="-77.825645"
         height="18"
         width="6"
         id="rect124"
         style="opacity:0.65;fill:#ff00ff;stroke-width:26.1838;stop-color:#000000" />
      <rect
         transform="scale(-1,1)"
         y="118.83682"
         x="-77.825645"
         height="15"
         width="6"
         id="rect126"
         style="opacity:0.65;fill:#ff00ff;stroke-width:23.9024;stop-color:#000000" />
      <rect
         style="opacity:0.65;fill:#00ff00;stroke-width:3.76969;stop-color:#000000"
         id="rect128"
         width="3"
         height="8"
         x="74.825638"
         y="26.8368" />
      <rect
         y="69.836823"
         x="74.825645"
         height="8"
         width="3"
         id="rect130"
         style="opacity:0.65;fill:#00ff00;stroke-width:3.76969;stop-color:#000000" />
      <rect
         style="opacity:0.65;fill:#00ff00;stroke-width:3.76969;stop-color:#000000"
         id="rect132"
         width="3"
         height="8"
         x="74.825645"
         y="110.83682" />
    </g>
    <g
       transform="rotate(180,79.586037,61.336815)"
       id="g188">
      <g
         id="g160"
         transform="matrix(1,0,0,-1.4999995,-2.8535004,28.759089)">
        <rect
           y="6.2815266"
           x="74.679138"
           height="5"
           width="3"
           id="rect156"
           style="opacity:0.65;fill:#ff00ff;stroke-width:9.75807;stop-color:#000000" />
        <rect
           style="opacity:0.65;fill:#ff00ff;stroke-width:13.8;stop-color:#000000"
           id="rect158"
           width="3"
           height="10"
           x="77.679138"
           y="1.2815266" />
      </g>
      <rect
         style="opacity:0.65;fill:#ff00ff;stroke-width:29.5978;stop-color:#000000"
         id="rect162"
         width="6.0000038"
         height="23"
         x="-77.825638"
         y="-11.163196"
         transform="scale(-1,1)" />
      <g
         transform="matrix(1,0,0,-1.4999995,-2.8534927,71.759112)"
         id="g168">
        <rect
           style="opacity:0.65;fill:#ff00ff;stroke-width:9.75807;stop-color:#000000"
           id="rect164"
           width="3"
           height="5"
           x="74.679138"
           y="6.2815266" />
        <rect
           y="1.2815266"
           x="77.679138"
           height="10"
           width="3"
           id="rect166"
           style="opacity:0.65;fill:#ff00ff;stroke-width:13.8;stop-color:#000000" />
      </g>
      <g
         id="g174"
         transform="matrix(1,0,0,-1.4999995,-2.8534927,112.75911)">
        <rect
           y="6.2815266"
           x="74.679138"
           height="5"
           width="3"
           id="rect170"
           style="opacity:0.65;fill:#ff00ff;stroke-width:9.75807;stop-color:#000000" />
        <rect
           style="opacity:0.65;fill:#ff00ff;stroke-width:13.8;stop-color:#000000"
           id="rect172"
           width="3"
           height="10"
           x="77.679138"
           y="1.2815266" />
      </g>
      <rect
         transform="scale(-1,1)"
         y="34.8368"
         x="-77.825645"
         height="20.000029"
         width="6.0000076"
         id="rect176"
         style="opacity:0.65;fill:#ff00ff;stroke-width:27.6002;stop-color:#000000" />
      <rect
         style="opacity:0.65;fill:#ff00ff;stroke-width:26.1838;stop-color:#000000"
         id="rect178"
         width="6"
         height="18"
         x="-77.825645"
         y="77.836823"
         transform="scale(-1,1)" />
      <rect
         style="opacity:0.65;fill:#ff00ff;stroke-width:23.9024;stop-color:#000000"
         id="rect180"
         width="6"
         height="15"
         x="-77.825645"
         y="118.83682"
         transform="scale(-1,1)" />
      <rect
         y="26.8368"
         x="74.825638"
         height="8"
         width="3"
         id="rect182"
         style="opacity:0.65;fill:#00ff00;stroke-width:3.76969;stop-color:#000000" />
      <rect
         style="opacity:0.65;fill:#00ff00;stroke-width:3.76969;stop-color:#000000"
         id="rect184"
         width="3"
         height="8"
         x="74.825645"
         y="69.836823" />
      <rect
         y="110.83682"
         x="74.825645"
         height="8"
         width="3"
         id="rect186"
         style="opacity:0.65;fill:#00ff00;stroke-width:3.76969;stop-color:#000000" />
    </g>
    <path
       transform="matrix(0.26458333,0,0,0.26458333,0,-23.346473)"
       d="M -306.71875 29.001953 L -306.71875 577.0332 L -57.271484 577.0332 L -34.59375 577.0332 L -34.59375 520.33984 L -57.271484 520.33984 L -57.271484 461.75781 L -45.931641 461.75781 L -45.931641 490.10352 L -34.59375 490.10352 L -34.59375 433.41016 L -34.59375 365.37891 L -57.271484 365.37891 L -57.271484 306.79688 L -45.931641 306.79688 L -45.931641 335.14258 L -34.59375 335.14258 L -34.59375 278.45117 L -34.59375 202.85938 L -57.271484 202.85938 L -57.271484 144.27734 L -45.931641 144.27734 L -45.931641 172.62305 L -34.59375 172.62305 L -34.59375 115.92969 L -34.59375 29.001953 L -57.271484 29.001953 L -306.71875 29.001953 z "
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.65;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:42.1368;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="rect190" />
  </g>
  <script
     id="sozi-script"
     ns1:version="13.11-30213629">/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 *
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

/**
 * Create or augment a namespace.
 *
 * &lt;p&gt;A typical use of this function is:&lt;/p&gt;
 *
 * &lt;pre&gt;
 * namespace(this, &quot;a.b.c&quot;, function (exports, globals) {
 *     exports.foo = function (x) {
 *         ...
 *     };
 * });
 * &lt;/pre&gt;
 *
 * &lt;p&gt;where &lt;code&gt;this&lt;/code&gt; is the global object.&lt;/p&gt;
 *
 * &lt;p&gt;In this example, function &lt;code&gt;foo&lt;/code&gt; is exported and can be
 * called as &lt;code&gt;a.b.c.foo(someValue)&lt;/code&gt;.&lt;/p&gt;
 *
 * @memberOf _global_
 * @param globals The global object
 * @param {String} path The dot-separated path to the namespace
 * @param {Function} body A function to execute in the context of the namespace
 */
function namespace(globals, path, body) {
    &quot;use strict&quot;;
    
    // Start name lookup in the global object
	var current = globals;
	
	// For each name in the given path
	path.split(&quot;.&quot;).forEach(function (name) {
	    // If the current path element does not exist
	    // in the current namespace, create a new sub-namespace
		if (typeof current[name] === &quot;undefined&quot;) {
			current[name] = {};
		}
		
		// Move to the namespace for the current path element
		current = current[name];
	});
	
	// Execute the given function in the last namespace
	if (body) {
	    body(current, globals);
	}
	
	return current;
}


/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 *
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

/**
 * @name sozi.events
 * @namespace A simple event system for Sozi.
 * @depend namespace.js
 */
namespace(this, &quot;sozi.events&quot;, function (exports) {
    /** @lends sozi.events */

    &quot;use strict&quot;;
    
    /**
     * A registry of callback functions for each event type.
     *
     * &lt;p&gt;Call {@link sozi.events.listen} to add a new listener.&lt;/p&gt;
     */
    var listenerRegistry = {};

    /**
     * Adds a listener for a given event type.
     *
     * @memberOf sozi.events
     * @name listen
     * @function
     * @param {String} key The identifier of the event type to listen
     * @param {Function} handler The function to call when a corresponding event is fired
     */
    exports.listen = function (key, handler) {
        if (!listenerRegistry.hasOwnProperty(key)) {
            listenerRegistry[key] = [];
        }
        listenerRegistry[key].push(handler);
    };
    
    /**
     * Fire an event of a given type.
     *
     * &lt;p&gt;All event handlers added for the given event type are
     * executed.&lt;/p&gt;
     *
     * &lt;p&gt;Additional arguments provided to this function are passed
     * to the event handlers.&lt;/p&gt;
     *
     * @memberOf sozi.events
     * @name fire
     * @function
     * @param {String} key The identifier of the event type to fire
     */
    exports.fire = function (key) {
        var args = Array.prototype.slice.call(arguments, 1);
        if (listenerRegistry.hasOwnProperty(key)) {
            listenerRegistry[key].forEach(function (listener) {
                listener.apply(null, args);
            });
        }
    };
});

/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 *
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

/**
 * @name sozi.proto
 * @namespace Helpers for prototype inheritance.
 * @depend namespace.js
 */
namespace(this, &quot;sozi.proto&quot;, function (exports) {
    &quot;use strict&quot;;
    
    exports.Object = {
        installConstructors: function () {
            function InstanceConstructor() {}
            InstanceConstructor.prototype = this;
            
            this.instance = function () {
                var result = new InstanceConstructor();
                result.construct.apply(result, arguments);
                return result;
            };
            
            this.subtype = function (anObject) {
                var result = new InstanceConstructor();
                result.augment(anObject);
                result.installConstructors();
                return result;
            };
        },
        
        construct: function () {},
        
        augment: function (anObject) {
            for (var attr in anObject) {
                if (anObject.hasOwnProperty(attr)) {
                    this[attr] = anObject[attr];
                }
            }
            return this;
        },
        
        bind: function (aFunction) {
            var self = this;
            return function () {
                return aFunction.apply(self, arguments);
            }
        }
    };
    
    // Bootstrap the root object
    exports.Object.installConstructors();
});

/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 *
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

/**
 * @name sozi.actions
 * @namespace Callback functions for DOM event handlers
 * @depend namespace.js
 */
namespace(this, &quot;sozi.actions&quot;, function (exports, window) {
    /** @lends sozi.actions */
    
    &quot;use strict&quot;;
    
    // Module aliases
    var player = namespace(window, &quot;sozi.player&quot;);
    var display = namespace(window, &quot;sozi.display&quot;);
    
    // The global document object
    var document = window.document;
    
    // Constants: mouse button numbers
    var DRAG_BUTTON = 0;    // Left button
    var TOC_BUTTON = 1;     // Middle button
    
    // Constants: increments for zooming and rotating,
    // threshold for dragging
    var SCALE_FACTOR = 1.05;
    var ROTATE_STEP = 5;
    var DRAG_THRESHOLD_PX = 5;
    
    /**
     * The status of the current drag operation.
     *
     * @type Boolean
     */
    var mouseDragged = false;
    
    /**
     * The X coordinate of the mouse on the latest &quot;down&quot; or &quot;drag&quot; event.
     *
     * @type Number
     */
    var mouseLastX = 0;

    /**
     * The Y coordinate of the mouse on the latest &quot;down&quot; or &quot;drag&quot; event.
     *
     * @type Number
     */
    var mouseLastY = 0;
    
    /**
     * Zooms the display in the given direction.
     *
     * &lt;p&gt;Only the sign of &lt;code&gt;direction&lt;/code&gt; is used:&lt;/p&gt;
     * &lt;ul&gt;
     *  &lt;li&gt;zoom in when &lt;code&gt;direction &gt; 0&lt;/code&gt;&lt;/li&gt;
     *  &lt;li&gt;zoom out when &lt;code&gt;direction &lt;= 0&lt;/code&gt;&lt;/li&gt;
     * &lt;/ul&gt;
     *
     * &lt;p&gt;The scaling is centered around point (&lt;code&gt;x&lt;/code&gt;, &lt;code&gt;y&lt;/code&gt;).&lt;/p&gt;
     *
     * @param {Number} direction The direction of the scaling operation
     * @param {Number} x The X coordinate of the scaling center
     * @param {Number} y The Y coordinate of the scaling center
     */
    function zoom(direction, x, y) {
        player.stop();
        display.viewPorts[&quot;player&quot;].zoom(direction &gt; 0 ? SCALE_FACTOR : 1 / SCALE_FACTOR, x, y);
    }
    
    /**
     * Rotate the display in the given direction.
     *
     * &lt;p&gt;Only the sign of &lt;code&gt;direction&lt;/code&gt; is used:&lt;/p&gt;
     * &lt;ul&gt;
     *  &lt;li&gt;rotate anticlockwise when direction &gt; 0&lt;/li&gt;
     *  &lt;li&gt;rotate clockwise when direction &lt;= 0&lt;/li&gt;
     * &lt;/ul&gt;
     *
     * @param {Number} direction The direction of the rotation
     */
    function rotate(direction) {
        player.stop();
        display.viewPorts[&quot;player&quot;].rotate(direction &gt; 0 ? ROTATE_STEP : -ROTATE_STEP);
    }
    
    /**
     * Show/hide the frame list.
     *
     * &lt;p&gt;The presentation stops when the frame list is showed,
     * and restarts when the frame list is hidden.&lt;/p&gt;
     */
    function toggleFrameList() {
        if (sozi.framelist.isVisible()) {
            sozi.framelist.hide();
            player.restart();
        } else {
            player.stop();
            sozi.framelist.show();
        }
    }

    function isPlayerEvent(evt) {
        return display.viewPorts[&quot;player&quot;].contains(evt.clientX, evt.clientY);
    }
    
    /**
     * Event handler: mouse down.
     *
     * &lt;p&gt;When the left button is pressed, we register the current coordinates
     * in case the mouse will be dragged. Handler {@link sozi.actions-onMouseDrag} is set until
     * the button is released ({@link sozi.actions-onMouseUp}).&lt;/p&gt;
     *
     * &lt;p&gt;When the middle button is pressed, the table of contents is shown or hidden.&lt;/p&gt;
     *
     * @param {Event} evt The DOM event object
     */
    function onMouseDown(evt) {
        if (!isPlayerEvent(evt)) {
            return;
        }
        if (evt.button === DRAG_BUTTON) {
            document.documentElement.addEventListener(&quot;mousemove&quot;, onMouseDrag, false);
            mouseDragged = false;
            mouseLastX = evt.clientX;
            mouseLastY = evt.clientY;
        } else if (evt.button === TOC_BUTTON) {
            toggleFrameList();
        }
        evt.stopPropagation();
        evt.preventDefault();
    }

    /**
     * Event handler: mouse move.
     *
     * &lt;p&gt;If the left mouse button is down, then the mouse move is a drag action.
     * This method computes the displacement since the button was pressed or
     * since the last move, and updates the reference coordinates for the next move.&lt;/p&gt;
     *
     * @param {Event} evt The DOM event object
     */
    function onMouseDrag(evt) {
        if (!isPlayerEvent(evt)) {
            return;
        }
        player.stop();
        
        // The drag action is confirmed when one of the mouse coordinates
        // has moved past the threshold
        if (!mouseDragged &amp;&amp; (Math.abs(evt.clientX - mouseLastX) &gt; DRAG_THRESHOLD_PX ||
                              Math.abs(evt.clientY - mouseLastY) &gt; DRAG_THRESHOLD_PX)) {
            mouseDragged = true;
        }
        
        if (mouseDragged) {
            sozi.events.fire(&quot;sozi.player.cleanup&quot;);
            display.viewPorts[&quot;player&quot;].drag(evt.clientX - mouseLastX, evt.clientY - mouseLastY);
            mouseLastX = evt.clientX;
            mouseLastY = evt.clientY;
        }
        
        evt.stopPropagation();
    }

    /**
     * Event handler: mouse up.
     *
     * &lt;p&gt;Releasing the left button removes the {@link sozi.actions-onMouseDrag} handler.&lt;/p&gt;
     *
     * @param {Event} evt The DOM event object
     */
    function onMouseUp(evt) {
        if (!isPlayerEvent(evt)) {
            return;
        }
        if (evt.button === DRAG_BUTTON) {
            document.documentElement.removeEventListener(&quot;mousemove&quot;, onMouseDrag, false);
        }
        evt.stopPropagation();
        evt.preventDefault();
    }

    /**
     * Event handler: context menu (i.e right click).
     *
     * &lt;p&gt;Right click goes one frame back.&lt;/p&gt;
     *
     * &lt;p&gt;There is no &quot;click&quot; event for the right mouse button and the menu
     * can't be disabled in {@link sozi.actions-onMouseDown}.&lt;/p&gt;
     *
     * @param {Event} evt The DOM event object
     */
    function onContextMenu(evt) {
        if (!isPlayerEvent(evt)) {
            return;
        }
        player.moveToPrevious();
        evt.stopPropagation();
        evt.preventDefault();
    }

    /**
     * Event handler: mouse click.
     *
     * &lt;p&gt;Left-click moves the presentation to the next frame.&lt;/p&gt;
     *
     * &lt;p&gt;No &quot;click&quot; event is generated for the middle button in Firefox.
     * See {@link sozi.actions-onMouseDown} for middle click handling.&lt;/p&gt;
     *
     * &lt;p&gt;Dragging the mouse produces a &quot;click&quot; event when the button is released.
     * If flag {@link sozi.actions-mouseDragged} was set by {@link sozi.actions-onMouseDrag},
     * then the click event is the result of a drag action.&lt;/p&gt;
     *
     * @param {Event} evt The DOM event object
     */
    function onClick(evt) {
        if (!isPlayerEvent(evt)) {
            return;
        }
        if (!mouseDragged &amp;&amp; evt.button !== TOC_BUTTON) {
            player.moveToNext();
        }
        evt.stopPropagation();
        evt.preventDefault();
    }

    /**
     * Event handler: mouse wheel.
     *
     * &lt;p&gt;Rolling the mouse wheel stops the presentation and zooms the current display.&lt;/p&gt;
     *
     * FIXME shift key does not work in Opera
     *
     * @param {Event} evt The DOM event object
     */
    function onWheel(evt) {
        if (!isPlayerEvent(evt)) {
            return;
        }
        
        if (!evt) {
            evt = window.event;
        }

        var delta = 0;
        if (evt.wheelDelta) { // IE and Opera
            delta = evt.wheelDelta;
        }
        else if (evt.detail) { // Mozilla
            delta = -evt.detail;
        }
        
        if (delta !== 0) {
            if (evt.shiftKey) {
                rotate(delta);
            }
            else {
                zoom(delta, evt.clientX, evt.clientY);
            }
        }
        
        evt.stopPropagation();
        evt.preventDefault();
    }

    /**
     * Event handler: key press.
     *
     * &lt;p&gt;Keyboard handling is split into two methods:
     * {@link sozi.actions-onKeyPress} and {@link sozi.actions-onKeyDown}
     * in order to get the same behavior across browsers.&lt;/p&gt;
     *
     * &lt;p&gt;This method handles character keys &quot;+&quot;, &quot;-&quot;, &quot;=&quot;, &quot;F&quot; and &quot;T&quot;.&lt;/p&gt;
     *
     * @param {Event} evt The DOM event object
     */
    function onKeyPress(evt) {
        // Keys with modifiers are ignored
        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
            return;
        }

        switch (evt.charCode || evt.which) {
        case 43: // +
            zoom(1, window.innerWidth / 2, window.innerHeight / 2);
            break;
        case 45: // -
            zoom(-1, window.innerWidth / 2, window.innerHeight / 2);
            break;
        case 61: // =
            player.moveToCurrent();
            break;
        case 70: // F
        case 102: // f
            player.showAll();
            break;
        case 84: // T
        case 116: // t
            toggleFrameList();
            break;
        case 82: // R
            rotate(-1);
            break;
        case 114: // r
            rotate(1);
            break;
        default:
            return;
        }

        evt.stopPropagation();
        evt.preventDefault();
    }

    /**
     * Event handler: key down.
     *
     * &lt;p&gt;Keyboard handling is split into two methods:
     * {@link sozi.actions-onKeyPress} and {@link sozi.actions-onKeyDown}
     * in order to get the same behavior across browsers.&lt;/p&gt;
     *
     * &lt;p&gt;This method handles navigation keys (arrows, page up/down, home, end)
     * and the space and enter keys.&lt;/p&gt;
     *
     * @param {Event} evt The DOM event object
     */
    function onKeyDown(evt) {
        // Keys with Alt/Ctrl/Meta modifiers are ignored
        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
            return;
        }

        switch (evt.keyCode) {
            case 36: // Home
                if (evt.shiftKey) {
                    player.jumpToFirst();
                }
                else {
                    player.moveToFirst();
                }
                break;
            case 35: // End
                if (evt.shiftKey) {
                    player.jumpToLast();
                }
                else {
                    player.moveToLast();
                }
                break;
            case 38: // Arrow up
            case 33: // Page up
            case 37: // Arrow left
                if (evt.shiftKey) {
                    player.jumpToPrevious();
                }
                else {
                    player.moveToPrevious();
                }
                break;
            case 40: // Arrow down
            case 34: // Page down
            case 39: // Arrow right
            case 13: // Enter
            case 32: // Space
                if (evt.shiftKey) {
                    player.jumpToNext();
                }
                else {
                    player.moveToNext();
                }
                break;
            default:
                // Ignore other keys and propagate the event
                return;
        }
        
        // Stop event propagation for supported keys
        evt.stopPropagation();
        
        // In some versions of Chrome/Chromium, preventDefault() inhibits the &quot;keypress&quot; event
        evt.preventDefault();
    }

    /**
     * Dummy event handler: stop event propagation.
     *
     * @param {Event} evt The DOM event object
     */
    function stopEvent(evt) {
        evt.stopPropagation();
    }

    /**
     * Event handler: document load.
     *
     * &lt;p&gt;This function sets up all other event handlers for the player.&lt;/p&gt;
     */
    function onDisplayReady() {
        // Prevent event propagation when clicking on a link
        // FIXME does not work in Firefox when the &lt;a&gt; is referenced through a &lt;use&gt;
        var links = document.getElementsByTagName(&quot;a&quot;);
        for (var i = 0; i &lt; links.length; i += 1) {
            links[i].addEventListener(&quot;click&quot;, stopEvent, false);
            links[i].addEventListener(&quot;contextmenu&quot;, stopEvent, false);
        }
        
        // Mouse events are constrained to the player viewport
        // see isPlayerEvent()
        // TODO also use shift-click as an alternative for middle-click
        var svgRoot = document.documentElement;
        svgRoot.addEventListener(&quot;click&quot;, onClick, false);
        svgRoot.addEventListener(&quot;mousedown&quot;, onMouseDown, false);
        svgRoot.addEventListener(&quot;mouseup&quot;, onMouseUp, false);
        svgRoot.addEventListener(&quot;contextmenu&quot;, onContextMenu, false);
        svgRoot.addEventListener(&quot;DOMMouseScroll&quot;, onWheel, false); // Mozilla
        window.onmousewheel = onWheel;

        // Keyboard events are global to the SVG document
        svgRoot.addEventListener(&quot;keypress&quot;, onKeyPress, false);
        svgRoot.addEventListener(&quot;keydown&quot;, onKeyDown, false);
    }

    sozi.events.listen(&quot;sozi.display.ready&quot;, onDisplayReady); // @depend events.js
});

/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 *
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

/**
 * @name sozi.animation
 * @namespace A general-purpose animation controller.
 * @depend namespace.js
 */
namespace(this, &quot;sozi.animation&quot;, function (exports, window) {
    /** @lends sozi.animation */
    
    &quot;use strict&quot;;
    
    /**
     * The browser-specific function to request an animation frame.
     *
     * @function
     */
    var requestAnimationFrame =
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame;

    var getCurrentTime = function () {
        return window.performance &amp;&amp; window.performance.now ?
            window.performance.now() :
            Date.now();
    };

    exports.setAnimationFrameHandlers = function (requestAnimationFrameFunction, getCurrentTimeFunction) {
        requestAnimationFrame = requestAnimationFrameFunction;
        getCurrentTime = getCurrentTimeFunction;
    };

    /**
     * The default time step.
     *
     * &lt;p&gt;For browsers that do not support animation frames.&lt;/p&gt;
     *
     * @constant
     * @type Number
     */
    var TIME_STEP_MS = 40;
    
    /**
     * The handle provided by &lt;code&gt;setInterval()&lt;/code&gt;.
     *
     * &lt;p&gt;For browsers that do not support animation frames.&lt;/p&gt;
     */
    var timer;
    
    /**
     * The list of running animators.
     *
     * @type Array
     */
    var animatorList = [];
    
    /**
     * The main animation loop.
     *
     * &lt;p&gt;This function is called periodically and triggers the
     * animation steps in all running animators.&lt;/p&gt;
     *
     * &lt;p&gt;If all animators are removed from the list of running animators,
     * then the periodic calling is disabled.&lt;/p&gt;
     *
     * &lt;p&gt;This function can be called either through {@link sozi.animation-requestAnimationFrame}
     * if the browser supports it, or through &lt;code&gt;setInterval()&lt;/code&gt;.&lt;/p&gt;
     */
    function loop() {
        if (animatorList.length &gt; 0) {
            // If there is at least one animator,
            // and if the browser provides animation frames,
            // schedule this function to be called again in the next frame.
            if (requestAnimationFrame) {
                requestAnimationFrame(loop);
            }

            // Step all animators
            animatorList.forEach(function (animator) {
                // TODO use timestamp argument:
                // browser compatibility issue with Date.now()
                // and performance.now() timestamps.
                animator.step(getCurrentTime());
            });
        }
        else {
            // If all animators have been removed,
            // and if this function is called periodically
            // through setInterval, disable the periodic calling.
            if (!requestAnimationFrame) {
                window.clearInterval(timer);
            }
        }
    }
    
    /**
     * Start the animation loop.
     *
     * &lt;p&gt;This function delegates the periodic update of all animators
     * to the {@link sozi.animation-loop} function, either through {@link sozi.animation-requestAnimationFrame}
     * if the browser supports it, or through &lt;code&gt;setInterval()&lt;/code&gt;.&lt;/p&gt;
     */
    function start() {
        if (requestAnimationFrame) {
            requestAnimationFrame(loop);
        }
        else {
            timer = window.setInterval(function () {
                loop(getCurrentTime());
            }, TIME_STEP_MS);
        }
    }
    
    /**
     * Add a new animator object to the list of running animators.
     *
     * &lt;p&gt;If the animator list was empty before calling this function,
     * then the animation loop is started.&lt;/p&gt;
     *
     * @param {sozi.animation.Animator} animator The animator object to add.
     */
    function addAnimator(animator) {
        animatorList.push(animator);
        if (animatorList.length === 1) {
            start();
        }
    }
    
    /**
     * Remove the given animator from the list of running animators.
     *
     * @param {sozi.animation.Animator} animator The animator object to add.
     */
    function removeAnimator(animator) {
        animatorList.splice(animatorList.indexOf(animator), 1);
    }
    
    /**
     * @class
     *
     * An animator provides the logic for animating other objects.
     *
     * &lt;p&gt;The main purpose of an animator is to schedule the update
     * operations in the animated objects.&lt;/p&gt;
     *
     * @memberOf sozi.animation
     * @name Animator
     * @depend proto.js
     */
    exports.Animator = sozi.proto.Object.subtype({
        /** @lends sozi.animation.Animator */
        
        /**
         * Construct a new animator.
         */
        construct: function () {
            /**
             * The animation duration, in milliseconds.
             * @type Number
             */
            this.durationMs = 0;
            
            /**
             * A &quot;payload&quot; object that can be used by {@link sozi.animation.Animator.onStep}
             * and {@link sozi.animation.Animator.onDone}.
             */
            this.data = null;
            
            /**
             * The start time of the animation.
             * @type Number
             */
            this.initialTime = 0;
            
            /**
             * The current state of this animator.
             * @type Boolean
             */
            this.started = false;
        },

        /**
         * Start the current animator.
         *
         * &lt;p&gt;The current animator is added to the list of running animators
         * and is put in the &quot;started&quot; state.
         * It will be removed from the list automatically when the given duration
         * has elapsed.&lt;/p&gt;
         *
         * &lt;p&gt;Method {@link sozi.animation.Animator.onStep} is called once before starting the animation.&lt;/p&gt;
         *
         * @param {Number} durationMs The animation duration, in milliseconds
         * @param data Some data that can be used in {@link sozi.animation.Animator.onStep}
         * and {@link sozi.animation.Animator.onDone}
         */
        start: function (durationMs, data) {
            this.durationMs = durationMs;
            this.data = data;
            this.initialTime = getCurrentTime();
            this.onStep(0);
            if (!this.started) {
                this.started = true;
                addAnimator(this);
            }
        },

        /**
         * Stop the current animator.
         *
         * &lt;p&gt;The current animator is removed from the list of running animators
         * and is put in the &quot;stopped&quot; state.&lt;/p&gt;
         */
        stop: function () {
            if (this.started) {
                removeAnimator(this);
                this.started = false;
            }
        },

        /**
         * Perform one animation step.
         *
         * &lt;p&gt;This function is called automatically by the {@link sozi.animation-loop} function.
         * It calls {@link sozi.animation.Animator.onStep}.
         * If the animation duration has elapsed, {@link sozi.animation.Animator.onDone} is called.&lt;/p&gt;
         *
         * @param {Number} currentTime The current time
         */
        step: function (currentTime) {
            var elapsedTime = currentTime - this.initialTime;
            if (elapsedTime &gt;= this.durationMs) {
                this.stop();
                this.onStep(1);
                this.onDone();
            } else {
                this.onStep(elapsedTime / this.durationMs);
            }
        },
        
        /**
         * This method is called automatically on each animation step.
         *
         * &lt;p&gt;The default implementation does nothing. Override it in a
         * subclass or instance to provide your own implementation.&lt;p&gt;
         *
         * @param {Number} progress The elapsed fraction of the total duration (comprised between 0 and 1 included).
         */
        onStep: function (progress) {
            // Do nothing
        },
        
        /**
         * This method is called automatically when the animation ends.
         *
         * &lt;p&gt;The default implementation does nothing. Override it in a
         * subclass or instance to provide your own implementation.&lt;p&gt;
         */
        onDone: function () {
            // Do nothing
        }
    });

    /*
     * The acceleration profiles.
     *
     * Each profile is a function that operates in the interval [0, 1]
     * and produces a result in the same interval.
     *
     * These functions are meant to be called in {@link sozi.animation.Animator.onStep}
     * to transform the progress indicator according to the desired
     * acceleration effect.
     */
    exports.profiles = {
        &quot;linear&quot;: function (x) {
            return x;
        },

        &quot;accelerate&quot;: function (x) {
            return Math.pow(x, 3);
        },

        &quot;strong-accelerate&quot;: function (x) {
            return Math.pow(x, 5);
        },

        &quot;decelerate&quot;: function (x) {
            return 1 - Math.pow(1 - x, 3);
        },

        &quot;strong-decelerate&quot;: function (x) {
            return 1 - Math.pow(1 - x, 5);
        },

        &quot;accelerate-decelerate&quot;: function (x) {
            var xs = x &lt;= 0.5 ? x : 1 - x,
                y = Math.pow(2 * xs, 3) / 2;
            return x &lt;= 0.5 ? y : 1 - y;
        },

        &quot;strong-accelerate-decelerate&quot;: function (x) {
            var xs = x &lt;= 0.5 ? x : 1 - x,
                y = Math.pow(2 * xs, 5) / 2;
            return x &lt;= 0.5 ? y : 1 - y;
        },

        &quot;decelerate-accelerate&quot;: function (x) {
            var xs = x &lt;= 0.5 ? x : 1 - x,
                y = (1 - Math.pow(1 - 2 * xs, 2)) / 2;
            return x &lt;= 0.5 ? y : 1 - y;
        },

        &quot;strong-decelerate-accelerate&quot;: function (x) {
            var xs = x &lt;= 0.5 ? x : 1 - x,
                y = (1 - Math.pow(1 - 2 * xs, 3)) / 2;
            return x &lt;= 0.5 ? y : 1 - y;
        },
        
        &quot;immediate-beginning&quot;: function (x) {
            return 1;
        },
        
        &quot;immediate-end&quot;: function (x) {
            return x === 1 ? 1 : 0;
        },
        
        &quot;immediate-middle&quot;: function (x) {
            return x &gt;= 0.5 ? 1 : 0;
        }
    };
});


/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 *
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

/**
 * @name sozi.display
 * @namespace Display management.
 * @depend namespace.js
 */
namespace(this, &quot;sozi.display&quot;, function (exports, window) {
    &quot;use strict&quot;;
    
    // Constant: the Sozi namespace
    var SVG_NS = &quot;http://www.w3.org/2000/svg&quot;;

    var XLINK_NS = &quot;http://www.w3.org/1999/xlink&quot;;
    
    // The global document object
    var document = window.document;
    
    // The initial bounding box of the whole document,
    // assigned in onDocumentReady()
    var initialBBox;
    
    var lastWindowWidth;
    var lastWindowHeight;
    
    exports.viewPorts = {};
    
    var primaryViewport;

    /**
     * @depend proto.js
     */
    exports.CameraState = sozi.proto.Object.subtype({
        construct : function () {
            // Center coordinates
            this.cx = this.cy = 0;
            
            // Dimensions
            this.width = this.height = 1;
            
            // Rotation angle, in degrees
            this.angle = 0;
            
            // Clipping
            this.clipped = true;
            
            // Transition zoom
            this.transitionZoomPercent = 0;
            
            // Transition profile
            this.transitionProfile = sozi.animation.profiles.linear;
            
            // Transition path
            this.transitionPath = null;
        },

        setCenter: function (cx, cy) {
            this.cx = cx;
            this.cy = cy;
            return this;
        },
        
        setSize: function (width, height) {
            this.width = width;
            this.height = height;
            return this;
        },
        
        setClipped: function (clipped) {
            this.clipped = clipped;
            return this;
        },
        
        /*
         * Set the angle of the current camera state.
         * The angle of the current state is normalized
         * in the interval [-180 ; 180]
         */
        setAngle: function (angle) {
            this.angle = (angle + 180) % 360 - 180;
            return this;
        },
        
        setRawAngle: function (angle) {
            this.angle = angle;
            return this;
        },
        
        setTransitionZoomPercent: function (zoomPercent) {
            this.transitionZoomPercent = zoomPercent;
            return this;
        },
        
        setTransitionProfile: function (profile) {
            this.transitionProfile = profile;
            return this;
        },
        
        setTransitionPath: function (svgPath) {
            this.transitionPath = svgPath;
            return this;
        },
        
        /*
         * Set the current camera's properties to the given SVG element.
         *
         * If the element is a rectangle, the properties of the frames are based
         * on the geometrical properties of the rectangle.
         * Otherwise, the properties of the frame are based on the bounding box
         * of the given element.
         *
         * Parameters:
         *    - svgElement: an element from the SVG DOM
         */
        setAtElement: function (svgElement) {
            // Read the raw bounding box of the given SVG element
            var x, y, w, h;
            if (svgElement.nodeName === &quot;rect&quot;) {
                x = svgElement.x.baseVal.value;
                y = svgElement.y.baseVal.value;
                w = svgElement.width.baseVal.value;
                h = svgElement.height.baseVal.value;
            } else {
                var b = svgElement.getBBox();
                x = b.x;
                y = b.y;
                w = b.width;
                h = b.height;
            }

            // Compute the raw coordinates of the center
            // of the given SVG element
            var c = document.documentElement.createSVGPoint();
            c.x = x + w / 2;
            c.y = y + h / 2;
            
            // Compute the coordinates of the center of the given SVG element
            // after its current transformation
            var matrix = svgElement.getCTM();
            c = c.matrixTransform(matrix);

            // Compute the scaling factor applied to the given SVG element
            var scale = Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b);
            
            // Update the camera to match the bounding box information of the
            // given SVG element after its current transformation
            return this.setCenter(c.x, c.y)
                .setSize(w * scale, h * scale)
                .setAngle(Math.atan2(matrix.b, matrix.a) * 180 / Math.PI);
        },

        setAtState: function (other) {
            return this.setCenter(other.cx, other.cy)
                .setSize(other.width, other.height)
                .setAngle(other.angle)
                .setClipped(other.clipped)
                .setTransitionZoomPercent(other.transitionZoomPercent)
                .setTransitionProfile(other.transitionProfile)
                .setTransitionPath(other.transitionPath);
        },
        
        interpolatableAttributes: [&quot;width&quot;, &quot;height&quot;, &quot;angle&quot;],
        
        interpolate: function (initialState, finalState, ratio, useTransitionPath, reverseTransitionPath) {
            var remaining = 1 - ratio;
            for (var i = 0; i &lt; this.interpolatableAttributes.length; i += 1) {
                var attr = this.interpolatableAttributes[i];
                this[attr] = finalState[attr] * ratio + initialState[attr] * remaining;
            }

            var svgPath = reverseTransitionPath ? initialState.transitionPath : finalState.transitionPath;
            if (useTransitionPath &amp;&amp; svgPath) {
                var pathLength = svgPath.getTotalLength();
                
                if (reverseTransitionPath) {
                    var startPoint = svgPath.getPointAtLength(pathLength);
                    var endPoint = svgPath.getPointAtLength(0);
                    var currentPoint = svgPath.getPointAtLength(pathLength * remaining);
                }
                else {
                    var startPoint = svgPath.getPointAtLength(0);
                    var endPoint = svgPath.getPointAtLength(pathLength);
                    var currentPoint = svgPath.getPointAtLength(pathLength * ratio);
                }
 
                this.cx = currentPoint.x + (finalState.cx - endPoint.x) * ratio + (initialState.cx - startPoint.x) * remaining;
                this.cy = currentPoint.y + (finalState.cy - endPoint.y) * ratio + (initialState.cy - startPoint.y) * remaining;
            }
            else {
                this.cx = finalState.cx * ratio + initialState.cx * remaining;
                this.cy = finalState.cy * ratio + initialState.cy * remaining;
            }
        }
    });
    
    exports.Camera = exports.CameraState.subtype({
        construct: function (viewPort, idLayer) {
            exports.CameraState.construct.call(this);
            
            this.viewPort = viewPort;
            
            // Clipping rectangle
            this.svgClipRect = document.createElementNS(SVG_NS, &quot;rect&quot;);
        
            // Clipping path
            var svgClipPath = document.createElementNS(SVG_NS, &quot;clipPath&quot;);
            svgClipPath.setAttribute(&quot;id&quot;, &quot;sozi-clip-path-&quot; + viewPort.id + &quot;-&quot; + idLayer);
            svgClipPath.appendChild(this.svgClipRect);
            viewPort.svgGroup.appendChild(svgClipPath);

            // The group that will support the clipping operation
            var svgClippedGroup = document.createElementNS(SVG_NS, &quot;g&quot;);
            svgClippedGroup.setAttribute(&quot;clip-path&quot;, &quot;url(#sozi-clip-path-&quot; + viewPort.id + &quot;-&quot; + idLayer + &quot;)&quot;);
            viewPort.svgGroup.appendChild(svgClippedGroup);
            
            if (viewPort.isPrimary) {
                // This group will support transformations
                // we keep the layer group clean since it can be referenced
                // from &lt;use&gt; elements
                this.svgLayer = document.createElementNS(SVG_NS, &quot;g&quot;);
                this.svgLayer.appendChild(document.getElementById(idLayer));
            }
            else {
                // A &lt;use&gt; element referencing the target layer
                this.svgLayer = document.createElementNS(SVG_NS, &quot;use&quot;);
                this.svgLayer.setAttributeNS(XLINK_NS, &quot;href&quot;, &quot;#&quot; + idLayer);
            }
            svgClippedGroup.appendChild(this.svgLayer);
        },
        
        setAtState: function (other) {
            return exports.CameraState.setAtState.call(this, other).update();
        },
        
        getScale: function () {
            return Math.min(this.viewPort.width / this.width, this.viewPort.height / this.height);
        },
        
        rotate: function (angle) {
            return this.setAngle(this.angle + angle).update();
        },

        zoom: function (factor, x, y) {
            return this.setSize(this.width / factor, this.height / factor)
                       .drag(
                            (1 - factor) * (x - this.viewPort.width / 2),
                            (1 - factor) * (y - this.viewPort.height / 2)
                        );
        },
        
        drag: function (deltaX, deltaY) {
            var scale = this.getScale();
            var angleRad = this.angle * Math.PI / 180;
            var si = Math.sin(angleRad);
            var co = Math.cos(angleRad);
            return this.setCenter(
                    this.cx - (deltaX * co - deltaY * si) / scale,
                    this.cy - (deltaX * si + deltaY * co) / scale
                ).setClipped(false).update();
        },

        update: function () {
            var scale = this.getScale();
                    
            // Compute the size and location of the frame on the screen
            var width = this.width  * scale;
            var height = this.height * scale;
            var x = (this.viewPort.width - width) / 2;
            var y = (this.viewPort.height - height) / 2;

            // Adjust the location and size of the clipping rectangle and the frame rectangle
            this.svgClipRect.setAttribute(&quot;x&quot;, this.clipped ? x : 0);
            this.svgClipRect.setAttribute(&quot;y&quot;, this.clipped ? y : 0);
            this.svgClipRect.setAttribute(&quot;width&quot;,  this.clipped ? width  : this.viewPort.width);
            this.svgClipRect.setAttribute(&quot;height&quot;, this.clipped ? height : this.viewPort.height);
                    
            // Compute and apply the geometrical transformation to the layer group
            var translateX = -this.cx + this.width / 2  + x / scale;
            var translateY = -this.cy + this.height / 2 + y / scale;

            this.svgLayer.setAttribute(&quot;transform&quot;,
                &quot;scale(&quot; + scale + &quot;)&quot; +
                &quot;translate(&quot; + translateX + &quot;,&quot; + translateY + &quot;)&quot; +
                &quot;rotate(&quot; + (-this.angle) + ',' + this.cx + &quot;,&quot; + this.cy + &quot;)&quot;
            );
            
            return this;
        }
    });
    
    /**
     * @depend proto.js
     */
    exports.ViewPort = sozi.proto.Object.subtype({
        construct: function (id, idLayerList, primary) {
            this.id = id;
            exports.viewPorts[id] = this;
            
            this.isPrimary = !!primary;
            
            if (this.isPrimary) {
                if (primaryViewport) {
                    throw &quot;Failed to create a primary viewport. A primary viewport already exists.&quot;;
                }
                else {
                    primaryViewport = this;
                }
            }
            
            // TODO add a clip path for the viewport
            this.svgGroup = document.createElementNS(SVG_NS, &quot;g&quot;);
            this.svgGroup.setAttribute(&quot;class&quot;, &quot;sozi-viewport&quot;);
            this.svgGroup.setAttribute(&quot;id&quot;, &quot;sozi-viewport-&quot; + id);
            document.documentElement.appendChild(this.svgGroup);
            
            this.setLocation(0, 0).setSize(window.innerWidth, window.innerHeight);
            
            // Create a camera for each layer
            this.cameras = {};
            idLayerList.forEach(function (idLayer) {
                this.cameras[idLayer] = exports.Camera.instance(this, idLayer);
            }, this);
        },
        
        setSize: function (width, height) {
            this.width = width;
            this.height = height;
            return this;
        },
        
        setLocation: function (x, y) {
            this.x = x;
            this.y = y;
            return this;
        },

        contains: function (x, y) {
            return x &gt;= this.x &amp;&amp; x &lt; this.x + this.width &amp;&amp;
                   y &gt;= this.y &amp;&amp; y &lt; this.y + this.height;
        },
        
        /*
         * Returns the geometrical properties of the SVG document
         *
         * Returns:
         *    - The default size, translation and rotation for the document's bounding box
         */
        getDocumentState: function () {
            // This object defines the bounding box of the whole document
            var camera = exports.CameraState.instance()
                .setCenter(initialBBox.x + initialBBox.width / 2,
                           initialBBox.y + initialBBox.height / 2)
                .setSize(initialBBox.width, initialBBox.height)
                .setClipped(false);
            
            // Copy the document's bounding box to all layers
            var result = {};
            for (var idLayer in this.cameras) {
                result[idLayer] = camera;
            }
            return result;
        },

        /*
         * Apply geometrical transformations to the image according to the current
         * geometrical attributes of this Display.
         *
         * This method is called automatically when the window is resized.
         */
        update: function () {
            this.svgGroup.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + this.x + &quot;,&quot; + this.y + &quot;)&quot;);
            for (var idLayer in this.cameras) {
                this.cameras[idLayer].update();
            }
            return this;
        },

        /*
         * Transform the SVG document to show the given frame.
         *
         * Parameters:
         *    - frame: the frame to show
         */
        showFrame: function (frame) {
            for (var idLayer in frame.states) {
                this.cameras[idLayer].setAtState(frame.states[idLayer]);
            }
            return this;
        },

        /*
         * Apply an additional translation to the SVG document based on onscreen coordinates.
         *
         * Parameters:
         *    - deltaX: the horizontal displacement, in pixels
         *    - deltaY: the vertical displacement, in pixels
         */
        drag: function (deltaX, deltaY) {
            for (var idLayer in this.cameras) {
                this.cameras[idLayer].drag(deltaX, deltaY);
            }
            return this;
        },

        /*
         * Zooms the display with the given factor.
         *
         * The zoom is centered around (x, y) with respect to the center of the display area.
         */
        zoom: function (factor, x, y) {
            for (var idLayer in this.cameras) {
                this.cameras[idLayer].zoom(factor, x, y);
            }
            return this;
        },

        /*
         * Rotate the display with the given angle.
         *
         * The rotation is centered around the center of the display area.
         */
        rotate: function (angle) {
            for (var idLayer in this.cameras) {
                this.cameras[idLayer].rotate(angle);
            }
            return this;
        },
        
        /**
         * The default handler for window resize events.
         *
         * @param widthRatio The horizontal resize ratio
         * @param heightRatio The vertical resize ratio
         */
        onWindowResize: function (widthRatio, heightRatio) {
            this.setLocation(this.x * widthRatio, this.y * heightRatio)
                .setSize(this.width * widthRatio, this.height * heightRatio)
                .update();
        }
    });
    
    /*
     * Initializes the current Display.
     *
     * This method prepares the DOM representation of the current SVG document.
     * All the image is embedded into a global &quot;g&quot; element on which transformations will be applied.
     * A clipping rectangle is added.
     *
     * This method must be called when the document is ready to be manipulated.
     */
    function onDocumentReady() {
        var svgRoot = document.documentElement; // TODO check SVG tag
        
        // Save the initial bounding box of the document
        // and force its dimensions to the browser window
        initialBBox = svgRoot.getBBox();
        lastWindowWidth = window.innerWidth;
        lastWindowHeight = window.innerHeight;
        svgRoot.setAttribute(&quot;width&quot;, lastWindowWidth);
        svgRoot.setAttribute(&quot;height&quot;, lastWindowHeight);
        
        sozi.events.fire(&quot;sozi.display.ready&quot;);
    }

    /*
     * Resizes the SVG document to fit the browser window.
     *
     * This method calls onWindowResize on all registered viewports.
     */
    function resize() {
        var svgRoot = document.documentElement;
        svgRoot.setAttribute(&quot;width&quot;, window.innerWidth);
        svgRoot.setAttribute(&quot;height&quot;, window.innerHeight);
        
        for (var vp in exports.viewPorts) {
            exports.viewPorts[vp].onWindowResize(window.innerWidth / lastWindowWidth, window.innerHeight / lastWindowHeight);
        }

        lastWindowWidth = window.innerWidth;
        lastWindowHeight = window.innerHeight;
    }
    
    sozi.events.listen(&quot;sozi.document.ready&quot;, onDocumentReady); // @depend events.js
    window.addEventListener(&quot;resize&quot;, resize, false);
});

/*
* Sozi - A presentation tool using the SVG standard
*
* Copyright (C) 2010-2013 Guillaume Savaton
*
* This program is dual licensed under the terms of the MIT license
* or the GNU General Public License (GPL) version 3.
* A copy of both licenses is provided in the doc/ folder of the
* official release of Sozi.
*
* See http://sozi.baierouge.fr/wiki/en:license for details.
*/

/**
 * @name sozi.document
 * @namespace Document analysis.
 * @depend namespace.js
 */
namespace(this, &quot;sozi.document&quot;, function (exports, window) {
    &quot;use strict&quot;;
    
    // An alias to the global document object
    var document = window.document;
    
    // Constant: the Sozi namespace
    var SOZI_NS = &quot;http://sozi.baierouge.fr&quot;;
    
    // Constant: the default frame properties, if missing in the SVG document
    var DEFAULTS = {
        &quot;title&quot;: &quot;Untitled&quot;,
        &quot;sequence&quot;: &quot;0&quot;,
        &quot;hide&quot;: &quot;true&quot;,
        &quot;clip&quot;: &quot;true&quot;,
        &quot;show-in-frame-list&quot;: &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;,
        &quot;transition-path-hide&quot;: &quot;true&quot;
    };

    var DRAWABLE_TAGS = [ &quot;g&quot;, &quot;image&quot;, &quot;path&quot;, &quot;rect&quot;, &quot;circle&quot;,
        &quot;ellipse&quot;, &quot;line&quot;, &quot;polyline&quot;, &quot;polygon&quot;, &quot;text&quot;, &quot;clippath&quot; ];

    // The definitions of all valid frames in the current document
    exports.frames = [];
    
    // The list of layer ids managed by Sozi
    exports.idLayerList = [];
    
    /*
    * Returns the value of an attribute of a given Sozi SVG element.
    *
    * If the attribute is empty or does not exist,
    * then a default value is returned (See DEFAULTS).
    */
    function readAttribute(soziElement, attr) {
        return soziElement.getAttributeNS(SOZI_NS, attr) || DEFAULTS[attr];
    }

    function readStateForLayer(frame, idLayer, soziElement) {
        var state = frame.states[idLayer] =
            frame.states[idLayer] || sozi.display.CameraState.instance();
        
        if (typeof state.transitionZoomPercent === &quot;undefined&quot; || soziElement.hasAttributeNS(SOZI_NS, &quot;transition-zoom-percent&quot;)) {
            state.setTransitionZoomPercent(parseInt(readAttribute(soziElement, &quot;transition-zoom-percent&quot;), 10));
        }

        if (typeof state.transitionProfile === &quot;undefined&quot; || soziElement.hasAttributeNS(SOZI_NS, &quot;transition-profile&quot;)) {
            state.setTransitionProfile(sozi.animation.profiles[readAttribute(soziElement, &quot;transition-profile&quot;)]);
        }
        
        if (typeof state.transitionPath === &quot;undefined&quot; || soziElement.hasAttributeNS(SOZI_NS, &quot;transition-path&quot;)) {
            var svgPath = document.getElementById(soziElement.getAttributeNS(SOZI_NS, &quot;transition-path&quot;));
            if (svgPath &amp;&amp; svgPath.nodeName === &quot;path&quot;) {
                state.setTransitionPath(svgPath);
                if (readAttribute(soziElement, &quot;transition-path-hide&quot;) === &quot;true&quot;) {
                    svgPath.style.visibility = &quot;hidden&quot;;
                }
            }
        }
        
        if (soziElement.hasAttributeNS(SOZI_NS, &quot;refid&quot;)) {
            var svgElement = document.getElementById(soziElement.getAttributeNS(SOZI_NS, &quot;refid&quot;));
            if (svgElement) {
                state.setAtElement(svgElement);
                if (readAttribute(soziElement, &quot;hide&quot;) === &quot;true&quot;) {
                    svgElement.style.visibility = &quot;hidden&quot;;
                }
            }
        }
            
        if (soziElement.hasAttributeNS(SOZI_NS, &quot;clip&quot;)) {
            state.setClipped(readAttribute(soziElement, &quot;clip&quot;) === &quot;true&quot;);
        }
    }
    
    /*
    * Builds the list of frames from the current document.
    *
    * This method collects all elements with tag &quot;sozi:frame&quot; and
    * retrieves their geometrical and animation attributes.
    * SVG elements that should be hidden during the presentation are hidden.
    *
    * The resulting list is available in frames, sorted by frame indices.
    */
    function readFrames() {
        // Collect all group ids referenced in &lt;layer&gt; elements
        var idLayerRefList = [];
        var soziLayerList = document.getElementsByTagNameNS(SOZI_NS, &quot;layer&quot;);
        for (var i = 0; i &lt; soziLayerList.length; i += 1) {
            var idLayer = soziLayerList[i].getAttributeNS(SOZI_NS, &quot;group&quot;);
            if (idLayer &amp;&amp; idLayerRefList.indexOf(idLayer) === -1) {
                idLayerRefList.push(idLayer);
            }
        }

        // Reorganize the document, grouping objects that do not belong
        // to a group referenced in &lt;layer&gt; elements
        var svgRoot = document.documentElement;
        var SVG_NS = &quot;http://www.w3.org/2000/svg&quot;;

        // Create the first wrapper group
        var svgWrapper = document.createElementNS(SVG_NS, &quot;g&quot;);

        // For each child of the root SVG element
        var svgElementList = Array.prototype.slice.call(svgRoot.childNodes);
        svgElementList.forEach(function (svgElement, index) {
            if (!svgElement.getAttribute) {
                // Remove text elements
                svgRoot.removeChild(svgElement);
            }
            else if (idLayerRefList.indexOf(svgElement.getAttribute(&quot;id&quot;)) !== -1) {
                // If the current element is a referenced layer ...
                if (svgWrapper.firstChild) {
                    // ... and if there were other non-referenced elements before it,
                    // append the wrapper group to the &lt;defs&gt; element
                    svgWrapper.setAttribute(&quot;id&quot;, &quot;sozi-wrapper-&quot; + index);
                    exports.idLayerList.push(&quot;sozi-wrapper-&quot; + index);
                    svgRoot.insertBefore(svgWrapper, svgElement);
                    
                    // Prepare a new wrapper element
                    svgWrapper = document.createElementNS(SVG_NS, &quot;g&quot;);
                }
                
                // ... append the current element to the &lt;defs&gt; element
                exports.idLayerList.push(svgElement.getAttribute(&quot;id&quot;));
            }
            else if (DRAWABLE_TAGS.indexOf(svgElement.localName.toLowerCase()) !== -1) {
                // If the current element is not a referenced layer
                // and is drawable, move it to the current wrapper element
                svgRoot.removeChild(svgElement);
                svgWrapper.appendChild(svgElement);
            }
        });

        // Append last wrapper if needed
        if (svgWrapper.firstChild) {
            svgWrapper.setAttribute(&quot;id&quot;, &quot;sozi-wrapper-&quot; + svgElementList.length);
            exports.idLayerList.push(&quot;sozi-wrapper-&quot; + svgElementList.length);
            svgRoot.appendChild(svgWrapper);
        }

        
        // Analyze &lt;frame&gt; elements sorted by sequence number
        var soziFrameList = Array.prototype.slice.call(document.getElementsByTagNameNS(SOZI_NS, &quot;frame&quot;));
        soziFrameList.sort(
            function (a, b) {
                var seqA = parseInt(readAttribute(a, &quot;sequence&quot;), 10);
                var seqB = parseInt(readAttribute(b, &quot;sequence&quot;), 10)
                return seqA - seqB;
            }
        );
        
        soziFrameList.forEach(function (soziFrame, indexFrame) {
            var newFrame = {
                id: soziFrame.getAttribute(&quot;id&quot;),
                title: readAttribute(soziFrame, &quot;title&quot;),
                showInFrameList: readAttribute(soziFrame, &quot;show-in-frame-list&quot;) === &quot;true&quot;,
                sequence: parseInt(readAttribute(soziFrame, &quot;sequence&quot;), 10),
                timeoutEnable: readAttribute(soziFrame, &quot;timeout-enable&quot;) === &quot;true&quot;,
                timeoutMs: parseInt(readAttribute(soziFrame, &quot;timeout-ms&quot;), 10),
                transitionDurationMs: parseInt(readAttribute(soziFrame, &quot;transition-duration-ms&quot;), 10),
                states: {}
            };

            // Get the default properties for all layers, either from
            // the current &lt;frame&gt; element or from the corresponding
            // layer in the previous frame.
            // Those properties can later be overriden by &lt;layer&gt; elements
            exports.idLayerList.forEach(function (idLayer) {
                if (indexFrame === 0 || idLayer.search(&quot;sozi-wrapper-[0-9]+&quot;) !== -1) {
                    // In the first frame, or in wrapper layers,
                    // read layer attributes from the &lt;frame&gt; element
                    readStateForLayer(newFrame, idLayer, soziFrame);
                }
                else {
                    // After the first frame, in referenced layers,
                    // copy attributes from the corresponding layer in the previous frame
                    var currentState = newFrame.states[idLayer] = sozi.display.CameraState.instance();
                    var previousState = exports.frames[exports.frames.length - 1].states[idLayer];
                    currentState.setAtState(previousState);
                }
            });

            // Collect and analyze &lt;layer&gt; elements in the current &lt;frame&gt; element
            var soziLayerList = Array.prototype.slice.call(soziFrame.getElementsByTagNameNS(SOZI_NS, &quot;layer&quot;));
            soziLayerList.forEach(function (soziLayer) {
                var idLayer = soziLayer.getAttributeNS(SOZI_NS, &quot;group&quot;);
                if (idLayer &amp;&amp; exports.idLayerList.indexOf(idLayer) !== -1) {
                    readStateForLayer(newFrame, idLayer, soziLayer);
                }
            });
            
            // If the &lt;frame&gt; element has at least one valid layer,
            // add it to the frame list
            for (var idLayer in newFrame.states) {
                if (newFrame.states.hasOwnProperty(idLayer)) {
                    exports.frames.push(newFrame);
                    break;
                }
            }
        });
    }

    /**
     * Return the frame with the given id.
     *
     * @return The index of the frame with the given id. -1 if not found.
     */
    exports.getFrameIndexForId = function (idFrame) {
        for (var indexFrame = 0; indexFrame &lt; exports.frames.length; indexFrame += 1) {
            if (exports.frames[indexFrame].id === idFrame) {
                return indexFrame;
            }
        }
        return - 1;
    };
    
    /*
     * Event handler: document load.
     *
     * This function reads the frames from the document and fires
     * the &quot;documentready&quot; event.
     *
     * @depend events.js
     */
    function onLoad() {
        document.documentElement.removeAttribute(&quot;viewBox&quot;);
        readFrames();
        sozi.events.fire(&quot;sozi.document.ready&quot;);
    }

    window.addEventListener(&quot;load&quot;, onLoad, false);
});

/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 *
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

/**
 * @name sozi.framelist
 * @namespace Show the frame list.
 * @depend namespace.js
 */
namespace(this, &quot;sozi.framelist&quot;, function (exports, window) {
    &quot;use strict&quot;;
    
    // An alias to the global document object
	var document = window.document;
	
    // Constant: the margin around the text of the frame list
    var MARGIN = 5;
    
	// The SVG group that will contain the frame list
    var svgTocGroup;
    
    // The SVG group that will contain the frame titles
    var svgTitlesGroup;
    
    // The current height of the frame list,
    // computed during the initialization
    var tocHeight = 0;
    
    // The X coordinate of the frame list in its hidden state
    var translateXHidden;
    
    // The X coordinate of the frame list when it is completely visible
    var translateXVisible;
    
    // The initial X coordinate of the frame list before starting an animation.
    // This variable is set before showing/hiding the frame list.
    var translateXStart;
    
    // The final X coordinate of the frame list for the starting animation.
    // This variable is set before showing/hiding the frame list.
    var translateXEnd;
    
    // The current X coordinate of the frame list for the running animation.
    // This variable is updated on each animation step.
    var translateX;
    
    // The animator object that will manage animations of the frame list
    var animator;
    
    // Constant: the duration of the showing/hiding animation, in milliseconds
    var ANIMATION_TIME_MS = 300;
    
    // Constant: the acceleration profile of the showing/hiding animation
    var ANIMATION_PROFILE = &quot;decelerate&quot;;
    
    // Constant: the SVG namespace
    var SVG_NS = &quot;http://www.w3.org/2000/svg&quot;;

	function onMouseOut(evt) {
        var rel = evt.relatedTarget,
            svgRoot = document.documentElement;
        while (rel &amp;&amp; rel !== svgTocGroup &amp;&amp; rel !== svgRoot) {
            rel = rel.parentNode;
        }
        if (rel !== svgTocGroup) {
            exports.hide();
            sozi.player.restart();
            evt.stopPropagation();
        }
    }

	function onClickArrowUp(evt) {
        var ty = svgTitlesGroup.getCTM().f;
        if (ty &lt;= -window.innerHeight / 2) {
            ty += window.innerHeight / 2;
        } else if (ty &lt; 0) {
            ty = 0;
        }
        svgTitlesGroup.setAttribute(&quot;transform&quot;, &quot;translate(0,&quot; + ty + &quot;)&quot;);
        evt.stopPropagation();
	}

	function onClickArrowDown(evt) {
        var ty = svgTitlesGroup.getCTM().f;
        if (ty + tocHeight &gt;= window.innerHeight * 3 / 2) {
            ty -= window.innerHeight / 2;
        } else if (ty + tocHeight &gt; window.innerHeight + 2 * MARGIN) {
            ty = window.innerHeight - tocHeight - 4 * MARGIN;
        }
        svgTitlesGroup.setAttribute(&quot;transform&quot;, &quot;translate(0,&quot; + ty + &quot;)&quot;);
        evt.stopPropagation();
    }

    /*
     * Create a function that responds to clicks on frame list entries.
     */
    function makeClickHandler(index) {
        return function (evt) {
            sozi.player.previewFrame(index);
            evt.stopPropagation();
        };
    }
    
    /*
     * The default event handler, to prevent event propagation
     * through the frame list.
     */
    function defaultEventHandler(evt) {
	    evt.stopPropagation();
    }
    
    /*
     * Adds a table of contents to the document.
     *
     * The table of contents is a rectangular region with the list of frame titles.
     * Clicking on a title moves the presentation to the corresponding frame.
     *
     * The table of contents is hidden by default.
     */
    function onPlayerReady() {
        svgTocGroup = document.createElementNS(SVG_NS, &quot;g&quot;);
        svgTocGroup.setAttribute(&quot;id&quot;, &quot;sozi-toc&quot;);
        document.documentElement.appendChild(svgTocGroup);

        svgTitlesGroup = document.createElementNS(SVG_NS, &quot;g&quot;);
        svgTocGroup.appendChild(svgTitlesGroup);
    
        // The background rectangle of the frame list
        var tocBackground = document.createElementNS(SVG_NS, &quot;rect&quot;);
        tocBackground.setAttribute(&quot;id&quot;, &quot;sozi-toc-background&quot;);
        tocBackground.setAttribute(&quot;x&quot;, MARGIN);
        tocBackground.setAttribute(&quot;y&quot;, MARGIN);
        tocBackground.setAttribute(&quot;rx&quot;, MARGIN);
        tocBackground.setAttribute(&quot;ry&quot;, MARGIN);
        tocBackground.addEventListener(&quot;click&quot;, defaultEventHandler, false);
        tocBackground.addEventListener(&quot;mousedown&quot;, defaultEventHandler, false);
        tocBackground.addEventListener(&quot;mouseout&quot;, onMouseOut, false);
        svgTitlesGroup.appendChild(tocBackground);

        var tocWidth = 0;
        sozi.document.frames.forEach(function (frame, frameIndex) {
            if (frame.showInFrameList) {
                var text = document.createElementNS(SVG_NS, &quot;text&quot;);
                text.appendChild(document.createTextNode(frame.title));
                text.setAttribute(&quot;id&quot;, &quot;sozi-toc-&quot; + frame.id);
                svgTitlesGroup.appendChild(text);
    
                if (frameIndex === sozi.player.currentFrameIndex) {
                    text.setAttribute(&quot;class&quot;, &quot;sozi-toc-current&quot;);
                }
                         
                var textWidth = text.getBBox().width;
                tocHeight += text.getBBox().height;
                if (textWidth &gt; tocWidth) {
                    tocWidth = textWidth;
                }
    
                text.setAttribute(&quot;x&quot;, 2 * MARGIN);
                text.setAttribute(&quot;y&quot;, tocHeight + MARGIN);
                text.addEventListener(&quot;click&quot;, makeClickHandler(frameIndex), false);
                text.addEventListener(&quot;mousedown&quot;, defaultEventHandler, false);
            }
        });

        // The &quot;up&quot; button
        var tocUp = document.createElementNS(SVG_NS, &quot;path&quot;);
        tocUp.setAttribute(&quot;class&quot;, &quot;sozi-toc-arrow&quot;);
        tocUp.setAttribute(&quot;d&quot;, &quot;M&quot; + (tocWidth + 3 * MARGIN) + &quot;,&quot; + (5 * MARGIN) +
                           &quot; l&quot; + (4 * MARGIN) + &quot;,0&quot; +
                           &quot; l-&quot; + (2 * MARGIN) + &quot;,-&quot; + (3 * MARGIN) +
                           &quot; z&quot;);
        tocUp.addEventListener(&quot;click&quot;, onClickArrowUp, false);
        tocUp.addEventListener(&quot;mousedown&quot;, defaultEventHandler, false);
        svgTocGroup.appendChild(tocUp);

        // The &quot;down&quot; button
        var tocDown = document.createElementNS(SVG_NS, &quot;path&quot;);
        tocDown.setAttribute(&quot;class&quot;, &quot;sozi-toc-arrow&quot;);
        tocDown.setAttribute(&quot;d&quot;, &quot;M&quot; + (tocWidth + 3 * MARGIN) + &quot;,&quot; + (7 * MARGIN) +
                             &quot; l&quot; + (4 * MARGIN) + &quot;,0&quot; +
                             &quot; l-&quot; + (2 * MARGIN) + &quot;,&quot; + (3 * MARGIN) +
                             &quot; z&quot;);
        tocDown.addEventListener(&quot;click&quot;, onClickArrowDown, false);
        tocDown.addEventListener(&quot;mousedown&quot;, defaultEventHandler, false);
        svgTocGroup.appendChild(tocDown);

        tocBackground.setAttribute(&quot;width&quot;, tocWidth + 7 * MARGIN);
        tocBackground.setAttribute(&quot;height&quot;, tocHeight + 2 * MARGIN);
        
        translateXHidden = -tocWidth - 9 * MARGIN;
        translateXVisible = 0;
        translateX = translateXEnd = translateXHidden;
        
        svgTocGroup.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + translateXHidden + &quot;,0)&quot;);
        animator = sozi.animation.Animator.instance().augment({
            onStep: function (progress) {
                var profileProgress = sozi.animation.profiles[ANIMATION_PROFILE](progress),
                    remaining = 1 - profileProgress;
                translateX = translateXEnd * profileProgress + translateXStart * remaining;
                svgTocGroup.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + translateX + &quot;,0)&quot;);
            }
        });
    }

	/*
	 * Highlight the current frame title in the frame list.
	 *
	 * This handler is called on each frame change,
	 * even when the frame list is hidden.
	 */
    function onFrameChange(index) {
        var currentElementList = Array.prototype.slice.call(document.getElementsByClassName(&quot;sozi-toc-current&quot;));
        currentElementList.forEach(function (svgElement) {
            svgElement.removeAttribute(&quot;class&quot;);
        });

        var frame = sozi.document.frames[index];
        if (frame.showInFrameList) {
            document.getElementById(&quot;sozi-toc-&quot; + frame.id).setAttribute(&quot;class&quot;, &quot;sozi-toc-current&quot;);
        }
    }
    
    /*
     * Makes the table of contents visible.
     */
    exports.show = function () {
        // Bring frame list to front
        document.documentElement.appendChild(svgTocGroup);
        
        translateXStart = translateX;
        translateXEnd = translateXVisible;
        animator.start(ANIMATION_TIME_MS); // FIXME depends on current elapsed time
    };

    /*
     * Makes the table of contents invisible.
     */
    exports.hide = function () {
        translateXStart = translateX;
        translateXEnd = translateXHidden;
        animator.start(ANIMATION_TIME_MS); // FIXME depends on current elapsed time
    };

    /*
     * Returns true if the table of contents is visible, false otherwise.
     */
    exports.isVisible = function () {
        return translateXEnd === translateXVisible;
    };

    // @depend events.js
	sozi.events.listen(&quot;sozi.player.ready&quot;, onPlayerReady);
	sozi.events.listen(&quot;sozi.player.cleanup&quot;, exports.hide);
	sozi.events.listen(&quot;sozi.player.framechange&quot;, onFrameChange);
});

/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 *
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

/**
 * @name sozi.framenumber
 * @namespace Show the frame number.
 * @depend namespace.js
 */
namespace(this, &quot;sozi.framenumber&quot;, function (exports, window) {
    &quot;use strict&quot;;
    
    // An alias to the global document object
    var document = window.document;
    
    // The SVG group containing the frame number
    var svgGroup;
    
    // The SVG text element and its text node containing the frame number
    var svgText, svgTextNode;
    
    // The SVG circle enclosing the frame number
    var svgCircle;
    
    // Constant: the SVG namespace
    var SVG_NS = &quot;http://www.w3.org/2000/svg&quot;;
    
    function adjust() {
        var textBBox = svgText.getBBox(),
            d = Math.max(textBBox.width, textBBox.height) * 0.75,
            t = d * 1.25;
        svgCircle.setAttribute(&quot;r&quot;, d);
        svgGroup.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + t + &quot;,&quot; + t + &quot;)&quot;);
    }
    
    function onPlayerReady() {
        svgGroup = document.createElementNS(SVG_NS, &quot;g&quot;);
        svgText = document.createElementNS(SVG_NS, &quot;text&quot;);
        svgCircle = document.createElementNS(SVG_NS, &quot;circle&quot;);
        
        svgGroup.setAttribute(&quot;id&quot;, &quot;sozi-framenumber&quot;);

        svgCircle.setAttribute(&quot;cx&quot;, 0);
        svgCircle.setAttribute(&quot;cy&quot;, 0);
        svgGroup.appendChild(svgCircle);
        
        svgTextNode = document.createTextNode(sozi.player.currentFrameIndex + 1);
        svgText.setAttribute(&quot;text-anchor&quot;, &quot;middle&quot;);
        svgText.setAttribute(&quot;dominant-baseline&quot;, &quot;central&quot;);
        svgText.setAttribute(&quot;x&quot;, 0);
        svgText.setAttribute(&quot;y&quot;, 0);
        svgText.appendChild(svgTextNode);
        svgGroup.appendChild(svgText);
        
        document.documentElement.appendChild(svgGroup);
        
        adjust();
    }

    function onFrameChange(index) {
        svgTextNode.nodeValue = index + 1;
    }
    
    // @depend events.js
	sozi.events.listen(&quot;sozi.player.ready&quot;, onPlayerReady);
	sozi.events.listen(&quot;sozi.player.framechange&quot;, onFrameChange);
});

/*
* Sozi - A presentation tool using the SVG standard
*
* Copyright (C) 2010-2013 Guillaume Savaton
*
* This program is dual licensed under the terms of the MIT license
* or the GNU General Public License (GPL) version 3.
* A copy of both licenses is provided in the doc/ folder of the
* official release of Sozi.
*
* See http://sozi.baierouge.fr/wiki/en:license for details.
*/

/**
 * @name sozi.links
 * @namespace Links fix for Webkit.
 * @depend namespace.js
 */
namespace(this, &quot;sozi.links&quot;, function (exports, window) {
    &quot;use strict&quot;;
    
    var SVG_NS = &quot;http://www.w3.org/2000/svg&quot;;
    var XLINK_NS = &quot;http://www.w3.org/1999/xlink&quot;;
    
    function getClickHandler(index) {
        return function (evt) {
            sozi.player.moveToFrame(index);
            evt.preventDefault();
            evt.stopPropagation();
        };
    }
    
    /*
     * Event handler: document ready.
     *
     * This function adds an event listener to each internal link.
     * Clicking on a link that targets a frame of this document
     * will call sozi.player.moveToFrame().
     */
    function onDocumentReady() {
        var links = window.document.getElementsByTagNameNS(SVG_NS, &quot;a&quot;);
        for (var i = 0; i &lt; links.length; i += 1) {
            var href = links[i].getAttributeNS(XLINK_NS, &quot;href&quot;);
            if (href &amp;&amp; href[0] === &quot;#&quot;) {
                links[i].addEventListener(&quot;click&quot;, getClickHandler(sozi.location.getFrameIndexForHash(href)), false);
            }
        }
    }

    sozi.events.listen(&quot;sozi.document.ready&quot;, onDocumentReady); // @depend events.js
});


/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 *
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

/**
 * @name sozi.location
 * @namespace Manage the URL in the address bar of the browser window.
 * @depend namespace.js
 */
namespace(this, &quot;sozi.location&quot;, function (exports, window) {
    &quot;use strict&quot;;
    
    var changedFromWithin = false;

    /*
     * Returns the frame index corresponding to the URL hash.
     *
     * This is a shortcut for sozi.location.getFrameIndexForHash(window.location.hash)
     */
    exports.getFrameIndex = function () {
        return exports.getFrameIndexForHash(window.location.hash);
    };
    
    /*
     * Returns the frame index corresponding to the given URL hash.
     *
     * The URL hash can be either a frame index or a frame id.
     * In the URL, the frame index starts a 1.
     * This method converts it into a 0-based index.
     *
     * If the URL hash is not a positive integer, then 0 is returned.
     * It the URL hash is an integer greater than the last frame index, then
     * the last frame index is returned.
     */
    exports.getFrameIndexForHash = function (hash) {
        var indexOrId = hash ? hash.slice(1) : &quot;1&quot;;
        var index;
        if (/^[0-9]+$/.test(indexOrId)) {
            index = parseInt(indexOrId, 10) - 1;
        }
        else {
            index = sozi.document.getFrameIndexForId(indexOrId);
        }
        
        if (index &lt; 0) {
            return 0;
        }
        else if (index &gt;= sozi.document.frames.length) {
            return sozi.document.frames.length - 1;
        }
        else {
            return index;
        }
    };

    /*
     * Event handler: hash change.
     *
     * This function is called when the URL hash is changed.
     * If the hash was changed manually in the address bar, and if it corresponds to
     * a valid frame number, then the presentation moves to that frame.
     *
     * The hashchange event can be triggered externally, by the user modifying the URL,
     * or internally, by the script modifying window.location.hash.
     */
    function onHashChange() {
        var index = exports.getFrameIndex();
        if (!changedFromWithin) {
            sozi.player.moveToFrame(index);
        }
        changedFromWithin = false;
    }
    
    /*
     * Event handler: frame change.
     *
     * This function is called when the presentation has reached a new frame.
     * The URL hash is set to the current frame id.
     */
    function onFrameChange(index) {
        changedFromWithin = true;
        window.location.hash = &quot;#&quot; + sozi.document.frames[index].id;
    }

    window.addEventListener(&quot;hashchange&quot;, onHashChange, false);
    sozi.events.listen(&quot;sozi.player.framechange&quot;, onFrameChange); // @depend events.js
});

/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 *
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

/**
 * @name sozi.player
 * @namespace Presentation player.
 * @depend namespace.js
 */
namespace(this, &quot;sozi.player&quot;, function (exports, window) {
    &quot;use strict&quot;;
    
    var viewPort;
    
    // The animator object used to animate transitions
    var animator;
    
    // The handle returned by setTimeout() for frame timeout
    var nextFrameTimeout;
    
    // Constants: default animation properties
    // for out-of-sequence transitions
    var DEFAULT_DURATION_MS = 500;
    var DEFAULT_ZOOM_PERCENT = -10;
    var DEFAULT_PROFILE = &quot;linear&quot;;
    
    // The source frame index for the current transition
    var sourceFrameIndex = 0;
    
    // The index of the visible frame
    exports.currentFrameIndex = 0;
    
    // The state of the presentation.
    // If false, no automatic transition will be fired.
    var playing = false;
    
    // The state of the current frame.
    // If true, an automatic transition will be fired after the current timeout.
    var waiting = false;

    /*
     * Starts waiting before moving to the next frame.
     *
     * It the current frame has a timeout set, this method
     * will register a timer to move to the next frame automatically
     * after the specified time.
     *
     * If the current frame is the last, the presentation will
     * move to the first frame.
     */
    function waitTimeout() {
        if (sozi.document.frames[exports.currentFrameIndex].timeoutEnable) {
            waiting = true;
            var index = (exports.currentFrameIndex + 1) % sozi.document.frames.length;
            nextFrameTimeout = window.setTimeout(function () {
                    exports.moveToFrame(index);
                },
                sozi.document.frames[exports.currentFrameIndex].timeoutMs
            );
        }
    }

    /*
     * Starts the presentation from the given frame index (0-based).
     *
     * This method sets the &quot;playing&quot; flag, shows the desired frame
     * and calls waitTimeout.
     */
    exports.startFromIndex = function (index) {
        playing = true;
        waiting = false;
        sourceFrameIndex = index;
        exports.currentFrameIndex = index;
        viewPort.showFrame(sozi.document.frames[index]);
        waitTimeout();
    };

    exports.restart = function () {
        exports.startFromIndex(exports.currentFrameIndex);
    };

    /*
     * Stops the presentation.
     *
     * This method clears the &quot;playing&quot;.
     * If the presentation was in &quot;waiting&quot; mode due to a timeout
     * in the current frame, then it stops waiting.
     * The current animation is stopped in its current state.
     */
    exports.stop = function () {
        animator.stop();
        if (waiting) {
            window.clearTimeout(nextFrameTimeout);
            waiting = false;
        }
        playing = false;
        sourceFrameIndex = exports.currentFrameIndex;
    };

    function getZoomData(zoomPercent, s0, s1) {
        var result = {
            ss: ((zoomPercent &lt; 0) ? Math.max(s0, s1) : Math.min(s0, s1)) * (100 - zoomPercent) / 100,
            ts: 0.5,
            k: 0
        };

        if (zoomPercent !== 0) {
            var a = s0 - s1;
            var b = s0 - result.ss;
            var c = s1 - result.ss;

            if (a !== 0) {
                var d = Math.sqrt(b * c);

                var u = (b - d) / a;
                var v = (b + d) / a;

                result.ts = (u &gt; 0 &amp;&amp; u &lt;= 1) ? u : v;
            }

            result.k = b / result.ts / result.ts;
        }

        return result;
    }

    /*
     * Jump to a frame with the given index (0-based).
     *
     * This method does not animate the transition from the current
     * state of the display to the desired frame.
     *
     * The presentation is stopped: if a timeout has been set for the
     * target frame, it will be ignored.
     *
     * The URL hash is set to the given frame index (1-based).
     */
    exports.jumpToFrame = function (index) {
        exports.stop();
        sozi.events.fire(&quot;sozi.player.cleanup&quot;);

        sourceFrameIndex = index;
        exports.currentFrameIndex = index;
        viewPort.showFrame(sozi.document.frames[index]);

        sozi.events.fire(&quot;sozi.player.framechange&quot;, index);
    };

    /*
     * Returns an associative array where keys are layer names
     * and values are objects in the form { initialState: finalState: profile: zoomWidth: zoomHeight:}
     */
    exports.getAnimationData = function (initialState, finalState, zoomPercent, profile, useTransitionPath, reverseTransitionPath) {
        var data = {};
        
        for (var idLayer in initialState) {
            data[idLayer] = {
                initialState: sozi.display.CameraState.instance(),
                finalState: sozi.display.CameraState.instance(),
                useTransitionPath: useTransitionPath,
                reverseTransitionPath: reverseTransitionPath
            };
            
            data[idLayer].profile = profile || finalState[idLayer].transitionProfile;
            data[idLayer].initialState.setAtState(initialState[idLayer]);

            // If the current layer is referenced in final state, copy the final properties
            // else, copy initial state to final state for the current layer.
            if (finalState.hasOwnProperty(idLayer)) {
                data[idLayer].finalState.setAtState(finalState[idLayer]);
            }
            else {
                data[idLayer].finalState.setAtState(initialState[idLayer]);
            }

            // Keep the smallest angle difference between initial state and final state
            // TODO this should be handled in the interpolation function
            if (data[idLayer].finalState.angle - data[idLayer].initialState.angle &gt; 180) {
                data[idLayer].finalState.setRawAngle(data[idLayer].finalState.angle - 360);
            }
            else if (data[idLayer].finalState.angle - data[idLayer].initialState.angle &lt; -180) {
                data[idLayer].initialState.setRawAngle(data[idLayer].initialState.angle - 360);
            }

            var zp = zoomPercent || finalState[idLayer].transitionZoomPercent;
            
            if (zp &amp;&amp; finalState.hasOwnProperty(idLayer)) {
                data[idLayer].zoomWidth = getZoomData(zp,
                    initialState[idLayer].width,
                    finalState[idLayer].width);
                data[idLayer].zoomHeight = getZoomData(zp,
                    initialState[idLayer].height,
                    finalState[idLayer].height);
            }
        }
        return data;
    };
    
    exports.previewFrame = function (index) {
        exports.currentFrameIndex = index;
        animator.start(DEFAULT_DURATION_MS,
            exports.getAnimationData(viewPort.cameras, sozi.document.frames[index].states,
                DEFAULT_ZOOM_PERCENT, sozi.animation.profiles[DEFAULT_PROFILE]),
                false, false);
        sozi.events.fire(&quot;sozi.player.framechange&quot;, index);
    };

    /*
     * Moves to a frame with the given index (0-based).
     *
     * This method animates the transition from the current
     * state of the display to the desired frame.
     *
     * If the given frame index corresponds to the next frame in the list,
     * the transition properties of the next frame are used.
     * Otherwise, default transition properties are used.
     */
    exports.moveToFrame = function (index) {
        if (waiting) {
            window.clearTimeout(nextFrameTimeout);
            waiting = false;
        }

        var durationMs, zoomPercent, profile, useTransitionPath, reverseTransitionPath;
        if (index === (exports.currentFrameIndex - 1) % sozi.document.frames.length) {
            durationMs = sozi.document.frames[exports.currentFrameIndex].transitionDurationMs;
            zoomPercent = undefined; // Set for each layer
            profile = undefined; // Set for each layer
            useTransitionPath = true;
            reverseTransitionPath = true;
        }
        else if (index === (exports.currentFrameIndex + 1) % sozi.document.frames.length) {
            durationMs = sozi.document.frames[index].transitionDurationMs;
            zoomPercent = undefined; // Set for each layer
            profile = undefined; // Set for each layer
            useTransitionPath = true;
            reverseTransitionPath = false;
        }
        else {
            durationMs = DEFAULT_DURATION_MS;
            zoomPercent = DEFAULT_ZOOM_PERCENT;
            profile = sozi.animation.profiles[DEFAULT_PROFILE];
            useTransitionPath = false;
            reverseTransitionPath = false;
        }

        sozi.events.fire(&quot;sozi.player.cleanup&quot;);

        playing = true;
        exports.currentFrameIndex = index;

        animator.start(durationMs, exports.getAnimationData(
            viewPort.cameras, sozi.document.frames[index].states,
            zoomPercent, profile,
            useTransitionPath, reverseTransitionPath));

        sozi.events.fire(&quot;sozi.player.framechange&quot;, index);
    };

    /**
     * Jumps to the first frame of the presentation.
     */
    exports.jumpToFirst = function () {
        exports.jumpToFrame(0);
    };
    
    /**
     * Moves to the first frame of the presentation.
     */
    exports.moveToFirst = function () {
        exports.moveToFrame(0);
    };

    /**
     * Jumps to the previous frame.
     */
    exports.jumpToPrevious = function () {
        var index = exports.currentFrameIndex;
        if (!animator.started || sourceFrameIndex &lt;= exports.currentFrameIndex) {
            index -= 1;
        }
        if (index &gt;= 0) {
            exports.jumpToFrame(index);
        }
    };

    /*
     * Moves to the previous frame.
     */
    exports.moveToPrevious = function () {
        for (var index = exports.currentFrameIndex - 1; index &gt;= 0; index -= 1) {
            var frame = sozi.document.frames[index];
            if (!frame.timeoutEnable || frame.timeoutMs !== 0) {
                exports.moveToFrame(index);
                break;
            }
        }
    };

    /**
     * Jumps to the next frame.
     */
    exports.jumpToNext = function () {
        var index = exports.currentFrameIndex;
        if (!animator.started || sourceFrameIndex &gt;= exports.currentFrameIndex) {
            index += 1;
        }
        if (index &lt; sozi.document.frames.length) {
            exports.jumpToFrame(index);
        }
    };

    /**
     * Moves to the next frame.
     */
    exports.moveToNext = function () {
        if (exports.currentFrameIndex &lt; sozi.document.frames.length - 1 || sozi.document.frames[exports.currentFrameIndex].timeoutEnable) {
            exports.moveToFrame((exports.currentFrameIndex + 1) % sozi.document.frames.length);
        }
    };

    /**
     * Jumps to the last frame of the presentation.
     */
    exports.jumpToLast = function () {
        exports.jumpToFrame(sozi.document.frames.length - 1);
    };

    /**
     * Moves to the last frame of the presentation.
     */
    exports.moveToLast = function () {
        exports.moveToFrame(sozi.document.frames.length - 1);
    };

    /*
     * Restores the current frame.
     *
     * This method restores the display to fit the current frame,
     * e.g. after the display has been zoomed or dragged.
     */
    exports.moveToCurrent = function () {
        exports.moveToFrame(exports.currentFrameIndex);
    };

    /*
     * Shows all the document in the browser window.
     */
    exports.showAll = function () {
        exports.stop();
        sozi.events.fire(&quot;sozi.player.cleanup&quot;);
        animator.start(DEFAULT_DURATION_MS,
            exports.getAnimationData(viewPort.cameras, viewPort.getDocumentState(),
                DEFAULT_ZOOM_PERCENT, sozi.animation.profiles[DEFAULT_PROFILE],
                false, false
            )
        );
    };

    /*
     * Event handler: display ready.
     */
    function onDisplayReady() {
        viewPort = sozi.display.ViewPort.instance(&quot;player&quot;, sozi.document.idLayerList, true);
        
        exports.startFromIndex(sozi.location.getFrameIndex());

        // Hack to fix the blank screen bug in Chrome/Chromium
        // See https://github.com/senshu/Sozi/issues/109
        window.setTimeout(viewPort.bind(viewPort.update), 1);
        
        sozi.events.fire(&quot;sozi.player.ready&quot;);
    }

    // TODO move the zoom code to display.js
    exports.onAnimationStep = function (progress, data) {
        for (var idLayer in data) {
            var camera = viewPort.cameras[idLayer];
            
            camera.interpolate(
                data[idLayer].initialState,
                data[idLayer].finalState,
                data[idLayer].profile(progress),
                data[idLayer].useTransitionPath,
                data[idLayer].reverseTransitionPath
            );

            var ps;
            if (data[idLayer].zoomWidth &amp;&amp; data[idLayer].zoomWidth.k !== 0) {
                ps = progress - data[idLayer].zoomWidth.ts;
                camera.width = data[idLayer].zoomWidth.k * ps * ps + data[idLayer].zoomWidth.ss;
            }

            if (data[idLayer].zoomHeight &amp;&amp; data[idLayer].zoomHeight.k !== 0) {
                ps = progress - data[idLayer].zoomHeight.ts;
                camera.height = data[idLayer].zoomHeight.k * ps * ps + data[idLayer].zoomHeight.ss;
            }

            camera.setClipped(data[idLayer].finalState.clipped);
        }

        viewPort.update();
    };
    
    /**
     * @depend animation.js
     */
    animator = sozi.animation.Animator.instance().augment({
        /*
         * Event handler: animation step.
         *
         * This method is called periodically by animator after the animation
         * has been started, and until the animation time is elapsed.
         *
         * Parameter data provides the following information:
         *    - initialState and finalState contain the geometrical properties of the display
         *      at the start and end of the animation.
         *    - profile is a reference to the speed profile function to use.
         *    - zoomWidth and zoomHeight are the parameters of the zooming polynomial if the current
         *      animation has a non-zero zooming effect.
         *
         * Parameter progress is a float number between 0 (start of the animation)
         * and 1 (end of the animation).
         */
        onStep: function (progress) {
            exports.onAnimationStep(progress, this.data);
        },
        
        /*
         * Event handler: animation done.
         *
         * This method is called by animator when the current animation is finished.
         *
         * If the animation was a transition in the normal course of the presentation,
         * then we call the waitTimeout method to process the timeout property of the current frame.
         */
        onDone: function () {
            for (var idLayer in this.data) {
                viewPort.cameras[idLayer].setAtState(this.data[idLayer].finalState);
            }

            viewPort.update();

            sourceFrameIndex = exports.currentFrameIndex;

            if (playing) {
                waitTimeout();
            }
        }
    });

    sozi.events.listen(&quot;sozi.display.ready&quot;, onDisplayReady); // @depend events.js
});

/*
    @depend framenumber.js
    @depend framelist.js
    @depend actions.js
    @depend player.js
    @depend display.js
    @depend document.js
    @depend location.js
    @depend links.js
*/
</script>
  <style
     id="sozi-style"
     ns1:version="13.11-30213629">/*
 * Sozi - A presentation tool using the SVG standard
 *
 * Copyright (C) 2010-2013 Guillaume Savaton
 *
 * This program is dual licensed under the terms of the MIT license
 * or the GNU General Public License (GPL) version 3.
 * A copy of both licenses is provided in the doc/ folder of the
 * official release of Sozi.
 * 
 * See http://sozi.baierouge.fr/wiki/en:license for details.
 */

#sozi-toc text {
   fill: #eff;
   font-family: Verdana, sans-serif;
   font-size: 12pt;
}

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

#sozi-toc text.sozi-toc-current {
   fill: #fa4;
}

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

.sozi-toc-arrow {
   fill: #eff;
   fill-opacity: 0.75;
   stroke: none;
}

.sozi-toc-arrow:hover {
   fill: #0cf;
}

#sozi-framenumber circle {
   stroke: #222;
   stroke-opacity: 0.1;
   stroke-width: 4;
   fill: #222;
   fill-opacity: 0.9;
}

#sozi-framenumber text {
   fill: #eff;
   font-family: Verdana, sans-serif;
   font-size: 12pt;
}
</style>
</svg>