// Good sliding info at http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

// http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited

function InitialiseFader1($) {

    // Make sure we have a fader on the page before doing anything else.
    // For the time being we're assuming only one fader per page.
    if ($('ul.fader').length != 1) return;

    // Get width and max image height. Fader width is fixed at design time.
    // Don't use max height, set the desired fader height in markup.
    var width = $("ul.fader").width();
    //   $("ul.fader img").each(function(){maxHeight = Math.max( maxHeight, $(this).outerHeight()); });
    //   $("ul.fader").css('height', maxHeight);
    var maxHeight = $("ul.fader").height();

    // Vertically centre images in fader. 
    $("ul.fader li").each(function() { $(this).css("top", (maxHeight - $(this).children("img").attr("height")) / 2); });

    // Horizontally centre images in fader. 
    $("ul.fader li").each(function() { $(this).css("left", (width - $(this).children("img").attr("width")) / 2); });

    //Set the opacity of all images to 0
    $('ul.fader li').css({ opacity: 0.0 });

    //append an LI item to the UL list for displaying caption
    $('ul.fader').append('<li id="fader-caption" class="caption"><div class="fader-caption-container"><h2></h2><p></p></div></li>');

    //Set the title and caption for the first image
    $('#fader-caption h2').html($('ul.fader li:first').find('img').attr('title'));
    $('#fader-caption p').html($('ul.fader li:first').find('img').attr('alt'));

    //Get the first image and display it (set it to full opacity)
    $('ul.fader li:first').css({ opacity: 1.0 }).addClass("show");

    //Display the caption
    $('#fader-caption').css({ opacity: 0.7, bottom: 0 });

}

function InitialiseFader2($, speed) {

    if ($('ul.fader').length != 1) return;

    //Call the gallery function to run the fader	
    var timer = setInterval(function() { gallery($) }, speed);

    //pause the fader on mouse over
    $('ul.fader').hover(
		function() {
		    clearInterval(timer);
		    $('ul.fader img').css('cursor', 'wait');
		},
		function() {
		    $('ul.fader img').css('cursor', 'auto');
		    clearInterval(timer);
		    gallery($); // Change the image straight away on mouseout,
		    timer = setInterval(function() { gallery($) }, speed); // then set the main loop going again at the original speed.
		}
	);

}

function gallery($) {

    //if no IMGs have the show class, grab the first image
    var current = ($('ul.fader li.show') ? $('ul.fader li.show') : $('#ul.fader li:first'));

    //Get next image, if it reached the end of the fader, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().attr('id') == 'fader-caption') ? $('ul.fader li:first') : current.next()) : $('ul.fader li:first'));

    //Get next image caption
    var title = next.find('img').attr('title');
    var desc = next.find('img').attr('alt');

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 1000);

    //Hide the caption first, and then set and display the caption
    $('#fader-caption').animate({ bottom: -70 }, 300, function() {
        //Display the content
        $('#fader-caption h2').html(title);
        $('#fader-caption p').html(desc);
        $('#fader-caption').animate({ bottom: 0 }, 500);
    });

    //Hide the current image
    current.animate({ opacity: 0.0 }, 1000).removeClass('show');

}

jQuery(document).ready(function() {

    //Execute the fader, set 4 seconds for each images
    InitialiseFader1(jQuery);

});

jQuery(window).load(function() {

    //Execute the fader, set 4 seconds for each images
    InitialiseFader2(jQuery, 4500);

});