$(document).ready( function() {

/* Hieronder alle code voor de timers */
	var aantal = 6; // het aantal objecten die wisselen
	var aantal_pane = 3; // het aantal objecten die wisselen
	var benaming_table = 'tapp'; // de naam die voor het getal in het id van het object voorkomt
	var benaming_div = 'rapp'; // de naam die voor het getal in het id van het object voorkomt
	var benaming_progress = 'progressbar'; // deze naam bevat de class
	var class_normal = 'row_noselect'; // de class die het object standaard heeft
	var class_active = 'row_selected'; // de class die de highlight aangeeft
	var interval = 4000; // seconden keer 1000, bepaalt om hoeveel seconden het wisselt
	var progressbar = 'progress'; // de id naam van de progressbar
	var progress_by = 100; // tijd delen door hoeveel procent waarmee de progressbar verder moet schieten
	var teller = 1; // deze niet aanpassen

	// hieronder geen aanpassingen meer maken
	$('.progressbar').progressbar();
	$('.progressbar').progressbar('option', 'value', 0);
	
	var interval_pause = false;
	change_class();
	active_progressbar(interval);

	if ($('#referenties').length == 0) {
		$('#producten').removeClass('dnone').addClass('dblock');
	}

	//setInterval(change_class, interval);
	for(i=1;i<aantal+1;i++){
		$('#'+benaming_table+i).mouseover(function(){
			// alle divs naar normal zetten
			for(i=1;i<aantal+1;i++){
				$('#'+benaming_table+i).removeClass(class_active).addClass(class_normal);
				$('#'+benaming_div+i).hide();
			}
			// zichzelf de juiste class toekennen
			var length = benaming_table.length; var id = this.id.substr(length);
			$(this).removeClass(class_normal).addClass(class_active);
			$('#'+benaming_div+id+" > .progressbar").hide();
			$('#'+benaming_div+id).show();
			interval_pause = true;
		});
		
		$('#'+benaming_table+i).mouseout(function(){
			// de volgende op active zetten en de teller aanpassen
			var length = benaming_table.length; var id = parseInt(this.id.substr(length));
			$('#'+benaming_div+id+" > .progressbar").show();
			if(id > aantal_pane){
				id = id - aantal_pane;
			}
			teller = id + 1;
			interval_pause = false;
			//$('.progressbar').progressbar('option', 'value', 0); // deze kan je uitzetten, deze laat de progress herstarten
		});
	}	
	
	function active_progressbar(timeline){
		var movetime = timeline / progress_by;
		setInterval(move_progressbar, movetime);
	}

	function move_progressbar(){
		if(interval_pause != true){
			var raise_by = 100 / progress_by;
			var progress_status = $('.progressbar').progressbar('option', 'value') + raise_by;
			if(progress_status > 100){
				change_class();
				progress_status = raise_by;
			}
			$('.progressbar').progressbar('option', 'value', progress_status);
		}
	}
	function change_class(){
		//alert(teller);
		if(interval_pause != true){
			// kijken of de teller nog op 3 stond dan resetten naar 1
			if(teller == aantal_pane + 1) teller = 1;
			// alle divs naar normal zetten
			for(i=1;i<aantal+1;i++){
				$('#'+benaming_table+i).removeClass(class_active).addClass(class_normal);
				$('#'+benaming_div+i).hide();
			}
			// de juiste div de higlight meegeven
			var pane1 = teller;
			var pane2 = teller + aantal_pane;
			$('#'+benaming_table+pane1).removeClass(class_normal).addClass(class_active);
			$('#'+benaming_table+pane2).removeClass(class_normal).addClass(class_active);
			$('#'+benaming_div+pane1).show();
			$('#'+benaming_div+pane2).show();
			// de teller optellen
			teller = teller + 1;
		}
	}
	
	// deze zorgen ervoor dat wanneer de tabs wisselen, de teller op 0 begint
	$('#ref_button').click(function(){
		$('.progressbar').progressbar('option', 'value', 0);								
	});
	$('#prod_button').click(function(){
		$('.progressbar').progressbar('option', 'value', 0);								
	});
	
});