$(document).ready(function() {

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

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

	$('#slides ul').css('width', list_width);

    //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').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});

            // set the carousel background
            $('#carousel').css('background-image', "url('"+$('#slides ul li:eq(1) img.backpic').attr('src')+"')");
        });

        // reset the interval
        clearInterval(run);
        run = setInterval('rotate()', speed);

        //cancel the link behavior
        return false;

    });


    //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').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});

            // set the carousel background
            $('#carousel').css('background-image', "url('"+$('#slides ul li:eq(1) img.backpic').attr('src')+"')");
        });

        // reset the interval
        clearInterval(run);
        run = setInterval('rotate()', speed);

        //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();
}