Conflicting scripts on same page

JavaScript
1

Hi guys, I’m working on a site where I need to use javascript for two things on the same page: a slideshow and an inquiry form (more specifically, a popup calendar on the inquiry form).

The problem is, I can’t get them to work simultaneously. Whichever script is at the bottom of the head section is the one that works. So right now, the calendars are working just fine and the slideshow is not. If I move the slideshow script to the bottom of the head, it works perfectly but the calendars refuse to pop up.

This is the test site if you need to see exactly what I’m referring to (username: testsite, password: enter)

It seems that whichever script is placed on the bottom of the head section is overriding the other. Both scripts are from independent sources, so I have no idea what needs to be done here. Any help would be greatly appreciated!

From my current head section, this is the bit that’s required for the slideshow:

<link rel="stylesheet" type="text/css" href="images/slideshow/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="images/slideshow/js/mootools.js"></script>
<script type="text/javascript" src="images/slideshow/js/visualslideshow.js"></script>

And this is the part that’s required for the calendars:

<script type="text/javascript">

function go()
{
location=document.forms[0].gowhere.value;
}

</script>

<script type="text/javascript">
var a = new Image(); a.src = 'menu1.jpg';
var b = new Image(); b.src = 'menuhover1.jpg';
var c = new Image(); c.src = 'menu2.jpg';
var d = new Image(); d.src = 'menuhover2.jpg';
var e = new Image(); e.src = 'menu3.jpg';
var f = new Image(); f.src = 'menuhover3.jpg';
var g = new Image(); g.src = 'menu4.jpg';
var h = new Image(); h.src = 'menuhover4.jpg';
</script>

<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{
  if (form.salutation.value == "") {
    alert( "Please enter your salutation." );
    form.salutation.focus();
    return false ;
  }
  if (form.first_name.value == "") {
    alert( "Please enter your first name." );
    form.first_name.focus();
    return false ;
  }
  if (form.last_name.value == "") {
    alert( "Please enter your last name." );
    form.last_name.focus();
    return false ;
  }
  if (form.email.value == "") {
    alert( "Please enter your email address." );
    form.email.focus();
    return false ;
  }
  if (form.country.value == "") {
    alert( "Please enter your country of residence." );
    form.country.focus();
    return false ;
  }
  if (form.indate.value == "") {
    alert( "Please enter your check-in date." );
    form.email.focus();
    return false ;
  }
  if (form.outdate.value == "") {
    alert( "Please enter your check-out date." );
    form.email.focus();
    return false ;
  }
  if (form.elements['00NA000000269Gz'].value == "") {
    alert( "Please enter the no. of bedrooms requested." );
    form.elements['00NA000000269Gz'].focus();
    return false ;
  }
  
  if (form.elements['00NA000000269H4'].value == "") {
    alert( "Please enter the no. of adults." );
    form.elements['00NA000000269H4'].focus();
    return false ;
  }  

  if (form.elements['00NA000000269H9'].value == "") {
    alert( "Please enter the no. of children." );
    form.elements['00NA000000269H9'].focus();
    return false ;
  }  
   return true ;
}
//-->
</script>
<style type="text/css">
@import "css/jquery.datepick.css";
/* Or use these for a ThemeRoller theme instead
@import "themes16/southstreet/ui.all.css";
@import "css/ui-southstreet.datepick.css";
*/
</style>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {
//	$.datepick.setDefaults({useThemeRoller: true});
	$('#indate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});
	$('#outdate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});
});


function showDate(dateStr, date) { 
    if (this.id == 'indate') { 
        $('#outdate').datepick('option', 'minDate', date); 
		var dateString = date; 
		var myDate = new Date(dateString);		
		$('#00NA000000268NL').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())
    } 
    else { 
        $('#indate').datepick('option', 'maxDate', date); 
		var dateString = date; 
		var myDate = new Date(dateString);		
		$('#00NA000000268NQ').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())
    } 
}

//function showDate(date) {
//	$('#00NA000000268NQ').datepick.minDate =  new Date(date);
	// $('#00NA000000268NL').val(date) 
//}

function showDate2(date) {

	// $('#00NA000000268NQ').val(date) 
}
</script>

Any ideas? Do you need me to post links to or codes from the js files or stylesheets? Anything more that I can provide to get this resolved, just let me know. Thanks in advance!