function registerCoulisseImg(imgId, src) {
  var img = new Image();

  img.onload  = function()  {
    var targetImg = document.getElementById( this.id );
    targetImg.width = this.width;
    targetImg.height  = this.height;
    targetImg.parentNode.style.width  = this.width  + "px";
    targetImg.parentNode.style.height = this.height + "px";
    targetImg.src = this.src;
  };
  img.id = imgId;
  if (src) img.src = src; else {
    var imgEl = document.getElementById( imgId );
    if (imgEl) img.src=imgEl.src;

  }

}


/*
Elmer, 2004-11-12:
deze moet in alle onload events van alle plaatjes in de
coulisse aangeroepen worden (bijv. in de homepage)
*/
function fixCoulisseImage(	img	)	{
  img.parentNode.style.width  = img.width  + "px";
  img.parentNode.style.height = img.height + "px";
	}


//////////////////////////////////////////////////

function getPageLeft( element ) {
  var pageLeft  = 0;
  if( element ) {
    pageLeft  = element.offsetLeft;
    pageLeft  +=  getPageLeft(  element.offsetParent  );
    }
  return pageLeft;
  }

function getPageTop(  element ) {
  var pageTop = 0;
  if( element ) {
    pageTop = element.offsetTop;
    pageTop +=  getPageTop( element.offsetParent  );
    }
  return pageTop;
  }

