/*
  - screenurl moet normaal hier als var worden opgegeven, maar zit nu in de template!
  	Daardoor kan die netjes in de centrale settings geplaatst worden.
 		Deze url bepaald de aanroep van de url bij het laden van de diverse schermen in de div tags.
 	- leftduration komt idem uit de template
 	- rightduration komt idem uit de template
  
*/

var rightObserver = {};
var leftObserver = {};
var tabObserver = {};
var htmlobserver = {};
var effects = {};
var prevEffect = {};
var initialElements = [];
var saveStyle = ['position', 'width', 'height', 'opacity', 'filter', 'top', 'left', 'backgroundColor', 'visibility', 'display'];
var rechterbox;
var linkerbox;
var lastclick = 0;
var ua = 'msie';
var leftcurrent = -1;
var rightcurrent = -1;
var loader;
var loadcounter = 0;
var loadtimer;
var headerImg1 = 0;
var headerImg2 = 0;
var headerpics = new Array();
var curr_header_layer = 1;
var curr_header = 0;
var headersnelheid = 5000;
var headerfade = 1000;
var headereffect;
var headerprevEffect;
var flankmax = 0;
var flankpic = new Image();
var curr_flank = 0;
var flanken = new Array();
var flankpics = new Array();
	
var W=navigator.userAgent.toLowerCase();
if(W.indexOf("opera")!=-1){ua='opera';}else if(W.indexOf("msie")!=-1){ua='msie';} else if(W.indexOf("mozilla")!=-1){ua='gecko';}

/*###############################################
  
  initialisatie van het hele verhaal..
  
  ############################################### */

function allinit () {
	rechterbox = new Spry.Widget.HTMLPanel("content_box",{ evalScripts: true, async: 0 });
	//rechterbox.addObserver(htmlobserver);
	rechterbox.addObserver(rightObserver);
	rechterbox.addurl = '';
	linkerbox = new Spry.Widget.HTMLPanel("linker_box",{ evalScripts: true, async: 0 });
	linkerbox.addObserver(leftObserver);
	linkerbox.addurl = '';
	preload_headers();
	
	curr_flank = Math.floor(Math.random() * flankmax);
	//nav_right_click('200');
	nav_right_click('1');
	nav_left_click('100');
	loader = getObj('ajax_loader');
	loadcounter = 0;
	//setTimeout('preload_headers()',500);
}

/*###############################################
  
  functies voor header swapping
  
  ############################################### */

function preload_headers () {
	headerImg1 = getObj('header1');
	headerImg2 = getObj('header_div');
	for (i=1; i < 6; i++) {
		headerpics[headerpics.length] = new Image();
		headerpics[headerpics.length - 1].src = imagepre + 'headers/header' + i + '.jpg';
	}

	flankmax = flanken.length - 1;
	for (i=0; i <= flankmax; i++) {
		//filenaam = imagepre + 'flanken/MRG' + flanken[i] + '.jpg';
		filenaam = imagepre + 'flanken/' + flanken[i];
		flankpics[i] = new Image();
		flankpics[i].src = filenaam;
	}
	//var temp = curr_flank;
	
	//if (temp < 10) {temp = '0' + temp}
	//flankpic.src = imagepre + 'flanken/MRG' + temp + '.jpg'; 
	//flankpic.src = imagepre + 'flanken/MRG' + flanken[temp] + '.jpg';
	change_borders_lr();

	setTimeout('swap_headers()',headersnelheid);
}


function swap_headers () {
	curr_header_layer += 1;
	curr_header += 1;
	if (curr_header_layer == 2) {
		curr_header_layer = 0;
	}
	if (curr_header == headerpics.length) {
		curr_header = 0;
	}

	if (curr_header_layer == 0) {
		headerImg1.src = headerpics[curr_header].src;
	} else {
		Spry.Effect.setStyleProp(headerImg2,'background','url(' + headerpics[curr_header].src +') no-repeat 0 0');
	}

	if (! headereffect) {
		runheaderEffect();
	} else {
		headereffect.start();
	}

	setTimeout('swap_headers()',headersnelheid);
}

