$(function (){
    
    //prepare slideshow navigation and slide transitions
    var numberofslides = $('#slideshow li').length;
    $('#slideshow ul').width(numberofslides * $('#slideshow').width()); //set slideshow container width to appropriate width
    for (var x = 1; x <= numberofslides; x++) { //set a navigation link for each slide
        $('#slidelinks').append('<a href="#" class="slide_'+x+'" title="Slide '+x+'">'+x+'</a>');
    }
    $('#slidelinks .slide_1').addClass('selected'); //slide one is selected by default
    var slidelinkwidth = $('#slidelinks a').width();
    $('#slidelinks').width(numberofslides * slidelinkwidth); //set slidelinks container width to appropriate width
    var currentslide = 1;
    $('#container').addClass('js'); //now the navigation is in place, so set class for styling
    
    //slide link listener
    $('#slidelinks a').click(function() {
        this.blur();
        var linkclasses = $(this).attr('class').split(' ');
        if (linkclasses.length > 1) { //user requested the current slide, do nothing
            return false;
        }  else { //display requested slide, update slide navigation stlying
            $('#slideshow li').fadeOut('slow');
            $('#' + linkclasses[0]).fadeIn('slow');
            $('#slidelinks a').each(function() {
                $(this).removeClass('selected');
            });
            $(this).addClass('selected');
            var slidenumber = linkclasses[0].split('_');
            slidenumber = Number(slidenumber[1]);
            currentslide = slidenumber; //update the current slide
            return false;
        }
    });
    
    //previous link listener
    $('#slideshow .previous').click(function() {
        currentslide--;
        if (currentslide < 1) { currentslide = 3; }
        $('#slidelinks a').each(function() {
            $(this).removeClass('selected');
        });
        $('#slidelinks .slide_' + currentslide).addClass('selected');
        $('#slideshow li').fadeOut('slow');
        $('#slide_' + currentslide).fadeIn('slow');
        return false;
    });
    
    //next link listener
    $('#slideshow .next').click(function() {
        currentslide++;
        if (currentslide > 3) { currentslide = 1; }
        $('#slidelinks a').each(function() {
            $(this).removeClass('selected');
        });
        $('#slidelinks .slide_' + currentslide).addClass('selected');
        $('#slideshow li').fadeOut('slow');
        $('#slide_' + currentslide).fadeIn('slow');
        return false;
    });
    
});


