jQuery cycle on "hover" start from image "0" again

Question

I have a simple question. Based on this fiddle with jquery cycle plugin:
http://jsfiddle.net/Kz6Gk/353/

I want the slider to reset on mouseout so the next time when I hover again on it,it will start from 1st image.

I tried many options like destroy, reinit, goto, startingslide but I am unable to make it work, it always resumes from the last slider before the last call of mouseout.
For example, I modified the last part of the code like this , It should work but no luck yet:

jQuery(function($){
    // Cycle plugin
    $('.slides').cycle({
        fx: 'none',
        speed: 1,
        timeout: 770
    }).cycle("pause");
    // Pause & play on hover
    $('.slideshow-block').hover(function(){
        $(this).find('.slides').addClass('active').cycle('resume');
    }, function(){
        $(this).find('.slides').removeClass('active').cycle('goto', 0).cycle('pause');
    });

});

Answer 1

Refer to fiddle JS:

$(function($){

    // Cycle plugin
function recycle()
{
$('.slides').cycle("destroy").cycle({
    fx:  'none',
    speed: 1,
    timeout: 700
});
}
    // Pause & play on hover
    $('.slideshow-block').hover(function(){
    recycle();
        $(this).find('.slides').addClass('active').cycle('resume');
    }, function(){
    recycle();
        $(this).find('.slides').removeClass('active').cycle('pause');
    });

});