var timerIntervalId = 0;

function theRotator() {
    var image_link = $(".mainImageContainer ul li:first").find('a');
    $('.theMainImage').attr('src', image_link.attr('href'));  //give new image a src attribute
    $(".mainImageContainer ul li:first").addClass('active');
    //Get the first image and display it (gets set to full opacity)
    //$('div#rotator ul li:first').css({ opacity: 1.0 });

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
    timerIntervalId = setInterval('rotate()', 4000);

}

function rotate() {
    //Get the first image
    var current = ($('.mainImageContainer ul li.active') ? $('.mainImageContainer ul li.active') : $('.mainImageContainer ul li:first'));

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('active')) ? $('.mainImageContainer ul li:first') : current.next()) : $('.mainImageContainer ul li:first'));

    var image_link = next.find('a');

    current.removeClass('active');
    next.addClass('active');
    next.css({ opacity: 1 }).fadeIn(500);
    current.not(".active").fadeTo("fast", 0.5);
        
    //Set the fade in effect for the next image, the show class has higher z-index

    /*$(".theMainImage").stop().fadeTo(700, 0);
    $(".theMainImage").hide;
    
    $(".theMainImage").attr("src", "");
    $(".theMainImage").fadeIn();

    $(".theMainImage").attr("src", image_link.attr('href'));
    $(".theMainImage").fadeIn();
 */
    $(".theMainImage").stop().fadeTo(700, 0, function() {  //fade image out
    $('.theMainImage').attr('src', image_link.attr('href'));  //give new image a src attribute

    }).fadeTo("slow", 1);  //fade the image in

};

$(document).ready(function() {




    $("ul.thumb li").click(function() {
    clearInterval(timerIntervalId);
    $("ul.thumb li").siblings('.active').fadeTo("fast", 0.5);
        $("ul.thumb li").siblings('.active').removeClass('active');
        $(this).addClass('active');

        var thumbimage = $(this).find('a');
        $(".theMainImage").stop().fadeTo(700, 0, function() {  //fade image out
            $('.theMainImage').attr('src', thumbimage.attr('href'));  //give new image a src attribute

        }).fadeTo("slow", 1);  //fade the image in

        timerIntervalId = setInterval('rotate()', 4000);

    });


    $("ul.thumb li").hover(function() {

        $(this).addClass('hover');
        var anchor = $(this).find('a');
        // $(this).css({ opacity: 1 }).fadeIn(500);
        $(this).not(".active").fadeTo("slow", 1);

        anchor.css({ 'display': 'block' });
        anchor.css({
            marginLeft: ((anchor.width() / 2)) * -1 + 'px',
            marginTop: (anchor.height() + 20) * -1 + 'px'
        });



    }, function() {

        $(this).not(".active").fadeTo("fast", 0.5);
        $(this).find('a').css({ 'display': 'none' });
        $(this).removeClass('hover');

    });

    theRotator();
});