var runheaderEffect = function () {
	effect = 'Fade';
	element = 'header_layer_1';
	options = {duration: headerfade, from: '0%', to: '100%', toggle: true};
	
	if (headerprevEffect && headereffect.running) {
		headereffect.cancel();
		setTimeout(function(){runheaderEffect()}, 150);
		return false;
	}

	if (!headereffect){
		headereffect = new Spry.Effect[effect](element, options);
	}

	headereffect.start();
	headerprevEffect = headereffect;
	return false;
};

/*###############################################
  
  De functies voor de main tab navigatie
  
  ############################################### */

function tabnav_click1 (obj,nummer) {
	if (effects.FadeSlidetabcontentbox) {
	if ((effects.FadeSlidetabcontentbox.isRunning == false) && (rechterbox.amloading == 0)) {
	if (Spry.Widget.Form) {
		Spry.Widget.Form.destroyAll;
	}
	rechterbox.method = "GET";
	settabs (obj,nummer);
	change_borders_lr();
	nummer++;
	lastclick = nummer;
	runEffect('FadeSlide', 'tabcontentbox', {duration: rightduration, from: '100%', to: '0%', toggle: true},rightObserver);
	
	lastclick = 100;
	if (nummer != 4) {
		nav_left_click(100);
	}}}
	return false;
}

function gettabnav (tabid) {
	hulpobj = getObj(tabid);
	counter = 0;
	while (hulpobj.childNodes[counter].nodeName != 'UL') {
		counter++;
	}
	hulpobj = hulpobj.childNodes[counter];
	return hulpobj;
}
	
function settabs (tabid,nummer) {
	hulpobj = gettabnav(tabid);
	counter = 0;
	for (i = 0 ; i < hulpobj.childNodes.length; i++) {
		if (hulpobj.childNodes[i].tagName == 'LI') {
			if (counter == nummer) {
				hulpobj.childNodes[i].className = 'on';
			} else {
				hulpobj.childNodes[i].className='';
			}
			counter++;
		}
	}
}

/*###############################################
  
  Standaard functie voor een muisklik in het linker venster
  
  ############################################### */

function nav_left_click(nummer,addurl,force) {
	lastclick = nummer;
	linkerbox.method = 'GET';
	if ((leftcurrent != nummer) || force) {
		leftcurrent = nummer;
		linkerbox.addurl = addurl;
		runEffect('FadeSlide','linkercontent', {duration: leftduration, from: '100%', to: '0%', toggle: true},leftObserver);
	}
}

/*###############################################
  
  Standaard functie voor een muisklik in het rechter venster
  
  ############################################### */

function nav_right_click(nummer,addurl) {
	if (Spry.Widget.Form) {
		Spry.Widget.Form.destroyAll;
	}
	lastclick = nummer;
	rechterbox.method = 'GET';
	if (nummer == 200) {
		artistfirst = 1;
	}
	change_borders_lr();
	if (rightcurrent != nummer) {
		rechterbox.addurl = addurl;
		runEffect('FadeSlide','tabcontentbox', {duration: rightduration, from: '100%', to: '0%', toggle: true},rightObserver);
	}
}

/*###############################################
  
  Functies voor het aan/uit schakelen van de loader
  
  ############################################### */

function showloader () {
	clearTimeout(loadtimer);
	if (! loader) {
		loadtimer = setTimeout(function(){showloader()},150);
	} else {
		loadcounter++;
		loader.style.visibility = "visible";
	}
}

function hideloader () {
	loadcounter--;
	if (loadcounter < 1) {
		loader.style.visibility = "hidden";
		loadcounter = 0;
	}
}

/*###############################################
  
  verwerk een submit van het formulier..
  
  ############################################### */
 
function right_form_click (formid,backbutton) {
	do_form_click(formid,backbutton,'tabcontentbox');
}

