// Foto's resizen
var maxwidth = 150;

// FADE SETTINGS
var FadeOpacity = 0.6;
var FadeInTime = 400;
var FadeOutTime = 275;
var overlayFader, popupFader;

function doePopup(type,content,title,width,height) {

  // divs creeren
  var popUp = document.createElement('div');
  var overlay = document.createElement('div');

  document.body.appendChild(overlay);
  document.body.appendChild(popUp);

  overlay.id = 'overlayDiv';
  popUp.id = 'popUp';

  // titelbar maken
  if(title != false) {
    var titleBar = document.createElement('div');
    var titleClose = document.createElement('div');
    var titleTitle = document.createElement('div');

    titleBar.className = 'popupTitleBar';
    titleTitle.className = 'popupTitleTitle';
    titleBar.style.width = '100%';
    titleTitle.innerHTML = title;
    titleTitle.style.width = (width - 24)+ 'px';

    titleClose.className = 'popupTitleBarClose';
    titleClose.innerHTML = 'X';

    titleBar.appendChild(titleClose);
    titleBar.appendChild(titleTitle);
    popUp.appendChild(titleBar);
  }
  switch(type) {
    case 1: // plaatje
      var popupContent = document.createElement('div');
      var img = document.createElement('img');
      popupContent.appendChild(img);
      popUp.appendChild(popupContent);
      popupContent.id = 'popupContent';
      img.src = content;
      img.style.cursor = 'pointer';
      // de hoogte en breedte zijn niet opgegeven, dus wordt die van het plaatje zelf gepakt
      if(width == null) width = img.width;
      if(height == null) height = img.height;
      break;
    case 2: //iframe
      var popupContent = document.createElement('iframe');
      popUp.appendChild(popupContent);
      popupContent.src = content;
      popupContent.id = 'popupContent';
      popupContent.style.width = width+'px';
      popupContent.style.height = height+'px';
      popupContent.style.overflow = 'hidden';
      popupContent.scrolling = 'no';
      popupContent.style.border = '0';
      break;
    case 3: // ajax
      // dit komt nog.. :-)
      break;
    case 4:
    default: // tekst
      var popupContent = document.createElement('p');
      popUp.appendChild(popupContent);
      popupContent.id = 'popupContent';
      popupContent.innerHTML = content;
      popupContent.style.width = width+'px';
      popupContent.style.height = height+'px';
  }

  // hoogte en breedte, top, height
  if(title != false) height = height + 20;

  var pageSize = getPageSize();
  var pageEnd = $("pagina_eind");
  var pageHeight = pageEnd.offsetTop + pageEnd.offsetHeight;
  var pageWidth = pageEnd.offsetLeft + pageEnd.offsetWidth;
  if(pageSize[2] > pageWidth) pageWidth = pageSize[2]; // als het einde van de pagina niet volledige schermhoogte is, deze de volledige schermhoogte maken
  if(pageSize[3] > pageHeight) pageHeight = pageSize[3]; // als het einde van de pagina niet volledige schermhoogte is, deze de volledige schermhoogte maken


  var posTop, posLeft;
  var reSize = false;

  // popUp centreren
  if(width < pageSize[2]) { posLeft = (pageSize[2] / 2) - (width / 2) + document.documentElement.scrollLeft; }
  else { posLeft = document.documentElement.scrollLeft + 10; reSize = true;}
  if(width < pageSize[3]) { posTop = (pageSize[3] / 2) - (height / 2) + document.documentElement.scrollTop; }
  else { posTop = document.documentElement.scrollTop + 10; reSize = true;}

  popUp.className = 'popUp';
  popUp.style.left = posLeft+'px';
  popUp.style.top = posTop+'px';
  popUp.style.width = width+'px';
  popUp.style.height = height+'px';

  if(reSize == true) {  // pagina grootte opnieuw berekeken
    var pageHeight2 = (2 * popUp.offsetTop) + height + 26;
    var pageWidth2 = (2 * popUp.offsetLeft) + width + 26;
  }
  if(pageHeight2 > pageHeight) pageHeight = pageHeight2;
  if(pageWidth2 > pageWidth) pageWidth = pageWidth2;

  overlay.style.height = pageHeight+'px';
  overlay.style.width = pageWidth+'px';

  // Sluitbaar maken
  if(type == 1) addEvent(img,'click',HidePopUp);
  if(title != false) addEvent(titleClose,'click',HidePopUp);

  // Faden van de achtegrond en de popup
  popupFader = new fx.Opacity(popUp,{duration: FadeInTime});
  popupFader.hide();

  overlayFader = new fx.Opacity(overlay,{duration: FadeInTime});
  overlayFader.hide();
  overlayFader.custom(0,FadeOpacity);
  popupFader.toggle();
}

function CreateFotoPopup(url,titel,omschrijving,width,height) {
  var omschrijvingDiv = document.createElement('div');
  omschrijvingDiv.className = 'fotoOmschrijving';
  omschrijvingDiv.innerHTML = omschrijving;

  CreatePopup(1,url,titel,width,height);
  $('popupContent').appendChild(omschrijvingDiv);
  $('popUp').style.height = ($('popUp').offsetHeight + omschrijvingDiv.offsetHeight)+'px' ;
}

function HidePopUp() {
  // opties toevoegen van nieuwe duration tijd en element verwijderen
  overlayFader.setOptions({duration: FadeOutTime,onComplete: function(){
    document.body.removeChild($('overlayDiv'));
  }});

  // hier ook
  popupFader.setOptions({duration: FadeOutTime,onComplete: function(){
    document.body.removeChild($('popUp'));
  }});
  overlayFader.custom(FadeOpacity,0);
  popupFader.toggle();
}

function resize(image){
  if(!image){
    var image = (event.target || event.srcElement);
  }
  var width = image.width;
  var height = image.height;
  var url = image.src;

  if(image.className == 'resize'){
    image.width = maxwidth;
    image.height = Math.floor(height/(width/maxwidth));
    image.alt = 'Klik op deze foto voor de originele grootte!';
    image.title = 'Klik op deze foto voor de originele grootte!';
    //image.style.width = image.width+"px";
    //image.style.height = image.height+"px";
    image.className = "resized";

    addEvent(image,'click',function () {
      CreatePopup(1,image.src,false);
    });

  }
};

function size(){
  var count = document.images.length;
  var i = 0;

  while(count>i){
    var img = document.images[i];
    if(img.complete){
      resize(img);
    }else{
     addEvent(img,'load',size);
    }
    i++;
  }
};


// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){

	var xScroll, yScroll;

	if (window.innerHeight && window.scrollMaxY) {
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else {
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
	return arrayPageSize;
}

function addEvent( obj, type, fn ) {
  if ( obj.addEventListener ) {
    obj.addEventListener( type, fn, false );
  }
  else if ( obj.attachEvent ) {
    var eProp = type + fn;
    obj["e"+eProp] = fn;
    obj[eProp] = function() { obj["e"+eProp]( window.event ); };
    obj.attachEvent( "on"+type, obj[eProp] );
  }
  else {
    obj['on'+type] = fn;
  }
};

function removeEvent( obj, type, fn ) {
  if ( obj.removeEventListener ) {
    obj.removeEventListener( type, fn, false );
  }
  else if ( obj.detachEvent ) {
    var eProp = type + fn;
    obj.detachEvent( "on"+type, obj[eProp] );
    obj['e'+eProp] = null;
    obj[eProp] = null;
  }
  else {
    obj['on'+type] = null;
  }
};

addEvent(window,'load',size);