Javascript-форум - jquery галерея

имеем html

<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Новости</title>
<style>
ul {margin:0;padding:0}
.gallery img,
.gallery {width:340px; height:225px;display:block;}
.gallery>a {position:absolute; list-style:none; width:100%; height:100%;}
.naviBlock {text-align: center; z-index: 100; position: absolute; bottom: 10px; left:10px; height:7px;background: url("../img/png24.png")}
.naviBlock a { display: block; float:left; width: 5px; height: 5px; margin-right:1px; border:2px solid #0099ff; cursor: pointer; position: relative; background:transparent;}  
.naviBlock a.selected {background:#0099ff;}
p {cursor:pointer}
</style>
 
</head>
<body>
<h1>Галерея 1</h1>
            <ul class="gallery">
                <li><img src="img/ra1.jpg" alt="" /></li>
                <li><img src="img/ra2.jpg" alt="" /></li>
                <li><img src="img/ra3.jpg" alt="" /></li>
                <li><img src="img/ra4.jpg" alt="" /></li>
            </ul>
<p>стоп гал.1</p>
<h1>Галерея 2</h1>
            <ul class="gallery">
                <li><img src="img/dep1.jpg" alt="" /></li>
                <li><img src="img/dep2.jpg" alt="" /></li>
                <li><img src="img/dep3.jpg" alt="" /></li>
            </ul>
<p>стоп гал.2</p>            
 
<script src="js/jquery-1.8.3.min.js"></script>
 
<script src="js/jquery.fading_gallery.js"></script>
 
<script>
//формируем галерею
$(".gallery").fading_gallery({delay: 5000,naviBlock: 'naviBlock', insertTo: 'append'});
 
//при клике на P нужно заморозить соответствующую галерею
$("p").click(function(){
        $(this).text("stop");
        $(".gallery").eq($(this).index("p")).stop();
})
</script>
 
</body>
</html>

скрипт галереи:

(function($){
$.fn.fading_gallery = function(options){
 
    var types = ['vertical', 'horizontal', 'opacity'];
    var opts = $.extend({}, $.fn.fading_gallery.defaults, options);
     
    this.each(function(){
       
        var self = $(this);
        var elems = self.children();
        var visible, autochange, naviBlock;
        var loaded = 0;
        var width = self.outerWidth();
        var height = self.outerHeight();
        var offsets = [];
         
        if (self.css('position') != 'absolute' && self.css('position') != 'relative') self.css('position', 'relative');
        if (elems.size() < 2) opts.naviBlock = opts.delay = false;
             
         
        if (opts.delay){
            opts.delay = parseInt(opts.delay);
            if (opts.delay < 100) opts.delay = opts.delay * 1000;
        }
        if (elems.size()) sortElems();
        $(this).hover(function(){
            clearInterval(autochange);
        },function(){
             if (opts.delay) autochange = setTimeout(function(){ getItem({data: {index: randomIndex(loaded, visible)}}) }, opts.delay);
        });
        function sortElems(){
             
            var index = 0;
            elems.each(function(){
                 
                 
                $(this).css({position: 'absolute', zIndex: elems.size() - index, visibility: 'visible', opacity: 0})
                       countLoaded();
                       
                 
                index++;
            });
             
            sortElems = null;
        }
 
        function countLoaded(){
             
            loaded++;
       
            if (loaded == elems.size()){
                 
               
                if (opts.naviBlock) createNaviBlock();
                else {
                    visible = 0;
                    elems.first().animate({opacity: 1}, opts.speed);
                    if (opts.delay) autochange = setTimeout(function(){ getItem({data: {index: randomIndex(loaded, visible)}}) }, opts.delay);
               }
               
               countLoaded = null;
            }
        }
         
         
        function createNaviBlock(){
             
            naviBlock = $(document.createElement('div')).addClass(opts.naviBlock).css('display', 'none');
           
            for (var i = 0; i < loaded; i++){
                 var navItem = $(document.createElement(opts.navItem)).bind('click', {index: i}, getItem);  
                 naviBlock.append(navItem);
            }
             
            switch (opts.insertTo){
                case 'before': naviBlock.insertBefore(self); break;
                case 'append': self.append(naviBlock); break;
                case 'prepend': self.prepend(naviBlock); break;
                default: naviBlock.insertAfter(self);
            }
             
            self = null;
             
            naviBlock.fadeIn('fast', function(){$(this).children().first().trigger('click')});
             
            createNaviBlock = null;
        }
         
        function getItem(event){
           
            var index = event.data.index;
             
            if (index != visible){
                 
                if (autochange) clearInterval(autochange);
                 
                if (naviBlock){
                    naviBlock.children('.selected').removeClass('selected');
                    $(naviBlock.children().get(index)).addClass('selected');
                }
                 
                var show = elems.get(index);
                 
                if (typeof visible != 'undefined'){
                     
                    var hide = elems.get(visible);
                     
                    $(show).css({display: 'block',zIndex: loaded - 1, opacity: 1});
                     
                    var animate = (opts.animateType == 'random')?types[randomIndex(Math.floor(Math.random() * (types.length - 1)))]:opts.animateType;
                   
                    switch (animate){
                        case 'horizontal':
                            var direction = (visible > index)?-width:width;
                             
                            $(hide).animate({marginLeft: direction}, opts.speed, function(){$(show).css({zIndex: loaded}); $(this).css({opacity: 0})});
                        break;
                        case 'vertical':
                            var direction = (visible > index)?height:-height;
                             
                            $(hide).animate({marginTop: direction}, opts.speed, function(){$(show).css({zIndex: loaded}); $(this).css({opacity: 0})});
                        break;
 
                        default: $(hide).animate({opacity: 0}, opts.speed, function(){$(show).css({zIndex: loaded}); $(this).css({display: 'none'})});
                    }
                     
                }else $(show).css({display: 'block'}).animate({opacity: 1}, opts.speed, function(){$(this).css({zIndex: loaded})});
                 
                visible = index;
            }
             
            if (typeof event.preventDefault != 'undefined') event.preventDefault();
            if (opts.delay) autochange = setTimeout(function(){ getItem({data: {index: randomIndex(loaded, visible)}}) }, opts.delay);
        }
        /** Останавливаем слайдинг **/
        function stop(){alert("stop it");
            clearInterval(autochange);        
        }
    });
}
 
 
 
function randomIndex(loaded, visible){
    var rand = (visible+1<loaded)? visible+1:0
    return rand;
}
 
$.fn.fading_gallery.defaults = {
                   naviBlock: false,
                   delay: false,
                   speed: 500,
                   insertTo: '',
                   navItem: 'a',
                   animateType: 'opacity'
               };
})(jQuery);

Здесь через определенный интервал времени меняются картинки. Мне нужно чтобы была ф-я, которая выключила бы замену картинок у конкретной галереи и ф-я, которая бы включила. Я написал функцию (там где /** Останавливаем слайдинг **/) и попробовал привязать ее к клику на тег P, но почему-то не срабатыват. В фаирбаге никаких ошибок тоже нет.

Взываю о помощи :help: