// JavaScript Document

var currActive; //Used by showlayers and hoverlayer to detect currently active tab

function showlayers(parentid, layer, indicator) {
	toggleparent = document.getElementById(parentid);
	for(var i=0; i<toggleparent.childNodes.length; i++) {
		if(toggleparent.childNodes[i].className && toggleparent.childNodes[i].className.search(/toggleitem/i) != -1) {
			if(toggleparent.childNodes[i].id == layer) {
				toggleparent.childNodes[i].style.display = "block";
				thisbtn = document.getElementById(layer + "btn");
				switch(indicator) {
                    case 'src':
                        thisbtn.src = thisbtn.src.replace(/_off./gi, '_on.');
												currActive = thisbtn.id;
                        break;
                    case 'display':
                        thisbtn.style.display = "none";
                        break;
                    case 'class':
                        thisbtn.className = "on";
                        break;
                    default:
                        // No indicator required
                }
			} else {
				toggleparent.childNodes[i].style.display = "none";
				thisbtn = document.getElementById(toggleparent.childNodes[i].id + "btn");
				switch(indicator) {
                    case 'src':
                        thisbtn.src = thisbtn.src.replace(/_on./gi, '_off.');
                        break;
                    case 'display':
                        thisbtn.style.display = "block";
                        break;
                    case 'class':
                        thisbtn.className = "";
                        break;
                    default:
                        // No indicator required
                }
			}
		}
	}
	
	placesBtn = document.getElementById('placesbtn');
	if (placesBtn != null)
	{
		placesBtn.className = "";	
	}
}

function hoverLayer(layer, state) {
	if (state=="on") {
		if(layer.src.search("_on") >= 0) {
			currActive = layer.id;
		}
		layer.src=layer.src.replace(/_off./gi, '_on.');
	} else if (state=="off") {
		if (layer.id != currActive) {
			layer.src=layer.src.replace(/_on./gi, '_off.');
		}
	}
}


/* Slideshow */
	if (document.getElementById && document.getElementsByTagName) {
		if (window.addEventListener) window.addEventListener('load', init, false);
		else if (window.attachEvent) window.attachEvent('onload', init);
	}
	function init() {
		slide = new Slideshow();
		timer = setTimeout("slide.start()", slide.timer);
		indexTimer = "";
	}
	
	function Slideshow() {
		this.images = new Array();
		if(typeof(document.getElementById('slideshow')) !== "undefined" || document.getElementById('slideshow') !== null) {
			this.slideshowdiv = document.getElementById('slideshow');
			if(this.slideshowdiv !== null) {
				this.slideshowimages = this.slideshowdiv.childNodes;
				this.timer = 5000;
				cnt = 0;
				for(var i=0; i<this.slideshowimages.length; i++) {
					if(this.slideshowimages[i].className == "ssimg") {
						this.images[cnt] = this.slideshowimages[i];
						this.images[cnt].style.zIndex = (cnt-i)+100;
						cnt++;
					}
				}
			}
		}
	}
	
	Slideshow.prototype.start = function(){
		for(var i=0; i<this.images.length; i++) {
			this.fader=setTimeout("slide.fadeout("+i+")",this.timer*i);
		}
	}

	Slideshow.prototype.fadeout = function(index){
		if (this.images[index].fadeout)
		{
			window.clearInterval(this.images[index].fadeout);
		}
		this.images[index].fadeout = window.setInterval('this.slide.startfadeout('+index+')', 1);		
	}
		
	Slideshow.prototype.startfadeout = function(index){
		if(index == this.images.length-1) { //processing last image
			//move this one to top of stack
			
			for(var i=0; i<this.images.length-1; i++) {
				this.images[i].style.opacity = 1;
				this.images[i].style.filter = "alpha(opacity=100)";
				this.images[i].style.zIndex = 100-(i+1);
			}
		}
	
		if(this.images[index].style.opacity == "" || this.images[index].style.opacity == undefined) {
			opacity = 1;
		} else {
			opacity = this.images[index].style.opacity-0.05;
		}
		this.images[index].style.opacity = opacity;
		this.images[index].style.filter = "alpha(opacity="+opacity*100+")";
		if(opacity <= 0) {
			this.images[index].style.opacity = 0;
			this.images[index].style.filter = "alpha(opacity=0)";
			window.clearInterval(this.images[index].fadeout);
			if(index == this.images.length-1) {
				for(var i=0; i<this.images.length; i++) {
					this.images[i].style.opacity = 1;
					this.images[i].style.filter = "alpha(opacity=100)";
					this.images[i].style.zIndex = (this.images.length-i)+100;
				}
				timer = setTimeout("this.slide.start('out')", this.timer);
			}
		}
		
		if(index < this.images.length-1)
		{
			indexTimer = setTimeout("this.slide.setzindex('" + index + "')", 1200);
		}
	}
	
	Slideshow.prototype.setzindex = function(index){
		this.images[index].style.zIndex = "25";
	}


