// JavaScript Document
var slides = new Array
(
"/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);
			Event.observe(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;
	new Effect.Fade('headimg'+slideDown,{to:0, duration:2});
	$('headimg'+slideUp).src = slides[currentSlideNo];
	new Effect.Appear('headimg'+slideUp,{to:1, duration:2});
}

function rotateAd() {
	// rotate ad
	if ($('advert')) {
		setTimeout(function () {
			new Ajax.PeriodicalUpdater('advert','/lib/_ad_on_right.php',{
									   method: 'get', frequency: 10, decay: 2
									   });
		},10*1000);
	}
}

var slideFaderWithLinks = Class.create();
slideFaderWithLinks.prototype = {
	initialize: function(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;
		if (optionsObj) {
			Object.extend(this.slideOptions,optionsObj);
		}
		this.Container = $(containerElm);
		this.links = [this.Container.down('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].down('img');	// 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.alt = img0.alt;
		
		link1.appendChild(img1); // add clone image to new link
		this.Container.appendChild(link1); // append link and image to slide container

		this.links[1] = this.Container.down('a',1);
		if (this.slideCount) {
			// we have all the key elements
			this._setup = true;
		}		
	},
	play: function () {
		if (this._setup && !this.playing && this.slideCount > 1 ) {
			this.playing = true;
			new PeriodicalExecuter(this.fadeInOut.bind(this), this.slideOptions.pauseBetween);
		}
	},
	pause: function () {
		this.playing = false;
	},
	fadeInOut: function (pe) {
		if (this.playing == false) {
			pe.stop();
		} else {
			// Change slide
			this.slideUp = 1-this.slideUp;
			this.slideDown = 1-this.slideUp;
			var fadeInIdx = (this.currentIdx+1 < this.slideCount ) ? this.currentIdx + 1 : 0;
			this.links[this.slideUp].href = (this.slides[fadeInIdx].href) ? this.slides[fadeInIdx].href : '#';
			this.links[this.slideUp].title = (this.slides[fadeInIdx].title) ? this.slides[fadeInIdx].title : 'buy surf hardware online';
			this.links[this.slideUp].down('img').alt = this.links[this.slideUp].title;
			this.links[this.slideUp].down('img').src = this.slides[fadeInIdx].src;
			//console.log('fadeIn: '+this.slideUp+' FadeOut: '+this.slideDown);
			new Effect.Fade(this.links[this.slideDown],{from:1, to:0, duration: this.slideOptions.fadeDuration});
			new Effect.Appear(this.links[this.slideUp],{from:0, to:1, duration: this.slideOptions.fadeDuration});
			this.currentIdx = fadeInIdx;
		}
	}
};

var AdSlider = Class.create();
AdSlider.prototype = {
	initialize: function(containerElm,optionsObj) {
		this.slideIdx = 0;
		this.maxSlideIdx = null;
		this.slideAmount = null;
		this._setup = false;
		this.sliderOptions = { seconds: 8, direction: 'left', duration: 0.5 }; // default options
		if (optionsObj) {
			Object.extend(this.sliderOptions,optionsObj);
		}
		this.Container = $(containerElm);
		this.listContainer = (this.Container) ? this.Container.down('ul') : false;
		this.listItems = (this.listContainer) ? this.listContainer.immediateDescendants() : false;
		this.firstPlay = true;
		if (this.listItems) {
			// we have all the key elements
			this.maxSlideIdx = this.listItems.length;
			switch(this.sliderOptions.direction) {
				case 'left':
					this.slideAmount = this.Container.getWidth();
					this.listContainer.style.width = (this.maxSlideIdx * this.slideAmount) + 'px';
					break;
				case 'up':
					this.slideAmount = this.Container.getHeight();
					this.listContainer.style.height = (this.maxSlideIdx * this.slideAmount) + 'px';
					break;
			}
			var n = this;
			Event.observe(window, 'unload', function (e) { n.pause(); });
			this._setup = true;
		}
	},
	play: function() {
		if (!this._setup) throw("slider not setup");
		if (this.firstPlay) {
			// dont slide first time, mark OK from now on
			this.firstPlay = false;
		} else {
			// do slide
			this.slideIdx++;
			var params = { x: 0, y: 0, mode: 'absolute', duration: this.sliderOptions.duration, transition: Effect.Transitions.sinoidal };
			if (this.slideIdx >= this.maxSlideIdx) {
				params.x = 0; params.y = 0; params.mode = 'absolute';
				this.slideIdx = 0;
			} else {
				params.mode = 'relative';
				switch(this.sliderOptions.direction) {
					case 'left':
						params.x = -this.slideAmount; params.y = 0;
						break;
					case 'up':
						params.y = -this.slideAmount; params.x = 0;
						break;
				}
			}
			new Effect.Move(this.listContainer, params);
		}
		this.playTimeout = setTimeout(this.play.bind(this),this.sliderOptions.seconds*1000);
	},
	pause: function() {
		if (this.playTimeout) {
			clearTimeout(this.playTimeout);
		}
	}
};

// Setup on page load
//Event.observe(window, 'load', function (e) { /* headerSlides(); */ rotateAd(); if ($('largeads')) { var slider = new AdSlider('largeads', {seconds: 10, direction: 'up'}); slider.play(); } });
//Event.observe(window, 'load', function (e) { /* headerSlides(); */ rotateAd(); if ($('largeads')) { var slider = new slideFader('largeads', {pauseBetween: 8} ); slider.play(); } });
Event.observe(window, 'load', function (e) { /* headerSlides(); */ rotateAd(); if ($('brandads')) { var slider = new slideFaderWithLinks('brandads', brandSlides, {pauseBetween: 8} ); slider.play(); } });