// --------------------------------------------
  // config
  
  var configTextUnderImage = "Hier steht ein Text"; 
  // Ein statischer Text, der unter dem Bild angezeigt wird. Wird nur verwendet, wenn keine dynamischen Texte verwendet werden.
  
  
  var paddingAroundImage = 20;  
  // Soll ein Rahmen um das Bild. Nur sinnvoll, auf 0 zu stellen, wenn kein Text angezeigt wird. 
  // top und bottom in css via padding bei .imgWrap. Dies ist der Wert fuer eine Seite, also steht ein Wert von 20px z.B. 
  // für einen Rahmen links von 20px und rechts von nochmal 20px.
  // Vorsicht: Der Wert für das [x] muss dann dementsprechend angepasst werden (via css)
  
  
  var dynamicTexts = true;        
  // Sollen die Bildunterschriften automatisch geladen werden
  
  // --------------------------------------------
  
  
  var cachedWidths = [];
  var currentlyShownJBox = -1;
  var contentIdPrefix = "jBoxContent-";
  var clickIdPrefix = "jBoxClick-";
  
  
  // -------------------------------------------------------------------------------------------------------------------
  // Function: ready-Listener
  // Description: starts the whole script, when document is ready
  // -------------------------------------------------------------------------------------------------------------------
  $(
    function ()
    {      
      $('img[rel^="jBox"]').each(
        function (indexNr)
        {
          addJBoxClick( this, indexNr ); 
          addJBoxContent( $(this).attr("src"), indexNr, this );
        }
      );
    }
  ); // end global ready handler  
  
  
  // -------------------------------------------------------------------------------------------------------------------
  // Function: addJBoxClick
  // Description: adds the click event and some further functionality for the images
  // -------------------------------------------------------------------------------------------------------------------
  function addJBoxClick ( handler, jBoxNr )
  {
    $(handler).click( function () { openJBox( jBoxNr ); } );
    
    addCursorHandler(handler);
    
    if ("a" == $(handler).parent().get(0).tagName.toLowerCase())
    {
      $(handler).parent().click (
        function () 
        {
          openJBox( jBoxNr );
          return false;
        }
      ); 
    }
    
    
    addMagnifyingGlassAroundImage(handler);
    
  }
  
  
  // -------------------------------------------------------------------------------------------------------------------
  // Function: addJBoxContent
  // Description: adds the needed content for the different lightboxes. faster, if it isn't on the fly
  // -------------------------------------------------------------------------------------------------------------------
  function addJBoxContent ( imgSrc, jBoxNr, handler )
  {
    $( handler ).ready(
      function ()
      {
        var currentId = contentIdPrefix + jBoxNr;
        var newContent  = '<div id="' + currentId + '" class="jBoxWrap">';
        newContent += '<div class="imgWrap">';
        newContent += '<img src="'+imgSrc+'" alt="" />';   
        newContent += '<span class="closeButton"></span>';
        
        if (dynamicTexts)
        {
          var descriptionTitle = ""; //$(handler).attr("title");
          var descriptionText = $(handler).attr("alt");
          
          if (descriptionTitle != "" || descriptionText != "")
          {
            newContent += '<div class="imgText">'; 
            
            if (descriptionTitle != "")
            {
              newContent += '<strong>'+descriptionTitle+'</strong>';
              
              if (descriptionText != "")
              {
                newContent += '<br />'; 
              }
            }
            
            if (descriptionText != "")
            {
              newContent += descriptionText;
            }
            
            newContent += '</div>';
          }
        }
        else if (configTextUnderImage != "")
        {
          newContent += '<div class="imgText">'+configTextUnderImage+'</div>';
        }
        
        
        newContent += '</div>'; 
        newContent += '</div>';    
    
        $("body").append( newContent ); 
        
        // Element may not be declared as display: none to get the width
        var imgWidth = getRealWidth( '#' + currentId + ' img', jBoxNr );
        setWidths( '#' + currentId, imgWidth );
        
        
        $( '#' + currentId + ' *').click( function () { closeJBox(); } );
        $( '#' + currentId ).click( function () { closeJBox(); } );
        
        addCursorHandler( $( '#' + currentId + ' .closeButton') );
      }
    );
  }
  
  
  // -------------------------------------------------------------------------------------------------------------------
  // Function: openJBox
  // Description: opens the jBox with the given number
  // -------------------------------------------------------------------------------------------------------------------
  function openJBox ( jBoxNr )
  {
    var currentId = contentIdPrefix + jBoxNr;
    
    if (jBoxNr == currentlyShownJBox)
    {
      return;  
    }

    var pageOffset = (undefined == window.pageYOffset) ? document.body.scrollTop : window.pageYOffset;
    var topOffset = pageOffset + 20;
    
    if ((cachedWidths[jBoxNr] == undefined) || (cachedWidths[jBoxNr] == 0))
    {
      var imgWidth = getRealWidth( '#' + currentId + ' img', jBoxNr );
      
      setWidths( '#' + currentId, imgWidth );
    }

    $( '#' + contentIdPrefix + jBoxNr ).css( "top", topOffset + "px" );
    $( '#' + contentIdPrefix + jBoxNr ).show(); 
    currentlyShownJBox = jBoxNr;
  }
  
  
  // -------------------------------------------------------------------------------------------------------------------
  // Function: closeJBox
  // Description: Closes the currently opened jBox
  // -------------------------------------------------------------------------------------------------------------------
  function closeJBox ()
  {
    if (currentlyShownJBox == -1)
    {
      return; 
    }
    
    $( '#' + contentIdPrefix + currentlyShownJBox ).hide();
    currentlyShownJBox = -1;
  }
  
  
  // -------------------------------------------------------------------------------------------------------------------
  // Function: addCursorHandler
  // Description: when hover the given element, use pointer, else default
  // -------------------------------------------------------------------------------------------------------------------
  function addCursorHandler ( handler )
  {
    $(handler).hover ( 
      function ()
      {
        $(handler).css("cursor", "pointer");
      },
      function ()
      {
        $(handler).css("cursor", "default"); 
      }
    ); 
  }
  
  
  // -------------------------------------------------------------------------------------------------------------------
  // Function: moveToNowhere
  // Description: Hides the element by moving it out of the screen
  // -------------------------------------------------------------------------------------------------------------------
  function moveToNowhere ( jBoxNr, moveBack )
  {
    if (moveBack)
    {
      $( '#' + contentIdPrefix + jBoxNr ).hide();
      $( '#' + contentIdPrefix + jBoxNr ).css("left", "0");
      $( '#' + contentIdPrefix + jBoxNr ).css("top", "0");
    }
    else
    {
      $( '#' + contentIdPrefix + jBoxNr ).css("left", "-50000px");
      $( '#' + contentIdPrefix + jBoxNr ).css("top", "-50000px");
      $( '#' + contentIdPrefix + jBoxNr ).show();
    }
    
    return true;
  }
  
  
  // -------------------------------------------------------------------------------------------------------------------
  // Function: getRealWidth
  // Description: Gets the width of an image
  // -------------------------------------------------------------------------------------------------------------------
  function getRealWidth ( handler, jBoxNr )
  {
    if ((cachedWidths[jBoxNr] != undefined) && (cachedWidths[jBoxNr] != 0))
    {
      return cachedWidths[jBoxNr]; 
    }
    
    moveToNowhere( jBoxNr, false );
    cachedWidths[jBoxNr] = $( handler ).innerWidth();
    moveToNowhere( jBoxNr, true );
    return cachedWidths[jBoxNr];
  }
  
  // -------------------------------------------------------------------------------------------------------------------
  // Function: addMagnifyingGlassAroundImage
  // Description: Adds a magnifying glass to the images
  // -------------------------------------------------------------------------------------------------------------------
  function addMagnifyingGlassAroundImage ( handler )
  {
    $( handler ).wrap('<span class="loupeContainer"></span>');
    $( handler ).before('<span class="loupeImg"></span>');
    
  }
  
  // -------------------------------------------------------------------------------------------------------------------
  // Function: setWidths
  // Description: Reset the widths for the two containers
  // -------------------------------------------------------------------------------------------------------------------
  function setWidths ( idString, currentWidth )
  {     
    var imgWidthWithoutPadding = currentWidth;
            
    if (paddingAroundImage > 0)
    {
      currentWidth += 2 * paddingAroundImage; 
    }
    
    $( idString + ' .imgWrap').css("width", currentWidth+"px");
    $( idString + ' .imgText').css("width", imgWidthWithoutPadding+"px");
  }