I' currently working with a PHP CMS and I'm trying to add a slide down bar which uses mootools I've tested everything on a plain html file and it works. However, I can't get the slide down effect to work when I add everything to my CMS. I'm assuming I'm not linking properly to the JS using PHP. If one was going to add the below to say Wordpress what would need to be changed?


HTML Code:
<!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=utf-8" />
<title>Untitled Document</title>
<link href="utili.css" rel="stylesheet" type="text/css" />

<!--[if IE 6]> <link href="http://www.shoplet.com/css/ie6.css?rv=3.1.94" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]> <link href="http://www.shoplet.com/css/ie7.css?rv=3.1.94" media="screen" rel="stylesheet" type="text/css" /><![endif]-->

<script type="text/javascript" src="http://www.shoplet.com/js/global.js?rv=3.1.65"></script>
<script>
var myVerticalSlide = new Fx.Slide('utility-nav');
  $('exit').addEvent('click', function(event){
    event.stop();
    myVerticalSlide.slideOut();
	(function (){
	Cookie.write('Hide', 'hidden');
	$('utility-nav').setStyle('display', 'none'); }).delay(1000, this); 
  });

/*Quick Track */
window.addEvent('domready', function() {
	$('track').addEvent('mouseover', function(){
    $('trackdrop').setStyle('display', 'block');
	});
	$('track').addEvent('mouseout', function(){
    $('trackdrop').setStyle('display', 'none'); 
	}); 
});

</script>

     

</head>

<body>

<div style="margin: 0px; visibility: visible; opacity: 1;" id="utility-nav">
<a id="exit" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Hide']);"><p>X</p><span>HIDE</span></a>
	<div id="utility-wrap">
    <!--<div id="utility-pink-ribbon"><a href="/promotions/cityofhope.html" onClick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Pink']);"></a></div>-->
		<div id="utility-logo"><a href="/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_home']);"><span></span></a>
		</div>
		<div class="utility">
                    <form action="http://www.shoplet.com/search/search/" name="main_search" method="post">
                        <div id="utilsearchfield"><span></span>
                            <input class="input_placeholder" value="" placeholder="What does your business need today?" id="utilsearchtext" name="text" autocomplete="off" type="text">
                            <script type="text/javascript">new PlaceholderInput($('utilsearchtext'))</script>
                        </div>
                        <button type="submit" id="utilgo" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_search']);return submitGo(utilsearchtext);"></button>
                    </form>
		</div>
		<div id="utility-links">
		<a href="/cart/view/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_editCart'])">Edit/View Cart</a> |
		<a href="https://www.shoplet.com/checkout" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_checkout'])">Checkout</a> |
		<a href="/account/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_myAccount'])">My Account</a> |
				<a onclick="boldChat(); return false;_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Livehelp']);" target="_blank" href="http://livechat.boldchat.com/aid/1530656560879384919/bc.chat?cwdid=836829135506329118&amp;vr=&amp;vn=&amp;vi=&amp;ve=&amp;vp=&amp;iq=&amp;curl=">LiveHelp</a>
		        
		</div>
	</div>
</div>
</body>
</html>