$(document).ready(function(){
    
  $(".flag").hover(
    function() {
        $(this).append(
         "<div id=\"info_box\" class=\"info_box\" align=\"center\">"
         + this.title
         + "</div>"
        );
        $("#info_box").hide();
        $("#info_box").fadeIn();
        title_save = this.title; //title should not be displayed via html
        this.title = "";
    },
    function() {
        $("#info_box").fadeOut("slow");
        $("#info_box").remove();
        this.title = title_save;
    }
  );
      //setting the kasbah images...
      var width_img = 47;
      //calculation is a bit tricky since all offsets after the first offset will be at the very right side of the kasbah imaege.
      //therefore the first time half the width has to be subtrackted and the following times the full width has to be subtracted.
      var distance_start = parseInt(document.getElementById("background").offsetWidth / 4 - (width_img / 2));
      var distance_other = parseInt(document.getElementById("background").offsetWidth / 4 - (width_img));
      var i = 0;
      for (i=0; i<3; i++){
          var id = "kasbah_" + i;
          $("#background").append("<img src=\"Grafik/kasbah.gif\" id=" + id + " width=" + width_img + " height=\"31\">");
          $("#" + id).offset(function(index, coord){
              newPos = new Object();
              newPos.left = coord.left + distance_start;  
              return newPos;
          }); 
          distance_start += distance_other;
      }
      //alert ($("#kasbah_0").offset().left + "\n" + $("#kasbah_1").offset().left + "\n" + $("#kasbah_2").offset().left);
});