$(document).ready(function() {

    // Enable the slide show
    $('#slideshow').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance)
        speed: 1000, // speed of the transition (any valid fx speed value)
        before: changeTabs  // transition callback (scope set to element to be shown)
    });

    // Event listener to pause slideshow when cursor is over the tabs
    $('.tabs').mouseover(function() {
      $('#slideshow').cycle('pause');
    });
    // Event listener to resume slideshow when cursor leaves the tabs
    $('.tabs').mouseout(function() {
      $('#slideshow').cycle('resume');
    });


    // --- The following event listeners display overlay images when cursor hovers over the tabs ---

    // Overlay: Flyer
    $('#tab_flyer').mouseover(function() {
        removeActive();
        $('#overlay_flyer').show();
    });
    $('#tab_flyer').mouseout(function() {
        $('#overlay_flyer').hide();
    });
    // Overlay: Card
    $('#tab_card').mouseover(function() {
        removeActive();
        $('#overlay_card').show();
    });
    $('#tab_card').mouseout(function() {
        $('#overlay_card').hide();
    });
    // Overlay: Poster
    $('#tab_poster').mouseover(function() {
        removeActive();
        $('#overlay_poster').show();
    });
    $('#tab_poster').mouseout(function() {
        $('#overlay_poster').hide();
    });
    // Overlay: Book
    $('#tab_book').mouseover(function() {
        removeActive();
        $('#overlay_book').show();
    });
    $('#tab_book').mouseout(function() {
        $('#overlay_book').hide();
    });
    // Overlay: Sticker
    $('#tab_sticker').mouseover(function() {
        removeActive();
        $('#overlay_sticker').show();
    });
    $('#tab_sticker').mouseout(function() {
        $('#overlay_sticker').hide();
    });
    /*
    // Overlay: Badge
    $('#tab_badge').mouseover(function() {
        removeActive();
        $('#overlay_badge').show();
    });
    $('#tab_badge').mouseout(function() {
        $('#overlay_badge').hide();
    });
    */
    // Overlay: Goods
    $('#tab_goods').mouseover(function() {
        removeActive();
        $('#overlay_goods').show();
    });
    $('#tab_goods').mouseout(function() {
        $('#overlay_goods').hide();
    });

});

// Changes the active tab based on the current slide
function changeTabs (currSlideElement, nextSlideElement, options, forwardFlag) {

    // Determine the tab linked to the current slide
    currTabElementID = 'tab_'+currSlideElement.id;
    // Determine the tab linked to the next slide
    nextTabElementID = 'tab_'+nextSlideElement.id;

    // Remove 'active' class from current tab
    $('.tabs a').removeClass('active');
    $('#'+currTabElementID).removeClass(currTabElementID+'_active');
    // Add 'active' class to next tab
    $('#'+nextTabElementID).addClass(nextTabElementID+'_active');

}

// Removes the 'active' state from all tabs
function removeActive() {
    $('.tabs a').removeClass('active');

    $('#tab_flyer').removeClass('tab_flyer_active');
    $('#tab_card').removeClass('tab_card_active');
    $('#tab_poster').removeClass('tab_poster_active');
    $('#tab_book').removeClass('tab_book_active');
    $('#tab_sticker').removeClass('tab_sticker_active');
    // $('#tab_badge').removeClass('tab_badge_active');
    $('#tab_goods').removeClass('tab_goods_active');
}