$(document).ready(function() {
//  alert('jQuery is running');
//    slideShow();
    var timerSpeed = 4000;
    var showTimer = setTimeout(slideShow, timerSpeed);
    clearTimeout(showTimer);
    $('#stop').click(function() {
        clearTimeout(showTimer);
    });
    $('#go').click(function() {
        slideShow();
    });
$('#gallery-page li').click(function() {
    clearTimeout(showTimer);
    var picID = $(this).attr("id");
//    alert ("The picture is " + picID);
    var divshowEl = "#ph" + picID;
    var picEl = divshowEl + " img";
    var picInfo = $(picEl).attr('src'); 
    var current = $('#bigpic .show');
//    current.hide().removeClass('show');
    current.removeClass('show');
    $(divshowEl).addClass('show');
//    var picInfo = $('#5 img').attr('src');
//    alert ("The picture is " + picID + "/n/r The element is " + picEl + "The info is " + picInfo);
//    var divshow = "'#ph" + $(this).attr("id") + "'";
//    alert ("The div is " + divshowEl);
//    var divinfo = $(divshow).attr('display');
//    alert ("The info is " + divinfo);
    
});
$('#gallery-page li img').mouseenter(function() {
    $(this).css('border','3px #CAC0BF solid');
});
$('#gallery-page li img').mouseleave(function() {
    $(this).css('border','3px #81666C solid');
});
function slideShow() {
    var current = $('#bigpic .show');
    var next = current.next().length ? current.next() : current.parent().children(':first');
//    current.hide(6000,current.removeClass('show'));
//    next.fadeIn(6000,next.addClass('show'));
    current.removeClass('show');
    next.addClass('show')
//    next.fadeIn(600,function() {
//        next.addClass('show')
//    });
    showTimer = setTimeout(slideShow, timerSpeed);
}


$('.scrollable img').click(function() {
    clearTimeout(showTimer);
    var picID = $(this).parent().attr("id");
//    alert ("The picture is " + picID);
    var divshowEl = "#ph" + picID;
    var picEl = divshowEl + " img";
    var picInfo = $(picEl).attr('src'); 
    var current = $('#bigpic .show');
//    current.hide().removeClass('show');
    current.removeClass('show');
    $(divshowEl).addClass('show');
//    var picInfo = $('#5 img').attr('src');
//    alert ("The picture is " + picID + "/n/r The element is " + picEl + "The info is " + picInfo);
//    var divshow = "'#ph" + $(this).attr("id") + "'";
//    alert ("The div is " + divshowEl);
//    var divinfo = $(divshow).attr('display');
//    alert ("The info is " + divinfo);
    
});
$('#scrollable li img').mouseenter(function() {
    $(this).css('border','6px #D6D2C5 solid');
});
$('#scrollable li img').mouseleave(function() {
    $(this).css('border','6px #432D31 solid');
});

});