function setSlideshow(){
	var position = 0;
	var total_banner = 4;
	var steps = total_banner-1;
	var img_height = 152;
	
	for(var i = 2; i <= total_banner; i++){
		var img_nr = (i < 10) ? '0'+i : i;
		$('div#banner_slider').append('<img src="banners/'+img_nr+'.jpg" alt="banner" />');
	}
	
	$('div#banner').append('<div id="banner_controlbar"><span class="banner_controls" id="vorige">&laquo;</span><span class="banner_controls" id="volgende">&raquo;</span></div>');
	
	// Hide / show controls
  manageControls(position);
	
	//bind eventlisteners to controls.
	$('span.banner_controls').bind('click', function(){
			//determine current position
			position = ($(this).attr('id')=='volgende') ? position+1 :position-1;
			
			// Hide / show controls
      manageControls(position);
			
			//move slide_panel
			$('div#banner_slider').animate({'marginTop' : img_height*(-position)});
	});
	
  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#vorige').hide(); }
    else{ $('#vorige').show(); }
		
		// Hide right arrow if position is last slide
		if(position==steps){ $('#volgende').hide(); }
		else{ $('#volgende').show(); }
    }
}

$(document).ready(setSlideshow);