function sub_form_click (formid,backbutton) {
	do_form_click(formid,backbutton,'subnavcontent');
}

function do_form_click (formid,backbutton,contentbox) {
	sendit = 0;
	if (! backbutton) {
		if (Spry.Widget.Form) {
			sendit = Spry.Widget.Form.validate(getObj('stdform'));
		} else {
			sendit = 1;
		}
	} else {
		sendit = 1;
	}
	
	if (sendit) {
		if (Spry.Widget.Form) {
			Spry.Widget.Form.destroyAll;
		}
		rechterbox.method = 'POST';
		rechterbox.formid = formid;
		if (artistbox) {
			artistbox.method = 'POST';
			artistbox.formid = formid;
		}
		runEffect('FadeSlide',contentbox, {duration: 800, from: '100%', to: '0%', toggle: true},tabObserver);
	}
	return false;
}


function search_form_click (nextpage) {
	sendit = 1;
	soortobj = Spry.Effect.getElement('soort');
	genreobj = Spry.Effect.getElement('genre');
	bedragobj = Spry.Effect.getElement('maxbedrag');
	
	if (soortobj.value == 0) {
		sendit = 0;
	}
	
	if (bedragobj.value == 0) {
		sendit = 0;
	}
	
	genrelijst = '';
	for (teller=0; teller< genreobj.length; teller++) {
		if (genreobj.options[teller].selected) {
		genrelijst = genrelijst + ',' + genreobj.options[teller].value;
		}
	}
	
	if (sendit) {
		topage = nextpage;
		addurl = 'soort=' + soortobj.value + '&maxbedrag=' + bedragobj.value + '&genre=' + genrelijst;
		nav_right_click(nextpage,addurl);
	}
}	


	
/*###############################################
  
  een paar standaard functies om het leven wat makkelijker te maken..
  
  ############################################### */
 
function getStyle (Obj) {
	try {
	if (document.all) {
		this.style = Obj.style;
	}	else if (document.getElementById) {
		this.style = Obj.style;
	} else {
		this.style = Obj;
	}
	return this.style;
	} catch (x) {
	}
}

function getObj(name)
{
  if (document.getElementById)
  {
		this.obj = document.getElementById(name);
		this.style = getStyle(this.obj);
  }
  else if (document.all)
  {
		this.obj = document.all[name];
		this.style = getStyle(this.obj);
  }
  else if (document.layers)
  {
   	this.obj = document.layers[name];
   	this.style = getStyle(this.obj);
  }
  return this.obj;
}


/*###############################################
  
  de belangrijkste start functie voor de effecten
  
  ############################################### */

var runEffect = function(effect, element, options,observer,sc_url){
	pointer = prevEffect + element;
	if (prevEffect[pointer]) {
		if (effects[pointer].isRunning){
		effects[pointer].cancel();
		setTimeout(function(){runEffect(effect, element, options)}, 150);
		return false;
	}}

	pointer = effect + element;
	
	if (!effects[pointer]){
		effects[pointer] = new Spry.Effect[effect](element, options);
		if (effect != 'Highlight' && effect != 'Shake' && effect != 'Pulsate') {
			effects[pointer].addObserver(observer);

		}
	}
	
	if (sc_url) {
		effects[pointer].screen_url = sc_url;
	} else {
		effects[pointer].screen_url = screenurl + lastclick;
	}
	effects[pointer].remove = 0;
	effects[pointer].start();

	prevEffect[pointer] = effect;
	return false;
};


var saveElement = function(el){
	if (!initialElements[el.id])
	{
		initialElements[el.id] = {};
		for (var i = 0; i < saveStyle.length; i++)
		{
			initialElements[el.id][saveStyle[i]] = Spry.Effect.getStyleProp(el, saveStyle[i]);
		}
	}
};

var restoreElement = function(el){
	for (var i = 0; i < saveStyle.length; i++)
		el.style[saveStyle[i]] = initialElements[el.id][saveStyle[i]];
};

