My slideshow is not working. can anyone help?

My slideshow is not working. can anyone help?

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" type="text/css" href="myStylesheet.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>$(function() { alert('hello') });</script>
<title></title>

</head>
<body style = "background-color:black;">
<article>
<h1></h1>

<div id="slideshow-container">
<div id="slideshow">
<div id="slideshow-wrapper">

<img src="1.jpg" alt="" id="s1" />
<img src="2.jpg" alt="" id="s2" />
<img src="3.jpg" alt="" id="s3" />
<img src="4.jpg" alt="" id="s4" />



</div>
</div>
<div id="slideshow-thumbs">
<a href="#" rel="s1"><img src="1.jpg" alt="" /></a>
<a href="#" rel="s2"><img src="2.jpg" alt="" /></a>
<a href="#" rel="s3"><img src="3.jpg" alt="" /></a>
<a href="#" rel="s4"><img src="4.jpg" alt="" /></a>

</div>
<div id="controls">
<a href="#" id="previous">Previous</a>
<a href="#" id="next">Next</a>
</div>
</div>
<div id = "bg">
<img src="MSLOGO.png" style="vertical-align:middle;"/>
</div>
<div id = "top">
<img src="top.jpg"/>
</div>

<ul id="coolMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li>
<a href="#">Collections</a>
<ul>
<li><a href="#">Bridal</a></li>
<li><a href="#">Evening</a></li>
<li><a href="#">Couture</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Order</a></li>
</ul>


<p></p>
</article>
</body>
</html>


































































CSS:

#slideshow-container {
width: 650px;
margin: 2em auto;
position: relative;
}

#slideshow {
width: 100%;
height: 440px;
position: relative;
z-index: 1;
overflow: hidden;
}

#slideshow-wrapper {
width: 7800px;
height: 440px;
position: relative;
}

#slideshow-wrapper img {
width: 650px;
height: 440px;
float: left;
}

#controls a {
display: block;
width: 29px;
height: 78px;
text-indent: -1000em;
background-repeat: no-repeat;
}

#controls #previous {
background-image: url(arrow-left.png);
float: left;
position: relative;
left: -29px;
}

#controls #previous:hover {
background-position: 0 -78px;
}

#controls #next {
background-image: url(arrow-right.png);
float: right;
position: relative;
right: 0;
}

#controls #next:hover {
background-position: 0 -78px;
}

#slideshow-thumbs {
margin-top: 1em;
width: 100%;
height: 50px;
}

#slideshow-thumbs a {
float: left;
width: 54px;
height: 100%;
}

#slideshow-thumbs a img {
display: block;
width: 100%;
height: 100%;
border: none;
}


#bg{
margin-left:auto;
margin-right:auto;
width:250px

}



#coolMenu{
margin-left:auto;
margin-right:auto;
width:800px;
}
#coolMenu ul {
margin:0;
padding:0;
list-style-type:none;
}
#coolMenu {

margin-right:auto;
margin-left:auto;
width:690px;


}
#coolMenu > li {
float: left;


}
#coolMenu li a {
display: block;
height: 2em;

line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#coolMenu ul {
position: absolute;

display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}

#coolMenu {
font-family: san;
font-size: 18px;
background: dark;
}
#coolMenu > li > a {
color: white;
font-weight: bold;
}
#coolMenu > li:hover > a {
background: black;
color: grey;

}



#coolMenu ul {
background: black;
}
#coolMenu ul li a {
color: white;
}
#coolMenu ul li:hover a {
background: grey;

}




























































































































































JQuery:

var Slideshow = new function() {

var timer = null,
index = 0,
wrapper = $('#slideshow-wrapper', '#slideshow'),
slides = $('img', wrapper),
thumbs = $('a', '#slideshow-thumbs'),
previous = $('#previous', '#controls'),
next = $('#next', '#controls');
var getSlidePositions = function() {

var positions = [];
slides.each(function(i) {

var left = $(this).position().left;

positions[i] = left;

});

return positions;

};

var addOffsetsToImages = function() {

slides.each(function() {

$(this).attr('position', $(this).position().left);

});

};


var autoSlide = function() {

var offsets = getSlidePositions();
timer = setInterval(function() {

index++;

if(index == offsets.length) {

index = 0;

}

wrapper.animate({
left: - offsets[index]
}, 1000, function() {

thumbs.eq(index).animate({
opacity: 0.5
}, 500, function() {

$(this).animate({
opacity: 1
}, 500);

});

});



}, 2000);



};


var handleThumbLinks = function() {

thumbs.each(function() {

var $a = $(this);
var imgId = $('#' + $a.attr('rel'));
var $offset = imgId.attr('position');

$a.click(function(event) {

clearInterval(timer);

wrapper.animate({
left: - $offset
}, 1000, function() {

autoSlide();

});

event.preventDefault();

});

});

};


var handlePrevNextButtons = function() {

var offsets = getSlidePositions();

previous.click(function(event) {

clearInterval(timer);

index--;

if(index == 0) {

index = 0;

}

wrapper.animate({
left: - offsets[index]
}, 1000, function() {

autoSlide();

});


event.preventDefault();

});

next.click(function(event) {

clearInterval(timer);

index++;

if(index == offsets.length) {

index = 0;

}

wrapper.animate({
left: - offsets[index]
}, 1000, function() {

autoSlide();

});


event.preventDefault();

});



};

this.init = function() {

addOffsetsToImages();

autoSlide();

handleThumbLinks();

handlePrevNextButtons();

};

$(function() {

Slideshow.init();

});


}();