Combined JS-libraries
<p>I use two different kinds of JS libraries, but apparently, there is an error when using both.  </p>

<p>The two things I use are <code>Mootools</code> and <code>JQuery UI</code> </p>

<pre><code>&lt;!-- Agenda slider --&gt;
&lt;script type="text/javascript" language="javascript" src="js/mootools-1.2.1-core.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" language="javascript" src="js/mootools-1.2-more.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" language="javascript" src="js/lofslidernews.mt12.js"&gt;&lt;/script&gt;
&lt;!-- Datepicker --&gt;
&lt;script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" language="javascript" src="js/ui/jquery.ui.datepicker.js"&gt;&lt;/script&gt;
</code></pre>

<p>When I use this snippet, the <code>Agenda slider</code> failed to work. However, when I delete this line  </p>

<pre><code>&lt;script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"&gt;&lt;/script&gt;  
</code></pre>

<p>The <code>Agenda slider</code> works again, but the <code>Datepicker</code> refuses to work...</p>

<p>How can I combine both scripts and end up with two working javascript-based elements?</p>

<p><strong>EDIT</strong><br>
The only JS included in the <code>.php</code> files are those three little snippets  </p>

<pre><code> &lt;script language="javascript"&gt;
    $(document).ready(function() {
            $.featureList(
        $("#tabs li a"),
        $("#output li"), {
            start_item  :   1
        }
    );

    // Alternative
    $('#tabs li a').featureList({
        output          :   '#output li',
        start_item      :   1
    });
    });
  &lt;/script&gt;
  &lt;script&gt;
    $(function() {
        $( "#datepicker" ).datepicker();
    });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    var _lofmain =  $('lofslidecontent45');
    var _lofscmain = _lofmain.getElement('.lof-main-wapper');
    var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
    var object = new LofFlashContent( _lofscmain, 
                                      _lofnavigator,
                                      _lofmain.getElement('.lof-navigator-outer'),
                                      { fxObject:{ transition:Fx.Transitions.Quad.easeInOut,  duration:800},
                                         interval:3000,
                                         direction :'hrleft' } );
        object.start( true, _lofmain.getElement('.preload') );
    &lt;/script&gt;
</code></pre>