/*###############################################
  
  algemene observer voor html loaders
  
  ############################################### */
/*htmlobserver.onPreLoad = function (obj,opts) {
	dl = new Date();
	if (obj.method == 'GET') {
		opts.url += "&dump=" + parseInt(dl.getTime()/1000) + "&lang=" + taal;
		if (obj.addurl) {
			opts.url += "&" + obj.addurl;
			obj.addurl = '';
		}
	} else {
		opts.url = basicurl;
	}
}

htmlobserver.onPostUpdate = function (obj,opts) {
}
*/
/*###############################################
  
  observer voor het rechter venster
  
  ############################################### */

rightObserver.onPreEffect = function(obj){
	if (obj.direction && obj.direction == Spry.forwards){
		//obj.element.style.overflow = 'hidden';
		rechterbox.element.style.height = '99%';
		//saveElement(obj.element);
		if (obj.name == 'Slide' || obj.name == 'FadeSlide'){
			//saveElement(document.getElementById('content_box'));
		}
		showloader();
	}
};

rightObserver.onCancel = function(obj){
	rechterbox.amloading = 0;
	if (obj.direction) {
		if (obj.direction == Spry.forwards){
			obj.doToggle();
		}
	}
	
	//restoreElement(obj.element);

	//if (obj.name == 'Slide' || obj.name == 'FadeSlide'){
	//	var el = document.getElementById('content_box')
		//restoreElement(el);
	//}
};

rightObserver.waitloop = function(obj) {
	if (rechterbox.amloading) {
		setTimeout(function(){rightObserver.waitloop(obj)},150);
	} else {
		obj.start();
	}
}

rightObserver.onPostEffect = function(obj){
	
	c_width = obj.element.offsetWidth - 2;
	rechterbox.element.style.width = c_width + 'px';
	while (rechterbox.element.offsetWidth > (obj.element.offsetWidth - 2)) {
		c_width--;
		rechterbox.element.style.width = c_width + 'px';
	}

	if (obj.direction == Spry.forwards) {
		rechterbox.loadContent(obj.screen_url,{async: false });
		setTimeout(function(){rightObserver.waitloop(obj)},150);
		//setTimeout(function(){obj.start()}, 150);
	}
	else {
		//restoreElement(obj.element);
		obj.remove++;
		if (obj.remove == 1) {
			rechterbox.element.style.height = rechterbox.element.scrollHeight + 'px';
			if (rechterbox.element.scrollHeight > obj.element.offsetHeight) {
				c_width -= 25;
				rechterbox.element.style.width = c_width + 'px';
			}
			obj.element.style.overflow = 'auto';
			obj.remove = 0;
			if (artistbox) {
				setTimeout(function() {subnav_click('subtabnav',0,bandid)},150);
			}
		}
		hideloader();
	}
};

rightObserver.onLoadError = function (obj) {
	rechterbox.amloading=0;
}

rightObserver.onPreLoad = function (obj,opts) {
	dl = new Date();
	if (obj.method == 'GET') {
		opts.url += "&dump=" + parseInt(dl.getTime()/1000) + "&lang=" + taal;
		if (obj.addurl) {
			opts.url += "&" + obj.addurl;
			obj.addurl = '';
		}
	} else {
		opts.url = basicurl;
	}
	rechterbox.amloading=1;
}

rightObserver.onPostUpdate = function(obj) {
	rechterbox.amloading=0;
}


/*###############################################
  
  observer voor het linker venster
  
  ############################################### */

leftObserver.onPreEffect = function(obj) {
	if (obj.direction && obj.direction == Spry.forwards){
		obj.element.style.overflow = 'hidden';
		linkerbox.element.style.height = (obj.element.offsetHeight - 30) + 'px';
		//saveElement(obj.element);
		if (obj.name == 'Slide' || obj.name == 'FadeSlide'){
			saveElement(document.getElementById('linker_box'));
		}
		showloader();
	}
};

