TurnJS not working (jquery loading order?)

Question

I am having trouble getting TurnJS working, i am loading all the images dynamically and i get all the images displayed at first, then after a few seconds once the page has loaded, the first and second image are displayed, the rest hidden, the image moves on hover but the whole flipbook isn't working and its not changing pages (unlike when i tried getting this to work on the basic version, although it wasn't perfect i had the pages turning), i think i may be loading the jquery in the wrong order (See below):

$this->template->styles['/assets/css/magazine.css'] = 'screen';
$this->template->styles['/assets/css/jquery.ui.css'] = 'screen';
$this->template->styles['/assets/css/jquery.ui.html4.css'] = 'screen';
$this->template->jscripts[]='assets/libraries/modernizr.2.5.3.min.js';
$this->template->jscripts[]='assets/libraries/jgestures.min.js';
$this->template->jscripts[]='assets/libraries/jquery-ui-1.8.20.custom.min.js';
$this->template->jscripts[]='assets/libraries/jquery.mousewheel.min.js';
$this->template->jscripts[]='assets/scripts/turn.js';
$this->template->jscripts[]='assets/scripts/turn.min.js';
$this->template->jscripts[]='assets/scripts/turn.html4.js';
$this->template->jscripts[]='assets/scripts/turn.html4.min.js';
$this->template->jscripts[]='assets/scripts/hash.js';
$this->template->jscripts[]='assets/scripts/zoom.js';
$this->template->jscripts[]='assets/scripts/zoom.min.js';
$this->template->jscripts[]='assets/scripts/magazine.js';

Jquery is already loaded so i don't need to load it again here just any extra libraries/scripts i need. The following errors i am getting in firebug are:

• TypeError: $(...).turn is not a function
• TypeError: Argument 1 of Node.insertBefore does not implement interface Node.
• Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
• TypeError: book.turn is not a function

I have added my code here just so you can see what i have done, any help/guidance would be appreciated!

This is what i am aiming for here

If i look under scripts in firebug, it shows me the following order:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='/apps/assets/libraries/jquery-1.6.2.min.js'>\x3C/script>")</script>
<script type="text/javascript" src="/apps/assets/libraries/jquery-ui-1.8.12.custom.min.js"></script>

...and then all my scripts follow, which shows its loading jquery first?