$(document).ready(function(){
    //homepage animation
    animationHomepage();
    
    $('#content-image-menu li').click(function (){
        $('#content-image img').stop(true, true);
        
        if (!$(this).hasClass('active')){
            clearTimeout(time);
            
            if (typeof resume !== 'undefined'){
                clearTimeout(resume);
            }
            
            var position = $(this).closest('li').index();
            var active_position = $('#content-image-menu li.active').index();
            
            $('#content-image-menu li.active').removeClass('active');
            $(this).closest('li').addClass('active');
            
            var box = $('#content-image .img:eq('+ active_position +')');
            box.animate({
                opacity: 0
            }, 500, function (){
                $(this).hide();
            });
            
            box = $('#content-image .img:eq('+ position +')');
            box.show();
            
            box.animate({
                opacity: 1
            }, 500);
            
            resume = setTimeout(function (){
                animationHomepage();
            }, 3000);
        }
        
        return false;
    });
    
    /*
    $('#imagescontainerHomepage').innerfade({
        animationtype: 'fade',
        speed: 2000,
        timeout: 10000,
        type: 'sequence',
        containerheight: 250
    });
    */
});

function animationHomepage(){
    var animDuration = 1250;
    var pictDuration = 5250;
    
    time = setTimeout(function (){
        var active_position = $('#content-image-menu li.active').index();
        
        if (active_position == $('#content-image .img').length - 1){
            var position = 0;
        } else{
            var position = active_position + 1;
        }
        
        var link = $('#content-image-menu li:eq('+ active_position +')');
        var box = $('#content-image .img:eq('+ active_position +')');
        
        link.removeClass('active');
        box.fadeOut();
        // box.animate({
        //     opacity: 0
        // }, animDuration, function (){
        //     $(this).hide();
        // });
        
        link = $('#content-image-menu li:eq('+ position +')');
        box = $('#content-image .img:eq('+ position +')');
        
        link.addClass('active');
        box.fadeIn();
        // box.animate({
        //     opacity: 1
        // }, animDuration);
        
        animationHomepage();
    }, pictDuration);
}