view www/tests/gg-animated.svg @ 101:52e44ee1c791 tip master

enabled all scores in autostart script

<svg width="100%" height="100%"   
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     onload="startUp(evt)" onmousemove="mouseMove(evt)"     
>

<script>

<![CDATA[

var xmlns="http://www.w3.org/2000/svg";
var xmlnsxlink="http://www.w3.org/1999/xlink" ;

var numpics = 17;
var smallW = 50;
var smallH = 50;
var bigW = 100;
var bigH = 100;
var bigLength = 100;
var centerX = 350;
var centerY = 350;
var centerW = 300;
var centerH = 300;
var centerID = numpics - 1;
var centerPic ;
var radiusC = 250;
var img = new Array();
var angle = 2*Math.PI/(numpics-1);

function startUp(evt)
{
 for (i=0; i<centerID; i++) {
     img[i] = document.createElementNS(xmlns,"image");
     img[i].setAttributeNS(null,"id",i);
     img[i].setAttributeNS(null,"width",smallW);
     img[i].setAttributeNS(null,"height",smallH);
     x = getX(i);
     y = getY(i);
     img[i].setAttributeNS(null,"x",x);
     img[i].setAttributeNS(null,"y",y);  
     img[i].setAttributeNS(xmlnsxlink,"href","../images/goldengate/gg"+i+".jpg");
     img[i].addEventListener("click", mouseClick,false);
     document.getElementById("pictures").appendChild(img[i]);
  } 
  i = centerID; 
  img[i] = document.createElementNS(xmlns,"image");
  img[i].setAttributeNS(null,"id",i);
  img[i].setAttributeNS(null,"width",centerW);
  img[i].setAttributeNS(null,"height",centerH);
  img[i].setAttributeNS(null,"x",centerX-centerW/2);
  img[i].setAttributeNS(null,"y",centerY-centerH/2);  
  img[i].setAttributeNS(xmlnsxlink,"href","../images/goldengate/gg"+i+".jpg");
  img[i].addEventListener("click", mouseClick,false);
  document.getElementById("pictures").appendChild(img[i]);
  centerPic = "../images/goldengate/gg"+i+".jpg";
}

// left x 
function getX(i)
{
  var x = centerX + radiusC*Math.cos(angle*i)-getW(i)/2
  return x;
}

// top y 
function getY(i)
{
  var y = centerY + radiusC*Math.sin(angle*i)-getH(i)/2;
  return y;
}

// center x 
function getXc(i)
{
  var xc = centerX + radiusC*Math.cos(angle*i);
  return xc;
}

// center y
function getYc(i)
{
  var yc = centerY + radiusC*Math.sin(angle*i);
  return yc;
}

// get width
function getW(i)
{
   return img[i].getAttributeNS(null,"width");
}

// get height
function getH(i)
{
   return img[i].getAttributeNS(null,"height");
}


/* Swap the picked picture with the picture at the center */

function mouseClick(evt)
{     
   var idPicked = evt.target.getAttributeNS(null,"id");
   var imgPicked = evt.target.getAttributeNS(xmlnsxlink,"href");
       
   // picked
   img[idPicked].setAttributeNS(xmlnsxlink,"href", centerPic);

   // center
   img[centerID].setAttributeNS(xmlnsxlink,"href",imgPicked);
   centerPic = imgPicked;     
}


function mouseMove(evt)
{  
   var xm = evt.clientX;
   var ym = evt.clientY;

   var id = parseInt(evt.target.getAttributeNS(null,"id"));

   /* If a mouse is far away from any picture, 
      just return without modifying the picture. */

   var distance = Math.sqrt( 
          (xm-centerX)*(xm-centerX) + (ym-centerY)*(ym-centerY) );  
   if(distance < (radiusC - bigLength) || 
           distance > (radiusC + bigLength ) ) {   
        return;
   }
 
   /* Calculate the distance of each picture from a mouse
      and set the size of pictures depending on the distance.  */

   var distMin;
   var distMax = radiusC * 2;
   var x,y,xc,yc,h,w;
   var wNew = new Array();
   var hNew = new Array();

   for (i=0; i<numpics-1; i++)
   {
     xc = getXc(i);
     yc = getYc(i);
     distance= Math.sqrt(
     (xm-xc)*(xm-xc)+(ym-yc)*(ym-yc) );
     h = getH(i);
     w = getW(i);
     distMin = Math.sqrt(h*h+w*w)/2;
     wNew[i] = (smallW-bigW)/(distMax - distMin)*distance + bigW;
     hNew[i] = (smallH-bigH)/(distMax - distMin)*distance + bigH;
   }
 
   for (i=0; i<numpics-1; i++)
   {  
     xc = getXc(i);
     yc = getYc(i);
     x = xc - wNew[i]/2;
     y = yc - hNew[i]/2;
     img[i].setAttributeNS(null,"width", wNew[i]);
     img[i].setAttributeNS(null,"height", hNew[i]);
     img[i].setAttributeNS(null,"x", x);
     img[i].setAttributeNS(null,"y", y);
   }
}


//]]>
</script>


<rect x="0" y="0" width="100%" height="100%" fill="white" />

<g id="pictures" />

<!-- text % -->
<text id="ggText" x="270" y="490" font-size="20" fill="#ff4f00">
Golden Gate Bridge</text>

</svg>