var where = 'referenties';

function ShowSlider(a) {

  // zet de link classes goed
  var link = document.getElementById('AShowSlider');
  link.className = "BoxLink Links Actief";
  link = document.getElementById('AShowSpotlight');
  link.className = "BoxLink Rechts";

  var spotlight = document.getElementById('spotlight');
  spotlight.style.display = "none";

  var slider = document.getElementById('refs');
  slider.style.display = "block";

  where = 'referenties';
}

function ShowSpotlight(a) {

  var link = document.getElementById('AShowSlider');
  link.className = "BoxLink Links";
  link = document.getElementById('AShowSpotlight');
  link.className = "BoxLink Rechts Actief";

  var slider = document.getElementById('refs');
  slider.style.display = "none";

  var spotlight = document.getElementById('spotlight');
  spotlight.style.display = "block";

  where = 'spotlight';
}


function setNumActive(index) {
   if ( where == 'spotlight' ) {
     var container = document.getElementById( "spotlightNummers" );
   } else {
    var container = document.getElementById( "refNummers"); // spotlightNummers
   }

  var length = container.childNodes.length;
  var num = 1;
  for ( var i= 0; i < length; i++ ) {
    if ( container.childNodes[i].tagName == "#text" ) continue;

    if ( container.childNodes[i].tagName == "A")  {
      if ( parseInt(num) == parseInt(index) ) {
        container.childNodes[i].className = "Actief";
      } else {
        container.childNodes[i].className = "Inactief";
      }

      num++;
    }
 }
}


/* Horizontal Slider */
/**
 * Een javascript klasse, er kunnen meerdere instanties van gemaakt worden.
 * Per instantie kan er maar één actie plaatsvinden, dit is express zodat het script niet in de war zal raken.
 * Dit betekent echter wel dat de eerst gekozen actie eerst zal moeten eindigen voordat het zal stoppen.
 *
 * Wanneer je gebuik maakt van meerdere instanties, is het wel mogelijk twee acties te doen, dit is geen beperking.
 *
 * Voor een volgende versie is het misschien slim om de tijd TUSSEN een schakeling te bepalen in plaats van de pixels + interval
 * op die manier is een centrale snelheid van toepassing waardoor er geen aanpassingen nodig zijn voor website specifieke dingen.
 *
 * Uitbreiding is altijd mogelijk, het is een basis functionaliteit.
 * @author Sander de Groot
*/

// vanaf hier begint de slider functionaliteit
var HSliders = {  
  cycleSpeed : 50,      // interval speed
  pixelsPerCycle : 17,  // number of pixels per interval event
  sliders : null
};


function HSlider(id, width, cycleSpeed, pixelsPerCycle ) {
  this.containerID = id;
  this.container = null;

  this.activeIndex = 0; // van 1 - tot eindig

  this.elementCount = 0;
  this.elementWidth = (width ? width : 100); // tijdelijk standaard 100a

  this.mainInterval = null;

  if ( cycleSpeed != null ) this.cycleSpeed = cycleSpeed; else this.cycleSpeed = HSliders.cycleSpeed;
  if ( pixelsPerCycle != null ) this.pixelsPerCycle = pixelsPerCycle; else this.pixelsPerCycle = HSliders.pixelsPerCycle;

  this.tempSpeed = null;
  this.tempPixels = null;

  this.pollNum = 0;
  this.pollCount = 0;
 
  if ( HSliders.sliders == null ) HSliders.sliders = new Array();
  // register de slider (ivm de events)
  HSliders.sliders.push(this);
  this.sliderID = HSliders.sliders.length - 1;
}


/*
 * Methode van HSlider om de container te initialiseren
 *
*/
HSlider.prototype.Init = function() {
  try {
    if ( this.container == null ) {
      this.container = document.getElementById(this.containerID);
    }

   this.activeIndex = 1 ; // hij begint bij de eerste
   if ( this.container != null ) {
      this.container.style.left = "0px";
      this.RecountElements(); // tel alle onderliggende elementen op
      this.PlaceElements();
   }
  } catch ( e ) {
    alert('Functie: Init() \n Er is een fout opgetreden.. \n' + e );
  } 
}


