$(document).ready( function()
{
    //rotation speed and timer
    var speed = 7000;
    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 clicks prev button
    $('#slides li:first').before ($('#slides li:last'));

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


    var pos = item_count;

    while (pos--) { $('#dots').prepend ('<a class="dot"></a>'); }
    pos = 0;

    $('#dots a:eq('+pos+')').addClass ('active');

    //if user clicked on prev button
    $('#prev').click (function()
    {
        if ($('#slides ul:animated').length)
            return false;

        pos = (pos + item_count - 1) % item_count;

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

        //slide the item
        $('#slides ul').animate({'left' : left_indent}, 350, 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});
        });

        $('#dots a').removeClass ('active');
        $('#dots a:eq('+pos+')').addClass ('active');

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

        //cancel the link behavior
        return false;
    });

    //if user clicked on next button
    $('#next').click (function()
    {
        if ($('#slides ul:animated').length)
            return false;

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


        pos = (pos + 1) % item_count;

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

        //slide the item
        $('#slides ul').animate ({'left' : left_indent}, 350, 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});
        });

        $('#dots a').removeClass ('active');
        $('#dots a:eq('+pos+')').addClass ('active');

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