allCoulisseControls = new Array()
with( CoulisseControl = function()  {
  this.toString = new Function( "return 'allCoulisseControls["  + allCoulisseControls.length  + "]';" );
  allCoulisseControls[  allCoulisseControls.length  ] = this;

  this.elementId  = arguments[  0 ];
   this.element = null;
  this.itemElements = new Array();
  this.itemClassName  = "Item";
  this.innerClassName = "Inner";
  this.activeItemElement  = null;
  this.lastActiveItemElement = null;

  this.brake  = 10;
  this.inactiveItemWidth  = 40;
  this.inactiveItemHeight = null;
  this.totalWidth = null;

  this.mouseX = null;
   this.mouseY  = null;

  this.expandRight  = true;

  this.offset = 0;
  
  this.isMoving	=	false;
  } ) {

  prototype.setItemClassName  = function()  {this.itemClassName = arguments[  0 ];}
  prototype.getItemClassName  = function()  {return this.itemClassName;}

  prototype.setInnerClassName = function()  {this.innerClassName  = arguments[  0 ];}
  prototype.getInnerClassName = function()  {return this.innerClassName;}

  prototype.setActiveItemElement  = function()  {this.activeItemElement = arguments[  0 ]; if (arguments[0]) this.lastActiveItemElement = arguments[  0 ]}
  prototype.getActiveItemElement  = function()  {return this.activeItemElement;}

  prototype.setBrake  = function()  {this.brake = arguments[  0 ];}
  prototype.getBrake  = function()  {return this.brake;}

  prototype.setInactiveItemWidth  = function()  {this.inactiveItemWidth = arguments[  0 ];}
  prototype.getInactiveItemWidth  = function()  {return this.inactiveItemWidth;}

  prototype.setTotalWidth = function()  {this.totalWidth  = arguments[  0 ];}
  prototype.getTotalWidth = function()  {return this.totalWidth;}

  prototype.setInactiveItemHeight = function()  {this.inactiveItemHeight  = arguments[  0 ];}
  prototype.getInactiveItemHeight = function()  {return this.inactiveItemHeight;}

  prototype.setExpandRight  = function()  {this.expandRight = arguments[  0 ];}
  prototype.getExpandRight  = function()  {return this.expandRight;}
  
  
  prototype.start = function()  {
    this.element  = document.getElementById(  this.elementId  );
    if( !this.element ) {
      return false;
      }
    var maxHeight = 0;
    with( this.element  ) {
      for(  var c = 0;  c < childNodes.length;  c ++  ) {
        var itemElement = childNodes[ c ];
        if( itemElement.className ==  this.itemClassName  ) {
          for(  var c1  = 0;  c1  < itemElement.childNodes.length;  c1  ++  ) {
            var innerElement  = itemElement.childNodes[ c1  ];
            if( innerElement.className  ==  this.innerClassName ) {
              if( !innerElement.style.left
                ||  !innerElement.style.top
                ||  !innerElement.style.width
                ||  !innerElement.style.height
                ) {

                innerElement.originalLeft = parseInt( $(innerElement).position().left );

                innerElement.originalTop  = parseInt( innerElement.style.top  );
				innerElement.originalWidth  = parseInt( innerElement.style.width  );
                innerElement.originalHeight = parseInt( innerElement.style.height );
				
                itemElement.innerElement  = innerElement;
                //return false;
              } else {
                innerElement.originalLeft = parseInt( innerElement.style.left );
                innerElement.originalTop  = parseInt( innerElement.style.top  );
                innerElement.originalWidth  = parseInt( innerElement.style.width  );
                innerElement.originalHeight = parseInt( innerElement.style.height );
				
                itemElement.innerElement  = innerElement;

                maxHeight = Math.max( maxHeight,  innerElement.originalHeight );
                }
              }
            }

            if (itemElement) {
              itemElement.currentWidth  = this.inactiveItemWidth;
              itemElement.idx = this.itemElements.length;
              this.itemElements[  itemElement.idx  ] = itemElement;
            }
          }
        }

      if( this.totalWidth ) {
        style.overflow  = "hidden";
        style.width = this.totalWidth + "px";
        style.height  = maxHeight + "px";
        }
      this.update();
      style.visibility = "visible";
      style.display = "block";
      }
    return true;
    }

  prototype.previousItem = function() {
    if (!this.activeItemElement) {
      if (this.lastActiveItemElement)
        this.setActiveItemElement(this.itemElements[Math.max(this.lastActiveItemElement.idx - 1, 0)]);
      else
        this.setActiveItemElement(this.itemElements[0]);
    }
    else
      this.setActiveItemElement(this.itemElements[Math.max(this.getActiveItemElement().idx - 1, 0)]);
    this.activeElementToBeSet = this.activeItemElement;
  };
  
  prototype.nextItem = function() {
    if (!this.activeItemElement) {
      if (this.lastActiveItemElement)
        this.setActiveItemElement(this.itemElements[Math.min(this.lastActiveItemElement.idx + 1, this.itemElements.length - 1)]);
      else
        this.setActiveItemElement(this.itemElements[0]);
    }
    else
      this.setActiveItemElement(this.itemElements[Math.min(this.getActiveItemElement().idx + 1, this.itemElements.length - 1)]);
    this.activeElementToBeSet = this.activeItemElement;
  };


  prototype.step  = function()  {
    if( !this.element ) {
      this.start();
      return false;
      }
    if (this.activeElementToBeSet) { this.setActiveItemElement(this.activeElementToBeSet); this.activeElementToBeSet = null; }
		var totalSizeSpeed	=	0;
    for(  var c = 0;  c < this.itemElements.length; c ++  ) {
      var itemElement = this.itemElements[  c ];
      var itemElementWidth  = this.inactiveItemWidth;

      if( itemElement ==  this.activeItemElement  ) {
        itemElementWidth  = itemElement.innerElement.originalWidth;
        }

      var sizeSpeed = ( itemElementWidth  - itemElement.currentWidth  ) / this.brake;
      sizeSpeed = ( sizeSpeed < 0 ) ? Math.floor( sizeSpeed ) : Math.ceil(  sizeSpeed );
      itemElement.currentWidth  = ( itemElement.currentWidth  + sizeSpeed );

			totalSizeSpeed	+=	Math.abs(	sizeSpeed	);
      }

    if( this.totalWidth ) {
      var currentTotalWidth = 0;
      var activeItemOffset  = 0;
      for(  var c = 0;  c < this.itemElements.length; c ++  ) {
        var itemElement = this.itemElements[  c ];
        if( itemElement ==  this.activeItemElement  ) {
          activeItemOffset  = currentTotalWidth - parseInt( ( this.totalWidth - this.activeItemElement.currentWidth ) / 2 );

          var offsetSpeed = ( activeItemOffset  - this.offset ) / this.brake;
          offsetSpeed = ( offsetSpeed < 0 ) ? Math.floor( offsetSpeed ) : Math.ceil(  offsetSpeed );
          this.offset = ( this.offset + offsetSpeed );

          }

        currentTotalWidth +=  itemElement.currentWidth;
        }


      d = this.totalWidth - currentTotalWidth;
      
      if( d > 0 ) {
        wd  = parseInt( d / this.itemElements.length  );
        wdm = d % this.itemElements.length;
        currentTotalWidth = 0;
        for(  var c = 0;  c < this.itemElements.length; c ++  ) {
          var itemElement = this.itemElements[  c ];
          itemElement.currentWidth  +=  wd;
          if( c < wdm ) {
            itemElement.currentWidth  ++;
            }
          currentTotalWidth +=  itemElement.currentWidth;
          }
        }

      this.offset = Math.min( Math.max( this.offset,  0 ),  currentTotalWidth - this.totalWidth );
      }
    else  {
      this.offset = 0;
      }
    
    if (totalSizeSpeed	== 0 &&	this.isMoving	==	true	){
      //alert('');
    }      
		if(	totalSizeSpeed	<	10	&&	this.isMoving	==	true	)	{
			this.isMoving	=	false;
			if(	this.onMoveStop	)this.onMoveStop();
    }
		else if(	totalSizeSpeed	>=	10	&&	this.isMoving	==	false	)	{
			this.isMoving	=	true;
			if(	this.onMoveStart	)this.onMoveStart();
    }
    this.update();

    return true;
    }


prototype.mouseout  = function()  {
    var out = true;
    if( arguments[  0 ] ) {
      this.mouseX = arguments[  0 ].pageX - getPageLeft(  this.element  );
      this.mouseY = arguments[  0 ].pageY - getPageTop( this.element  );
        }
    else if(  event ) {
      var element = event.toElement;

      while(  element ) {
        out &=  element !=  this.element;
        element = element.parentNode;
        }
        }

    if( out ) {
      this.mouseX = null;
      this.mouseY = null;
      this.setActiveItemElement();
      }
    }


  prototype.update  = function()  {
    var currentTotalWidth = 0;
    for(  var c = 0;  c < this.itemElements.length; c ++  ) {
      itemElement = this.itemElements[  c ];

      with( this.itemElements[  c ] ) {
        var p = currentTotalWidth;
        if( this.totalWidth ) {
          p -=  this.offset;
          }
        if( currentWidth  > 0 &&  ( !this.totalWidth  ||  p > 0 - itemElement.currentWidth  &&  p < this.totalWidth ) ) {
		      style.visibility = "visible";
          style.display = "block";
          if( this.expandRight  ) {
            style.left  = p + "px";
            }
          else  {
            style.right = p + "px";
            }
			
			//alert(currentWidth);
          style.width = currentWidth  + "px";

          var newLeft = parseInt( innerElement.originalLeft - innerElement.originalLeft * currentWidth  / innerElement.originalWidth  ) + "px";
          /*alert(newLeft);
          alert(innerElement.originalLeft);
          alert(innerElement.originalLeft);
          alert(currentWidth);
          alert(innerElement.originalWidth);
          */
          
		  //alert('' + innerElement.getAttribute('originalLeft')+ ',' +innerElement.originalLeft  + ',' + currentWidth  + ',' + innerElement.originalWidth );
		  //return;

		  if (newLeft.indexOf('NaN') == -1) //anders gaat ie stuk in IE7
		    innerElement.style.left = newLeft;


          if( this.inactiveItemHeight ) {
            style.height  = this.inactiveItemHeight + parseInt( ( currentWidth  - this.inactiveItemWidth  ) * ( innerElement.originalHeight - this.inactiveItemHeight ) / ( innerElement.originalWidth  - this.inactiveItemWidth  ) ) + "px";
            }

          }
        else  {
          style.display = "none";
          //status = 'nee';
          }

        if( this.mouseX !== null  &&  this.mouseY !== null  &&  this.mouseX > itemElement.offsetLeft  &&  this.mouseX < itemElement.offsetLeft  + itemElement.offsetWidth ) {
          this.setActiveItemElement(  itemElement );
          }

        currentTotalWidth +=  currentWidth;
        }
      }

    }


  prototype.mousemove = function()  {
    this.mouseX = 0;
    this.mouseY = 0;
    if( arguments[  0 ] ) {
      this.mouseX = arguments[  0 ].pageX - getPageLeft(  this.element  );
      this.mouseY = arguments[  0 ].pageY - getPageTop( this.element  );
      }
    else if(  event ) {
      this.mouseX = getPageLeft(  event.srcElement  ) + event.offsetX - getPageLeft(  this.element  );
      this.mouseY = getPageTop( event.srcElement  ) + event.offsetY - getPageTop( this.element  );
      }

    }

  prototype.onMoveStart = function()  {
    }
  prototype.onMoveStop = function()  {
    }

  }
	
	//img fade
	function initImage(id) {
		imageId = id;
		image = document.getElementById(imageId);
			setOpacity(image, 10);
		image.style.display = "block";
			fadeIn(imageId,30);
	}
	function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
	if (opacity <= 100) {
		setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
			}
		}
	}
	function setOpacity(obj, opacity) {
		opacity = (opacity == 100)?99.999:opacity;
		// IE/Win
		obj.style.filter = "alpha(opacity:"+opacity+")";
		// Safari<1.2, Konqueror
		obj.style.KHTMLOpacity = opacity/100;
		// Older Mozilla and Firefox
		obj.style.MozOpacity = opacity/100;
		// Safari 1.2, newer Firefox and Mozilla, CSS3
		obj.style.opacity = opacity/100;
	}
	//window.onload = function() {initImage()}
	
  homeCoulisseControl = new CoulisseControl(  "homeCoulisse"  );
  homeCoulisseControl.setBrake( 10  );
  homeCoulisseControl.setInactiveItemWidth( 30  );
  homeCoulisseControl.setExpandRight( true );
  homeCoulisseControl.setTotalWidth(  900 );

	
