var COLLAPSED = 0
var EXPANDED = 1
var ANIMATED_EXPANDED = 2

function NavAnimator()
{
         this.ver=navigator.appVersion
         this.agent=navigator.userAgent
         this.dom=document.getElementById?1:0
         this.opera5=this.agent.indexOf("Opera 5")>-1
         this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
         this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
         this.ie7=(this.ver.indexOf("MSIE 7")>-1 && this.dom && !this.opera5)?1:0;
		 this.ie8=(this.ver.indexOf("MSIE 8")>-1 && this.dom && !this.opera5)?1:0;

         this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
         this.ie=this.ie4||this.ie5||this.ie6||this.ie7||this.ie8
         this.mac=this.agent.indexOf("Mac")>-1
         this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
         this.ns4=(document.layers && !this.dom)?1:0;
         this.bw=(this.ie6||this.ie7||this.ie8||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5)

         this.navs = new Object();
         this.children = new Array();
         this.names_arr = new Array();
         this.stepTime = 40
}


NavAnimator.prototype.add = function(nav)
{
	nav.anim = this
	this.navs[nav.id] = nav
	
	this.names_arr[this.names_arr.length] = nav.id
	if (nav.constructor == Nav) {
		this.children[nav.id] = nav
	}	
}

NavAnimator.prototype.totalPos = function()
{
	var pos = 0
	for (var i in this.children) {
		pos += this.children[i].pos
	}
	return pos
}

NavAnimator.prototype.init = function()
{
	for (var id in this.navs) {
		this.navs[id].init()
	}
	this.setVisible('mainnav');
	this.setVisible('relatednav');

	this.paint()	
}

NavAnimator.prototype.setVisible = function(id)
{
	if(!this.bw) alert('Old browser')
	evnt=this.dom? document.getElementById(id):this.ie4?document.all[id]:0;	
	css=this.dom||this.ie4?evnt.style:evnt; 
	css.visibility = "visible"
}


NavAnimator.prototype.imgmouseover = function(object)
{
	this.navs[object.parentNode.id].imgmouseover();
}

NavAnimator.prototype.imgclick = function(object)
{
	if (typeof this.navs[object.id] != "undefined") {
		this.navs[object.id].imgclick();
	} else if (typeof this.navs[object.parentNode.id] != "undefined") {
		this.navs[object.parentNode.id].imgclick();
	} else {
		this.navs[object.parentNode.parentNode.id].imgclick();
	}	
}


NavAnimator.prototype.mouseover = function(object)
{
	this.navs[object.id].mouseover();
}

NavAnimator.prototype.mouseout = function(object)
{
	this.navs[object.id].mouseout();
}

NavAnimator.prototype.paint = function()
{
	start = (new Date()).getTime()
	for (var id in this.navs) {
		this.navs[id].update()
	}
	end = (new Date()).getTime()
	interval = (this.stepTime  - (end - start))
	if (interval < 0) {
		setTimeout("anim.paint()", 0)
	} else {
		setTimeout("anim.paint()", interval)
	}	
}

function initDHTML(anim, object)
{
	if(!anim.bw) alert('Old browser')
	object.evnt=anim.dom? document.getElementById(object.id):anim.ie4?document.all[object.id]:0;	
	if (!object.evnt)  return false;
	object.css=anim.dom||anim.ie4?object.evnt.style:object.evnt; 
	object.ref=anim.dom||anim.ie4?document:object.css.document;
	object.x=parseInt(object.css.left)||object.css.pixelLeft||object.evnt.offsetLeft||0;
	object.y=parseInt(object.css.top)||object.css.pixelTop||object.evnt.offsetTop||0
	object.w=object.evnt.offsetWidth||object.css.clip.width||
	object.ref.width||object.css.pixelWidth||0; 
	object.h=object.evnt.offsetHeight||object.css.clip.height||
	object.ref.height||object.css.pixelHeight||0
	object.c=0 //Clip values
	if((anim.dom || anim.ie4) && object.css.clip) {
	object.c=object.css.clip; object.c=object.c.slice(5,object.c.length-1); 
	object.c=object.c.split(' ');
	for(var i=0;i<4;i++){object.c[i]=parseInt(object.c[i])}
	}
	object.ct=object.css.clip.top||object.c[0]||0; 
	object.cr=object.css.clip.right||object.c[1]||object.w||0
	object.cb=object.css.clip.bottom||object.c[2]||object.h||0; 
	object.cl=object.css.clip.left||object.c[3]||0
	object.obj = object.id + "Object"; eval(object.obj + "=object")
	return true
}

function setHeight(height)
{
	if (this.height != height) {
		if (height == 0) {
			this.css.display = 'none'
		} else if (this.height == 0 && height > 0) {
			this.css.display = 'block'
		}
		this.height = height
		this.css.height = height + "px"
	}	
}

