// **************** Editable Settings ************************

var imgDirectory = "../UserPhotos/SlidingImages/";// Directory containing the images, relative to the page
var imgWidth = 92;                  // Width of each image.  Control will automatically accomodate 3 images, plus borders and controls
var imgHeight = 110;                // Height of the images in the control.
var scrollIncrement = 4;            // Number of pixels that the images should move on each cycle
var scrollDelay = 1;                // Number, in milliseconds, to wait between movement increments
var autoScrollDelay = 6000;         // Number, in milliseconds, to wait between auto-scrolling

// **************** End Editable Settings ********************

// This array will be built using C# on the server side. It is hard coded for now
var arrImages = new Array(); // Images to be randomly pulled
var arrImagesUsed = new Array();    // Array to determine which images are currently being used
var imgPositions = new Array();     // Array of positions, based on the defined with of the image, plus borders
var isScrolling = false;            // Determines whether the conrol is currently scrolling, to prevent multiple clicks of the button
var scrollDistance = 0;             // Distance that the images have scrolled within the current scroll operation
var autoScroll = true;              // If true, images will scroll automatically, based upton the autoScrollDelay.

var img1 = null;                    // Image1 object
var img2 = null;                    // Image2 object
var img3 = null;                    // Image3 object
var img4 = null;                    // Image4 object

function SlidingImage(id)
{
    this.Id = id;                   // ID of the image
    this.posLeft = 0;               // Left position
    this.posSlot = 0;               // Slots are 0-3, left to right in the bar
    this.imgSrc = "";               // Source of the image is stored to prevent looking up multiple times
    this.imgId = -1;                // ID of the Image in arrImages
    this.isHidden = false;          // Status of the image, if it's hidden in either position 0 or 4
    this.containerObject = document.getElementById("imageContainer_" + this.Id);  // Div object on the page that contains the image and scrolls
    this.imageObject = document.getElementById("image_" + this.Id); //Image object
    
    this.slideLeft = _slideLeft;    // slides object left by provided increment
    this.slideRight = _slideRight;  // slides object right by provided increment
    this.getImage = _getImage;      // Randomly replaces the image from an unused image in the Array
}

function _getImage()
{
    if (this.imgId >= 0)
    {
        arrImagesUsed[this.imgId] = false;                      // Set 'used' flag to false in the array
    }
    this.imgId = getRandomImage();                              // Get a new random image
    this.imgSrc = imgDirectory + arrImages[this.imgId];         // Set the imgSrc from the images array
    this.imageObject.src = this.imgSrc;                         // Set the image to display in the slider control
}

function _slideRight(increment)
{
    this.posLeft = this.posLeft + increment;                    // Set the new left coordinates, based on the provided increment value
    this.containerObject.style.left = this.posLeft + "px";      // Move the image on the page to the new left coordinate
}

function _slideLeft(increment)
{
    this.posLeft = this.posLeft - increment;                    // Set the new left coordinates, based on the provided increment value
    this.containerObject.style.left = this.posLeft + "px";      // Move the image on the page to the new left coordinate
}

