// Slideshow Properties
var currentX = 0;
var startX = 930; // ALIGNMENT WHEN BEGIN. IT'S EQUAL TO THE WIDTH OF THE IMAGE PLUS ONE OF THE EXTREMES. Before: 928
var xPos = startX;
var currentItem = 0;
var currentWidth;
var timer;
var holder;
var btnNext;
var btnPrev;
var banner;
var elems;
var itemWidth = 930; //WIDTH OF SLIDING ELEMENTS. SAME NUMBER AS THE IMAGES WIDTH. Before 872
var holderX = -itemWidth;
var ssItems;
var isFirstImage = true;
var isNext = false;
var isPrev = false;

// start createSlideShow function
function createSlideShow() {
    // initiate slideshow
    initSlideShow();
}

// start initSlideShow
function initSlideShow() {
    // variable to store the banner block
    banner = document.getElementById("banner");
    // change the id to swith the CSS used on the banner
    banner.id = "banner-ss";

    // variable to hold the tabs in the banner
    elems = banner.getElementsByTagName("div");

    // loop through each element and add the background image according to the id in the html
    for (var i = 0; i < elems.length; i++) {

        elems[i].style.background = "url(img/" + elems[i].id + ".jpg) no-repeat left top";
        elems[i].style.left = xPos + "px";
        xPos += itemWidth;
    }

    // add a holder div around the slideshow
    banner.innerHTML = '<div id="ss-nextButton"></div><div id="ss-prevButton"></div><div id="ss-holder">' + banner.innerHTML + '</div>';
}

function initListeners() {
    // Add key elems into variables
    holder = document.getElementById("ss-holder");
    btnNext = document.getElementById("ss-nextButton");
    btnPrev = document.getElementById("ss-prevButton");

    // Store all banner items into an array
    ssItems = holder.getElementsByTagName("div")

    // Set timer to run slideshow automatically
    setTimer();

    // Position the images
    positionItems();

    //  Setup prev/next button function
    btnNext.onclick = function() {
        clearTimer();
        nextImg();
        setTimer();
    }
    btnPrev.onclick = function() {
        clearTimer();
        prevImg();
        setTimer();
    }
}

// Function to create the interval for automatic slideshow
function setTimer() {
    timer = setInterval(nextImg, tttime); // 10000
}

// Clear the timer
function clearTimer() {
    clearInterval(timer);
}

function nextImg() {
    if (isPrev) {
        currentItem++;
        isPrev = false;
    }

    if (currentItem == ssItems.length) {
        currentItem = 0;
    }

    isFirstImage = false;
    isNext = true;
    positionItems();

    holder.style.left = "-930px"; // EQUAL TO THE WIDTH OF THE IMAGES
    $(holder).animate({ left: 0 - itemWidth * 2 + "px" }, 500);

    currentItem++;
}

function prevImg() {
    if (isFirstImage) {
        currentItem--;
        isFirstImage = false;
    }

    if (isNext) {
        currentItem--;
        isNext = false;
    }

    if (currentItem == -1) {
        currentItem = ssItems.length - 1;
    }

    isPrev = true;
    positionItems();

    holder.style.left = "-1860px"; //-1744px THIS CHANGE AFFECTS THE SLIDING TO THE LEFT (???)
    $(holder).animate({ left: "-930px" }, 500); 	//CHANGE TO THE WIDTH OF THE IMAGES

    currentItem--;
}

function positionItems() {
    // Position all items away for the viewing area to ensure no items are overlapping	
    for (var i = 0; i < ssItems.length; i++) {
        ssItems[i].style.left = itemWidth * 5 + "px";
    }

    //  Position the current image to the starting x position
    ssItems[currentItem].style.left = startX + "px";

    //  Position the the next image to the right of the current image
    if ((currentItem + 1) > ssItems.length - 1) {
        // If the current image is the last image in the array, position the first image
        ssItems[0].style.left = startX + itemWidth + "px";
    }
    else {
        // if the current image is NOT the last image
        ssItems[currentItem + 1].style.left = startX + itemWidth + "px";
    }

    //  Position the previous image to the left of the current image
    if (currentItem - 1 < 0) {
        // If the previous image is the first image in the array, position the last image
        ssItems[ssItems.length - 1].style.left = startX - itemWidth + "px";
    }
    else {
        // If the current image is NOT the first image
        ssItems[currentItem - 1].style.left = startX - itemWidth + "px";
    }

    if (isPrev) {
        if (currentItem - 2 < 0) {
            if (currentItem - 1 < 0) {
                ssItems[ssItems.length - 2].style.left = startX - itemWidth - itemWidth + "px";
            }
            else {
                ssItems[ssItems.length - 1].style.left = startX - itemWidth - itemWidth + "px";
            }
        }
        else {
            ssItems[currentItem - 2].style.left = startX - itemWidth - itemWidth + "px";
        }
    }

    if (currentItem + 2 > ssItems.length - 1) {
        if (currentItem + 1 > ssItems.length - 1) {
            ssItems[1].style.left = startX + itemWidth + itemWidth + "px";
        }
        else {
            ssItems[0].style.left = startX + itemWidth + itemWidth + "px";
        }
    }
    else {
        ssItems[currentItem + 2].style.left = startX + itemWidth + itemWidth + "px";
    }
}

// init slideshow
createSlideShow();