$(document).ready(function(){
  var huidige_positie = 0;
  var fiche_breedte = 680;
  var fiches = $('.fiche');
  var aantal_fiches = fiches.length;

  
  fiches
    .wrapAll('<div id="fiche_totaal_breedte"></div>')
  
	.css({
      'float' : 'left',
      'width' : fiche_breedte
    });


  $('#fiche_totaal_breedte').css('width', fiche_breedte * aantal_fiches);


  $('#fiche_slider')
    .prepend('<span class="control" id="knop_links"> Vorige | </span>')
    .append('<span class="control" id="knop_rechts"> | Volgende </span>');


  knop_beheer(huidige_positie);


  $('.control')
    .bind('click', function slide(){

	huidige_positie = ($(this).attr('id')=='knop_rechts') ? huidige_positie+1 : huidige_positie-1;
    

    knop_beheer(huidige_positie);

    $('#fiche_totaal_breedte').animate({
      'marginLeft' : fiche_breedte*(-huidige_positie)
    });
  });
 




  function knop_beheer(positie){

	if(positie==0)
		{
			 $('#knop_links').hide()
			// $('#knop_links').disable() 
		} else{
			 $('#knop_links').show() 
		}
	// Hide right arrow if position is last fiche
    if(positie==aantal_fiches-1)
		{ 
		$('#knop_rechts').hide()
		$('#knop_rechts').attr('disabled', 'disabled');
		$('#knop_links').show() 
		} else{ 
		$('#knop_rechts').show() 
	}
  }	
  

});