/*
 * Deze methode is er om de onderliggende elementen op te tellen
 * Hij is er om dynamiek toe te voegen. 
 *  In eerste instantie kan het script niet dynamisch items toevoegen maar
 *  met behulp van deze methode kan het eventueel later wel.
*/
HSlider.prototype.RecountElements = function() {
  if ( this.container == null ) this.Init();
  
  var length = this.container.childNodes.length;
  this.elementCount = 0;
  for ( var i = 0; i < length; i++ ) { 
     if ( this.container.childNodes[i].nodeName != "#text" ) { // filter de verkeerde nodes eruit
        this.elementCount++;
     }
  }
}

/**
 * Methode voor het juist plaatsen van de elementen
 *
 * De elementen worden horizontaal naast elkaar geplakt
 * De hoogte is dus voor ieder element hetzelfde, enkel de left is anders
*/
HSlider.prototype.PlaceElements = function(fromID) {
  if ( this.container == null ) this.Init();

  if ( fromID == null ) fromID = 1;

  var length = this.container.childNodes.length;
  var width = this.elementWidth;
  var extra = 0;
  var num = 0;

  for ( var i = 0; i < length; i++ ) {
     if ( this.container.childNodes[i].nodeName != "#text" ) { // filter de verkeerde nodes eruit
     
       if ( fromID > 1 ) {
          extra = (fromID - 1) * width;
       } else extra = 0;

       this.container.childNodes[i].style.position = "absolute";
       this.container.childNodes[i].style.left = ( ( width * num ) - extra ) + "px";
       this.container.childNodes[i].style.top = "0px";
       this.container.childNodes[i].style.display = "block";
      num++;
     }
  }
}

HSlider.prototype.ShowNext = function() {
  if ( this.container == null ) this.Init();

  var callID;
  if ( this.activeIndex >= this.elementCount ) {
    callID = 1;
  } else {
    callID = this.activeIndex + 1;
  }
  this.ShowIndex(callID);
}

HSlider.prototype.ShowPrevious = function() {
  if ( this.container == null ) this.Init();

  var callID;
  if ( this.activeIndex <= 1 ) {
    callID = this.elementCount;
  } else {
    callID = this.activeIndex - 1;
  }
  this.ShowIndex(callID);
}

/**
 *  Dit is de methode voor het echte werk
 *  Hierin vindt het echte 'sliden' plaats
 *
 * @param int index Identifier voor het element nummer
*/
HSlider.prototype.ShowIndex = function(index) { // laat een element zien op basis van een index
  if ( this.container == null ) this.Init();

  if ( this.mainInterval != null ) {
    return; // er is nog een actie bezig...
  }

this.tempAfname = 0;
this.pollCount = 0;
this.pollNum = 0;


  if ( ( this.activeIndex == this.elementCount && index == 1) || ( this.activeIndex == 1 && index == 5 ) ) {
    this.tempSpeed = 18; // zet de snelheid tijdelijk op 15
  }

  if ( ( ( this.activeIndex - index ) == 2 ) || (( index - this.activeIndex ) == 2 ) ) {
    this.tempSpeed = this.cycleSpeed - 15;
  }

  if (  ( ( this.activeIndex - index ) == 3 ) || (( index - this.activeIndex ) == 3 ) ) {
    this.tempSpeed = this.cycleSpeed - 20;
  }

  this.mainInterval = setInterval( 'HSliders.sliders[' + this.sliderID + '].Slide(' + index + ') ', this.tempSpeed ? this.tempSpeed : this.cycleSpeed  );

setNumActive(index);

}

