$(document).ready(function(){
    activateFrame(0,0);
    var timeout = 10000;
    var timer = setInterval(function(){
        rotateFrames()
    }, timeout);
    $('.gallery-container').click(function(){
        rotateFrames();
        clearTimeout(timer);
        timer = setInterval(function(){
            rotateFrames()
        }, timeout);
    });
    $('.gallery-nav > span').click(function(){
        var current = $('.js-frame').index($('.js-frame:visible'));
        var index = $('.gallery-nav > span').index($(this));
        activateFrame(current, index);
        clearTimeout(timer);
        timer = setInterval(function(){
            rotateFrames()
        }, timeout);
    });
})

function rotateFrames(){
    var size = $(".js-frame").length;
    var index = $('.js-frame').index($('.js-frame:visible'));
    var next = 0;
    if(!(index >= size-1)){
        next = index +1;
    }
    activateFrame(index, next);
}
function activateFrame(current,next){
    $('.js-frame').eq(current).children('.g-overlay').hide('slide',{direction:'right'},300,function(){
        $('.js-frame').eq(current).hide('fade',{},300,function(){
            $('.js-frame').eq(current).find('.g-overlay > div').hide();
            $('.js-frame').eq(next).show('fade',{},500,function(){
                $('.js-frame').eq(next).children('.g-overlay').show('slide',{direction:'right'},500,function(){
                    $('.js-frame').eq(next).find('.g-overlay > div').show('slide',{direction:'down'},500)
                });
            })
        });
    });
    $('.gallery-nav > span').eq(current).removeClass('g-on').addClass('g-off');
    $('.gallery-nav > span').eq(next).removeClass('g-off').addClass('g-on');
    
}