retain autoplayPauseOnHover during btnStopAutoplay click and changeAutoplayDuration

Pull request #6 at fredhq/roundabout - https://github.com/fredhq/roundabout/pull/94

HTML

<script src="https://raw.github.com/fredhq/roundabout/d8cc98ccc0e214514cfe76fe4c1a9d8a99a50c6b/jquery.roundabout.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"
/>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="https://raw.github.com/fredhq/roundabout/d8cc98ccc0e214514cfe76fe4c1a9d8a99a50c6b/jquery.roundabout.js"></script>
<!-- <script src="https://raw.github.com/floydpink/roundabout/9e5db43bee49feedc29f1d393cba9a4434b97e26/jquery.roundabout.js"></script> -->
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<div>
    <a id="previous" href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true">Previous</a>
    <a id="start" href="#" data-role="button" data-icon="refresh" data-inline="true" data-mini="true" style="display: none;">Play</a>
    <a id="stop" href="#" data-role="button" data-icon="delete" data-inline="true" data-mini="true">Pause</a>
    <a id="next" href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true">Next</a>
</div>
<div>
<a id="change" href="#" data-role="button" data-icon="gear" data-inline="true"
    data-mini="true">Change Autoplay Duration to 3s</a>

</div>
<div>
    <p><b>If the roundabout doesn't appear, try reloading <u>this 'Result' iframe</u> here on jsfiddle</b></p>
</div>
<div>
    <p>Hover on the roundabout box and see that 'autoplayPauseOnHover' is toggling the Pause/Play button</p>
</div>
<div>
    <p><u>Steps to create the issue:</u></p>
    <p> - Click `Pause` button and then `Play` and try hovering on the roundabout box.</p>
    <p> - Click `Change Autoplay Duration to 3s` button and then try hovering on the roundabout box.</p>
</div>
<div>
    <p><u>To see how the fix helps:</u></p>
    <p> -...

CSS

div {
    text-align:center;
    margin: 2em 0;
}
p, ol {
    text-align: left;
    font-size: smaller;
}
ol {
    list-style-type:lower-alpha;
}
.roundabout-holder {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    height: 10em;
    width: 10em;
    border: dotted thin #999;
}
.roundabout-moveable-item {
    height: 4em;
    width: 4em;
    cursor: pointer;
    background-color: #ccc;
    border: 1px solid #999;
    text-align: center;
    line-height: 4em;
}
.roundabout-in-focus {
    cursor: auto;
}

JavaScript

var toggleVisibility = function () {
    var isAutoplaying = $('ul').roundabout('isAutoplaying');
    $('#start').toggle(!isAutoplaying);
    $('#stop').toggle(isAutoplaying);
};
$(function () {
    $(document).on("click", '#change', function () {
        $('ul').roundabout('changeAutoplayDuration', 3000);
    });
    $(document).on("autoplayStart", 'ul', function () {
        toggleVisibility();
    });
    $(document).on("autoplayStop", 'ul', function () {
        toggleVisibility();
    });
    $('ul').roundabout({
        enableDrag: true,
        autoplay: true,
        autoplayDuration: 1000,
        tilt: -1.5,
        autoplayPauseOnHover: true,
        btnPrev: "#previous",
        btnNext: "#next",
        btnStartAutoplay: '#start',
        btnStopAutoplay: '#stop'
    });
});