function changeImage(imageurl)
{
	$('#loader').addClass('loading').append(this);
	var img = document.getElementById('image');

  	// wrap our new image in jQuery, then:
  	$(img).hide();
  	$(img).fadeIn();
	// once the image has loaded, execute this code
//    .load(function () {
//      // set the image hidden by default
//      $(this).hide();

//      // with the holding div #loader, apply:
//      $('#loader')
//        // remove the loading class (so no background spinner),
//        .removeClass('loading')
//        // then insert our image
//        .append(this);

//      // fade our image in to create a nice effect
//      $(this).fadeIn();
//    })

//    // if there was an error loading the image, react accordingly
//    .error(function () {
//      // notify the user that the image could not be loaded
//    })

//    // *finally*, set the src attribute of the new image to our image
   	$(img).attr('src', imageurl);
}

function changeImages(imageurl, imageurl2, imageurl3, imagelink, imagelink2)
{
	//variabelen opstellen
	$('#loader').addClass('loading').append(this);
	var img = document.getElementById('image');
	$('#loader2').addClass('loading').append(this);
	var img2 = document.getElementById('image2');
	$('#loader3').addClass('loading').append(this);
	var img3 = document.getElementById('image3');

	// afbeelding1
//    .load(function () {
//      $(this).hide();
//      $('#loader')
//        .removeClass('loading')
//        .append(this);
//      $(this).fadeIn();
//    })
//    .error(function () {
//    })
    $(img).hide();
  	$(img).fadeIn();
    $(img).attr('src', imageurl);

	// afbeelding2

// Mooi fade in effect en loading plaatje weggehaald.
// Deze effecten zorgen voor teveel recursie.
// Vervolgens kwamen er dus javascript errors.
//    .load(function () {
//      $(this).hide();
////      $(this).removeAttr("mouseover");
////	$(this).mouseover(function(event){alert(imagelink);return false;});

////      $('#loader2')
////        .removeClass('loading')
////        .append(this);
//      $(this).fadeIn();
//    })
//    .error(function () {
//    })
	$(img2).hide();
  	$(img2).fadeIn();
	$(img2).attr('src', imageurl2);
	img2.onmouseover = function(event){changeImage(imagelink);return false;};

  // afbeelding3

//    .load(function () {
//       $(this).hide();
//      $('#loader3')
//        .removeClass('loading')
//        .append(this);
//      $(this).fadeIn();
//    })
//    .error(function () {
//    })
	$(img3).hide();
  	$(img3).fadeIn();
    $(img3).attr('src', imageurl3);
    img3.onmouseover = function(event){changeImage(imagelink2);return false;};
}