var t;
    $(document).ready(function(){
        showStyleInterface('.arrow, .styles_pages');
        $('.style_swith').hover(function(){
            showStyleInterface('.arrow, .styles_pages');    
        });
        $('.bg').css('display','none');    
        $('.bg:first').css('display','block'); 
        
        $('.styles_pages_link').click(function(){
            num = $(this).attr('rel');
            $('.bg:visible').fadeOut("slow");
            $('.bg_'+num).fadeIn("slow");
            clearInterval(t);
            timeStyleSwitch();
            return false;
        });
        
        timeStyleSwitch();
        
        $('.left_link').click(function(){
            getPrevStyle($('.bg:visible'))
            return false;
        });
        
        $('.right_link').click(function(){
            getNextStyle($('.bg:visible'))
            return false;
        });
           
    });
    
    function getNextStyle(visible_elm){
        next = visible_elm.next('.bg');
        if(next.length == 0){
            next = $('.bg:first');    
        }
        visible_elm.fadeOut("slow");
        next.fadeIn("slow");
        clearInterval(t);
        timeStyleSwitch(); 
    }
    
    function getPrevStyle(visible_elm){
        prev = visible_elm.prev('.bg');
        if(prev.length == 0){
            prev = $('.bg:last');    
        }
        visible_elm.fadeOut("slow");
        prev.fadeIn("slow");
        clearInterval(t);
        timeStyleSwitch(); 
    }
    
    function timeStyleSwitch(){
        t = setInterval(function(){
            getNextStyle($('.bg:visible'));
        }, 7000);    
    }
    
    function showStyleInterface(classes){
        $(classes).toggle();
    }