leftObserver.onCancel = function(obj){
	linkerbox.amloading = 0;
	if (obj.direction) {
		if (obj.direction == Spry.forwards){
			obj.doToggle();
		}
	}
	
	//restoreElement(obj.element);

	if (obj.name == 'Slide' || obj.name == 'FadeSlide'){
		var el = document.getElementById('linker_box')
		restoreElement(el);
	}
};	


leftObserver.waitloop = function(obj) {
	if (linkerbox.amloading) {
		setTimeout(function(){leftObserver.waitloop(obj)},150);
	} else {
		obj.start();
	}
}


leftObserver.onPostEffect = function(obj){
	c_width = obj.element.offsetWidth - 2;
	linkerbox.element.style.width = c_width + 'px';
	while (linkerbox.element.offsetWidth > (obj.element.offsetWidth - 2)) {
		c_width--;
		linkerbox.element.style.width = c_width + 'px';
	}
	if (obj.direction == Spry.forwards) {
		linkerbox.loadContent(obj.screen_url,{async: false });
		setTimeout(function(){leftObserver.waitloop(obj)}, 150);
	}
	else {
	
		//restoreElement(obj.element);
		obj.remove++;
		if (obj.remove == 1) {
			linkerbox.element.style.height = linkerbox.element.scrollHeight + 'px';
			if (linkerbox.element.scrollHeight > obj.element.offsetHeight) {
				c_width -= 25;
				linkerbox.element.style.width = c_width + 'px';
			}
			obj.element.style.overflow = 'auto';
			obj.remove = 0;
		}
		hideloader();
	}
};

leftObserver.onLoadError = function (obj) {
	linkerbox.amloading=0;
}

leftObserver.onPreLoad = function (obj,opts) {
	dl = new Date();
	if (obj.method == 'GET') {
		opts.url += "&dump=" + parseInt(dl.getTime()/1000) + "&lang=" + taal;
		if (obj.addurl) {
			opts.url += "&" + obj.addurl;
			obj.addurl = '';
		}
	} else {
		opts.url = basicurl;
	}
	linkerbox.amloading=1;
}

leftObserver.onPostUpdate = function(obj) {
	linkerbox.amloading=0;
}



Spry.Effect.FadeSlide = function(element, options)
{
	Spry.Effect.Cluster.call(this, options);
	
	this.name = 'FadeSlide';
	var duration = 1000;
	var doToggle = false;
	var from = 100;
	var to = 0;

	if (options)
	{
		if (options.duration) duration = options.duration;
		if (options.toggle) doToggle = options.toggle;
		if (options.from) from = options.from;
		if (options.to) to = options.to;
	}

	var options = {duration: duration, from: from, to: to, toggle: doToggle};
	var slide = new Spry.Effect.Slide(element, options);
	this.addParallelEffect(slide);

	var options = {duration: duration, from: from, to: to, toggle: doToggle};
	var fade = new Spry.Effect.Fade(element, options);
	this.addParallelEffect(fade);
};

Spry.Effect.FadeSlide.prototype = new Spry.Effect.Cluster();
Spry.Effect.FadeSlide.prototype.constructor = Spry.Effect.FadeSlide;

/*###############################################
  
  changer voor de linker en rechter zijde. Simpelweg aanroepen vanuit een willekeurige onclick o.i.d.
  
  ############################################### */

function change_borders_lr () {
	curr_flank++;
	if (curr_flank > flankmax) {
		curr_flank = 0;
	}
	/* preload de volgende */
	var nummer = curr_flank;
	//flankpic = imagepre + 'flanken/' + flanken[nummer];
	flankpic = flankpics[nummer].src;
	
	/* zet de backgrounds */
	var tempele = Spry.Effect.getElement('leftfiller');
	Spry.Effect.setStyleProp(tempele,'background','url(' + flankpic + ') no-repeat top right');
	tempele = Spry.Effect.getElement('rightfiller');
	Spry.Effect.setStyleProp(tempele,'background','url(' + flankpic + ') no-repeat top left');
	return;
}