homeCoulisseControl.onMoveStart	=	function()	{
  for(var i = 0;  i < homeCoulisseControl.itemElements.length; i++) {
    var el = homeCoulisseControl.itemElements[i];
    var elId = el.id;
    var num = elId.substring(4,elId.length);
    document.getElementById(	"img" + num + "_overlay"	).style.display	=	"none";
    if (el == homeCoulisseControl.activeItemElement){
      //document.getElementById(	"flashtitle" + num ).style.display	=	"none";
    }
  }
}
	
homeCoulisseControl.onMoveStop	=	function()	{
  for(var i = 0;  i < homeCoulisseControl.itemElements.length; i++) {
    var el = homeCoulisseControl.itemElements[i];
    var elId = el.id;
    var num = elId.substring(4,elId.length);
    document.getElementById(	"img" + num + "_overlay"	).style.display	=	"none";
    if (el == homeCoulisseControl.activeItemElement){
      document.getElementById(	"flashtitle" + num ).style.display	=	"none";
			setTimeout('initImage("img' + num +'_overlay")',1000);
    }
    else {
      setTimeout('document.getElementById("flashtitle' + num + '").style.display = "block";',1000);
    }
  }
}

  menuCoulisseControl = new CoulisseControl(  "menuCoulisse"  );
  menuCoulisseControl.setBrake( 4 );
  menuCoulisseControl.setInactiveItemWidth( 30  );
  menuCoulisseControl.setExpandRight( true );

  rightCoulisseControl  = new CoulisseControl("rightCoulisse");
  rightCoulisseControl.setBrake(10);
  rightCoulisseControl.setInactiveItemWidth(30);
  rightCoulisseControl.setExpandRight(false);

  
  function coulisseOpenCloseOnclick(coulisse,el){
    if (coulisse.getActiveItemElement() == el)
      coulisse.setActiveItemElement();
    else
      coulisse.setActiveItemElement(el);
  }

  leftCoulisseControl = new CoulisseControl("leftCoulisse");
  leftCoulisseControl.setBrake(4);
  leftCoulisseControl.setInactiveItemWidth(80);
  leftCoulisseControl.setExpandRight(true);

  menuCoulisseAriaControl = new CoulisseControl("menuCoulisseAria");
  menuCoulisseAriaControl.setBrake(4);
  menuCoulisseAriaControl.setInactiveItemWidth(30);
  menuCoulisseAriaControl.setExpandRight(true);
  
  if (screen.width <= 800) {
    menuCoulisseCollectionControl = new CoulisseControl("menuCoulisseCollection");
    menuCoulisseCollectionControl.setBrake(4);
    menuCoulisseCollectionControl.setInactiveItemWidth(30);
    menuCoulisseCollectionControl.setExpandRight(true);
  }
  
  carousselCoulisseControl = new CoulisseControl("carousselCoulisse");
  carousselCoulisseControl.setBrake(10);
  carousselCoulisseControl.setInactiveItemWidth(40);
  carousselCoulisseControl.setInactiveItemHeight(60);
  carousselCoulisseControl.setTotalWidth(201);

