// Slideshow Properties
var currentX = 0;
var startX = 928;
var xPos = startX;
var currentItem = 0;
var currentWidth;
var timer;
var holder;
var btnNext;
var btnPrev;
var btnPause;
var banner;
var elems;
var itemWidth = 872;
var holderX = -itemWidth;
var ssItems;
var isFirstImage = true;
var isNext = false;
var isPrev = false;
var isPaused = 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(images/ss/" + 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-pauseButton"></div><div id="ss-holder">' + banner.innerHTML + '</div>';
	
	// When the pause button is clicked, the timer will either start or stop based on the isPaused variable
	
/*  ===============================================================================  */
	// ========== non~linear edit ========== \\
	// Indented function, and added missing closing bracket \\
	$('#ss-pauseButton').click(function()
	{
		 if (isPaused)
		 {
			   setTimer();
			   isPaused = false;
		 }
		 else
		 {
			   clearTimer();
			   isPaused = true;
		 }
	});
}

function initListeners()
{
	// Add key elems into variables
	holder = document.getElementById("ss-holder");
	btnNext = document.getElementById("ss-nextButton");
	btnPrev = document.getElementById("ss-prevButton");
	btnPause = document.getElementById("ss-pauseButton");
	
	// 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()
		{
			isPaused = false;
			clearTimer();
			nextImg();
			setTimer();
		}
		btnPrev.onclick = function()
		{
			isPaused = false;
			clearTimer();
			prevImg();
			setTimer();
		}
}

// Function to create the interval for automatic slideshow
function setTimer()
{
	timer = setInterval(nextImg, 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 = "-872px";
	$(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 = "-1744px";
	$(holder).animate({ left: "-872px" }, 500);
	
	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();