$(document).ready(function(){
    function hideImages(){
        $('#img0').hide();
        $('#img1').hide();
        $('#img2').hide();
        $('#features li').css("background-color", "#ececec");
        $('#article0 a').removeClass("active");
        $('#article1 a').removeClass("active");
        $('#article2 a').removeClass("active");
    }
    function autoCycle(){
        clearTimeout(timeout);
        hideImages();
        if (currentImg == 0){
            $('#article1').css("background-color", "#d6d6d6");
            $('#img1').fadeIn(400);
            currentImg = 1;
            
            $('#article1 a').addClass("active");
        }
        else if (currentImg == 1){
            $('#article2').css("background-color", "#d6d6d6");
            $('#img2').fadeIn(400);
            currentImg = 2;
            
            $('#article2 a').addClass("active");
        }
        else if (currentImg == 2){
            $('#article0').css("background-color", "#d6d6d6");
            $('#img0').fadeIn(400);
            currentImg = 0;
            
            $('#article0 a').addClass("active");
        }
        timeout = setTimeout(autoCycle, 4000);
    }
    var timeout;
    var currentImg = 0;
    hideImages();
    $('#article0 a').addClass("active");
    $('#article0').css("background-color", "#d6d6d6");
    $('#img0').fadeIn(800);
    timeout = setTimeout(autoCycle, 4000);
    
    $('#features li').hover(function(){
        clearTimeout(timeout);
        hideImages();
        $(this).css("background-color", "#d6d6d6");
        switch($(this).attr("id")){
            case "article0":
                if (currentImg != 0){
                    $('#img0').fadeIn(400);
                    currentImg = 0;
                    $('#article0 a').addClass("active");
                }
                else {
                    $('#img0').show();
                    $('#article0 a').addClass("active");
                }
                break;
            case "article1":
                if (currentImg != 1){
                    $('#img1').fadeIn(400);
                    currentImg = 1;
                    $('#article1 a').addClass("active");
                }
                else {
                    $('#img1').show();
                    $('#article1 a').addClass("active");
                }
                break;
            case "article2": 
                if (currentImg != 2){
                    $('#img2').fadeIn(400);
                    currentImg = 2;
                    $('#article2 a').addClass("active");
                }
                else {
                    $('#img2').show();
                    $('#article2 a').addClass("active");
                }
                break;
            default:
                // do nothing
                break;
        }   
    }, function(){
        timeout = setTimeout(autoCycle, 8000);
    });
});