var active_item_height = 188,
        inactive_item_height = 30,
        item_spacing = 1,
        animation_speed = 500,
        interval_duration = 7000,
        mouse_idle_time = 500,
        active_item = "item1",
        timeOut = 0;


function autoSlide() {

    var items = $("#left > .article");
    var set = false;
    var totalTop = 0;

    items.each(function(index) {

        if ( $(this).hasClass('active') && !set) {

            $(this).removeClass('active').addClass('inactive');

            set = true;

            if (!$(this).is(':last-child')) {

                $(this).next().removeClass('inactive').addClass('active');

                $("#left > .article").each(function() {
                    if ($(this).hasClass('active')) { 
                        var current_image = $(this).attr('data-id');
                        active_item = current_image;

                        $('#slider-box img').each(function() {

                            if ( $(this).is(':visible') && !$(this).hasClass("arrow")) {

                                //if is visible and isnt our active image, hide it
                                if ( $(this).attr('id') !== current_image) {
                                    $(this).fadeOut(animation_speed).css('z-index', '0');
                                } 
                            } else {
                                if ( $(this).attr('id') === current_image) {
                                    $(this).css('z-index', '50').fadeIn(animation_speed);
                                }
                            }
                        });

                        $(this).animate({
                            top: totalTop,
                            height: active_item_height,
                            zindex: 3600
                        }, animation_speed);

                        totalTop += active_item_height + item_spacing;
                    } else {

                        $(this).animate({
                            top: totalTop,
                            height: inactive_item_height,
                            zindex: 70
                        }, animation_speed);

                        totalTop += inactive_item_height + item_spacing;
                    }
                });


            } else {

                items.first().removeClass('inactive').addClass('active');

                $("#left > .article").each(function() {
                    if ($(this).hasClass('active')) {        
                        var current_image = $(this).attr('data-id');
                        active_item = current_image;
                        
                        $('#slider-box img').each(function() {

                            if ( $(this).is(':visible') && !$(this).hasClass("arrow")) {

                                //if is visible and isnt our active image, hide it
                                if ( $(this).attr('id') !== current_image) {
                                    $(this).fadeOut(animation_speed).css('z-index', '0');
                                } 
                            } else {
                                if ( $(this).attr('id') === current_image) {
                                    $(this).css('z-index', '50').fadeIn(animation_speed);
                                }
                            }
                        }); 

                        $(this).animate({
                            top: totalTop,
                            height: active_item_height,
                            zindex: 3600
                        }, animation_speed);

                        totalTop += active_item_height + item_spacing;
                    } else {

                        $(this).animate({
                            top: totalTop,
                            height: inactive_item_height,
                            zindex: 70
                        }, animation_speed);

                        totalTop += inactive_item_height + item_spacing;
                    }
                });
            }

        }

    });


}; //end autoSlide


function slide() {  
    var workingItem = $('.' + active_item);

    if (workingItem.hasClass('inactive')) {
        //animate

        $('#left > .active').removeClass('active').addClass('inactive');
        workingItem.removeClass('inactive').addClass('active');

        var totalTop = 0;

        //animate items
        $("#left > .article").each(function() {
            if ( $(this).hasClass('inactive')) {

                $(this).animate({
                    top: totalTop,
                    height: inactive_item_height,
                    zindex: 70
                }, animation_speed);

                totalTop += (inactive_item_height + item_spacing);
            } else {

                var current_image = $(this).attr('data-id');

                $('#slider-box img').each(function() {

                    if ( $(this).is(':visible') && !$(this).hasClass("arrow")) {

                        //if is visible and isnt our active image, hide it
                        if ( $(this).attr('id') !== current_image) {
                            $(this).fadeOut(animation_speed).css('z-index', '0');
                        } 
                    } else {
                        if ( $(this).attr('id') === current_image) {
                            $(this).css('z-index', '50').fadeIn(animation_speed);
                        }
                    }
                }); 

                $(this).animate({
                    top: totalTop,
                    height: active_item_height,
                    zindex: 3600
                }, animation_speed);
                
                totalTop += (active_item_height + item_spacing);
            }
        });
    }     
}


function checkAnimate(id) {      
    if (id === active_item) {    
        slide();
    }
    
    window.clearInterval(timeOut);
}


$(document).ready(function(){   
    
    //set interval for auto sliding
    var automation = window.setInterval('autoSlide()', interval_duration);
    
    $('.accordion').mouseenter(function() {    
        window.clearInterval(automation);
    });
    
    
    $('.accordion').mouseleave(function() {                 
        automation = window.setInterval('autoSlide()', interval_duration);
    });
    
    
    $('.article').mouseenter(function() {
        
        var current_image = $(this).attr("data-id");                                    
        active_item = current_image;
        
        window.clearInterval(timeOut);
        timeOut = window.setTimeout("checkAnimate('" + active_item + "')", mouse_idle_time);
    });  
        
});