/**
 * Created by Sage Internet Solutions.
 * www.sageinternet.com
 * AB
 */

var currentSlide = 1,
    slides,
    slideshowTimeout,
    delay = 5000,
    transitionTime = 500; // Start on the second slide, the first is shown by default

$(document).ready(function(){
						  

    
    // Get slides
    slides = $('#mygallery div.belt div.panel');

    // Change CSS position of slides to float alongside each other
    var width = 0;
    $(slides).each(function(){
        width += $(this).outerWidth(true);
    });
    $('#mygallery div.belt').width(width);

    // Remove slides from DOM
    $(slides).remove();

    // Show the first slide
    $('#mygallery div.belt').append($(slides[0]));

    // Remove scrollbars from gallery div
    $('#mygallery').css('overflow', 'hidden');

    // Begin animation routine
    slideshowTimeout = setTimeout(function(){
        doSlideshow();
    }, delay);
})

/* This function will be looped to run the slideshow */
function doSlideshow(){
    if(currentSlide >= slides.length)
        currentSlide = 0;

    var belt = $('#mygallery div.belt');

    $(belt).append('<div class="panel">'+$(slides).eq(currentSlide).html()+'</div>'); // Draw the next slide in the DOM
    // Slide the first slide to the left
    $(belt).find('div.panel:first').fadeOut(transitionTime, function(){
        // Remove previous slide
        $(belt).find('div.panel:first').css('margin-left', '0').remove();
	
    });

    // Increment current slide
    currentSlide++;

    slideshowTimeout = setTimeout(function(){
        doSlideshow(delay,transitionTime);
    }, delay);
}