var whitebox = {};

// publieke array aanmaken voor afbeeldingen
var afbeeldingArray = new Array;
//publieke array voor teksten
var tekstArray = new Array;
//publieke array voor titels
var titelArray = new Array;
//currentid var aanmaken
var currentId = 0;
//div waar img in staat publiek maken
var contentDiv;
//div waar tekst in staat publiek maken
var tekstDiv;
//koptitel als publiek
var kopTitel;
//koptekst als publiek
var kopTekst;

//aantal images wat er is
var intLengte;


whitebox.addOverlay = function() {
  var objBody = document.getElementsByTagName("body").item(0);
  
  //var overlay aanmaken voor de div overlay
  var objOverlay = document.createElement("div");
  objOverlay.setAttribute("id", "laag");
  objOverlay.style.display = 'none';
  objOverlay.onclick = function() {
    whitebox.sluiten();
  };
  
  
  //ojbOverlay toevoegen aan objBody
  objBody.appendChild(objOverlay);
  
  //de witte box aanmaken waar alles in moet komen
  var objBox = document.createElement("div");
  objBox.setAttribute("id", "whitebox");
  objBox.style.display = 'none';
  //de witte box toevoegen aan objBody
  objBody.appendChild(objBox); 
  
  //de innerbox aanmaken (voor position relative);
  var objInnerBox = document.createElement("div");
  objInnerBox.setAttribute("id", "whitebox_inner");
  objBox.appendChild(objInnerBox);
  
  //titelbox aanmaken
  var objTitelBox = document.createElement("div");
  objTitelBox.setAttribute("id", "titel");
  objInnerBox.appendChild(objTitelBox);
  
  //box voor koptekst aanmaken
  var objKopTekstBox = document.createElement("div");
  objKopTekstBox.setAttribute("id", "koptekst");
  objInnerBox.appendChild(objKopTekstBox);
  
  //de sluitknop aanmaken
  var objCloseImg = document.createElement("img");
  objCloseImg.setAttribute("id", "close_img");
  objCloseImg.setAttribute("src", "/interface/images/whitebox/close.gif");
  objCloseImg.onclick = function() {
    whitebox.sluiten();
  };
  //close img binnen de innerbox zetten
  objInnerBox.appendChild(objCloseImg);
  
  //vorige button
  var objPrevBox = document.createElement("div");
  objPrevBox.setAttribute("id", "prev_btn");
  objPrevBox.style.display = 'none';
  objPrevBox.onclick = function() {
    whitebox.prevImage();
  };
  objInnerBox.appendChild(objPrevBox);
  
  //volgende button
  var objNextBox = document.createElement("div");
  objNextBox.setAttribute("id", "next_btn");
  objNextBox.onclick = function() {
    whitebox.nextImage();
  };
  objInnerBox.appendChild(objNextBox);
  
  //div voor img en tekst maken
  var objImgBox = document.createElement("div");
  objImgBox.setAttribute("id", "imgDiv");
  objInnerBox.appendChild(objImgBox);    
  
  //textbox erin zetten
  var objTextBox = document.createElement("div");
  objTextBox.setAttribute("id", "txtDiv");
  objInnerBox.appendChild(objTextBox);
  
  //tellerbox erin zetten
  var objCountBox = document.createElement("div");
  objCountBox.setAttribute("id", "counter");
  objInnerBox.appendChild(objCountBox);
  
  //minimize knopje erin zetten
  var objminiMizeBox = document.createElement("div");
  objminiMizeBox.setAttribute("id", "min_btn");
  objminiMizeBox.onclick = function() {
    whitebox.miniMizeTekst();
  };
  objInnerBox.appendChild(objminiMizeBox);
  
  //maximize knopje erin zetten
  var objMaxBox = document.createElement("div");
  objMaxBox.setAttribute("id", "max_btn");
  objMaxBox.style.display = 'none';
  objMaxBox.onclick = function() {
    whitebox.maxiMizeTekst();
  };
  objInnerBox.appendChild(objMaxBox);  
  
  //backgrounddiv voor minimized div
  var objBackgroundMaxBox = document.createElement("div");
  objBackgroundMaxBox.setAttribute("id", "bg_divMax");
  objBackgroundMaxBox.style.display='none';
  
  objInnerBox.appendChild(objBackgroundMaxBox);
};