function paint()
{
	var height = Math.round(this.base + this.amplitude*Math.sin(0.5*Math.PI*this.pos/this.steps))
	this.setHeight(height)
}


function Nav(id, type)
{
	this.id = id
	this.type = type
	this.pos = 0
	this.steps = 12
	this.img_open = new Image()
	this.img_closed = new Image()
}

Nav.prototype.setHeight = setHeight

Nav.prototype.init = function()
{
	initDHTML(this.anim, this)

	nodes = this.evnt.childNodes
	this.img = (this.evnt.childNodes[0].tagName == 'IMG') ? this.evnt.childNodes[0] : this.evnt.childNodes[1]

	this.base = 26
	this.amplitude = this.h-this.base
//	this.evnt.onmouseover = function () { anim.mouseover(this) }
//	this.evnt.onmouseout = function() { anim.mouseout(this) }

	this.img_open.src = this.img.src.substr(0, this.img.src.length-5) + "o.gif"
	this.img_closed.src = this.img.src.substr(0, this.img.src.length-5) + "c.gif"

	if (this.type == ANIMATED_EXPANDED) {
		this.state = 'expanding'
		this.img.src = this.img_open.src
	} else if (this.type == EXPANDED) {
		this.state = 'expanding'
		this.pos = this.steps
		this.img.src = this.img_open.src
	} else {
		this.setHeight(this.base);
	}	

			
//	this.img.onmouseover = function () { anim.imgmouseover(this) }
	this.img.onclick = function () { anim.imgclick(this) }
}

Nav.prototype.imgmouseover = function()
{
	this.state = 'expanding'
	this.img.src = this.img_open.src
}

Nav.prototype.imgclick = function()
{
	if (this.state == 'expanding') {
		this.state = 'collapsing'
		this.img.src = this.img_closed.src
	} else {
		this.state = 'expanding'
		this.img.src = this.img_open.src
	}
	//alert(anim.names_arr.length);
	for (var i = 0; i <anim.names_arr.length; i++) {
		if(this.id == anim.names_arr[i]) {
			//alert('gelijke gevonden' + anim.names_arr[i]);
		}else {
			anim.navs[anim.names_arr[i]].state = 'collapsing'
			anim.navs[anim.names_arr[i]].img.src = anim.navs[anim.names_arr[i]].img_open.src
		}
	}
	
}

Nav.prototype.mouseover = function()
{
	this.lastevent = 'mouseover'
}	

Nav.prototype.mouseout = function()
{
	this.lastevent = 'mouseout'
}

Nav.prototype.update = function()
{
	if (this.lastevent == 'mouseout') {
//		this.state = 'collapsing'
	}	
	if (this.state == 'expanding' && this.pos < this.steps) {
		this.pos++	
		this.paint()
	} else if (this.state == 'collapsing' && this.pos > 0) {
		this.pos-=2
		if (this.pos < 0) {
			this.pos = 0
		}	
		this.paint()
	}
}

Nav.prototype.paint = function()
{
	var height = Math.round(this.base + this.amplitude*Math.sin(0.5*Math.PI*this.pos/this.steps))
	this.setHeight(height)
}

Nav.prototype.reset = function()
{
	this.pos = 0
	this.state = 'collapsing'
	this.img.src = this.img_closed.src
	this.paint()
}


function SelectedNav(id)
{
	this.id = id
	this.pos = 0
	this.steps = 12
	this.top = {'id': 'navtop'}
	this.top.setHeight = setHeight
	this.bottom = {'id': 'navbottom'}
	this.bottom.setHeight = setHeight
	
	this.img_open = new Image()
	this.img_closed = new Image()

}

SelectedNav.prototype.init = function()
{
	initDHTML(this.anim, this)
	if (!initDHTML(this.anim, this.top)) {
		this.top.h = 0
		this.top.setHeight = function() {}
	}	
	if (!initDHTML(this.anim, this.bottom)) {
		this.bottom.h = 0
		this.bottom.setHeight = function() {}
	}
	
	this.css.height = 'auto'
	this.css.overflow = 'visible'
	this.img = this.evnt.getElementsByTagName('img')[0]
	
	this.top.base = this.img.offsetHeight
	this.top.css.borderBottom = '1px solid #67A2B0'	
	this.bottom.css.borderTop = '1px solid #67A2B0'	

	this.topHasNodes = (this.top.evnt.getElementsByTagName('a').length > 0)
	this.bottomHasNodes = (this.bottom.evnt.getElementsByTagName('a').length > 0)

	this.top.setHeight(0)
	this.bottom.setHeight(0)
	
	
//	this.evnt.onmouseover = function () { anim.mouseover(this) }
//	this.evnt.onmouseout = function() { anim.mouseout(this) }

	this.img_open.src = this.img.src.substr(0, this.img.src.length-5) + "o.gif"
	this.img_closed.src = this.img.src.substr(0, this.img.src.length-5) + "c.gif"

//	this.img.onmouseover = function () { anim.imgmouseover(this) }
	this.img.onclick = function () { anim.imgclick(this) }

}

