$(document).ready(function () {

    //rotation speed and timer
    var speed = 5000;
    var run = setInterval('rotate()', speed);

    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth();
    var left_value = item_width * (-1);

    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));

    //set the default item to the correct position 
    $('#slides ul').css({ 'left': left_value });

    //if user clicked on prev button
    $('#prev').click(function () {

        //get the right position            
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;

        //slide the item            
        $('#slides ul:not(:animated)').animate({ 'left': left_indent }, 200, function () {

            //move the last item and put it as first item            	
            $('#slides li:first').before($('#slides li:last'));

            //set the default item to correct position
            $('#slides ul').css({ 'left': left_value });

        });

        //cancel the link behavior            
        return false;

    });

    //if user clicked on stop button
    $('#pause').click(function () {
        clearInterval(run); //this works!

        //change pause image to play image
        //alert(('#pause').anchor('src'));
        //('#pause').anchor('src')
    });


    //if user clicked on next button
    $('#next').click(function () {

        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;

        //slide the item
        $('#slides ul:not(:animated)').animate({ 'left': left_indent }, 200, function () {

            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));

            //set the default item to correct position
            $('#slides ul').css({ 'left': left_value });

        });

        //cancel the link behavior
        return false;

    });

    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#slides').hover(

		function () {
		    clearInterval(run);
		},
		function () {
		    run = setInterval('rotate()', speed);
		}
	);

});

//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
    $('#next').click();
}