var delayId = 0;
var selectItem;
var selectId;

var topPart = 300;
var oldNavi = 0;
//var totalNavi = 1;

var effect1;
var effect2;
var effect3;
var bBigIntro = false;
var _bShowMsgs = true;

function init(bShowMsgs){
	//$("messages").style.left = 0;//can't set it with css?
	
	window.clearTimeout(delayId);
	
	_bShowMsgs = bShowMsgs;
	
	if(bShowMsgs){
		$("messagebar").style.top = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight))  + "px";	
		delayId = showMsgs.delay(1, 0);
		window.onresize = positionMsg;
	} else {
		$("messagebar").style.top = "-500px";
	}
}

function loadMsgs($i){
	
	var gotoX = ($i < oldNavi)? 252*10:-252*10;
	new Effect.Fade('messages', { afterFinish:function(){
		//$('messages').hide(); 
		showMsgs($i);
	}});
	
	oldNavi = $i;
	
}

function showMsgs($i){
	//$('messages').style.
	new Ajax.Updater('messagebar', 'messagebar.php?n=' + $i, { 
			method: 'get',
			/*onCreate:function(){
				$('messages').style.opacity = .5;
			},*/
	        afterFinish:function(){
				//alert('onComplete');
				new Effect.Appear('messages');
				
				//new Effect.Opacity('messages', { from: 0, to: 1, duration: 2.5, delay:1 });

				//new Effect.Move("messages", {x:0, duration:1, mode: 'absolute'});
			},			
			onComplete:function(){
				positionMsg();
			}
		});
	
	
	reseter();
}

function positionMsg(){

	if(!_bShowMsgs) return;

 	var H =  window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
	
	//dit zou het moeten zijn...
	//var halfPos = topPart + (H-topPart)/2;
	var halfPos = (H-topPart)/2;
	
	if(halfPos < topPart) halfPos = topPart;
	
	new Effect.Move("messagebar", {y:halfPos, duration:1, mode: 'absolute' })
}


function messageClick(el, id){
	
	window.clearTimeout(delayId);
	
	//close intro
	if(bBigIntro) introReset();

	var msgItem =  $(el).parentNode.parentNode;
	
	//close old one
	if(selectItem != undefined) {
		//for thumbs
		//open if not the same
		//.8 secs later
		if(selectId != id) delayId = growItem.delay(.8,  msgItem, id);
		
		resetItem(selectItem, selectId);
	//and open the new one
	} else growItem(msgItem, id);
}

function growItem(msgItem, id){
	
	//1.center
	var gotoX = - (id * 252) - 10;	
	var obj = $("right");
	if (obj.offsetParent) {
		do {  gotoX += obj.offsetLeft;
		   } while (obj = obj.offsetParent);
	}	
	new Effect.Move("messages", {x:gotoX, duration:1, mode: 'absolute' })
	new Effect.Move("messagebar", {y:230, duration:1, mode: 'absolute' })
	
	// stop animation
	if(effect1 != null)	effect1.cancel(); 
	if(effect2 != null)	effect2.cancel();
	if(effect3 != null)	effect3.cancel();
	
	var alltxt = $$('div.alltxt')[id];
	
	//-- to get the height --
	//we make a new hidden container
	var tempEl =  document.createElement("div");
	tempEl.className = "messageitem messageitemstretch";
	//copy the text in it
	document.body.appendChild(tempEl);
	//IE bug
	if(alltxt != null) tempEl.innerHTML = alltxt.innerHTML;
	//then measure it
	var msgtextH = tempEl.offsetHeight;
	//remove it
	document.body.removeChild(tempEl);
	
	//2.make wider
	effect1 = new Effect.Morph($(msgItem), {
		  style: 'width:408px;',
		  duration: 0.8
	});
	
	
	var messagebarH = 300 + msgtextH; 
		
	//make messagebar taller
	effect2 = new Effect.Morph($("messagebar"), {
		  style: 'height:' + (messagebarH+80) + 'px',
		  duration: 0.8
		 // queue: 'end' 
		// queue: { position: 'end', scope: 'menuxscope' }
	});
	//make container also taller
	effect3 = new Effect.Morph($("messagesholder"), {
		  style: 'height:'+ (messagebarH-80) +'px',
		  duration: 0.8,
		   queue: { position: 'end', scope: 'menuxscope' }
	});
	effect4 = new Effect.Morph(alltxt, {
		  style: 'height:'+(messagebarH-250)+'px',
		  duration: 1.1,
		  afterFinish:function(){ growDone(id);  }
	});
	
	selectItem = msgItem;
	selectId = id;
}

