/* 

Slides, texten en menu-items kunnen naar believen worden toegevoegd.
Voor lange texten kunnen ook nieuwe variabelen worden gebruikt, 
en texten kunnen worden samengevoegd met '+'; bijvoorbeeld:

var contact = "Waarmakers | ontwerpers <br>"
            + "De Lairessestraat 33-C 1071 NS AMSTERDAM <br>"
            + "+31 (0)614151921 <br>"
            + "www.waarmakers.nl <br>"
            + "info@waarmakers.nl"

itemText[0] = contact

*/


// De foto's in de slider.

var slides = new Array ();
slides[0] = "images/vedett.jpg";
slides[1] = "images/boek.jpg";
slides[2] = "images/goedzak.jpg";
slides[3] = "images/Afrikaanderwijk.jpg";


// De grote texten.

var bigtext = new Array ();
bigtext[0] = "we have no portfolio*";
bigtext[1] = "we have no flashy website*";
bigtext[2] = "we have no secretary*";
bigtext[3] = "everything is design nowadays*";
bigtext[4] = "we have little experience*"; 		
bigtext[5] = "sure, we can do sexy*";					// bigtext[6] = "there are 9.999.999 chair designs*";
bigtext[6] = "we've no experience with 9 to 5 days*";

// De kleine texten (match met grote texten).

var smalltext = new Array ();
smalltext[0] = "*we have a million ideas";
smalltext[1] = "*we know how to work a tight budget";
smalltext[2] = "*our voices sound lovely on the phone";		// smalltext[2] = "*we answer your calls personally";
smalltext[3] = "*we design anything";
smalltext[4] = "*we have 20.000 KWatts of energy";
smalltext[5] = "*we believe design has a larger social responsibility";
smalltext[6] = "*.........coffee";

// De hoofd-items van het menu

var menuItems = new Array ();
menuItems[0] = "contact";
menuItems[1] = "over ons";
menuItems[2] = "ons werk";

// De sub-items van elk menu-item
//  Voorbeeld: menuSubItems[0] = ["subitem 1a", "subitem 1b", "subitem 1c"]

var menuSubItems = new Array ();
menuSubItems[0] = []; //COMMENTAAR vervang de lege ruimte tussen de haakjes door "Item 1a","Item 1b", "Item 1c"
menuSubItems[1] = ["achtergrond", "diensten","methode"];
menuSubItems[2] = [] //COMMENTAAR vervang de lege ruimte tussen de haakjes door "Item 1a","Item 1b", "Item 1c"


// De text voor in het textvlak bij elk menu-item
//  Speciaal: de text "FOTOOS" roept de foto-slider op

var itemText = new Array ();
itemText[0] = "<b>waarmakers</b> | ontwerpers <br> De Lairessestraat 33-C <br> 1071 NS AMSTERDAM <br> www.waarmakers.nl <br> info@waarmakers.nl <br><br> Simon  +31 (0)614151921 <br> Maarten +31 (0)618774212";
itemText[1] = []; //COMMENTAAR vervang de lege ruimte tussen de haakjes door "Item 1a","Item 1b", "Item 1c"
itemText[2] = "FOTOOS";

// De text voor in het textvlak bij sub-items
//  Voorbeeld: subItemText[0] = ["de text bij subitem 1a", "de text bij subitem 1b", "de text bij subitem 1c"];
//  De speciale text "FOTOOS" kan ook in een sub-item worden gestopt

