// JavaScript Document

var slides = ["/images/banner/title-surfer-gw.jpg",
"/images/banner/title-surfer-kelly2.jpg",
"/images/banner/title-surfer-kirra.jpg",
"/images/banner/title-surfer-kelly1.jpg",
"/images/banner/title-surfer-jb1.jpg",
"/images/banner/title-surfer-jb2.jpg",
"/images/banner/title-surfer-lv1.jpg",
"/images/banner/title-surfer-pt.jpg",
"/images/banner/title-surfer1.jpg"];

// Current slide
var currentSlideNo = 0;
var slideShowTimer = false;
var fadeEvery = 6;	// Fade images every n seconds
var nextImg;		// will hold next image preloaded
var nextSlideNo = 1;	// index of slide to preload
var preloadComplete = false;
var slideUp = 0;

function headerSlides()
{
	if (!slides.length || slides.length < 2) return false; // do nothing for an empty slide show or one containg one slide
	if (!slideShowTimer && document.createElement && document.getElementById && document.appendChild) {
			// first run so setup second image for fade between and set run fadeEvery seconds
			var img1 = document.createElement('img');
			img1.width = $('headimg0').width;
			img1.height = $('headimg0').height;
			img1.zindex = $('headimg0').zindex;
			img1.position = $('headimg0').position;
			img1.top = $('headimg0').top;
			img1.left = $('headimg0').left;
			img1.src = slides[1];
			img1.alt = $('headimg0').alt;
			img1.style.display = 'none';
			img1.id = 'headimg1';
			img1.useMap = $('headimg0').useMap;
			var header = document.getElementById('header');
			header.appendChild(img1);
			slideShowTimer = setInterval(headerSlides,fadeEvery*1000);
			$(window).unload( function (e) {
				clearInterval(slideShowTimer);
			});
			nextImg = new Image($('headimg0').width,$('headimg0').height); // create preload image holder
			if (currentSlideNo+1 < slides.length) {
				// if more than one slide prefetch the next one
				nextSlideNo = currentSlideNo+1;
				nextImg.src = slides[nextSlideNo++];	// preload next image
			}
			return true;
	}
	currentSlideNo++; // next slide
	if (currentSlideNo >= slides.length) {
		// if we've shown them all go back to the start
		currentSlideNo = 0;
	}
	if (!preloadComplete) {
		if (nextSlideNo >= slides.length) {
			// dont preload second time around, as no need
			// to enable uncomment below
			//preloadComplete = true;
		} else {
			nextImg.src = slides[nextSlideNo++];	// preload next image
		}
	}
	// Change slide
	slideUp = 1-slideUp;
	slideDown = 1-slideUp;
	$('#headimg'+slideDown).fadeOut(2000);
	$('#headimg'+slideUp).prop('src',slides[currentSlideNo]);
	$('#headimg'+slideUp).fadeIn(2000);
}

function SlideFaderWithLinks(containerElm,slides,optionsObj) {
	this.currentIdx = 0;
	this.slideCount = slides.length;
	this.slides = slides;
	this._setup = false;
	this.slideOptions = { pauseBetween: 8, fadeDuration: 2 }; // default options
	this.playing = false;
	this.slideUp = 0;
	this.slideDown = 1;
	this.timer = null;
	this.img_cache = new Image();
	if (optionsObj) {
		this.slideOptions = $.extend(this.slideOptions,optionsObj);
	}
	this.Container = containerElm;
	this.links = $(this.Container).children('a');
	
	// now create a copy
	var link1 = document.createElement('a'); // create second link to wrap second image
	link1.href= (this.slides[1].href) ? this.slides[1].href : '#'; // set its href
	link1.style.display = 'none'; // dont show second link
	var img0 = $(this.links[0]).children('img')[0];	// find first image so we can clone properties
	var img1 = document.createElement('img'); // create the second image & clone
	img1.width = img0.width;
	img1.height = img0.height;
	img1.src = this.slides[1].src;
	img1.title = this.slides[1].title;
	img1.alt = this.slides[1].title;
	
	link1.appendChild(img1); // add clone image to new link
	$(this.Container).append(link1); // append link and image to slide container

	this.links[1] = $(this.Container).children('a')[1];
	if (this.slideCount) {
		// we have all the key elements
		this._setup = true;
	}		
};
SlideFaderWithLinks.prototype = {
	play: function () {
		var that = this;
		if (this._setup && !this.playing && this.slideCount > 1 && this.timer == null) {
			this.playing = true;
			this.timer = setInterval(function () {
				that.fadeInOut();
				},
				(this.slideOptions.pauseBetween * 1000)
			);
		}
	},
	pause: function () {
		this.playing = false;
	},
	stop: function () {
		if (this.timer != null) {
			clearInterval(this.timer);
			this.timer = null;
			this.playing = false;
		}
	},
	fadeInOut: function () {
		if (this.playing == false) {
			this.stop();
		} else {
			// Change slide
			this.slideUp = 1-this.slideUp;
			this.slideDown = 1-this.slideDown;
			var fadeInIdx = (this.currentIdx+1 < this.slideCount ) ? this.currentIdx + 1 : 0;
			//console.log("Up: "+this.slideUp+ " Down: "+this.slideDown+" Index: "+fadeInIdx);
			
			$(this.links[this.slideUp]).prop({
				'href': this.slides[fadeInIdx].href ? this.slides[fadeInIdx].href : '#',
				'title': this.slides[fadeInIdx].title ? this.slides[fadeInIdx].title : 'buy surf hardware online',
				'alt': this.slides[fadeInIdx].title ? this.slides[fadeInIdx].title : 'buy surf hardware online'
			});
			$(this.links[this.slideUp]).children('img').prop({
				'title': this.slides[fadeInIdx].title ? this.slides[fadeInIdx].title : 'buy surf hardware online',
				'alt': this.slides[fadeInIdx].title ? this.slides[fadeInIdx].title : 'buy surf hardware online',
				'src': this.slides[fadeInIdx].src
			});
			$(this.links[this.slideDown]).hide();
			$(this.links[this.slideUp]).show();
			this.currentIdx = fadeInIdx;
			this.img_cache.src = this.slides[(this.currentIdx+1 < this.slideCount ) ? this.currentIdx + 1 : 0].src;
		}
	}
};

var slider;

$(document).ready( function() {
	if ($('#brandads').length != 0) {
		slider = new SlideFaderWithLinks(
			'#brandads',
			brandSlides,
			{pauseBetween: 8}
		);
		slider.play();
	}
});