var activeimg = '';
$(document).ready(function(){
    $('.imageGallery > ul > *').attr("style","display: none;");
    $('.imageGallery > ul > li:first').attr("style","display: block;");
    
    
    //define variables
    var picCounter = 0;
    var thumbpath = '';
    var out = '';
    var thumbwidth = 0;
    var picClass = '';
    var activePath ='';
    var key = 0;
    
    //count all pictures
    $('.imageGallery > ul').children('li').each(function(){picCounter++;});
    
    //check the max. width of all images for writing navigation
    var navwidth = $('.imageGallery .nav').width();
    
    //bild html for tumbnail navigation    
    for (var i = 0; i < picCounter; i++) {
        
        //get picture path for thumbnail
        thumbpath = $('.imageGallery ul img:eq('+i+')').attr('src');
        
        
        //get the total width of all thumbnails
        if ($('.imageGallery ul li:eq('+i+')').width() > $('.imageGallery ul li:eq('+i+')').height()) {
            thumbwidth += 120;
            picClass = 'horizontal';
        } else {
            thumbwidth += 97;
            picClass = 'vertikal';
        }
        
        //write html only if the total thumbnail width is smaller than the navigation width
        if (thumbwidth < navwidth ) {
            //out += "<a href=\"#\"><img class=\""+picClass+"\" src=\""+thumbpath+"\" /></a>";
            out += "<img class=\""+picClass+"\" src=\""+thumbpath+"\" name=\""+i+"\" />";
            key++;
        }
    };
    
    //write thumbnail navigation to html
    $(".imageGallery .nav").append(out);
    //$('.imageGallery .nav > img:last').addClass('last');
    
    
    //higlight first thumbnail on loed    
    $('.nav > img:first').addClass('active');
    activeimg = 1;
    
    changePic();
    
    //right Scroll
    $('.rightScroll').click(function() {
        
        if ($('.nav > img:last').attr('name') < (picCounter -1)  ) {
            $('.nav > img:first').remove();
            var lastpic = 0;
            lastpic = $('.nav > img:last').attr('name');
            lastpic++;
            
            var newwidth = 0;
            $('.nav > img').each(function() {
                newwidth +=$('.nav > img').width();
            
            });
            
            
            if ( $('.imageGallery > ul > li:eq('+lastpic+')').width() > $('.imageGallery > ul > li:eq('+lastpic+')').height() ) {                                
                /*var picplacer = 120;
                if ( (newwidth + picplacer) < $('.nav').width() ) {
                    alert('passt');*/
                $('.nav > img:last').after('<img class="horizontal" src="'+$('.imageGallery > ul > li:eq('+lastpic+') > img').attr('src')+'" name="'+lastpic+'" />');
                /*} else {
                    alert('passt nicht');
                }*/
                
            } else {
                $('.nav > img:last').after('<img class="vertikal" src="'+$('.imageGallery > ul > li:eq('+lastpic+') > img').attr('src')+'" name="'+lastpic+'" />');
                /*var picplacer = 97;*/
            }
        }
        if ($('.nav > img:last').attr('name') == activeimg) {
            $('.nav > img:last').addClass("active");
        }
        changePic();
    });
    
    $('.leftScroll').click(function() {
        
        if ($('.nav > img:first').attr('name') > 0 & $('.nav > img').length >= 5) {
        $('.nav > img:last').remove();    
            var firstpic = 0;
            firstpic = $('.nav > img:first').attr('name');
            firstpic--;
            
            /*alert($('.imageGallery > ul > li:eq(1)').width());
            alert($('.imageGallery > ul > li:eq(1)').height());*/
            
            if ( $('.imageGallery > ul > li:eq('+firstpic+')').width() > $('.imageGallery > ul > li:eq('+firstpic+')').height() ) {
                $('.nav > img:first').before('<img class="horizontal" src="'+$('.imageGallery > ul > li:eq('+firstpic+') > img').attr('src')+'" name="'+firstpic+'" />');                
            } else {
                $('.nav > img:first').before('<img class="vertikal" src="'+$('.imageGallery > ul > li:eq('+firstpic+') > img').attr('src')+'" name="'+firstpic+'" />');    
            }
        }
        
        if($('.nav > img:first').attr('name') == activeimg) {
            $('.nav > img:first').addClass("active");
        }
        changePic();
    });    
});
function changePic() {
//display the selected picture
    $('.imageGallery > .nav > img').click(function() {        
        $('.imageGallery > .nav > img').removeClass('active');
        $(this).addClass('active');
        
        activeimg = $(this).attr('name');
        //alert(activeimg);
        activePath = $(this).attr("src");
        //$('.imageGallery > ul > *').attr("style","display: none;");
        //very ugly hack for jquery caused by the src attribute for f*** IE6 / IE7 :(
        $(".imageGallery").children("ul").children("li").each(function() {
            if($(this).children("img").attr("src") == activePath){
                $('.imageGallery > ul > *').attr("style","display: none;");
                $(this).css({display:"block"});
            };
        });
        setPageIsScrolling();
    });
}