//Function called when nav div is entered
this.slideSwitch = function () {
    var $active = $('#SlideShowContain IMG.active');

    //If the current element is null then go back to the last element
    if ($active.length == 0) $active = $('#SlideShowContain IMG:last');

    // Next = if the element in the active array is > 0 then next = that element. Else Next = first element (i.e. what is after the :)
    var $next = $active.next().length ? $active.next()
        : $('#SlideShowContain IMG:first');

    //Mark the image just shown with the 'last-active' class
    $active.addClass('last-active');

    //Slowly move between between the active image and the next image by changing css classes
    $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function () {
            $active.removeClass('active last-active');
        });

    //Manage links 

    //Get the link marked with the active class
    var $activeLink = $('.Hide a.ActiveLink');

    //if none are found default to the last link in the hide div
    if ($activeLink.length == 0) $activeLink = $('.Hide a:last');

    //determine the next link 
    var $nextLnk = $activeLink.next().length ? $activeLink.next()
            : $('.Hide a:first');

    //alert($nextLnk.attr("href"));

    //Set the next link to the link around the slide show. 
    var $SlideLink = $('a#SlideShowLink');
    $SlideLink.attr("href", $nextLnk.attr("href"));

    $activeLink.removeClass('ActiveLink');
    //mark the current as the active link 
    $nextLnk.addClass('ActiveLink');
}

$(function () {
    setInterval("slideSwitch()", 4000);
});