// auto slide cycle variables
var autoCycleTimer;
var autoCycleRunning = true;
var intervalDuration = 8000;

// function to swap product images
function swapImage(clickedLink) {
	// get main image
	var mainImage = document.getElementById('mainImage');
	// get clicked image path
	var clickedImagePath = clickedLink.getElementsByTagName('img')[0].src;
	// get clicked image filename from path
	var clickedImageFilename = clickedImagePath.substring(clickedImagePath.lastIndexOf('/') + 1 , clickedImagePath.length);
	// create new path for main image from clicked image
	var newImagePath = 'products/312/' + clickedImageFilename;
	// set main image src
	mainImage.src = newImagePath;
	// remove focus from the clicked button
	clickedLink.blur();
}

// function to loop up through parent elements until target is found
function getAncestor(startElement, target) {
	// set start point as current checkbox
	var parentElement = startElement;
	// define target element
	var targetElement = startElement;
	// set maximum number of iterations
	var generationLimit = 10;
	// loop up through parent elements
	for (var y=0 ; y < generationLimit ; y++) {
		// step up to the next parent element
		parentElement = parentElement.parentNode;
		// if element is the target
		if (parentElement.tagName.toLowerCase() == target.toLowerCase()) {
			// set target element
			targetElement = parentElement;
			// end the loop
			break;
		}
	}
	//  target element
	return targetElement;
}

// jquery ready function runs when page loaded
$(document).ready(function(){

	// fancybox gallery plugin
	$(".fancybox").fancybox({
		nextEffect: 'fade', // 'elastic', 'fade' or 'none'
		prevEffect: 'fade', // 'elastic', 'fade' or 'none'
    });

	// get all divs within home scroller
	var allDivsInScroller = document.getElementById('articleContainer').getElementsByTagName('article');
	// create array of slide divs extracted from all scroller divs
	slideDivs = new Array();
	var j = 0;
	for (var i in allDivsInScroller) {
		// select only slide divs
		if (allDivsInScroller[i].className == 'article') {
			// add slide element to array and increment counter
			slideDivs[j] = allDivsInScroller[i];
			j++;
		}
	}
	// get total number of slides
	numOfSlides = slideDivs.length;
	// set intitial slide numbers
	currentSlideNum = 0;
	prevSlideNum = numOfSlides - 1;
	nextSlideNum = currentSlideNum + 1;
	if (nextSlideNum > numOfSlides - 1){nextSlideNum = 0}
	// get width of the first slide (add 60px to allow for padding)
	slideWidth = slideDivs[0].offsetWidth + 60;
	// set initial height of slide container
	document.getElementById('articleContainer').style.height = slideDivs[0].offsetHeight + 'px';
	// set initial position of all slides
	for (var i in slideDivs) {
		slideDivs[i].style.position = 'absolute';
		slideDivs[i].style.left = slideWidth + 'px';
		slideDivs[i].style.top = 0;
	}
	// set initial position of first slide
	slideDivs[0].style.left = '0px';
	// create and append prev and next buttons
	var buttonPrev = document.createElement('img');
	buttonPrev.setAttribute('id','buttonPrev');
	buttonPrev.setAttribute('src','images/newsblock_prev_off.gif');
	buttonPrev.setAttribute('width','20');
	buttonPrev.setAttribute('height','40');
	buttonPrev.setAttribute('alt','Back');
	buttonPrev.setAttribute('title','Back');
	document.getElementById('articleContainer').appendChild(buttonPrev);
	var buttonNext = document.createElement('img');
	buttonNext.setAttribute('id','buttonNext');
	buttonNext.setAttribute('src','images/newsblock_next_off.gif');
	buttonNext.setAttribute('width','20');
	buttonNext.setAttribute('height','40');
	buttonNext.setAttribute('alt','Forward');
	buttonNext.setAttribute('title','Forward');
	document.getElementById('articleContainer').appendChild(buttonNext);
	// set mouseover attributes of prev and next buttons
	document.getElementById('buttonPrev').style.cursor = 'pointer';
	document.getElementById('buttonPrev').onmouseover = function() {this.src='images/newsblock_prev_on.gif'};
	document.getElementById('buttonPrev').onmouseout = function() {this.src='images/newsblock_prev_off.gif'};
	document.getElementById('buttonNext').style.cursor = 'pointer';
	document.getElementById('buttonNext').onmouseover = function() {this.src='images/newsblock_next_on.gif'};
	document.getElementById('buttonNext').onmouseout = function() {this.src='images/newsblock_next_off.gif'};
	// create array of prev and next buttons
	slideButtons = new Array();
	slideButtons[0] = document.getElementById('buttonPrev');
	slideButtons[1] = document.getElementById('buttonNext');
	// enable buttons
	enableButtons();
	//start auto cycle if there is more than one slide
	if (numOfSlides > 1) {autoCycleTimer = setInterval('callSlide("auto")',intervalDuration)}
});


// enable slide buttons
function enableButtons() {
	for (var i in slideButtons)	{slideButtons[i].onclick = function() {callSlide(this);return false;}}
}

// disable slide buttons
function disableButtons() {
	for (var i in slideButtons)	{slideButtons[i].onclick = function() {return false;}}
}

// call slide
function callSlide(calledFrom) {
	// determine requested slide
	if (calledFrom == 'auto') {
		// auto scroller so choose next slide
		requestedSlide = 'next';
	} else {
		// choose previous or next slide
		if (calledFrom == slideButtons[0]) {
			requestedSlide = 'previous';
		} else {
			requestedSlide = 'next';
		}
		// stop auto cycle if running
		if (autoCycleRunning) {
			autoCycleRunning = false;
			clearInterval(autoCycleTimer);
		}
	}
	// disable slide buttons while scrolling
	disableButtons();
	// get current slide object
	currentSlide = slideDivs[currentSlideNum];
	// if request is for previous slide
	if (requestedSlide == 'previous') {
		// previous slide requested
		newSlide = slideDivs[prevSlideNum];
		// set start position of new slide
		newSlide.style.left = -slideWidth + 'px';
		// get position of new slide
		newSlidePos = -slideWidth;
		// decrement current slide number
		--currentSlideNum;
		if (currentSlideNum < 0){currentSlideNum = numOfSlides - 1}
		// decrement prev slide number
		--prevSlideNum;
		if (prevSlideNum < 0){prevSlideNum = numOfSlides - 1}
		// decrement next slide number
		--nextSlideNum;
		if (nextSlideNum < 0){nextSlideNum = numOfSlides - 1}
	} else {
		// next slide requested
		newSlide = slideDivs[nextSlideNum];
		// set start position of new slide
		newSlide.style.left = slideWidth + 'px';
		// get position of new slide
		newSlidePos = slideWidth;
		// increment current slide number
		currentSlideNum++;
		if (currentSlideNum > numOfSlides - 1){currentSlideNum = 0}
		// increment prev slide number
		prevSlideNum++;
		if (prevSlideNum > numOfSlides - 1){prevSlideNum = 0}
		// increment next slide number
		nextSlideNum++;
		if (nextSlideNum > numOfSlides - 1){nextSlideNum = 0}
	}
	// move slides
	setPosition();
}

// function to move incoming and outgoing slides
function setPosition() {
	// disable slide buttons while scrolling
	disableButtons();
	// obtain position of incoming slide
	//var newSlidePos = newSlide.offsetLeft;
	// animate slide movement with jquery then enable buttons
	$(currentSlide).animate({left:-newSlidePos}, 300, 'linear');
	$(newSlide).animate({left:0}, 300, 'linear', function() {
		enableButtons();
	});
}