HSlider.prototype.CalculatePixelsPerCyle = function(left, toLeft, direction) { // left waar we nu zitten, left waar we heen moeten
 var returnValue = this.pixelsPerCycle;

  if ( direction == 'left' ) {
    // de div left wordt KLEINER dus van -100 naar -150
    // de waarde die terug gegeven moet worden, moet steeds kleiner worden vanaf het punt dat de laatste begonnen is.
    var verschil = - ( toLeft - left ); 
    if ( verschil <= this.elementWidth && ( verschil - this.elementWidth ) <= 0 ) {
      // het verschil wordt steeds kleiner; we zitten nu bij de laatste
      // kijk nu of we op de helft zitten ja dan nee
      //
      if ( verschil <= ( this.elementWidth / 2 ) ) {
        // eerst berekenen hoeveel polls we hiervoor nodig hebben
         this.pollCount = Math.ceil(( this.elementWidth / 2 ) / this.pixelsPerCycle) + 5;
        returnValue = Math.floor(this.pixelsPerCycle - ( this.pollNum / this.pollCount ) * this.pixelsPerCycle) ;//returnValue;

         this.pollNum++; // voeg een cylce toe
        if ( returnValue < 2 ) returnValue = 2;
      }

    }
  } 
  else if ( direction == 'right' ) {
    // de div left wordt GROTER dus: van -100 naar -50

    var verschil =  ( toLeft - left );
    if ( verschil <= this.elementWidth && ( verschil - this.elementWidth ) <= 0 ) {
      // het verschil wordt steeds kleiner; we zitten nu bij de laatste
      // kijk nu of we op de helft zitten ja dan nee
      //
      if ( verschil <= ( this.elementWidth / 2 ) ) {
        // eerst berekenen hoeveel polls we hiervoor nodig hebben
         this.pollCount = Math.ceil(( this.elementWidth / 2 ) / this.pixelsPerCycle) + 6;

        returnValue = Math.floor(this.pixelsPerCycle - ( this.pollNum / this.pollCount ) * this.pixelsPerCycle) ;//returnValue;

         this.pollNum++; // voeg een cylce toe
        if ( returnValue < 2 ) returnValue = 2;
      }

    }

  }

return returnValue;
}

// Slide methode, deze wordt elke x aantal ms aangeroepen om de container te verplaatsen.
HSlider.prototype.Slide = function(toIndex) {
 if ( this.mainInterval != null ) {


  if ( this.activeIndex > toIndex ) { // We moeten naar rechts schuiven, oftewel de left wordt groter

     var left = parseInt(this.container.style.left);
     var toLeft = - ((toIndex - 1) * this.elementWidth); // de uiteindelijke left
     var width = this.CalculatePixelsPerCyle(left, toLeft, 'right');// this.pixelsPerCycle; // aantal pixels per ms

     if ( ( left + width ) < toLeft ) {
       this.container.style.left = (left + width) + "px";
     } else {
       this.container.style.left = toLeft + "px";
       this.activeIndex = toIndex;
     }

  } 
  else if ( this.activeIndex < toIndex ) { // we moeten naar links schuiven; de container left wordt kleiner

     var left =  parseInt(this.container.style.left);
     var toLeft = - ( ( toIndex - 1 ) * this.elementWidth); // de uiteindelijke left
     var width = this.CalculatePixelsPerCyle(left, toLeft, 'left');//this.pixelsPerCycle; // aantal pixels er Interval

     if ( ( left - width ) > toLeft ) {
       this.container.style.left = (left - width) + "px";
     } else {
       this.container.style.left = toLeft + "px";
       this.activeIndex = toIndex;
     }

  }


   if ( this.activeIndex == toIndex ) {
     clearInterval(this.mainInterval);
     if ( this.tempSpeed ) this.tempSpeed = null;
     this.mainInterval = null;
   }
 } else alert('Maininterval == null');
}




var Slider = new HSlider('scroller', 280); // eerste argument is het ID van de container
var Slider1 = new HSlider('spotlightscroller', 280);