//JavaScript Document

//Notes:

/*

1. add this code to the HTML tag of each of your control buttons:
//...//  onclick='slideShow(this)'  //...//

2. make sure the images are contained within a div of class = 'images' or modify it below (don't get rid of the '.').

3. make sure the indicator/highlight for the currently displayed image is given a CSS id = 'sliderControlArrow' or modify it below (don't get rid of the hash symbol).

4. edit your content to match the images in order of filename, ie. image1.jpg will be matched with content index 0 in each array, image2.jpg with index 1, etc.

5. make sure there is at least some content for each image

*/

//edit classes and IDs if necessary
var highlightID = '#sliderControlArrow'; //HTML id of the highlight. Only change if necessary
var imageContainerClass = '.images'; //HTML class of the div containing the list of images. ^^Only change if necessary

//edit slider settings here
var imageWidth = 630; //width of one main image
var buttonWidth = 85; //width of one button
var timeOut = 6000; //auto-timeout before the image is changed
var animationLength = 450; //animation speed
var leftInitial = 56; //default value of the highlights' CSS property 'left'

var leftPos = -imageWidth;
var arrowPos = buttonWidth + leftInitial;
var unclicked = true;
var f;
var g;
var p;
var selectedContent = 2;
var inc;
var buttonPosition;
var position;
var numImages;
var contentHeadings;
var contentParagraphs;
var n;

$(document).ready(function(){
	g = setTimeout("switchImage()", timeOut);
	var contentBoxDiv = document.getElementById('contentBox');
	contentParagraphs = contentBoxDiv.getElementsByTagName('div');
	contentHeadings = contentBoxDiv.getElementsByTagName('h1');
	numImages = contentHeadings.length;
});

function slideShow(whichImage){
	var identity = whichImage.id;
	unclicked = false;
	clearTimeout(f);
	clearTimeout(g);
	for(inc = 0; inc < contentHeadings.length; inc++){
		buttonPosition = buttonWidth*inc + leftInitial;
		position = -1*imageWidth*inc;
		if(identity == ('image' + (inc +1))){
			$(imageContainerClass).animate({'left':position}, animationLength);
			$(highlightID).animate({'left':buttonPosition}, animationLength);
			document.getElementById('contentHeading').innerHTML = contentHeadings[inc+1].innerHTML;
			document.getElementById('contentDesc').innerHTML = contentParagraphs[inc+1].innerHTML;
			document.getElementById(identity).style.borderColor = '#fff';
			var m = document.getElementById('sliderControls');
			var others = m.getElementsByTagName('li');
			for(n = 0; n < others.length; n++){
				var othersID = others[n].id;
				if(identity != othersID){
					document.getElementById(othersID).style.borderColor = '#ccc';
	}}}}
}
function switchImage(){
	$(imageContainerClass).animate({'left':leftPos}, animationLength, 'swing');
	$(highlightID).animate({'left':arrowPos}, animationLength, 'swing');
	document.getElementById('contentHeading').innerHTML = contentHeadings[selectedContent].innerHTML;
	document.getElementById('contentDesc').innerHTML = contentParagraphs[selectedContent].innerHTML;
	selectedContent++;
	leftPos -= imageWidth;
	arrowPos += buttonWidth;
	if(selectedContent == numImages){selectedContent = 1;}
	if(leftPos <= (-1*(numImages -1))*imageWidth){leftPos = 0;}
	if(arrowPos >= (numImages-1)*buttonWidth){arrowPos = leftInitial;}
	if(unclicked == true){f = setTimeout("switchImage()", timeOut);}
}