/*
Film animation
Copyright (c) 2002 Ylab, Utrecht, NL
Author: Yohan Creemers
version 1.1: only suitable for vertical animation!
1.1: Bugfix for scrolling in IE
version 1.2: initialisatie functie added
1.1: initialisatie functie added om herhaling op pagina's te voorkomen (Sanne 't Hooft)

*/

var hotspots = new Array();
var endY = 0;

/*Define hotspots
  Sample use:
  setHotspot(0, 79, "index.htm", "Naar de inhoudsopgave");
  
  y1: top in px;
  y2: bottom in px;
  ref: url of linked document
  alt: alternative text, displayed when mouse is over hotspot
*/

function startFilm (volgnummer, name) {
 	setHotspot(  0,  67, "index.htm", "Naar de inhoudsopgave");
  	setHotspot( 67+1, 134, "mientje.htm", "Naar het verhaal van Mientje");
  	setHotspot(134+1, 201, "dirk.htm", "Naar het verhaal van Dirk");
  	setHotspot(201+1, 268, "celine.htm", "Naar het verhaal van Celine");
  	setHotspot(268+1, 335, "jan.htm", "Naar het verhaal van Jan");
  	setHotspot(335+1, 402, "truus.htm", "Naar het verhaal van Truus");
  	setHotspot(402+1, 469, "cor.htm", "Naar het verhaal van Cor");
  	setHotspot(469+1, 536, "mirjam.htm", "Naar het verhaal van Mirjam");
  	setHotspot(536+1, 603, "fred.htm", "Naar het verhaal van Fred");
  	setHotspot(603+1, 670+1, "els.htm", "Naar het verhaal van Els");
  	addLoadFunction("Film('divParent', 'divFront', 'divFrame', 'imgFrame', 100);");
  	addLoadFunction("setCurrentWitness('imgBallon', "+volgnummer+", '"+name+"');");
}


function setHotspot(y1, y2, ref, alt){
  var n=hotspots.length;
  //add new hotspot to the array and set properties
  hotspots[n] = {
    top: y1,
    bottom: y2,
    ref: ref,
    alt: alt
  }
  endY = Math.max(endY, y2);
}

/*set properties of balloon indicating the current page
  objId: id of image;
  n: hotspot number (start counting from 1)
  witness: first name of witness
*/
function setCurrentWitness(objId, n, witness){
  var img = document.getElementById(objId);
  
  img.style.position = "absolute";
  img.style.left = (45) + "px";
  img.style.top = (hotspots[n-1].bottom - 20 ) + "px";
  img.alt = witness + "'s verhaal";
}

function Film(parentDiv, frontDiv, frameDiv, frameImg, startY){
  //Define objects
  var divParent = document.getElementById(parentDiv);
  var divFront = document.getElementById(frontDiv);
  var divFrame = document.getElementById(frameDiv);
  var imgFrame = document.getElementById(frameImg);

  //calculate dimensions
  var dragimg_width = imgFrame.width;
  var dragimg_height = imgFrame.height;
  var offsetX = (dragimg_width/2);
  var offsetY = startY + (dragimg_height/2);
  
  var moveVertical = true;
  var moveHorizontal = false;
  
  //set initial position
  divParent.style.top = startY+"px";
  shiftTo(0, 0);
  divFront.style.display="block";

  //capture mouse event
  if (isNav) {document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);}
  document.onmousemove = dragIt;
  imgFrame.onclick = browse;
  imgFrame.update = setHotspotProps;
  if (isNav){divFront.onclick = browseNav;}
  
  function dragIt(e) {
    
    if (!e) {
      e = new Object();
      e.pageX = window.event.clientX + document.body.scrollLeft;
      e.pageY = window.event.clientY + document.body.scrollTop;
    }
    shiftTo((e.pageX - offsetX), (e.pageY - offsetY));
    
    imgFrame.update(e.pageY - startY)
  }
  function shiftTo(x, y) {
    y = Math.max(y, 0);
    y = Math.min(y, endY - dragimg_height);
    setClip(divFront, x, y, dragimg_width, dragimg_height);
    setPos(divFrame,x,y);
  }
  function setPos(obj, x, y){
    if (moveHorizontal){obj.style.left = x + "px";}
    if (moveVertical){obj.style.top  = y + "px";}
  }
  function setClip(obj, x, y, w, h){
    if (!moveHorizontal){x = 0;}
    if (!moveVertical){y = 0;} 
    var clipLeft = x;
    var clipTop = y;
    var clipRight = x+w;
    var clipBottom = y+h;
    
    obj.style.clip = "rect("+clipTop+"px "+clipRight+"px "+clipBottom+"px "+clipLeft+"px)";
  }

  function setHotspotProps(y){
    for(var i=0;i<hotspots.length;i++){
      if ((y >= hotspots[i].top) && (y <= hotspots[i].bottom)){
        this.alt=hotspots[i].alt;
        this.style.cursor = (isNav)?"pointer":"hand";
        this.ref=hotspots[i].ref;
        return;
      }
    }
    this.alt = "";
    this.style.cursor = "default";
    this.ref = "";
  }
  
  function browse(){
    if (this.ref != ""){window.location.href = this.ref;}
  }
  function browseNav(){
    imgFrame.onclick();
  }
}