whitebox.startSlideshow = function(id,titel,tekst){
  kopTekst = tekst;
  kopTitel = titel;
  whitebox.toonOverlay();
  whitebox.getData("/pages/haalvoorbeelden.aspx?id="+id);
  //whitebox.zetContent(titel, tekst);
};

whitebox.toonOverlay = function() {
  scroll(0,0);
  //hoogte toevoegen aan de overlay (div laag)
  document.getElementById("laag").style.height=document.getElementById("container").offsetHeight + 'px';
  //divs zichtbaar maken
  document.getElementById("laag").style.display='block';
  document.getElementById("whitebox").style.display='block';
};

whitebox.sluiten = function() {
  document.getElementById("laag").style.display='none';
  document.getElementById("whitebox").style.display='none';
  document.getElementById("koptekst").innerHTML="";
  tekstArray = null;
  titelArray = null;
  afbeeldingArray = null;
  intLengte = 0;
  currentId = 0;
};

whitebox.getData = function(link) {
  var request = new HTTP.newRequest();
  request.onreadystatechange = function() {
    if(request.readyState == 4){
      if (request.status == 200){
        //data doorgeven aan whitebox.listData
        whitebox.listData(request.responseText);
        whitebox.zetContent();
      }
    }
  }
  request.open("GET", link);
  request.send(null);
};

//functie voor in de array zetten van de data
whitebox.listData = function(data){
  var tmpArray = data.split("||");
  //array van alle afbeeldingen
  afbeeldingArray = tmpArray[0].split("__");
  //array van alle teksten
  tekstArray = tmpArray[1].split("__");
  //array van alle titels
  titelArray = tmpArray[2].split("__"); 
  intLengte = afbeeldingArray.length;
};

whitebox.nextImage = function() {
  contentDiv.style.backgroundImage="url("+ afbeeldingArray[currentId + 1] +")";
  tekstDiv.innerHTML = "<h1>" + titelArray[currentId + 1] + "</h1>" + tekstArray[currentId + 1];
  currentId = currentId + 1;
  document.getElementById("counter").innerHTML=currentId + 1+"/" +intLengte;
  if(currentId > 0){
    document.getElementById("prev_btn").style.display='block';
  }
  if (currentId >= intLengte - 1){
    document.getElementById("next_btn").style.display='none';
  }
};

whitebox.prevImage = function() {
  contentDiv.style.backgroundImage="url("+ afbeeldingArray[currentId - 1] +")"; 
  tekstDiv.innerHTML = "<h1>" + titelArray[currentId - 1] + "</h1>" + tekstArray[currentId - 1];
  currentId = currentId - 1;
  document.getElementById("counter").innerHTML=currentId + 1+"/" +intLengte; 
  if (currentId < 1){
    document.getElementById("prev_btn").style.display='none';
  }
  if (currentId < intLengte - 1){
    document.getElementById("next_btn").style.display='block';
  }  
};

whitebox.zetContent = function(){ 
  //titel vullen
  document.getElementById("titel").innerHTML="Voorbeelden: " + kopTitel;
  //koptekst vullen
  document.getElementById("koptekst").innerHTML=kopTekst;
  //counter vullen
  document.getElementById("counter").innerHTML=currentId + 1+"/" +intLengte;
  if(currentId == 0){
    //contentdiv centraal maken
    contentDiv = document.getElementById("imgDiv");
    contentDiv.style.backgroundImage="url("+ afbeeldingArray[0] +")";
    //tekstdiv centraal maken
    tekstDiv = document.getElementById("txtDiv");
    tekstDiv.innerHTML = "<h1>" + titelArray[0] + "</h1>" + tekstArray[0];
  }
  if (intLengte <= 1){
    document.getElementById("next_btn").style.display='none'; 
    document.getElementById("prev_btn").style.display='none'; 
  }else {
    document.getElementById("next_btn").style.display='block'; 
  }
};

whitebox.miniMizeTekst = function(){
  tekstDiv.style.display='none';
  document.getElementById("min_btn").style.display='none';
  document.getElementById("counter").style.bottom='22px';
  document.getElementById("max_btn").style.display='block';
  document.getElementById("bg_divMax").style.display='block';
  document.getElementById("counter").style.right='415px';
};

whitebox.maxiMizeTekst = function(){
  tekstDiv.style.display='block';
  document.getElementById("min_btn").style.display='block';
  document.getElementById("counter").style.bottom='105px';
  document.getElementById("max_btn").style.display='none';
  document.getElementById("counter").style.right='207px';
  document.getElementById("bg_divMax").style.display='none';
};