onload = function () {

timer = 0;
current = 1;
button = 1;

showTime = 5000;

pictures = $('#buttons div img').length;
width = $('#main_img_01 img').outerWidth();

$('#buttons div img').animate({ opacity: 0.4 });
$('#buttons #b1 img').animate({ opacity: 1 });

$('#main_img_01').animate({ "left": "0px" }, 400, "swing");

timer = setTimeout("autoPlay()", showTime);

$("#buttons div").click(function () {
button = current;
clickButton = $(this).attr('id');
current = parseInt(clickButton.slice(1));
if (current > button) { animateLeft(current, button) }
if (current < button) { animateRight(current, button) }
});

function animateRight(current, button) {
$('#main_img_0' + current).css("left", -width + "px");
$('#main_img_0' + current).animate({ "left": "0px" }, 400, "swing");
$('#main_img_0' + button).animate({ "left": width + "px" }, 400, "swing");
setbutton()
}

$("#wrap").mouseover(function () { clearTimeout(timer); });
$("#wrap").mouseout(function () { timer = setTimeout("autoPlay()", showTime); });

}

function autoPlay() {
button = current;
current++
if (current == (pictures + 1)) { current = 1 }
animateLeft(current, button)

timer = setTimeout("autoPlay()", showTime);
}

function animateLeft(current, button) {
$('#main_img_0' + current).css("left", width + "px");
$('#main_img_0' + current).animate({ "left": "0px" }, 400, "swing");
$('#main_img_0' + button).animate({ "left": -width + "px" }, 400, "swing");
setbutton()
}

function setbutton() {
$('#b' + button + ' img').animate({ opacity: 0.4 })
.css("borderColor", "#444");
$('#b' + current + ' img').animate({ opacity: 1 })
.css("borderColor", "#888");
}