function loadImages()
{
    document.getElementById("imageScroller").style.visibility = "visible"; // If the browser doesn't support Javascript, the control won't show
    
    // Populate the Image Objects
    img1 = new SlidingImage(1);
    img2 = new SlidingImage(2);
    img3 = new SlidingImage(3);
    img4 = new SlidingImage(4);

    // Set the height and width of the ScrollArea control
    document.getElementById("scrollArea").style.width = (((imgWidth + 2) * 3) - 2) + "px";  // Sets the width of the scrolling area. Width of the image plus 2 pixel border on either side of the middle image
    document.getElementById("scrollArea").style.height = imgHeight + "px";                  // Sets the height of the scrolling area, determines the size of the control
    
    // Set the height and width of all the images
    document.getElementById("image_1").height = imgHeight;
    document.getElementById("image_2").height = imgHeight;
    document.getElementById("image_3").height = imgHeight;
    document.getElementById("image_4").height = imgHeight;

    document.getElementById("image_1").width = imgWidth;
    document.getElementById("image_2").width = imgWidth;
    document.getElementById("image_3").width = imgWidth;
    document.getElementById("image_4").width = imgWidth;

    // Set the height of the scroll buttons
    document.getElementById("imgLeftScroller").height = imgHeight;
    document.getElementById("imgRightScroller").height = imgHeight;

    // Populate arrImagesUsed initially, setting all values to false
    for (i=0;i<arrImages.length;i++)
    {
        arrImagesUsed[i] = false;
    }
    
    // Populate the 5 available image positions, based upon the defined width of each image.  Positions 0 and 4 will not be visible
    imgPositions[0] = 0 - (imgWidth + 2);
    imgPositions[1] = 0;
    imgPositions[2] = imgWidth + 2;
    imgPositions[3] = (imgWidth + 2) * 2;
    imgPositions[4] = (imgWidth + 2) * 3;
    
    // Set the initial values for the 4 images, and populate the images
    document.getElementById("imageContainer_1").style.left = imgPositions[1];
    img1.posLeft = imgPositions[1];
    img1.posSlot = 1;
    img1.getImage();
    
    document.getElementById("imageContainer_2").style.left = imgPositions[2];
    img2.posLeft = imgPositions[2];
    img2.posSlot = 2;
    img2.getImage();
    
    document.getElementById("imageContainer_3").style.left = imgPositions[3];
    img3.posLeft = imgPositions[3];
    img3.posSlot = 3;
    img3.getImage();
    
    document.getElementById("imageContainer_4").style.left = imgPositions[4];
    img4.posLeft = imgPositions[4];
    img4.posSlot = 4;
    img4.isHidden = true;
    img4.getImage();
}

// Randomly selects an image from the array. Loops until it finds an image that isn't currently being displayed.
// Returns the Id in the ImageArray
function getRandomImage()
{
    if (arrImages.length > 4)  // Be sure there is enough images in the array to populate the 4 required images
    {
        validImgId = false;
        while (!validImgId)
        {
            imgSrcId = Math.round(Math.random()*arrImages.length);
            if (arrImagesUsed[imgSrcId] == false)  // Image is not being used anywhere on the control
            {
                arrImagesUsed[imgSrcId] = true;
                validImgId = true; 
            }    
        }	                
    }
    else
    {
        alert("not enough images to build image sliding feature");
        autoScroll = false;
        return -1;
    }
    return imgSrcId;
}

function scrollImagesLeft()
{
    if (!isScrolling)  // If it is currently scrolling, skip this
    {
        if (img1.posSlot == 0)  // If img1 is in the 0, hidden position, move it to the right and load a new image
        { 
            img1.posLeft = imgPositions[4];                             // Move the image to the right hidden side
            img1.containerObject.style.left = imgPositions[4] + "px";   // Move the image
            img1.posSlot = 3;                                           // Set the slot to 3, because after the slide, it will now be in the 3rd slot
            img1.getImage();                                            // Load a new image
        }
        else
        {
            img1.posSlot = img1.posSlot - 1;                            // Move the image one slot left, providing it's not already in the furthest left position
        }
        
        if (img2.posSlot == 0)
        {
            img2.posLeft = imgPositions[4];
            img2.containerObject.style.left = imgPositions[4] + "px";
            img2.posSlot = 3;
            img2.getImage();
        }
        else
        {
            img2.posSlot = img2.posSlot - 1;
        }
        
        if (img3.posSlot == 0)
        {
            img3.posLeft = imgPositions[4];
            img3.containerObject.style.left = imgPositions[4] + "px";
            img3.posSlot = 3;
            img3.getImage();
        }
        else
        {
            img3.posSlot = img3.posSlot - 1;
        }
        
        if (img4.posSlot == 0)
        {
            img4.posLeft = imgPositions[4];
            img4.containerObject.style.left = imgPositions[4] + "px";
            img4.posSlot = 3;
            img4.getImage();
        }
        else
        {
            img4.posSlot = img4.posSlot - 1;
        }
        
        scrollImagesLeft_Action();      // Initial values are set from clicking command, begin moving items individually
    }
}