var subItemText = new Array ();
subItemText[0] = ["Item 1a Text","Item 1b Text","Item 1c Text"];
subItemText[1] = ["Waarmakers is een jong en flexibel buro met de vrijheid om met compleet vernieuwende invalshoeken te komen. Wij zijn met name ge&iuml;nteresseerd in de toepassing van het creatieve ontwerpproces binnen het sociale domein, om te onderzoeken welk maatschappelijk belang er gediend zou kunnen worden met een ontwerp. Gedreven om te ontwerpen voor sociale innovaties, geven we daarom voorrang aan initiatieven die een bijdrage kunnen leveren aan de maatschappij. <br><br> Onze achtergrond als ingenieurs, opgeleid aan de TU Delft, stelt ons in staat om met een wetenschappelijke benadering een creatief proces te kunnen beheersen. <br><br> De combinatie van het creatieve met het technische maakt dat we naast het bedenken van creatieve oplossingen ook in staat zijn om deze te realiseren. ", "Wij denken nieuwe idee&euml;n uit en kunnen het zo vormgeven dat het succesvol gerealiseerd kan worden. Nog liever denken we met je mee om vanuit het niets tot vernieuwende idee&euml;n te komen. Wij zijn op beide manieren in te zetten. <br><br> Wij passen ons ontwerpproces voor innovatie in samenwerking met jou toe binnen het domein waarin jouw organisatie actief (of nog niet actief) is. Onze kracht ligt in het bedenken van vernieuwende originele concepten om een bedrijf strategische voordelen leveren. Wij nemen je mee in dit creatieve proces, van doelbepaling tot realisatie. <br><br> Wij ontwerpen producten, diensten en grafische uitingen vanuit een centrale visie die we samen gaan ontwikkelen.","Wij geloven dat het stellen van de juiste vragen de helft van de oplossing is. Kern van onze aanpak is het komen tot de juiste ontwerpvraag. <br><br> Wat zijn <i>de werkelijke behoeften</i> van de mens in de wereld van morgen en hoe willen we deze bedienen? <br><br> We beschouwen de betekenis van een product in een ruimere context. We kijken naar de wereld en onderzoeken trends, nieuwe technologie&euml;n, menselijke principes en ontwikkelingen van lokaal tot mondiaal niveau. Daarna bepalen we hoe hierop gaan inspelen, wat de relatie tussen mensen en product wordt en welke betekenis het moet krijgen. Het resultaat; een origineel en integer concept met een eigen karakter."];
subItemText[2] = ["Item 3a Text","Item 3b Text","Item 3c Text"];



//=== Initialization ===============================================================

var darkentime    = 600;                   // Hoe lang het duurt om de achtergrond donker te maken
var maxopacity    =   30;                   // Hoe donker de achtergrond wordt

var slideTime     = 600;                   // Hoe lang het duurt om foto's te verschuiven (1000 = 1 sec.)


// Verder liever overal afblijven ;)

var slideWidth    = 764;
var slideSep      =  20;
var slideOverlap  = 200;
var slideDistance = slideWidth + slideSep;


var textno        =   0;
var slide1        =   0;

var sliderOpen    =   0;
var changing      =   0;

function init () {
  textno = Math.floor(bigtext.length*Math.random());
  nextBigText ();
  menuAction (99,99);
  slide1 = slides.length-1;
}


//=== The Big Text =================================================================

function nextBigText () {
  textno ++;
  if (textno == bigtext.length) {textno = 0;}
  document.getElementById("bigtext").innerHTML=bigtext[textno];
  document.getElementById("smalltext").innerHTML=smalltext[textno];
}

function previousBigText () {
  if (textno == 0) {textno = bigtext.length;}
  textno --;
  document.getElementById("bigtext").innerHTML=bigtext[textno];
  document.getElementById("smalltext").innerHTML=smalltext[textno];
}


//=== The Button ===================================================================

function buttonAL () {
  document.getElementById("button").innerHTML = 
    "<div class=active></div>" +
    "<img class=buttonimg src='buttonAL.png'>" +
    "<span id=buttonLeft onClick='buttonLeft()' onMouseOut='buttonPL()'></span>" +
    "<span id=buttonRight onMouseOver='buttonAR()'></span>";
}

function buttonAR () {
  document.getElementById("button").innerHTML = 
    '<div class=active></div>' +
    '<img class=buttonimg src="buttonAR.png" alt="&GT;"></img>' +
    '<span id=buttonLeft onMouseOver="buttonAL()"></span>' +
    '<span id=buttonRight onClick="buttonRight()" onMouseOut="buttonPL()"></span>';
}

