$(document).ready(function(){
    $('.pics a').click(function(e){
        e.preventDefault();
        var galleryName = $(this).attr('href');
        galleryName = galleryName.substr(galleryName.lastIndexOf('/') + 1);
        var body = $('body');

        var mask = $('<div id="mask"/>');
        body.append(mask)
        mask.css({
            'display': 'block',
            'height': $(document).height(),
            'opacity': 0.0
        }).fadeTo('slow', 0.6);

        //var loader = $('<span id="loader">Lade..</span>').css({
        var loader = $('<img id="loader" src="img/loading.gif"> alt="Lade.."/>').css({
            color: '#fff',
            display: 'block',
            margin: '-35px 0 0 -32px',
            position: 'absolute',
            left: '50%',
            top: '50%',
            zIndex: 200
        }).appendTo(body);

        $.post('filmstreifen.php', {
            name: galleryName
        }, function(data){
            body.append(data);
            var filmstreifen = $('#filmstreifen');
            loader.remove();
            $('#mask, #carinfos').click(function(e){
                filmstreifen.imageViewer('remove');

                mask.fadeOut(function(){
                    $(this).remove();
                });                
                $('#filmstreifen_nav').fadeOut(function(){
                    $(this).remove();
                });
                $('#filmstreifen').slideUp(500, function(){
                    $(this).remove();
                });
                $('#carinfos').slideUp(500, function(){
                    $(this).remove();
                });
                $("div#filmstreifen").smoothDivScroll('destroy');
            });

            $('#carinfos').slideDown(500);
            filmstreifen.slideDown(500).smoothDivScroll({
                visibleHotSpots: "always",
                scrollingHotSpotLeft: 'div.leftScroller',
                scrollingHotSpotRight: 'div.rightScroller',
                scrollWrapper: 'div#thumbs_container',
                scrollableArea: 'div#filmstreifen_thumbs'
            });
            $.getScript('js/imageViewer.js', function(){
                filmstreifen.imageViewer({
                    id: '#filmstreifen_thumbs',
                    marginBottom: 180,
                    debug: false
                });
            });
            piwikTracker.setDocumentTitle('Gallerie: ' + galleryName);
            piwikTracker.trackPageView();
            piwikTracker.enableLinkTracking();
        });
    });
});