Javascript slider pause function on hover

Looking for a little help with this slider that came with a Magento Template I purchased.

I'm trying to add a pause on hover and resume on mouse out but am very new to getting my hands this dirty with the JavaScript.

Hoping for a push in the right direction

Here is the code I'm working with

function decorateSlideshow() {
var $$li = $$('#slideshow ul li');
if ($$li.length > 0) {

    // reset UL's width
    var ul = $$('#slideshow ul')[0];
    var w = 0;
    $$li.each(function(li) {
        w += li.getWidth();
    });
    ul.setStyle({'width':w+'px'});

    // private variables
    var previous = $$('#slideshow a.previous')[0];
    var next = $$('#slideshow a.next')[0];
    var num = 1;
    var width = ul.down().getWidth() * num;
    var slidePeriod = 3; // seconds
    var manualSliding = false;

    // next slide
    function nextSlide() {
        new Effect.Move(ul, { 
            x: -width,
            mode: 'relative',
            queue: 'end',
            duration: 1.0,
            //transition: Effect.Transitions.sinoidal,
            afterFinish: function() {
                for (var i = 0; i < num; i++)
                    ul.insert({ bottom: ul.down() });
                ul.setStyle('left:0');
            }
        });
    }

    // previous slide
    function previousSlide() {
        new Effect.Move(ul, { 
            x: width,
            mode: 'relative',
            queue: 'end',
            duration: 1.0,
            //transition: Effect.Transitions.sinoidal,
            beforeSetup: function() {
                for (var i = 0; i < num; i++)
                    ul.insert({ top: ul.down('li:last-child') });
                ul.setStyle({'position': 'relative', 'left': -width+'px'});
            }
        });
    }

    function startSliding() {
        sliding = true;
    }

    function stopSliding() {
        sliding = false;
    }

    // bind next button's onlick event
    next.observe('click', function(event) {
        Event.stop(event);
        manualSliding = true;
        nextSlide();
    });

    // bind previous button's onclick event
    previous.observe('click', function(event) {
        Event.stop(event);
        manualSliding = true;
        previousSlide();
    });


    // auto run slideshow
    new PeriodicalExecuter(function() {
        if (!manualSliding) nextSlide();
    开发者_开发知识库    manualSliding = false;
    }, slidePeriod);


}

Now I'm guessing the best way would be to manipulate a hover or mouseover observer similar to the next and previous ones to stop and start but I'm just not sure on how to set this up.

Would appreciate a push in the right direction!

Edit ....

So I'm getting much closer but I seem to have a problem yet hopefully someone who know about prototype can help.

I got it to work by adding this variable

var stopSliding = false;

and then adding an if like so

function nextSlide() {
        if (!stopSliding) {
        new Effect.Move(ul, { 
            x: -width,
            mode: 'relative',
            queue: 'end',
            duration: 1.0,
            //transition: Effect.Transitions.sinoidal,
            afterFinish: function() {
                for (var i = 0; i < num; i++)
                    ul.insert({ bottom: ul.down() });
                ul.setStyle('left:0');
            }
        });
    }
}

    // previous slide
    function previousSlide() {
        if (!stopSliding) {
        new Effect.Move(ul, { 
            x: width,
            mode: 'relative',
            queue: 'end',
            duration: 1.0,
            //transition: Effect.Transitions.sinoidal,
            beforeSetup: function() {
                for (var i = 0; i < num; i++)
                    ul.insert({ top: ul.down('li:last-child') });
                ul.setStyle({'position': 'relative', 'left': -width+'px'});
            }
        });
    }
    }

then

ul.observe('mouseover', function(event) {
        stopSliding = true;

    });


    ul.observe('mouseout', function(event) {
        stopSliding = false;
    });

This method works but only Safari will auto start my slideshow now and firefox needs interaction to trigger a start.

However I did find that switching the var to true at the start and switching around the order of the mouseovers it then auto starts fine in Firefox and not in Safari.

Had enough for this evening.

So I managed to get it to work in both Firefox, Safari, IE etc using:

Event.observe( window, 'load', function() { stopSliding = false; });

This ensures that my variable "stopSliding" is set.