/*
 * Fluid Carousel
 * Version 0.10 - Copyright 28/07/2011 Stephen Watson, all rights reserved.
 *
 * This is a simple super smooth carousel system which will handle any image sizes and scroll them
 * left or right manually or automatically. It also handles two forms of end animation transforms, see notes below.
 *
 *
 * This is the basic HTML for the carousel system
 <div class="carousel">
        <div id="carouselCont" class="carouselMainContainer">
            <div class="carouselImage">
                <asp:Image ID="Image1" ImageUrl="~/Images/testimg1.jpg" runat="server" />
            </div>
            <div class="carouselImage">
                <asp:Image ID="Image2" ImageUrl="~/Images/testimg1.jpg" runat="server" />
            </div>
            <div class="carouselImage">
                <asp:Image ID="Image3" ImageUrl="~/Images/testimg1.jpg" runat="server" />
            </div>
            <div class="carouselImage">
                <asp:Image ID="Image4" ImageUrl="~/Images/testimg1.jpg" runat="server" />
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
 *
 * This is the CSS
 * The width & height are the pixel dimensions of the images
 * The CSS style 'carouselMainContainer' has a width which is the total width of the carousel
    .carousel
    {
        position:absolute;
        left:100px;
        top:100px;
        width:800px;
        height:360px;
        background-color:Blue;
        overflow:hidden;
    }
    .carouselMainContainer
    {
        position:relative;
        width:3200px;
    }
    .carouselImage
    {
        float:left;
    }
 *
 *
 */

var fluidDelayTime=2000;        // Default delay of 4 seconds
var fluidTotalImages = 4;       // Default of 4 images
var fluidCurrentImage = 0;      // Tracks the displayed image
var fluidDirection = 0;         // Direction of transition 0-right to left, 1-left to right
var fluidSpeed = 1000;          // Speed of the scrolling animation
var fluidRollAround = true;    // What happens at the final image false reverse, true fly to first

/*
 * The next two functions are for manual control of the carousel
 *
*/

// Scrolls the image to the left showing the next image that is to the right
function fluidCarouselNext() {
    $("#carouselCont").animate({ left: '-=780px' }, fluidSpeed);
}

// Scrolls the image to the right show the image that is next to it.
function fluidCarouselPrevious() {
    $("#carouselCont").animate({ left: '+=780px' }, fluidSpeed);
}

/*
 * The next function is for the automatic movement of the carousel
 * This function allows the changing of the following attributes:
 *  delay           - Time to look at each image
 *  totalimages     - Total images within the carousel
 *  speed           - Speed of the animation change in milliseconds
 *
 * There are two modes for the carousel, it can display all images and then reverse over them backwards one at a
 * time so it goes frame 1,2,3,4,3,2,1,2,3,4,3,2,1. We can also make the carousel show all frames then quickly skip
 * to image 1 and start going through them again. To achieve this simply set the variable 'fluidRollAround' to false.
 *
*/

function fluidCarouselAutoShow(delay, totalimages,speed) {
    fluidDelayTime = delay;
    fluidTotalImages = totalimages;
    fluidSpeed = speed;

    setTimeout(fluidChangeImage, fluidDelayTime);
 }

 // Timer control function
 function fluidChangeImage() {

     if (fluidDirection == 0) {
         // From right to left
         
         fluidCurrentImage++;

         if (fluidRollAround == false) {

             if (fluidCurrentImage == fluidTotalImages) {
                 fluidCurrentImage = 0;
                 $("#carouselCont").animate({ left: '0px' }, fluidSpeed);
             }
             else {
                 fluidCarouselNext();
             }

         }
         else {
             fluidCarouselNext();
             if (fluidCurrentImage == fluidTotalImages - 1) {
                 fluidDirection = 1;
             }
         }
         
     }
     else {
         // From left to right
         fluidCarouselPrevious();
           
            fluidCurrentImage--;
            if (fluidCurrentImage == 0) {
                fluidDirection = 0;
            }
        }
       
     

     setTimeout(fluidChangeImage, fluidDelayTime);      // Restart timer

 }