var activepos = '';
$(document).ready(function(){
                           
    $(".slideShow").each(function(){
        var picCounter = 1;
        var out = "";
        var i = 1;
        //get number of all picturs
        $(this).children("ul").children("li").each(function(){picCounter++;});
        
        //write slideshow navigation
        if (picCounter > 13) {
            while (i < 13 ) {
                out += "<span>"+i+"</span>";
                i++;
            };
        } else {
            while (i < picCounter) {
                out += "<span>"+i+"</span>";
                i++;
            };
        }
        
        //This is used to save the active Position for each Slideshow
        out += "<input type=\"hidden\" id=\"activepos"+$(this).attr("id")+"\" value=\"1\" />";
        //This is used to save the count of pictures for each Slideshow
        out += "<input type=\"hidden\" id=\"count"+$(this).attr("id")+"\" value=\""+picCounter+"\" />"; 
        
        $(this).children(".slideShowNav").append(out);
    });
    
    picchange(); 
    
    $('.rightScroll').click(function() {
        //Get Slideshow
        slideshow = $(this).parent();
        //check if the last element is reched
        if (($(slideshow).children('.slideShowNav').children('span:last').html()) < getPictureCount(slideshow)-1) {
            //remove first element
            $(slideshow).children('.slideShowNav').children('span:first').remove();
            //add element to last position
            var lastcounter = parseInt($(slideshow).children('.slideShowNav').children('span:last').html())+1;
            $(slideshow).children('.slideShowNav').append("<span href=\"#\">"+lastcounter+"</span>");            
            //alert($('.slideShowNav > a:last').html()+" <-> "+activepos);
            if($(slideshow).children('.slideShowNav').children('span:last').html() == getActivePosition(slideshow)) {
                $(slideshow).children('.slideShowNav').children('span:last').addClass("active");
            }            
            picchange();            
        };
    });
    
    $('.leftScroll').click(function() {
        //Get Slideshow
        slideshow = $(this).parent();
        //check if the first element is reched
        if (($(slideshow).children('.slideShowNav').children('span:first').html()) > 1 ) {
            //remove last element
            $(slideshow).children('.slideShowNav').children('span:last').remove();
            
            //add element to first position
            var firstcounter = parseInt($(slideshow).children('.slideShowNav').children('span:first').html())-1;
            $(slideshow).children('.slideShowNav').prepend("<span href=\"#\">"+firstcounter+"</span>");
            
            if($(slideshow).children('.slideShowNav').children('span:first').html() == getActivePosition(slideshow)) {
                $(slideshow).children('.slideShowNav').children('span:first').addClass("active");
            }
            picchange();
        };
    });
    
    //highlight the first link on page load
    $(".slideShowNav > span:first").addClass("active");
    
});
function getPictureCount(object) { //object must be the actual slideshow
    return $(object).children(".slideShowNav").children("#count"+$(slideshow).attr("id")).attr("value");
}
function getActivePosition(object) { //object must be the actual slideshow
    return $(object).children(".slideShowNav").children("#activepos"+$(slideshow).attr("id")).attr("value");
}
function picchange() {
    //on click remove highlighting from first link and set highlighter to the clicked link
    $(".slideShowNav > *").click(function(){
        
  //Get Slideshow
        slideshow = $(this).parent().parent();
        //Remove old active Position
        $(this).parent().children('.active').removeClass("active");        
        //Set new active Position
        $(this).addClass("active");
        //Save new active Position
        $(this).parent().children("#activepos"+$(slideshow).attr("id")).attr("value",$(this).html());
        //cache picture number
        var pic = parseInt($(this).html()-1);
        //hide all picture on click        
        $(slideshow).children("ul").children("li").attr("style","display: none;");
        //show selected picture
        $(slideshow).children("ul").children("li:eq("+pic+")").attr("style","display: block;");
    });
}