$(document).ready(function(){
  // There are a lot of small images at the bottom line
  // These images have id="01", id="02",...

  $(".reference_web_bar_image").click(function(e){
    // if javascript is switched off, referenzen_web.php?id=1, referenzen_web.php?id=2,... is called
    e.preventDefault();
    $(this).blur();
    // load the code of foto_area.php
    showArea($(this), "web");
   });

  $(".reference_print_bar_image").click(function(e){

    // if javascript is switched off, referenzenprint.php?id=1, refereneznprint.php?id=2,... is called
    e.preventDefault();
    $(this).blur();
    // load the code of foto_area.php 
    showArea($(this), "print");
   });

   function showArea(id, reference_type){

     $("#text_area").load("./text_area.php?id="+$(id).attr("id") + "&reference_type=" + reference_type, function(response, status, xhr) {
       if (status == "error") {
         var msg = "Fehler in photos.js im Ajax-Aufruf: ";
         $("#error").html(msg + xhr.status + " " + xhr.statusText);
       }
     });

     $("#photo_area").load("./foto_area.php?id="+$(id).attr("id") + "&reference_type=" + reference_type, function(response, status, xhr) {
       if (status == "error") {
         var msg = "Fehler in photos.js im Ajax-Aufruf: ";
         $("#error").html(msg + xhr.status + " " + xhr.statusText);
       }
     });
   }

});