function step() {
  homeCoulisseControl.step();
  menuCoulisseControl.step();
  rightCoulisseControl.step();
  leftCoulisseControl.step();
  menuCoulisseAriaControl.step();
  if (screen.width <= 800) menuCoulisseCollectionControl.step();
  carousselCoulisseControl.step();
  subhomeCoulisseControl.step();
}

function NavOut(){
	if (screen.width <= 800) menuCoulisseCollectionControl.setActiveItemElement();
}
function NavOver(id){
	if (screen.width <= 800) menuCoulisseCollectionControl.setActiveItemElement(id);
}

function cCActivateFromFlash(num){
  coulisseCloseAll();
  var el = document.getElementById('flashtitle' + num);
  $(el).click();
  /**
  if (el.parentNode.onclick){
    el.parentNode.onclick();
  }
  */
}

function coulisseCloseAll(e){
  for(var i = 0;  i < allCoulisseControls.length; i++ ) {
    var el = allCoulisseControls[i].element;
    if (!el){
      continue;
    }
    if (allCoulisseControls[i].elementId == 'subhomeCoulisse'){ //mdi: FIXME: uhgly hard-coded
      continue;
    }
    if (eventOnPartOfElement(e,allCoulisseControls[i].element)){
      continue;
    }
    allCoulisseControls[i].setActiveItemElement();
  }
}


