jquery file include problem

638 512MB

hi there i am trying to run the lightbox and a slider on a single page the light box is working allrigh but when i try to include the slider in the same page it generates error because i have to include the jquery.js file to run it .i think it is a problem with the order of the file include. the error which i receive is here
and on the prototype.js which is included for the lightbox i am stucked please any one here
error:

element.dispatchEvent is not a function
[Break on this error] element.dispatchEvent(event);

my code is here

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=<?=CHARSET;?>" />

        <title><?=SITE_TITLE;?></title>

        <style type="text/css">

            img, table, tr, td { behavior: url(iepngfix.htc) }

        </style>

        <link type="text/css" rel="stylesheet" href="includes/styles.css" />

        <link type="text/css" rel="stylesheet" href="includes/lightbox.css" media="screen" />

        <script type="text/javascript" src="includes/methods.js"></script>

        <script type="text/javascript" src="includes/prototype.js"></script>

        <script type="text/javascript" src="includes/scriptaculous.js?load=effects,builder"></script>

        <script type="text/javascript" src="includes/lightbox.js"></script>

<script type="text/javascript" src="includes/jquery.js"></script>

        <script type="text/javascript">

            $(function(){

            $("#mostrar").click(function(event) {

            event.preventDefault();

            $("#caja").slideToggle();

            });
 
            $("#caja a").click(function(event) {

            event.preventDefault();

            $("#caja").slideUp();

            });

            });

        </script>

<body style="background:url(images/img-01.jpg) no-repeat top left; background-attachment:fixed;" onload="MM_preloadImages('images/home-active.gif','images/aboutus-active.gif','images/product-active.gif','images/newarrival-active.gif','images/philosphy-active.gif','images/contactus-active.gif','images/s-1-s.gif','images/s-2-s.gif','images/s-3-s.gif','images/s-4-s.gif','images/s-5-s.gif')">

    <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%">

 <tr class="text-white-11">

                                                                                    <td align="left" width="15"><img src="http://bytes.com/images/arrow-1.gif" width="12" height="5" border="0" alt="" /></td>

                                                                                    <td align="left"><a href="#" id="mostrar">Details</a><div id="caja"><p>Lorem ipsum dolor sit amet,...</p></div></td>

                                                                                </tr>

 </table>

    </body>

</html>