Uncaught TypeError: Object [object Object] has no method 'draggable'. (Booklet jquery plugin)

I am trying to use Booklet jquery plugin for my project, but the manual and keyboard controls are not working. It seems to be due to this error.

Booklet plugin homepage

Direct link to the js file of the plugin. Error occurs at line 1194.

The error occurs at this particular line :

    // manual page turning, check if jQuery UI is loaded
    target.find('.b-page').draggable('destroy').removeClass('b-grab b-grabbing');
    if(options.manual && $.ui) {

My html:

<!doctype html>

<html>
<head>
    <meta charset="UTF-8"/>
            <title> asfds </title>
<link rel="stylesheet" type="text/css" media="screen" href="fgerg.css" />
<link href="scripts/jquery.booklet.1.4.0.css" type="text/css" rel="stylesheet" media="screen" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="scripts/jquery.booklet.1.4.0.js" type="text/javascript"></script>


<script type="text/javascript">
                $(document).ready(function() {

                $(function() {
                    $('#mybook').booklet(); 
                    keyboard: true
                });     
                }); 
            </script>

</head>

<body>

    <div id="mybook">
        <div> 
            <h3>Yay, Page 1!</h3>
        </div>
        <div> 
            <img src="scripts/testmenu1.png" width="100%" height="100%" />
        </div>
        <div> 
            <h3>Yay, Page 3!</h3>
        </div>
        <div> 
            <h3>Yay, Page 4!</h3>
        </div>
        <div> 
            <h3>Yay, Page 5!</h3>
        </div>
        <div> 
            <h3>Yay, Page 6!</h3>
        </div>
</body>     
    </div>

    </html>