$(document).ready(function () {

    var galleryData = $('#myGallery .imageElement');
    var galleryLength = galleryData.hide().size();
    var currentPage = 0;
    var currentTimeout = null;
    var animating = false;

    
    // highlight buttons
    var hoverIn  = function () { $(this).css({opacity: 1})};
    var hoverOut = function () { $(this).css({opacity: 1})};
    
    var nextPage = function () { showGallery(currentPage+1)};

    // move between slideshow pages    
    var showGallery = function (page) {
        if (page == currentPage || animating) return;
        
        if (currentTimeout != null)
            window.clearTimeout(currentTimeout);

        if (page > galleryLength) page = 1;
        if (page < 1) page = galleryLength;
        data = $(galleryData.get(page-1));
        
        $(".control[ref!=" + page + "]").not("#pause").not("#play").css({background: "#CB4040"});
        $(".control[ref=" + page + "]").not("#pause").not("#play").css({background: "#298992"});
        
        var fadeIn = function () {
            $('#galleryImage').animate({opacity: 1}, 600);
            $('#galleryText').animate({opacity: 1}, 600);
            animating = false;
        
        }
            
        var setContent = function () {
            $('#galleryImage').html(data.children('a.imageLink').clone());
            $('#galleryText').html(data.children().not('a.imageLink').clone());
            currentPage = page;
        }
        
        var fadeOut = function () {
            animating = true;
            $('#galleryImage').animate({opacity: 0}, 600, setContent);
            $('#galleryText').animate({opacity: 0}, 600, fadeIn);
        }
        
        var width = $('#galleryImage img').width();
        galleryControls.width(width);
        if ($('#galleryImage').children().size() == 0)
            setContent();
        else
            fadeOut();


        currentTimeout = window.setTimeout(nextPage,5000);
    }

    // setup the controls
    var galleryControls = $('<div class="galleryControls"></div>');
    
    var prev = $('<a href="#" class="control">&lt;</a>').click(function() {showGallery(currentPage-1); return false;});
    var next = $('<a href="#" class="control">&gt;</a>').click(function() {showGallery(currentPage+1); return false;});
    var pause= $('<a href="#" id="pause" class="control"><img src="img/pause.gif"></a>').click(function() { if (currentTimeout != null) window.clearTimeout(currentTimeout); $(this).hide(); $('a#play').show();} );
    var play = $('<a href="#" id="play" class="control"><img src="img/play.gif"></a>').click(function() { currentTimeout = window.setTimeout(nextPage,5000); $(this).hide(); $('a#pause').show();} );


    galleryControls.append(prev);
    for (var i = 1; i <= galleryLength; i++) {
        galleryControls.append($('<a href="#" class="control" ref="' + i + '">' + i + '</a>').click(
            function() {showGallery($(this).attr('ref')); return false;}));
    }
    galleryControls.append(next);
    galleryControls.append(play);
    galleryControls.append(pause);


    // setup container elements
    $('#myGallery').append('<div id="galleryImage"></div>');
    $('#myGallery').append(galleryControls);
    $('#myGallery').append('<div id="galleryText"></div>');
    $('a.control').css({opacity:1}).hover(hoverIn, hoverOut);
    $('a#play').hide();
    $('a#pause').show();

    showGallery(1);
    
});