/* TODO: if you ever plan on using more than 3 slides in the slideshow, use this JS *in place* of the code above.
  Also search for all instances of ".previous" in the CSS and make sure the visibility: hidden is uncommented for this to work properly
  
$(function (){
    
    //prepare slideshow navigation and slide transitions
    var numberofslides = $('#slideshow li').length;
    $('#slideshow ul').width(numberofslides * $('#slideshow').width()); //set slideshow container width to appropriate width
    $('#slideshow .navigation').append('<p class="previousoff"></p>'); //by default, turn off previous
    if (numberofslides < 4) { //less than four slides, turn off "next"
        $('#slideshow .navigation').append('<p class="nextoff"></p>');
    }
    for (var x = 1; x <= numberofslides; x++) { //set a navigation link for each slide
        $('#slidelinks').append('<a href="#" class="slide_'+x+'" title="Slide '+x+'">'+x+'</a>');
    }
    $('#slidelinks .slide_1').addClass('selected'); //slide one is selected by default
    var slidelinkwidth = $('#slidelinks a').width();
    $('#slidelinks').width(numberofslides * slidelinkwidth); //set slidelinks container width to appropriate width
    var currentslide = 1;
    $('#container').addClass('js'); //now the navigation is in place, so set class for styling
    
    //slide link listener
    $('#slidelinks a').click(function() {
        this.blur();
        var linkclasses = $(this).attr('class').split(' ');
        if (linkclasses.length > 1) { //user requested the current slide, do nothing
            return false;
        }  else { //display requested slide, update slide navigation stlying
            $('#slideshow li').fadeOut('slow');
            $('#' + linkclasses[0]).fadeIn('slow');
            $('#slidelinks a').each(function() {
                $(this).removeClass('selected');
            });
            $(this).addClass('selected');
            var slidenumber = linkclasses[0].split('_');
            slidenumber = Number(slidenumber[1]);
            if (slidenumber == 1){ //first slide
                $('#slidelinks').css('left', '0px');
                $('#slideshow .navigation').append('<p class="previousoff"></p>');
                $('#slideshow .previous').css('visibility','hidden');
            } else if (slidenumber == numberofslides) { //last slide
                if (numberofslides > 3) { //slide over to the last slide
                    $('#slidelinks').css('left', '-' + ((numberofslides -3) * slidelinkwidth) + 'px');
                }
                $('#slideshow .navigation').append('<p class="nextoff"></p>');
                $('#slideshow .next').css('visibility','hidden');
            } else { //middle slide
                if (numberofslides > 3) {
                    var slidelinksleft = $('#slidelinks').css('left').split('p');
                    slidelinksleft = Number(slidelinksleft[0]);
                    if (slidenumber > currentslide && slidenumber < (numberofslides - 1)) { //requested a higher number slide and there's room to slide
                        $('#slidelinks').css('left', (slidelinksleft - slidelinkwidth) + 'px');
                    } else if (slidenumber < 4 && slidenumber < (numberofslides - 1)){ //requested a lower number slide and there's room to slide
                        $('#slidelinks').css('left', (slidelinksleft + slidelinkwidth) + 'px');
                    }
                    $('#slideshow .navigation .previousoff').remove();
                    $('#slideshow .navigation .nextoff').remove();
                    $('#slideshow .previous').css('visibility','visible');
                    $('#slideshow .next').css('visibility','visible');
                }
            }
            currentslide = slidenumber; //update the current slide
            return false;
        }
    });
    
    //previous link listener
    $('#slideshow .previous').click(function() {
        currentslide--;
        $('#slidelinks a').each(function() {
            $(this).removeClass('selected');
        });
        $('#slidelinks .slide_' + currentslide).addClass('selected');
        $('#slideshow li').fadeOut('slow');
        $('#slide_' + currentslide).fadeIn('slow');
        $('#slideshow .navigation .nextoff').remove();
        $('#slideshow .next').css('visibility','visible');
        if (currentslide == 1) { //turn off previous
            $('#slideshow .navigation').append('<p class="previousoff"></p>');
            $('#slideshow .previous').css('visibility','hidden');
        }
        var slidelinksleft = $('#slidelinks').css('left').split('p');
        slidelinksleft = Number(slidelinksleft[0]);
        if (slidelinksleft < 0) { //slide right if more slide links to display
            $('#slidelinks').css('left', (slidelinksleft + slidelinkwidth) + 'px');
        }
        return false;
    });
    
    //next link listener
    $('#slideshow .next').click(function() {
        currentslide++;
        $('#slidelinks a').each(function() {
            $(this).removeClass('selected');
        });
        $('#slidelinks .slide_' + currentslide).addClass('selected');
        $('#slideshow li').fadeOut('slow');
        $('#slide_' + currentslide).fadeIn('slow');
        $('#slideshow .navigation .previousoff').remove();
        $('#slideshow .previous').css('visibility','visible');
        if (currentslide == numberofslides) { //turn off next
            $('#slideshow .navigation').append('<p class="nextoff"></p>');
            $('#slideshow .next').css('visibility','hidden');
        }
        var slidelinksleft = $('#slidelinks').css('left').split('p');
        slidelinksleft = Number(slidelinksleft[0]);
        if (Math.abs(slidelinksleft) < (currentslide - 3) * slidelinkwidth) { //slide left if more slide links to display
            $('#slidelinks').css('left', (slidelinksleft - slidelinkwidth) + 'px');
        }
        return false;
    });
    
});
*/