<?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  <svg width="100%" height="100%" viewBox="0 0 1024 768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="initApp(evt)" onmousemove="mousemove(evt)">
  <!--
       Copyright (c) 2002 W3C
       See http://www.w3.org/Consortium/Legal/copyright-software-19980720
       for W3C software licensing (open source compatible)
       Author: Dean Jackson <dean@grorg.org>, Andreas Neumann <neumann@karto.baug.ethz.ch>     
  -->
    <script type="text/ecmascript" xlink:href="lib-present-graphic-svg-animation-files-helper-functions.js"> </script>
    <script type="text/ecmascript" xlink:href="lib-present-graphic-svg-animation-files-mapApp.js"> </script>
  <script type="text/ecmascript">
  <![CDATA[
  
  var numpics = 10;
  var blockwidth = 50;
  var unscaledleft = 200;
  var unscaledright = unscaledleft + (numpics * blockwidth);
  var picsTop = 100;
  var mousex = 0;
  var mousey = 0;
  var svgNS = "http://www.w3.org/2000/svg";
  var xlinkNS = "http://www.w3.org/1999/xlink";
  var myMapApp = new mapApp(false,undefined);
  
  var pics = [];
  
  function Pic(i) {
  
    this.initial = i * blockwidth + unscaledleft;
    this.position = i * blockwidth + unscaledleft;
    this.real = this.position;
    this.advance = blockwidth;
  
    var b = document.createElementNS(svgNS,"image");
    b.setAttributeNS(null,"width", blockwidth);
    b.setAttributeNS(null,"height", blockwidth);
    b.setAttributeNS(null,"x", i*blockwidth+unscaledleft);
    b.setAttributeNS(null,"y", picsTop);
    b.setAttributeNS(xlinkNS,"href","julie"+(i+1)+".jpg");
    b.addEventListener("click", new clickPic(i+1), false);
  
    this.pic = b;
  
    return this;
  }
  
  function initpoints() {
  
    for (i = 0; i <= numpics; i++) {
      var p = new Pic(i);
      pics.push(p);
      if (i != numpics) {
        document.getElementById("pics").appendChild(p.pic);
      }
    }
  
  }
  
  function calculatepositions() {
  
    if (mousex > unscaledleft && mousex < unscaledright && mousey > (picsTop - blockwidth/2) && mousey < (picsTop + blockwidth / 2)) {
  
      offset = mousex - unscaledleft;
  
      totalwidth = 0;
      for (i=0; i < numpics; i++) {
        centreblock = pics[i].initial + blockwidth/2 - unscaledleft;
        distance = Math.abs(offset - centreblock);
  
        scale = 1;  
        if (distance < (blockwidth * 2)) {
          scale = 3 - (distance / blockwidth);
        }
  
        pics[i].advance = blockwidth * scale;
        totalwidth += blockwidth * scale;
      }
  
      offsetleftratio = offset / (unscaledright - unscaledleft);
      leftofmouse = totalwidth * offsetleftratio;
      currentpoint = mousex - leftofmouse;
  
      for (i=0; i < numpics; i++) {
        pics[i].position = currentpoint;
        currentpoint += pics[i].advance;
      }
      pics[numpics].position = currentpoint;
  
    }
    else {
      for (i=0; i <= numpics; i++) {
        pics[i].position = pics[i].initial;
      }
    }
  
  }
  
  function setpoints() {
  
    for (i=0; i <= numpics; i++) {
      var p = pics[i];
  
      if (Math.abs(p.real - p.position) > 1) {
        p.real = p.real + (p.position - p.real) / 3;
      }
      else {
        p.real = p.position;
      }
    }
  
    for (i=0; i <= numpics; i++) {
      if (i != numpics) {
         size = pics[i+1].real - pics[i].real;
         pics[i].pic.setAttributeNS(null,"x", pics[i].real);    
         pics[i].pic.setAttributeNS(null,"y", picsTop - size/2);   
         pics[i].pic.setAttributeNS(null,"width", size);
         pics[i].pic.setAttributeNS(null,"height", size);
      }
    }
  
    window.setTimeout("setpoints()", 50)
  }
  
  function mousemove(evt) {
    var svgAppCoords = myMapApp.calcCoord(evt,document.documentElement);
    mousex = svgAppCoords.x;
    mousey = svgAppCoords.y;  
    calculatepositions();
  }
  
  function clickPic(picIndex) {
          this.picIndex = picIndex;
  }
  
  clickPic.prototype.handleEvent = function(evt) {
          document.getElementById("loadPicText").firstChild.nodeValue = "Loading image 'julie" + this.picIndex + "-big.jpg' - Please be patient!";
          document.getElementById("bigPic").setAttributeNS(xlinkNS,"xlink:href","julie"+this.picIndex+"-big.jpg");
  }
  
  function initApp(evt) {
          initpoints();
          window.setTimeout("setpoints()", 50);
  }
  
  ]]>
  </script>
  
  <rect x="-4000" y="-4000" width="10000" height="10000" fill="black"/>
  
  <g id="pics"><image width="50" height="50" x="200" y="75" xlink:href="lib-present-graphic-svg-animation-files-julie1.jpg"/><image width="50" height="50" x="250" y="75" xlink:href="lib-present-graphic-svg-animation-files-julie2.jpg"/><image width="50" height="50" x="300" y="75" xlink:href="lib-present-graphic-svg-animation-files-julie3.jpg"/><image width="50" height="50" x="350" y="75" xlink:href="lib-present-graphic-svg-animation-files-julie4.jpg"/><image width="50" height="50" x="400" y="75" xlink:href="lib-present-graphic-svg-animation-files-julie5.jpg"/><image width="50" height="50" x="450" y="75" xlink:href="lib-present-graphic-svg-animation-files-julie6.jpg"/><image width="50" height="50" x="500" y="75" xlink:href="lib-present-graphic-svg-animation-files-julie7.jpg"/><image width="50" height="50" x="550" y="75" xlink:href="lib-present-graphic-svg-animation-files-julie8.jpg"/><image width="50" height="50" x="600" y="75" xlink:href="lib-present-graphic-svg-animation-files-julie9.jpg"/><image width="50" height="50" x="650" y="75" xlink:href="lib-present-graphic-svg-animation-files-julie10.jpg"/></g>
  
  <text x="450" y="450" text-anchor="middle" fill="white" font-size="15px">Für meine Sonnenblume!</text>
  <text id="loadPicText" x="450" y="470" text-anchor="middle" fill="white" font-size="15px">Click on image to get bigger version</text>
  <image id="bigPic" x="200" y="200" width="500" height="500" xlink:href="lib-present-graphic-svg-animation-files-julie1-big.jpg"/>
  
  </svg>