$(document).ready(function() {
    //register preview images on click events
    //call filetype function on click
    $("div.imgoverview")
           .children()
           .not( '.next' )
           .not( '.prev' )
           .not( '.close' )
           .bind( 'click', filetype )
           .bind( 'click', detailtext );
});

/**
 * call enlargement
**/
filetype = function( evt ) {
    var previewImage = evt.target;
    var filename = $(evt.target).attr('src');
    if( filename.match(/(.*)\.jpg/) ) {
        imgEnlargement( filename, previewImage );        
    }

    return false;
}

/**
 * show text for detail img
**/
detailtext = function( evt ){
    var previewImage = evt.target;
    var detailtext = $(evt.target).attr('alt');
    replaceText(detailtext);
}

/**
* replace text initially
*/
replaceText = function( txt ){
    $('.imgoverview').append('<div class="detailstxt" >'+txt+'</div>');
}

/**
 * Show enlarged preview image on background 
 **/
imgEnlargement = function( imgName, previewImage ) {
    $('div.imgoverview').attr('id','overlayBackground').css(
            {
            'width' : $('div.block').width(),
            'padding' : '0px'
            
            }
    );
 
    var newImage = $('<img/>');
 
    $(newImage).attr( 'src', imgName )
               .attr( 'id', 'largeImage')
               .css({
                    'position' : 'relative',
                    'padding-left' : '0px', 
                    'padding-right' : '10px', 
                    'float' : 'left' , 
    });
    
    $(previewImage).hide();
    $(previewImage)
        .siblings()
        .hide();    

    $('div.imgoverview')
        .prepend(newImage)
            .children("div.format")
                .hide();    
 
    $('.next').show().bind( 'click', next );
    $('.next').next().show();

    $('.prev').show().bind( 'click', prev );
    $('.prev').next().show();
    
    //hey ralf, falls du das close noch umplatzieren willst waere hier die stelle an der das 
    //geht.
    //hey susu, ich hab versucht, stattdessen, den detailstxt block nach unten 
    //(bündig mit unterem bildrand zu verschieben. aber nicht geschafft.......
    //
/*    $('div.detailstxt').css({
    		'margin-top' : ($(newImage).height() - 66px), 
    		});*/

    $('.close').show().bind( 'click', showPreview );

    $(newImage).fadeIn(2000);

    return false;
}

/**
 * Assumption: src of large image = src of preview image
**/
next = function( evt ){
    var parent = $( evt.target ).parents( "#overlayBackground" );
    var thisLargeImage = $(parent).find("#largeImage");
    var srcThisLargeImage = $(thisLargeImage).attr('src');
    
    var relatedPreviewImage = $(parent)
        .find(".imgoverview[@src='"+srcThisLargeImage+"']")
        .eq(0);
     
    var nextPreviewImage = relatedPreviewImage
        .next('img.imgoverview')
        .eq(0)
        .clone()
        .removeClass('imgoverview')
        .attr( 'id', 'largeImage' )
            .css({
                'position' : 'relative',
                'padding-left' : '0px', 
                'padding-right' : '10px', 
                'float' : 'left'
            });

    if(nextPreviewImage.size() > 0){
        var textForNextPreviewImage = nextPreviewImage.attr('alt');
        if(textForNextPreviewImage == undefined){
             $('.detailstxt').replaceWith("<div class='detailstxt'/>");
        }else{
             $('.detailstxt').replaceWith("<div class='detailstxt'>"+textForNextPreviewImage+"</div>");
        }

        $(thisLargeImage).replaceWith( nextPreviewImage );
        
        $('#largeImage').show();
        $('#largeImage').unbind( 'click', showPreview )
            .bind( 'click', showPreview );
    }

    return false;
} 

/**
 * TODO: prev = next
**/
prev = function prev( evt ){
    var parent = $( evt.target ).parents( "#overlayBackground" );
    var thisLargeImage = $(parent).find("#largeImage");
    var srcThisLargeImage = $(thisLargeImage).attr('src');

    var relatedPreviewImage = $(parent)
        .find(".imgoverview[@src='"+srcThisLargeImage+"']")
        .eq(0);

    var prevPreviewImage = relatedPreviewImage
        .prev('img.imgoverview')
        .eq(0)
        .clone()
        .removeClass('imgoverview')
        .attr( 'id', 'largeImage')
            .css({
                'position' : 'relative',
                'padding-left' : '0px', 
                'padding-right' : '10px', 
                'float' : 'left'
            });

    if(prevPreviewImage.size() > 0){
        
        var textForPrevPreviewImage = prevPreviewImage.attr('alt');
        if(textForPrevPreviewImage == undefined){
             $('.detailstxt').replaceWith("<div class='detailstxt'/>");
        }else{
             $('.detailstxt').replaceWith("<div class='detailstxt'>"+textForPrevPreviewImage+"</div>");
        }

        $(thisLargeImage).replaceWith(prevPreviewImage);
        $('#largeImage').show();
        $('#largeImage').unbind('click',showPreview)
            .bind('click',showPreview);
    }

    return false;
}

/**
 * Remove large image and corresponding mini menu. 
 * Show overview.
**/
showPreview = function( ){
    var previewImage = $('img.imgoverview');

    $('div.format').fadeIn(2000);

    $('div.imgoverview').css(
        { 'background-color' : '',
          'opacity' : '1',
          'padding' : '' }
         );

     //TODO
     $('.prev').hide();
     $('.next').hide();
     $('.close').hide();

     $('img#largeImage').remove();
     $('.detailstxt').remove();
     $('.txt').show();

     $(previewImage)
          .show();

     $(previewImage)
          .siblings()
              .not( '.next' )
              .not( '.prev' )
              .not( '.close' )
                  .show();

    return false;
}