var services;
var service_list;
var service_list_lis;
var step_rotate = 0;
var kolvo_list_items;
var speed_rotate = 4000;
var speed_opacity = 500;
$(document).ready(function() {
    services = $("div.services");
    service_list =  $("div.services ul");
    service_list_lis = service_list.find("> li");
    kolvo_list_items = service_list_lis.length;
    
    // для плавного появления задаем нулевую прозрачность
    service_list_lis.find("> div.img").css("opacity", 0);
    service_list_lis.find("> div.img").css({"visibility":"visible"});
    
    service_list_lis.eq(0).addClass("active").find("> div.img").css({"opacity":"1", "visibility":"visible"});
    services.css("background", "none");
    
    var clear_rotate = setInterval(rotateListItems, speed_rotate);
    
    services.hover(
        function() {
            clearInterval(clear_rotate);
            service_list_lis.attr("class", "").addClass("inactive");
            service_list_lis.eq(step_rotate).attr("class", "").addClass("active").find("> div.img").css("opacity", 1);
            service_list_lis.find("> a").unbind('mouseover').mouseover(function() {
                service_list_lis.removeClass("active");
                step_rotate = $(this).parent().index();
                $(this).parent().removeClass("inactive").addClass("active").find("> div.img").css("opacity", 1);
            })
            service_list_lis.find("> a").mouseout(function() {
                step_rotate = $(this).parent().index();
                service_list_lis.find("> div.img").css("opacity", 0);
                service_list_lis.eq(step_rotate).addClass("active").find("> div.img").css("opacity", 1);
            })
        },
        function() {
            service_list_lis.removeClass("inactive");
            clearInterval(clear_rotate);            
            clear_rotate = setInterval(rotateListItems, speed_rotate);            
        }
    )

})
function rotateListItems() {
    step_rotate++;
    
    service_list_lis.removeClass("active");
    
    if(step_rotate >= kolvo_list_items) {
        step_rotate = 0;
    }
    
    var oldStep=step_rotate-1;
    if(oldStep==-1)
        oldStep=kolvo_list_items-1
        
    service_list_lis.eq(step_rotate)
        .addClass("active")
        .find("> div.img")
            .animate({"opacity":1}, speed_opacity);
            
    service_list_lis.eq(oldStep)
        .find("> div.img")
        .animate({"opacity":0}, speed_opacity);
                
}