/* 
Based very loosly on the Rotator plugin By Dylan Wagstaff, http://www.alohatechsupport.net 
I started with his plugin, added and modified what he had until I ended up with this.
*/
var interval = '';

function initialize() {
    //Set the opacity of all images to 0
    $('div#rotator ul li').css({ opacity: 0.0 });

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

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

}

function nextPic() {
    //Get the first image
    var current = $('div#rotator ul li.show') ? $('div#rotator ul li.show') : $('div#rotator 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('show')) ? $('div#rotator ul li:first') : current.next()) : $('div#rotator ul li:first'));

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

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

function previous() {
    //Get the first image
    var current = $('div#rotator ul li.show') ? $('div#rotator ul li.show') : $('div#rotator ul li:last');

    //Get next image, when it reaches the end, rotate it back to the first image
    var prev = ((current.prev().length) ? ((current.prev().hasClass('show')) ? $('div#rotator ul li:last') : current.prev()) : $('div#rotator ul li:last'));

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

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

$(document).ready(function() {
    //Load the slideshow
    initialize();

    $('div#gallery-controls img').mouseover(function() {
        $(this).css('opacity', '.5');
    }),
    $('div#gallery-controls img').mouseout(function() {
        $(this).css('opacity', '1.0');
    }),
    $(' div#rotator ul li img').mouseover(function() {
        $(this).css('background', 'Green');
    });
    $(' div#rotator ul li img').mouseout(function() {
        $(this).css('background', 'Orange');
    });
    $('div#rotator ul li img').click(function() {
        var h = $(window).height();
        var w = $(window).width();
        var res = $(this).attr('id').split('|');
        var ow = res[0];
        var oh = res[1];

        clearInterval(interval);
        $('div#gallery-controls img#play').attr('src', 'Images/Play.ico');

        $('div#gal1 img#img-large').attr('src', $(this).attr('src'));
        $('div#gal1 span').html($(this).attr('title'));
        $('div#gal1').css('top', (h - oh) / 2);
        $('div#gal1').css('left', (w - ow) / 2);
        $('div#gal1').removeClass('hide');
        $('div#gal1').css({ opacity: 0.0 }).addClass('reveal').animate({ opacity: 1.0 }, 2000);
    }),
    $('div#gal1').click(function() {
        $(this).removeClass('reveal');
        $(this).addClass('hide');
    }),
    $('div#gallery-controls img').click(function() {
        switch ($(this).attr('src')) {
            case 'Images/Play.ico':
                interval = setInterval('nextPic()', 6000);
                $(this).attr('src', 'Images/Stop.ico');
                break;
            case 'Images/Stop.ico':
                clearInterval(interval);
                $(this).attr('src', 'Images/Play.ico');
                break;
            case 'Images/Prev.ico':
                previous();
                break;
            case 'Images/Next.ico':
                nextPic();
                break;
        }
    });
});