SelectedNav.prototype.imgmouseover = function()
{
	this.state = 'expanding'
	this.img.src = this.img_open.src
}

SelectedNav.prototype.imgclick = function()
{
	if (this.state == 'expanding') {
		this.state = 'collapsing'
		this.img.src = this.img_closed.src
	} else {
		this.state = 'expanding'
		this.img.src = this.img_open.src
	}	
	
}


SelectedNav.prototype.mouseover = function()
{
	this.lastevent = 'mouseover'
}	

SelectedNav.prototype.mouseout = function()
{
	this.lastevent = 'mouseout'
}

SelectedNav.prototype.update = function()
{
	if (this.lastevent == 'mouseout') {
//		this.state = 'collapsing'
	}	
	if (this.state == 'expanding' && this.pos < this.steps) {
		this.pos++	
		this.paint()
	} else if (this.state == 'collapsing' && this.pos > 0) {
		this.pos-=2
		if (this.pos < 0) {
			this.pos = 0
		}	
		this.paint()
	}
}

SelectedNav.prototype.paint = function()
{
	var height
	if (this.topHasNodes) {
		height = Math.round((this.top.h)*Math.sin(0.5*Math.PI*this.pos/this.steps))
		this.top.setHeight(height)
	}
	if (this.bottomHasNodes) {
		height = Math.round((this.bottom.h)*Math.sin(0.5*Math.PI*this.pos/this.steps))
		this.bottom.setHeight(height)
	}	
}

SelectedNav.prototype.reset = function()
{
	this.pos = 0
	this.state = 'collapsing'	
	this.img.src = this.img_closed.src
	this.paint()
}



function RelatedNav(id)
{
	this.id = id
	this.pos = 0
	this.steps = 16
}

RelatedNav.prototype.initDHTML = initDHTML
RelatedNav.prototype.setHeight = setHeight
RelatedNav.prototype.paint = paint

RelatedNav.prototype.init = function()
{
	initDHTML(this.anim, this)
	this.base = 1;
	this.amplitude = this.h-1
	this.setHeight(1);
}

RelatedNav.prototype.update = function()
{
	if (this.pos < this.steps) {
		this.pos++	
		this.paint()
	}	
}

function RelatedNav(id)
{
	this.id = id
	this.pos = 0
	this.steps = 15
}

function MainNav(id)
{
	this.id = id
	this.pos = 0
	this.steps = 6
	this.img_open = new Image()
	this.img_closed = new Image()
}

MainNav.prototype.initDHTML = initDHTML
MainNav.prototype.setHeight = setHeight

MainNav.prototype.init = function()
{
	initDHTML(this.anim, this)

	this.img=this.anim.dom? document.getElementById('mainnavimage'):this.anim.ie4?document.all['mainnavimage']:0;	
	this.img.onclick = function () { anim.imgclick(this) }
	this.base = this.img.height + 1
	this.amplitude = 81 + this.base
	this.setHeight(this.base)

	this.img_open.src = this.img.src.substr(0, this.img.src.length-5) + "o.gif"
	this.img_closed.src = this.img.src.substr(0, this.img.src.length-5) + "c.gif"
	
}

MainNav.prototype.imgclick = function()
{
	if (this.state == 'expanding') {
		this.state = 'collapsing'
		this.amplitude = this.evnt.offsetHeight
		this.img.src = this.img_closed.src
	} else {
		this.state = 'expanding'
		this.img.src = this.img_open.src
	}	
}


MainNav.prototype.update = function()
{
	if ((this.state == 'collapsing') && (this.pos == 1)) {
		for (var i in this.anim.navs) {
			if (typeof this.anim.navs[i].reset != 'undefined') {
				this.anim.navs[i].reset()
			}
		}
		this.amplitude = 81 + this.base
	}
	if (this.pos == this.steps) {
		this.css.height = 'auto'
		this.css.overflow = 'visible'
	} else if (this.pos < this.steps) {
		this.css.overflow = 'hidden'
	}
	if (this.state == 'expanding' && this.pos < this.steps) {
		this.pos++	
		this.paint()
	} else if (this.state == 'collapsing' && this.pos > 0) {
		this.pos--
		this.paint()
	}
}

MainNav.prototype.paint = function()
{
	var height = Math.round(this.base + (this.amplitude-this.base)*this.pos/this.steps)
	this.setHeight(height)
}