/*subhome coulissen*/
subhomeCoulisseControl = new CoulisseControl(  "subhomeCoulisse"  );
subhomeCoulisseControl.setBrake( 10  );
subhomeCoulisseControl.setInactiveItemWidth( 63  );
subhomeCoulisseControl.setExpandRight( true );
subhomeCoulisseControl.setTotalWidth(  540 );
	
subhomeCoulisseControl.onMoveStop =	function()	{
  for(var i = 0;  i < subhomeCoulisseControl.itemElements.length; i++) {
    var el = subhomeCoulisseControl.itemElements[i];
    var elOverlay = el.getElementsByTagName('div')[1];
    elOverlay.className = 'overlay hidden';
    if (el == subhomeCoulisseControl.activeItemElement){
      elOverlay.className = 'overlay';
    }
  }
  subhomeCoulisseControl.startAutoPlay();
}

subhomeCoulisseControl.onMoveStart =	function()	{
  for(var i = 0;  i < subhomeCoulisseControl.itemElements.length; i++) {
    var el = subhomeCoulisseControl.itemElements[i];
    var elOverlay = el.getElementsByTagName('div')[1];
    elOverlay.className = 'overlay hidden';
  }
  subhomeCoulisseControl.stopAutoPlay();
}

subhomeCoulisseControl.setup = function (){
  var el = getEl(subhomeCoulisseControl.elementId);
  if (!el){
    return;
  }
  var activeElement = el.getElementsByTagName('div')[0];
  if (!activeElement){
    return;
  }
  subhomeCoulisseControl.setActiveItemElement(activeElement);
  subhomeCoulisseControl.setupAutoPlay();
}

subhomeCoulisseControl.setupAutoPlay = function(){

  if (subhomeCoulisseControl.itemElements.length != 3){
    setTimeout('subhomeCoulisseControl.setupAutoPlay()',10);
    return;
  }
  
  subhomeCoulisseControl.startAutoPlay(); 
  
  //mouseover variant
  for(var i = 0;  i < subhomeCoulisseControl.itemElements.length; i++) {
    var itemEl = subhomeCoulisseControl.itemElements[i];
    addEvent(itemEl,'mouseover', 
      function(){
        subhomeCoulisseControl.setActiveItemElement(this);
      }
    );
  }
  
  
  var el = getEl(subhomeCoulisseControl.elementId);
  
  addEvent(el,'mouseover', 
      function(){
        subhomeCoulisseControl.hasMouseOver = true;
        subhomeCoulisseControl.stopAutoPlay();
      }
    );
    
  addEvent(el,'mouseout', 
      function(e){
        if(eventOnPartOfElement(e, this, true)){
          return;
        }
        subhomeCoulisseControl.hasMouseOver = false;
        if (subhomeCoulisseControl.isMoving){
          return;
        }
        subhomeCoulisseControl.startAutoPlay();
      }
    );  
}

subhomeCoulisseControl.autoPlay = function (){
  var elements = subhomeCoulisseControl.itemElements;
  if(elements[elements.length - 1] == subhomeCoulisseControl.getActiveItemElement()){
    subhomeCoulisseControl.setActiveItemElement(elements[0]);
  }
  else {
    subhomeCoulisseControl.nextItem();
  }
}

subhomeCoulisseControl.startAutoPlay = function (){
  if (subhomeCoulisseControl.hasMouseOver){
    return;
  }
  subhomeCoulisseControl.aPTimer = setTimeout('subhomeCoulisseControl.autoPlay()',8000);
}

subhomeCoulisseControl.stopAutoPlay = function (){
  clearTimeout(subhomeCoulisseControl.aPTimer);
}

addEvent(window,'load', subhomeCoulisseControl.setup);



// setup coulissecontrols
$(document).ready(function() {
  $('#carousselArrowLeft').click(function() {
    carousselCoulisseControl.previousItem();
  });

  $('#carousselArrowRight').click(function() {
    carousselCoulisseControl.nextItem();
  });


  $('#rightCoulisse div.Item').click(function() {
    coulisseOpenCloseOnclick(rightCoulisseControl,this);
    cClick();
    return nd();
  });


  $('#leftCoulisse div.Item').click(function() {
    coulisseOpenCloseOnclick(leftCoulisseControl,this);
    hideArrow();
    cClick();
    return nd();
  });
});