// Homepage mediabox tabs
function toggleMedia(media) {
	var mbSlideshow = document.getElementById('slideshow');
	var mbMap = document.getElementById('map');
	var mbVideo = document.getElementById('video');
	if (media == "map") {
		if (mbMap.style.display == "none" || mbMap.style.display == "") {
			mbVideo.style.display = "none"; //Close Video
			mbSlideshow.style.display = "none"; //Close Slideshow
			mbMap.style.display = "block"; //Open Map
			var newHTML = '<a href="Javascript:toggleMedia(\'map\');" title="Close map"><img src="images/homepage/mediabox_closemap.png" /></a>';
			document.getElementById('maptoggle').innerHTML = newHTML;
			var newHTMLa = '<a href="Javascript:toggleMedia(\'video\');" title="Eurocamp video"><img src="images/homepage/mediabox_openvideo.png" /></a>';
			document.getElementById('videotoggle').innerHTML = newHTMLa;
			document.getElementById('videotoggle').style.display = "none";
			var usaElement = document.getElementById("usamap");
			if (usaElement != null){
				document.getElementById('usamap').style.display = "block";
			}
			initialize('canvas_map');
		} else {
			mbVideo.style.display = "none"; //Close Video
			mbMap.style.display = "none"; //Close Map
			mbSlideshow.style.display = "block"; //Open Slideshow
			var newHTML = '<a href="Javascript:toggleMedia(\'map\');" title="Browse map"><img src="images/homepage/mediabox_openmap.png" /></a>';
			document.getElementById('maptoggle').innerHTML = newHTML;
			document.getElementById('videotoggle').style.display = "block";
			var usaElement = document.getElementById("usamap");
			if (usaElement != null){
				document.getElementById('usamap').style.display = "none";
			}
		}
		
		//var player1 = flowplayer("player1", "/images/flash/flowplayer-3.1.5.swf");
		//player1.pause();

	} else if (media == "video") {
		if (mbVideo.style.display == "none" || mbVideo.style.display == "") {
			mbSlideshow.style.display = "none"; //Close Slideshow
			mbMap.style.display = "none"; //Close Map
			mbVideo.style.display = "block"; //Open Video
			var newHTML = '<a href="Javascript:toggleMedia(\'video\');" title="Close video"><img src="images/homepage/mediabox_closevideo.png" /></a>';
			document.getElementById('videotoggle').innerHTML = newHTML;
			var newHTMLa = '<a href="Javascript:toggleMedia(\'map\');" title="Browse map"><img src="images/homepage/mediabox_openmap.png" /></a>';
			document.getElementById('maptoggle').innerHTML = newHTMLa;
			var usaElement = document.getElementById("usamap");
			if (usaElement != null){
				document.getElementById('usamap').style.display = "none";
			}
			var player1 = flowplayer("player1", {src: "/images/flash/flowplayer-3.1.5.swf", wmode: 'opaque'}).ipad();
			document.getElementById('player1').style.height = "360px";
			document.getElementById('player1').style.width = "477px";
			document.getElementById('player1').style.position = "absolute";
			document.getElementById('player1').style.top = "0px";
			document.getElementById('player1').style.left = "181px";
			player1.play();
		} else {
			mbVideo.style.display = "none"; //Close Video
			mbMap.style.display = "none"; //Close Map
			mbSlideshow.style.display = "block"; //Open Slideshow
			var newHTML = '<a href="Javascript:toggleMedia(\'video\');" title="Eurocamp video"><img src="images/homepage/mediabox_openvideo.png" /></a>';
			document.getElementById('videotoggle').innerHTML = newHTML;
			var player1 = flowplayer("player1", {src: "/images/flash/flowplayer-3.1.5.swf", wmode: 'opaque'});
			player1.pause();
		}
	}
}



// Homepage slideshow
var slideTimer = 0; //Define the timer
var slideDisplay = 7000; //Set time each slide will display for
var slideIncrement = 20; //Distance the slide scrolls on each interval (changes speed of transition)
var slideWidth = 766; //Set width of the slides
var noOfSlides = 5; //Total no. of slides
var currentSlide = 1; //Set as default to start on frame 1
var nextSlide = 2; //This is the default 'next' frame
var abc = document.getElementsByName('showBtn');

function getShowreel() {
	var showreel = document.getElementById('showreel'); //Get the div that holds the images in a line
	return showreel;
}

function startRolling() {
	//If you want to stop this from occurring if coming from a click event etc, add an argument to the click saying 'stop', then check for it here
	//If you do stop it, set the stop statement to clearTimeout(slideTimer)
	if (parseInt(currentSlide) == parseInt(noOfSlides)) {
		currentSlide = 0;
	}
	nextSlide = parseInt(currentSlide) + 1;
	slideTimer = setTimeout("next(nextSlide,'start')", slideDisplay);
	currentSlide = currentSlide + 1;
}

function moveSlide(endposa) {
	var showreel = getShowreel(); //Get the div that holds the images in a line
	showreel.style.left = endposa + "px";
}

function next(number) {
	if (number == 1) {
		var endpos = 0; //If frame 1, then set the end value of the 'left' style as default
	} else if (number == 2) {
		var endpos = -slideWidth; //If frame 2, then set the end value of the 'left' style as default minus width of frame 1
	} else if (number == 3) {
		var endpos = (2 * -slideWidth); //If frame 3, then set the end value of the 'left' style as default minus width of frame 1 and 2
	} else if (number == 4) {
		var endpos = (3 * -slideWidth); //If frame 3, then set the end value of the 'left' style as default minus width of frame 1 and 2
	} else if (number == 5) {
		var endpos = (4 * -slideWidth); //If frame 3, then set the end value of the 'left' style as default minus width of frame 1 and 2
	} else {
		var endpos = 0;
	}
	changeBtn(number)
	moveSlide(endpos);
	currentSlide = number;
	clearTimeout(slideTimer); //Clear the timer incase this function is called from a button Click - which may already be half way through the timeout
	startRolling(); //Set up the next scroll which will re-call this function after a set time
}

function changeBtn(selectedBtn) {
	for (i=1;i<=abc.length;i++) {
		if (i == selectedBtn) {
			document.getElementById('slideBtn'+i).src = "images/homepage/home_slideBtn"+i+"a.png";
		} else {
			document.getElementById('slideBtn'+i).src = "images/homepage/home_slideBtn"+i+".png";
		}
	}
}