/**
 * de slideshow
 *  
 * @implementatie "www.rijkijsseldijk.nl / www.rik.reinos.nl"
 *  
 *  Voobeeld
 * $('#animatie').slideShow({
 *		interval:5000,
 *		type:'header',
 *		arrows:true ,
 *		easing:'back', 
 *		circular:true 
 *		animationTime:1000
 *	});
 *	<ul id="animatie">
 *		<li>voorbeeld</li> 
 *		<li>voorbeeld</li>  
 *	</ul>    
 */
(function($){
	$.fn.slideShow = function(options){
		
		var settings = $.extend({
			interval:1000,
			type:'header',
			arrows:false,
			items:5,
			easing:'swing',
			circular:false ,
			animationTime:500
		},options||{});
		
		//easing methods
		switch(settings.easing){
			case 'back':settings.easing = 'easeOutBack';
				break;
			case 'swing':settings.easing = 'swing';
				break;
			case 'fade':settings.easing = 'fade';
				break;
			default: settings.easing = 'swing'
		}
		
		return this.each(function(){
			
			//init, alle vars aanmaken
			var $this = this;
			var $items = $($this).find('li');
			var totaal = $items.length;
			var $curItem = $($this).find('li').eq(0);
			var $lastItem = $($this).find('li').eq(totaal-1);
			var $width = $curItem.width();
			var $nrs;
			var $sliceItem = $($this).find('li').eq(settings.items);
			//tijd
			var time,timeBegin,timeEnd;
			var clickTime = [];
			//is in animation
			var is_animation = false;
			//queue the animations
			var times = 0;
			var clickSpeed = 250;
			
			//wrap alles
			$($this).wrap('<div style="position:relative;"/>')
			//zet de pijlen als het is aangegeven
			if(settings.arrows) {
				$($this).parent().prepend('<div id="arrow_left"/>').prepend('<div id="arrow_right"/>');	
				$('#arrow_right').css({
					cursor:'pointer',
					position:'absolute',
					right:'-' + ($('#arrow_right').width()+10) + 'px',
					top:$($this).height()/2
				});
				$('#arrow_left').css({
					cursor:'pointer',
					position:'absolute',
					left:'-' + ($('#arrow_right').width()+10 + 'px'),
					top:$($this).height()/2
				});
			}
			//zet de css style voor de ul
			$($this).css({
				margin:0,
				padding:0,
				listStyle:'none',
				overflow:'hidden',
				position:'relative'
			});
			//zet de css styel voor de li`s
			$items.css({
				position:'absolute',
				width:$width
			});
			
			//als de type op footer is ingesteld moeten de li`s worden gepositioneerd
			if(settings.type == 'header') {
				$($this).find('li:not(:first)').css({left:$width});
			} else if(settings.type == 'footer') {
				//zet de margin die tussen de plaatjes moet komen
				var margin = Math.round(($($this).width()-(settings.items*$width))/(settings.items-1));
				$items.each(function(key){
					//alleen de fotos die zichtbaar moeten komen positioneren
					if(key+1 <= settings.items) {
						if(key == 0) {
							$(this).css({left:0});
						} else {
							$(this).css({
								left:(key*margin)+($width*key)
							});
						}
					} else {
						$(this).css({
							left:$($this).width()
						});
					}
				});
			}
			
			//reinit de curitem en lastitem
			function _reInitItems() {
				$curItem = $($this).find('li').eq(0);
				$lastItem = $($this).find('li').eq(totaal-1); 	
			}
			
			//zet de nummers goed
			function _reSortNr(item) {
				item = item||false;
				if(item.length) {
				    	$nrs.find('li').removeClass('selected');
					$nrs.find('[alt="'+item.attr('alt')+'"]').addClass('selected'); 
				} else {
				  	$nrs.find('li').removeClass('selected');
					$nrs.find('[alt="'+$curItem.attr('alt')+'"]').addClass('selected'); 
				}  
			}
						
			//wanneer het een slide animatie moet zijn.
			function _slideFade(event, reverse) {
			
				//als er geen event object is
				event = event||false;
				
				//wanneer er in fademode op de left button is geklikt
				reverse = reverse||false;
								
				//volgend item pakken
				if(event) {
				   var $nextItem = $($items +'[alt="'+$(event.currentTarget).attr('alt')+'"]').eq(0);
				} else {
					//reserve mode of niet, meestal reserve als je op de leftbutton hebt geklikt.
					if(reverse) {
					   var $nextItem = $lastItem;
					} else {
					   var $nextItem = $curItem.next();
					}		   
				}
							
				//second item onder de curitem leggen
				//css goed zetten
				$nextItem.css({
					left:0,
					zIndex:0
				});
				$curItem.css({
					zIndex:1
				});
				
				 //zet de nummers nu goed wanneer je erop klikt
				 if(event) {
				 	_reSortNr($(event.currentTarget));
				 }
		 
				//animeer de curitem naar opacity:0
			     $curItem.stop().animate({
					opacity:0
				},{
					duration:settings.animationTime,
					complete:function(){
						//wanneer de animatie klaar is var goed zetten
						is_animation = false;
						
						//zet de curItem goed, meot weg dus
						$curItem.css({
							left:$width,
						 	opacity:1
						 });
						 
						 //reinit curItem en lastItem
						 _reInitItems();

						 //zet de nummers nu goed wanneer ze in normale slide mode staan
						 if(!event) {
						 	_reSortNr();
						 }    
					}
				});
 
				if(reverse) {
					//lastItem aan het begin van de lijst
				    $($this).prepend($lastItem);
				} else {
					//curitem aan het eind van de lijst
				  $($this).append($curItem);
				}

				//als er  geklikt is, dit item ook vooraan zetten
				if(event) {
					//start item en geklikte item selecteren
				     var _start = Number($curItem.attr('alt'));
				     var _end = Number($(event.currentTarget).attr('alt'));
					 
					 //als we vooruit gaan
				     if(_start < _end) {
				      	var _last = _end - _start;
						$($this).append($($items).slice(0,_last));
						$items = $($this).find('li');	
					} else {
						//als we achteruit gaan			
						$items = $($this).find('li');
						var _last = ((totaal - _start)-1) + (_end);
						
						$($this).append($($items).slice(0,_last));
						
						$items = $($this).find('li');
					}		
				}	
				
				
			}
			
			//de slide function
			function slide(queue, event, fadeReverse) {

				//als er op de nrs is geklikt mag hij wel doorschieten 
				queue = queue||false;
				  
				//als hij gequeued (meerdere items) is dan time omlaag zetten
				if(queue) {
					animationTime = clickSpeed;
					easingMethod = 'linear';
										
				} else {
					animationTime = settings.animationTime;	
					easingMethod = settings.easing;
				}
				
				//als er geen event object is
				event = event||false;
				
				//wanneer er in fademode op de left button is geklikt
				fadeReverse = fadeReverse||false;
								         
				if(settings.type == 'header') {
					if(!is_animation) {
					     // ##item die nu wordt vertoont slide naar links ##

						//registreren dat er een animatie bezig is
						is_animation = true;

						//bij een fade moet het anders lopen, je mag geen slide zien.
						//de foto moet dus al op de plek staan. 
						if(settings.easing == 'fade') {	
							_slideFade(event, fadeReverse);
							return;			
						//normale animatie
						} else {
						
							//als hij op het laaste item is en hij is circular mode
							//dan reverse
						     if(settings.circular || settings.easing == 'fade' || $curItem.attr('alt') != totaal-1) {
							   //animate de curitem naar links
								$curItem.stop().animate({
									left:-$width
								},{
									duration:animationTime,   
									easing:easingMethod,
									complete:function(){
										//hij is klaar met animeren dus moet de var goed gezet worden
										is_animation = false;   
									
										//zet de curItem uit het beeld
										$(this).css({left:$width});
										
										//wanneer er op een nummer is geklikt en hij moet meer keren
										//gaan we dat hier berkeken
										//queue decreasen
										queue -= 1;
										//moet hij nog een keer?
										if(queue > 0) {
											slide(queue);
										} 
									}
								});
							}
							
						}
						
						// ##item die zichtbaar moet worden slide naar links.##
						
						//als hij niet circular moet gaan dan terug zetten
						//ook als hij op fade staat mag hij dit niet uitvoeren, is een andere animatie namelijk.
						if((!queue && !settings.circular && $curItem.attr('alt') == (totaal-1)) && settings.easing != 'fade') {
						 	slideRes((totaal-1), event);
							return;
						//circular
						} else {
							//cur item aan het eind van de lijst
							$($this).append($curItem);
							
							//reinit curItem en lastItem
							_reInitItems();
							
							//animeer op de goede plek
							$curItem.stop().animate({
								left:0
							},{ 
								duration:animationTime,
								easing:easingMethod,
								complete: function(){
									//nrs update
									_reSortNr();	
								}
							});
						}
										
					} 
				
				//ander soort animatie
				} else if(settings.type == 'footer') {
					//als er geen animatie in de que zit
					if($items.queue("fx").length == 0) {       
						//clones worden alleen gemaakt wanneer er precies genoeg items zijn
						//reset all vars
						$items = $($this).find('li');
						totaal = $items.length;
						$curItem = $($this).find('li:first');
						$lastItem = $($this).find('li').eq(totaal-1);
						$sliceItem = $($this).find('li').eq(settings.items);

						//clone de eerste en zet hem op de laatste plek
						var clone = false;
						if(totaal <= settings.items) {
							clone = true;
							$curItem.clone().appendTo($($this)).addClass('clone');
							
							//reset all vars
							$items = $($this).find('li');
							totaal = $items.length;
							$curItem = $($this).find('li').eq(0);
							$lastItem = $($this).find('li').eq(totaal-1);
							$sliceItem = $($this).find('li').eq(settings.items);
						}
						   
						//zet de positio goed van de clone
						if(clone) {
							$($lastItem).css({
								left:$($this).width()
							});
						}
						 
						 
						//animeer alles naar links
						$items.stop().slice(0,settings.items).animate({
							left:'-='+($width+margin)
						},{
							duration:settings.animationTime,
							easing:settings.easing
						});
						
						//animeer ook de clone mee
						if(clone) {						
							$lastItem.stop().animate({
								left:((totaal-2)*$width)+((totaal-2)*margin)
							}, {
								duration:settings.animationTime,
								easing:settings.easing, 
								complete:function(){  
									$curItem.remove();
									$curItem = $($this).find('li').eq(0);
								}
							});
						//animeer de volgend item ook mee
						} else {
							$sliceItem.stop().animate({
								left:$($this).width()-$width
							},{
								duration:settings.animationTime,
								easing:settings.easing, 
								complete:function(){  
									if(totaal > settings.items) {		
										$($this).append($curItem);
										$curItem.css({left:$($this).width()});
										$curItem = $($this).find('li').eq(0);
										$sliceItem = $($this).find('li').eq(settings.items);
									}
								}
							});
						}
					}
				}
			};
			
			//slide in andere volgorde, van achter naar voren
			function slideRes(queue){
								
				//als er op de nrs is geklikt mag hij wel doorschieten 
				queue = queue||false;
								
				//als hij gequeued (meerdere items) is dan time omlaag zetten
				if(queue) {
					animationTime = clickSpeed;
					easingMethod = 'linear';
										
				} else {
					animationTime = settings.animationTime;	
					easingMethod = settings.easing;
				}
				
				if(settings.type == 'header') {
					//als er geen animatie in de que zit
					if(!is_animation || queue) {
					
						//registreren dat er een animatie bezig is
						is_animation = true;
					
						//last item naar links verplaatsen
						$lastItem.css({left:-$width});
						
						$curItem.animate({
							left:$width
						}, {
							duration:animationTime,
							easing:easingMethod
						});
						$lastItem.stop().animate({
							left:0
						},{
							duration:animationTime,
							easing:easingMethod,
						 	complete:function(){
						 	     //registreren dat er weer mag  geanimeerd worden
								is_animation = false;
						 		
								//nrs update
								_reSortNr();
								
								//wanneer er op een nummer is geklikt en hij moet meer keren
								//gaan we dat hier berkeken
								//queue decreasen
								queue -= 1;
								//moet hij nog een keer?
								if(queue > 0) {
									slideRes(queue);
								} 
							}
						});
						
						//zet de laatse nu voorin de rij
						$($this).prepend($lastItem);
						
						//reinit curItem en lastItem
						_reInitItems();
					}
					
				} else if(settings.type == 'footer') {
					//als er geen animatie in de que zit
					if($items.queue("fx").length == 0) {
						//clones worden alleen gemaakt wanneer er precies genoeg items zijn
						
						//reset all vars
						$items = $($this).find('li');
						totaal = $items.length;
						$curItem = $($this).find('li').eq(0);
						$lastItem = $($this).find('li').eq(totaal-1);
						
						//clone de eerste en zet hem op de laatste plek
						var clone = false;
						if(totaal <= settings.items) {
							clone = true;
							$lastItem.clone().prependTo($($this)).addClass('clone');
						} else {
							$lastItem.prependTo($($this));
						}
						
						//reset all vars
						$items = $($this).find('li');
						totaal = $items.length;
						$curItem = $($this).find('li').eq(0);
						$lastItem = $($this).find('li').eq(totaal-1);
						
						//zet de positio goed van de clone
						if(clone) {
							$($curItem).css({
								left:'-'+$width+'px'
							});
						} else {
							$($curItem).css({
								left:'-'+$width+'px'
							});
						}
						
						//animeer alles naar links
						$items.stop().slice(1,settings.items+1).animate({
							left:'+='+($width+margin)
						}, {
							duration:settings.animationTime,
							easing:settings.easing
						});
						//animeer ook de clone mee				
						$curItem.stop().animate({
							left:0
						},{ 
							duration:settings.animationTime,
							easing:settings.easing,
							complete:function(){
								if(clone) {
									$lastItem.remove();
								}
								$lastItem = $($this).find('li').eq(totaal-1);
							}
						});	
					}					
				}
			}
			
			//start van de time voor de slide
			function startSlide (){
				//eerst 1 timeout, voordat we gaan beginnen, 
				//daarna nemen we de animatie time ook mee, anders loopt hij niet op de seconde goed
				$($this).oneTime(settings.interval, 'slideshow', function(){
					slide();
					//vervolg slides
					$($this).everyTime((settings.interval-1)+(settings.animationTime), 'slideshow', function(){
						slide();
					});
				});
			
			};
			
			//zet de nrs neer
			function init_nr(){
				if(settings.type == 'header') {
					//maak een ul element aan in de dom
					$($this).after('<ul id="animatie_nr"/>');
					
					//voeg daar li`s aan toe met nrs
					$items.each(function(key){
						//voeg aan de bestaande li elemaneten (#animatie li) een alt, nu kunnen ze matchen met de nrs
						$items.eq(key).attr('alt', key);
						$('#animatie_nr').append('<li alt="'+(key)+'">'+(key+1)+'</li>');
					});
					$('#animatie_nr li:first').addClass('selected');	
					$nrs = $('#animatie_nr');
					
					//click event voor de nrs
					$('#animatie_nr li:not(.selected)').live('click',function(e){
						//stop de timers
						$($this).stopTime('slideshow');
						$($this).stopTime('reinit');
						
						//als er voor 2 sec niks is gedaan, gewoon doorgaan.
						$($this).oneTime((settings.interval+1000), 'reinit', function(){
							startSlide();
						});
						
						//hoeveel items opschuiven
						var altNr =  $(this).attr('alt') - $curItem.attr('alt');
						
						//wanneer het een negatief getal is
						var back = false;
						if(altNr < 0) {
							if(settings.circular){
								//als hij door moet lopen en niet terug moet gaan
								back = false;
								altNr = (totaal - Math.abs(altNr)) ;
							} else {
							 	back = true;
								altNr = Math.abs(altNr);
							}
						}	
											
						//uitoveren, behalve bij een fade.
						if(settings.easing == 'fade') {
							slide(false, e);
						} else {
							//!loopt niet goed, bij circular   !             
							//!tervens de slides lopen niet goed als er heel veel tegelijk moeten gaan
							//dit moet dus echt gequeued worden  !
							if(back){
								slideRes(altNr,e);		
							}else{
								slide(altNr, e);	
							}							
						}
					});
				}
			}		
			
			//click events naar rechts (reserve)
			$('#arrow_left').click(function(){

				//stop de timers
				$($this).stopTime('slideshow');
				$($this).stopTime('reinit');
				
				//als er voor 2 sec niks is gedaan, gewoon doorgaan.
				$($this).oneTime((settings.interval+1000), 'reinit', function(){
					startSlide();
				});
				
				//als het een fade effect is, dan niet de reserveslide maar de normale
				if(settings.easing == 'fade') {
				 	//de slide uitvoeren
					slide(1, false, true);
				} else {
				   //de slide uitvoeren
					slideRes(1);
				}
								
			});
			
			//click events neer links
			$('#arrow_right').click(function(){
				//stop de timers
				$($this).stopTime('slideshow');
				$($this).stopTime('reinit');
				
				//als er voor 2 sec niks is gedaan, gewoon doorgaan.
				$($this).oneTime((settings.interval+1000), 'reinit', function(){
					startSlide();
				});
				
				//de slide uitvoeren
				slide(1);
			});
						
			//start de slide
			startSlide();
			
			//lijst met nrs maken
			init_nr();
		});
	};		
})(jQuery);       




//dom ready
$(function(){
	//header clickable
	$('#logo').click(function(){
		document.location = $('#url').val();
	});
	      
	//slideshow voorpagina
	$('#animatie').slideShow({
		interval:5000,
		type:'header',
		arrows:true ,
		easing:'fade',
		circular:true ,
		animationTime:500
	});
	
	//slideshow vervolg
	$('#fotos_rand').slideShow({
		interval:5000,
		type:'footer',
		arrows:true ,
		easing:'back'
	});
});

$(window).load(function(){ 
	//footer goed zetten
	$('#wrapper').height($(document).height()-$('#footer').height());
	var height = $(document).height();
	$(window).resize(function(){
		if($(window).height() > height) {
			$('#wrapper').height($(window).height()-$('#footer').height());
		}
	});
});