function scrollImagesLeft_Action()
{
    adjustedScrollIncrement = scrollIncrement;
    if ((scrollDistance + scrollIncrement) >= (imgWidth + 2))       // If increment plus current moved distance is more than total allowed movement
    {
        adjustedScrollIncrement = (imgWidth + 2) - scrollDistance;  // Adjust the scroll increment to only move the width of the image, plus borders.  Prevents overscrolling.
    }

    if ((scrollDistance < (imgWidth+2)) && (adjustedScrollIncrement > 0))   // Only move the images if the distance is less than the image, and the adjusted increment is more than 0
    {
        scrollDistance = scrollDistance + adjustedScrollIncrement;  // Add the adjusted increment to the total distance scrolled
        isScrolling = true;                                         // Set to currently scrolling to prevent multiple scroll operations
        img1.slideLeft(adjustedScrollIncrement);                    // Slide the images left
        img2.slideLeft(adjustedScrollIncrement);
        img3.slideLeft(adjustedScrollIncrement);
        img4.slideLeft(adjustedScrollIncrement);
        setTimeout("scrollImagesLeft_Action()",scrollDelay);        // Repeat the operation until distance is complete
    }
    else
    {
        scrollDistance = 0;
        isScrolling = false;                                        // No longer scrolling, allows new scroll operation to be fired off
    }	        
}

function scrollImagesRight()
{
    if (!isScrolling)
    {
        if (img1.posSlot == 4)
        { 
            img1.posLeft = imgPositions[0];
            img1.containerObject.style.left = imgPositions[0] + "px";
            img1.posSlot = 1;
            img1.getImage();
        }
        else
        {
            img1.posSlot = img1.posSlot + 1;
        }
        
        if (img2.posSlot == 4)
        {
            img2.posLeft = imgPositions[0];
            img2.containerObject.style.left = imgPositions[0] + "px";
            img2.posSlot = 1;
            img2.getImage();
        }
        else
        {
            img2.posSlot = img2.posSlot + 1;
        }
        
        if (img3.posSlot == 4)
        {
            img3.posLeft = imgPositions[0];
            img3.containerObject.style.left = imgPositions[0] + "px";
            img3.posSlot = 1;
            img3.getImage();
        }
        else
        {
            img3.posSlot = img3.posSlot + 1;
        }
        
        if (img4.posSlot == 4)
        {
            img4.posLeft = imgPositions[0];
            img4.containerObject.style.left = imgPositions[0] + "px";
            img4.posSlot = 1;
            img4.getImage();
        }
        else
        {
            img4.posSlot = img4.posSlot + 1;
        }
        scrollImagesRight_Action();
    }
}

function scrollImagesRight_Action()
{
    adjustedScrollIncrement = scrollIncrement;
    if ((scrollDistance + scrollIncrement) >= (imgWidth + 2))
    {
        adjustedScrollIncrement = (imgWidth + 2) - scrollDistance;
    }

    if ((scrollDistance < (imgWidth+2)) && (adjustedScrollIncrement > 0))
    {
        scrollDistance = scrollDistance + adjustedScrollIncrement;
        isScrolling = true;
        img1.slideRight(adjustedScrollIncrement);   
        img2.slideRight(adjustedScrollIncrement);
        img3.slideRight(adjustedScrollIncrement);
        img4.slideRight(adjustedScrollIncrement);
        setTimeout("scrollImagesRight_Action()",scrollDelay);
    }
    else
    {
        scrollDistance = 0;
        isScrolling = false;
    }	        
}

function autoScrolling(scroll)
{
    if (autoScroll) setTimeout("autoScrolling(true)",autoScrollDelay);                    
    //if (scroll)  // To prevent the images from scrolling as soon as the page loads
         scrollImagesLeft();
}