function buttonPL () {
  document.getElementById("button").innerHTML =
    "<img class=buttonimg src='buttonPL.png'>" +
    "<span id=buttonLeft onMouseOver='buttonAL()'></span>" +
    "<span id=buttonRight onMouseOver='buttonAR()'></span>";
}

function buttonPR () {
  document.getElementById("button").innerHTML =
    "<img class=buttonimg src='buttonPR.png'>" +
    "<span id=buttonLeft onMouseOver='buttonAL()'></span>" +
    "<span id=buttonRight onMouseOver='buttonAR()'></span>";
}

function buttonLeft () {
  if (sliderOpen == 0) {
    nextBigText ();
  }
  else {
    slideLeft ();
  }
}

function buttonRight () {
  if (sliderOpen == 0) {
    previousBigText ();
  }
  else {
    slideRight ();
  }
}


//=== The Menu =====================================================================

function menuAction (n,m) {
  document.getElementById("menu").innerHTML=setMenu(n,m);
  var temp='';
  if (n!=99) {
    if (m==99) {
      temp = itemText[n];
    }
    else {
      temp = subItemText[n][m];
    }
  }
  if (temp == 'FOTOOS'){
    temp='';
    openSlider ();
  }
  setBox(temp);
}

function setMenu (n,m) {
  var temp = '';
  for (i in menuItems) {
    if (i==n) {
      temp += '<div class=menuItem>';
      if (m==99) {temp += '<div class=active></div><div class=activeText>';}
      temp += '<div class=itemtext onclick="menuAction(99,99);"><u>'+menuItems[i]+'</u>';
      if (menuSubItems[i].length!=0) {temp += ' &gt';}
      temp += '</div></div>';
      if (m==99) {temp += '</div>';}
      temp += submenu(i,m);
    }
    else {
      temp += '<div class=menuItem><div class=itemtext onclick="menuAction('+i+',99);"><u>'+menuItems[i]+'</u></div></div>';
    }
  }
  return temp;
}

function submenu (n,m) {
  var temp = '';
  for (i in menuSubItems[n]) {
    temp += '<div class=menuItem>';
    if (i==m) {
      temp+= '<div class=active></div><div class=activeText><div class=subtext onclick="menuAction('+n+',99);"><u>'+menuSubItems[n][i]+'</u></div></div>';
    }
    else {
      temp += '<div class=subtext onclick="menuAction('+n+','+i+');"><u>'+menuSubItems[n][i]+'</u></div>'
    }
    temp += '</div>';
  }
  return temp;
}


function setBox (str) {
 if (str=='') {
    document.getElementById("box").innerHTML='';
  }
  else {
    document.getElementById("box").innerHTML='<div class=active></div><div class=boxtext>'+str+'</div>';
  }
}


//=== The Slider ===================================================================

function slide0 () {
  if (slide1 == 0) {return slides.length - 1} else {return slide1 - 1}
}

function slide2 () {
  if (slide1 == slides.length - 1) {return 0} else {return slide1 + 1}
}

function slide3 () {
  if (slide2() == slides.length - 1) {return 0} else {return slide2() + 1}
}

function setSlides () {
  document.getElementById("slide1").innerHTML = 
    '<div class=canvas><img id="img1" class=sliderimg src="' + slides[slide1] + '" alt=""></div>';
  document.getElementById("slide3").innerHTML = 
    '<div class=canvas><img id="img2" class=sliderimg src="' + slides[slide2()] + '" alt=""></div>';
  document.getElementById("slide5").innerHTML = 
    '<div class=canvas><img id="img3" class=sliderimg src="' + slides[slide3()] + '" alt=""></div>';
}

function removeSlides () {
  document.getElementById("slide1").innerHTML = '';
  document.getElementById("slide3").innerHTML = '';
  document.getElementById("slide5").innerHTML = '';
}