function growDone(id){
	
	//go full monty
	var fullscreenDiv = $$('div.fullscreen')[id];
	var so = new SWFObject("fullscreen.swf", "preview", "40", "115", "7", "none");
	//var so = new SWFObject("fullscreen.swf", "preview", "20", "75", "7", "none");
	so.addParam("allowFullScreen", "true");
	so.addParam("flashVars", "idnr=" + id);
	so.write(fullscreenDiv);
	
	//replace the btn
	var morebtn = $$('p.morebtn')[id];
	morebtn.innerHTML = '<a href="javascript:void(0);" onclick="resetItem(null, ' + id + ');return false;"><img src="img/closeX.jpg" alt="Sluiten" width="14" height="14" border="0"></a>'; 
}

function resetItem(msgItem, id){

	//only close it (not open another one also)
	if(msgItem == undefined) {
		msgItem = selectItem;
		positionMsg();
	}
	
	//remove flash
	var fullscreenDiv = $$('div.fullscreen')[id];
	fullscreenDiv.innerHTML = "";
	
	//reset smaller
	$(msgItem).morph('width:252px;');//height:100%;
	$("messagesholder").morph('height:300px');
	$("messagebar").morph('height:450px');
	
	var alltxt = $$('div.alltxt')[id];
	alltxt.morph('height:125px;');
	
	//replace the btn
	var morebtn = $$('p.morebtn')[id];
	morebtn.innerHTML = '<a href="javascript:void(0);" onclick="messageClick(this, ' + id + ');return false;">+</a>'; 
	
	reseter();
}

function reseter(){
	selectItem = null;
	selectId = null;
}

/* ---------------------------------  msgs nav -----------------------------*/
function msgGo(dir, totalNavi){

	var leftPos = ($("messages").style.left)? parseInt($("messages").style.left):0;
	var gotoX = leftPos + (dir * 252);
	
	//left border
	if(dir==1 && gotoX >  0){
		if(oldNavi>0) loadMsgs(oldNavi-1);
		return;
	}

	//right border
	var totalW = parseInt($("messages").style.width);	
	var W =  window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
	var rightHiddenNum = Math.ceil((totalW + leftPos - W)/252);
	
	if(dir==-1 && rightHiddenNum < 1){

		if(oldNavi+1 < totalNavi) loadMsgs(oldNavi+1);
		return;
	}
	
	new Effect.Move($("messages"), {x:gotoX, duration:1, mode: 'absolute' })
}	

/* ---------------------------------  intro -----------------------------*/
function introGrow(){
	
	bBigIntro = true;
	
	//replace the btn
	$("intromorebtn").innerHTML = '<a href="javascript:void(0);" onclick="introReset();return false;"  class="morebtn activecolor"><img src="img/closeX.jpg" alt="Sluiten" width="14" height="14" border="0"></a>'; 
	
	//get the height	
	$("introtext").style.height = "100%";
	var introtextH = $("introtext").offsetHeight;
	$("introtext").style.height = "201px";
	
	
	//make taller
	new Effect.Morph($("introtext"), {
		  style: 'height:'+introtextH+'px',
		  duration: .8,
		  queue: 'end' 
	});
	
	//move down	
	topPart += introtextH - 200;
	positionMsg();
}

function introReset(){
	
	bBigIntro = false;
	
	//replace the btn
	$("intromorebtn").innerHTML = '<a href="javascript:void(0);" onclick="introGrow();return false;" class="morebtn activecolor">+</a>'; 
	
	//make smaller
	new Effect.Morph($("introtext"), {
		  style: 'height:201px',
		  duration: .8
	});
	
	//move down	
	topPart = 300;
	positionMsg();
}