Google Virtual Tour rotate - pause on mouse hover

This works well enough but I was wondering how I could suspend the script after a user hovers their mouse over it. Is there some command within the API that would help me do this? What about just some kind of function suspension?

<DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
<title>Street View service</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    var panorama;

    function initialize() {
        var fenway = new google.maps.LatLng(42.345573,-71.098326);
        var panoramaOptions = {
            position: fenway,
            pov: {
            heading: 4,
                pitch: 10
            }
        };
        panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);

        var i = 0;
        window.setInterval(function () {
            panorama.setPov({
                heading: i,
                pitch: 10,
                zoom: 1
            });
            i += 0.1;
        }, 10);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>
  </head>
 <body>
    <div id="map-canvas" style="width: 400px; height: 300px"></div>
    <div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
  </body>
</html>

Solution

You can use this great tool to generate an embed code for your site: http://virali.se/photo/spin/

It also uses Google API.

Editing your code you can add the following:

$("#pano").on("mouseenter", function () {
   move = false;
});

$("#pano").on("mouseleave", function () {
   move = true;
});
...
if (move) { i += 0.1; }

Demo in this JSFIDDLE.