function resetSlides () {
  showSlides(0);
  changing=0;
}

function slideRight () {
  if (changing==0 && sliderOpen==1) {
    changing = 1;
    slide1 = slide2();
    setSlides();
    slidingRight(new Date().getTime(),slideTime);
  }
}

function slideLeft () {
  if (changing==0 && sliderOpen==1) {
    changing = 1;
    slidingLeft (new Date().getTime(),0);
  }
}

function slidingLeft (last,time) {
  var n = new Date().getTime();
  var newtime = time + (n - last);

  if (slideTime <= newtime) {
    slide1 = slide0();
    setSlides();
    resetSlides();
  }
  else {
    showSlides (Math.round((newtime/slideTime)*slideDistance));
    setTimeout("slidingLeft(" + n + "," + newtime + ")",33);
  }
}

function slidingRight (last,time) {
  var n = new Date().getTime();
  var newtime = time - (n - last);

  if (newtime <= 0) {
    resetSlides();
  }
  else {
    showSlides (Math.round((newtime/slideTime)*slideDistance));
    setTimeout("slidingRight(" + n + "," + newtime + ")",33);
  }
}

function showSlides (pos) {
  var offset = 0;

  offset = Math.max (0, Math.min (slideWidth, pos-slideSep));
  document.getElementById("slide1").style.width =  offset + 'px';
  document.getElementById("img1").style.clip = 'rect(0px,' + offset + 'px,525px,0px)';

  offset = Math.max (0, Math.min (slideSep,   pos));
  document.getElementById("slide2").style.width = offset + 'px';

  offset = Math.max (0, Math.min (slideWidth, slideWidth+slideSep+slideOverlap-pos));
  document.getElementById("slide3").style.width = offset + 'px';
  document.getElementById("img2").style.clip = 'rect(0px,764px,525px,' + (slideWidth - offset) + 'px)';
  
  offset = Math.max (0, Math.min (slideSep,   slideSep+slideOverlap-pos));
  document.getElementById("slide4").style.width = offset + 'px';

  offset = Math.max (0, Math.min (slideWidth, slideOverlap-pos));
  document.getElementById("slide5").style.width = offset + 'px';
  document.getElementById("img3").style.clip = 'rect(0px,764px,525px,' + (slideWidth - offset) + 'px)';
}

function openSlider () {
  if (changing == 0 && sliderOpen == 0) {
     changing = 1;
     document.getElementById("cover").style.zIndex = "3";
     darkening (new Date().getTime(),0);
  }
}

function closeSlider () {
  if (changing == 0 && sliderOpen == 1) {
    changing = 1;
    removeSlides ();
    lightening (new Date().getTime(),darkentime);
  }
}

function darkening (last,time) {
  var n = new Date().getTime();
  var newtime = time + (n - last);

  if (darkentime <= newtime) {
    setDark (darkentime);
    setSlides ();
    resetSlides ();
    document.getElementById("slider").style.zIndex = "4";
    sliderOpen = 1;
    changing = 0;
  }
  else {
    setDark (newtime);
    setTimeout("darkening(" + n + "," + newtime + ")",33);
  }
}

function lightening (last,time) {
  var n = new Date().getTime();
  var newtime = time - (n - last);

  if (newtime <= 0) {
    setDark (0);
    document.getElementById("cover").style.zIndex = "-1";
    document.getElementById("slider").style.zIndex = "-1";
    menuAction(99,99);
    changing = 0;
    sliderOpen = 0;
  }
  else {
    setDark (newtime);
    setTimeout("lightening(" + n + "," + newtime + ")",33);
  }
}

function setDark (time) {
  var n = Math.round((time/darkentime)*maxopacity);
  document.getElementById("cover").style.opacity = (n * 0.01);
  document.getElementById("cover").style.filter = 'alpha(opacity=' + n + ')';
}

// JavaScript Document