/* 
 * file: slideshow.js
 * author: Sandro Wagner (sw)
 */

// Bilder Gallery
$(document).ready(function(){

    $('#mycarousel li img:nth-child(2)').addClass('large');

    // Titel in image tags kopieren
    var counter = 1;
    $('#mycarousel-storage .item-title').each(
        function(){
            var items = $('#mycarousel li').length;
            var actItem = $('#mycarousel li:nth-child('+counter+')');
            var title = $(this).html();
            actItem.find('img').attr('rel',title);
            counter++;
            $(this).remove();
        }
    )

    // Thumbnail-Leiste
    $('#mycarousel').jcarousel();
    $('#mycarousel li:first').addClass('first');
    $('#mycarousel li:last').addClass('last');
    
    
//    $('#mycarousel li:first').find('img:nth-child(2n)').clone().appendTo('#mycarousel-preview');
    $('#mycarousel li:first').addClass('active');

    var imgAjax = $('.jcarousel-item.first span').html();
    var isAjax = $('.jcarousel-item.first span').is('.mycarousel-ajax');
    ajaxBlend(imgAjax)

    var getTitle = $('#mycarousel li:first').find('img').attr('rel');
    if(getTitle){
        showTitle(getTitle,1);

    }else{
        showTitle('Kein Titel vergeben!',1);
    }

    // Navigation bei Thumbnails
    $('#mycarousel li img').click(
        function(){
            var thisImage = $(this);
            $('#mycarousel-preview').find('img').fadeOut(
                'slow',
                function(){
                    $(this).remove();
                    var thisUrl= thisImage.next('span').html();
                    ajaxBlend(thisUrl,thisTitle);
                    thisImage.parent().siblings().removeClass('active');
                    thisImage.parent().addClass('active');
                }
            );
            var thisTitle = $(this).parent().find('img').attr('rel');
            if(thisTitle){
                showTitle(thisTitle,0);
            }else{
                showTitle('Kein Titel vergeben!',0);
            }
        }
    );
    $('.jcarousel-container').append('<div class="transparent_overlay"></div>')
    $('#mycarousel-preview').append('<a class="prevPage browse left"></a><a class="nextPage browse right"></a>');

    // Navigation im preview Fenster
    $('#mycarousel-preview .prevPage').click( function(){navigate('prev');});
    $('#mycarousel-preview .nextPage').click( function(){navigate('next');});


    /**************************************************************************/


    function ajaxBlend(url){
        if(isAjax){
            var img = new Image();
            $(img).load(
                function(){
                    $(this).hide();
                    $('#mycarousel-preview').append(this);
                    $(this).fadeIn('slow');
                }
            ).attr('src',url);
        }
    }


    /**************************************************************************/


    function showTitle(title,noFade){
        var setTitle = '<p>' + title + '</p>';
        if(noFade == 1){
            $('#mycarousel-title').empty().html(setTitle);
        }else{
            $('#mycarousel-title').fadeOut(
                'slow',
                function(){
                    $(this).empty().html(setTitle).fadeIn('slow');
                }
            );
        }
    }


    /**************************************************************************/


    function navigate(trigger){
        var image;var selectItem;
        var item = $('#mycarousel li.active');
        switch(trigger){
            case 'prev':
                image = item.prev('li').find('span').html();
                selectItem = item.prev('li');
                break;
            case 'next':
                image = item.next('li').find('span').html();
                selectItem = item.next('li');
                break;
        }
        var container = $('#mycarousel-preview');
        var isFirst = item.hasClass('first');
        var isLast = item.hasClass('last');
        var prevTitle = item.prev('li').find('img').attr('rel');
        var nextTitle = item.next('li').find('img').attr('rel');
        var firstTitle = $('#mycarousel li.first').find('img').attr('rel');
        var lastTitle = $('#mycarousel li.last').find('img').attr('rel');
        
        // Check for loop from first item to last item
        if(isFirst && trigger == 'prev')
        {
            container.find('img').fadeOut(
                'slow',
                function(){
                    image = $('#mycarousel li.last').find('span').html();
                    $(this).remove();
                    item.removeClass('active');
                    $('#mycarousel li.last').addClass('active');
                    ajaxBlend(image);
                }
            );
            if(lastTitle){
                showTitle(lastTitle,0);
            }else{
                showTitle('Kein Titel vergeben!',0);
            };
        }
        // Check for loop from last item to first item
        else if(isLast && trigger == 'next'){
            container.find('img').fadeOut(
                'slow',
                function(){
                    image = $('#mycarousel li.first').find('span').html();
                    $(this).remove();
                    item.removeClass('active');
                    $('#mycarousel li.first').addClass('active');
                    ajaxBlend(image);
                }
            );
            if(firstTitle){
                showTitle(firstTitle,0);
            }else{
                showTitle('Kein Titel vergeben!',0);
            };
        }
        // Default
        else
        {
            container.find('img').fadeOut(
                'slow',
                function(){
                    $(this).remove();
                    item.removeClass('active');
                    selectItem.addClass('active');
                    ajaxBlend(image);
                }
            );
            if(nextTitle){
                showTitle(nextTitle,0);
            }else{
                showTitle('Kein Titel vergeben!',0);
            };
        }
    }

    /**************************************************************************/

});