// JavaScript Document

var	slidewidth=995,
	slideheight=655,
	delaytime=4000,
	fadetime=1500;

var forceoverlay=false, 
	slideshow=true,
	slidenavhidden=true,
	slidenavtimer,
	navusetimer,
	slidenavuse=false,
	pagecandy=false,
	slidetimer,
	changetimer,
	prevslide,
	thisslide=-1,
	lastslide,
	endslide,
	curimg=false,
	animating=false,
	overlay_out,
	nextlayer=1,
	subnav_active,
	showtimer,
	overlaytimer,
	slidepaused,
	clickx=0;


$(window).load(function(){
	// Code for sliding panel
	
	$("#panel-in").click(function(){overlay_slidein();});
	$("#panel-out").click(function(){overlay_slideout();});
			
	if($.cookie('visited') == 'true')
	{
		$("#pagewrapper").css('visibility','visible');
		$("#contentwrapper").css('visibility','visible');
	}
	
	// HATE, hate, hate to do this...
	$(window).unload(function () { });
	
	});


$(document).ready(function(){
	
	
	
	if($.cookie('visited') == 'true')
	{
		// skip to the local intro
		intro_2();
	}
	else
	{
		// we will display the splash screen and slide the overlay out
				
		$.cookie('visited','true');
		$.cookie('overlay','true');
				
		$("#contentwrapper").hide("fast", function(){ $("#contentwrapper").css('visibility','visible')});
		$("#introwrapper").css('visibility','visible');
		$("#tag").delay(4000).fadeOut(1000);
		$("#logo-image").delay(6000).animate({height: '150', width: '150'}, {duration: 2000, queue: true} );
		$("#logo").delay(6000).animate({left: '22', top: '22'}, {duration: 2000, queue: true} );
		$("#contentwrapper").delay(8000).fadeIn(1000,intro_2);
	}
	
});


function intro_2()
{
	
	//display any local intro for the page
	
	//enable page candy (clickables, swipes etc.) unless the document turns them off again
	pagecandy=true;
	
	if(typeof localDocumentReady == 'function') { 
		localDocumentReady();
		}
	else
	{
		intro_end();
	}
}

function intro_end()
{
		// if overlay has been out this session, leave it out
	
	
	// activate the first subnavigation
	
	subnav_active=0;

	if (typeof photos_1 === 'undefined')
	{
		slideshow=false;
	}
	else
	{
		initShow();
	}
	
	$("#overlay-zone").click(function(){
		if(overlay_out)
			overlay_slidein();
		else
			overlay_slideout();});

	$("#overlay").click(function() {
     	if(overlay_out)
			overlay_slidein();
		else
			overlay_slideout();});	
	
	$("a").click(function(event){
  		event.stopPropagation();
  		// prevent clicks on normal links propogating to underlying objects
	});

	subnav(1);
	
	$("#introwrapper").fadeOut(1000,function(){$("#introwrapper").css('visibility','hidden')});
	
	if( ( ($.cookie('overlay') != 'false') && pagecandy) || forceoverlay )
	{
		$("#overlay-wrapper").css({zIndex:'40'});
		$("#overlay").fadeOut(0).css('left','0').delay(1500).fadeIn(1000);
		overlay_out=true;
		$.cookie('overlay','true');
	}
	else
	{
		$("#overlay-wrapper").css({zIndex:'0'});
		overlay_out=false;
	} 

	if(! ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) ))
	{
		// build a qtip for the hidden panel, but don't use on iPad etc.
		$("#overlay-zone").qtip({
	   		content: '<p>Click here to slide the text panel back out.</p>',
	   		show: 'mouseover',
	   		hide: 'mouseout',
			style: { 
	      		border: {
	         		width: 1,
	         		radius: 2,
	         		color: '#DDDDDD'
	      		},
				background: '#222222',
				tip: 'leftTop'
			},
	 		position: {
					target: 'mouse',
	   				adjust: { mouse: true }
			}
		});
	}
		
}

function initShow()
{
	// start slideshow
	var wrapper="#slideshow";
	var navwrapper="#slideshow";
	
	$(wrapper).css({ background:'black', visibility:'inherit', overflow:'hidden', width: slidewidth, height: slideheight}).empty();
		
	// create three divs and set styles
	$("<div id='slidelayer1' class='slidelayer'><\/div><div id='slidelayer2' class='slidelayer'><\/div><div id='changelayer' class='changelayer'><\/div>").appendTo(wrapper);
	$(".slidelayer").css({position:'absolute', left:'0', top:'0', width:'100%', height:'100%', background:'black', opacity:'0'});
	$(".changelayer").css({position:'absolute', left:'0', top:'0', width:'100%', height:'100%', background:'black', opacity:'1'});
	$("#slidelayer1").css('z-index','-10');
	$("#slidelayer2").css('z-index','-11');
	$("#changelayer").css('z-index','-12');   
	slideinit=true;
	
	// create divs for pause and play images
	$("<div id='slide-pause' class='slide-icon'><img src='images/pause.png' \/><\/div><div id='slide-play' class='slide-icon'><img src='images/play.png' \/><\/div>").appendTo(wrapper);
	$(".slide-icon").css({position:'absolute', left:'420px', top:'250px', zIndex:'12', margin:'0', padding:'0', width:'150px', height:'150px', visibility: 'hidden'}).fadeOut(0).css("visibility","visible");
	
	if(pagecandy)
	{
		// We only add all the bells and whistles when the slideshow is the main feature rather than a background thing
		
		// Create a slide navigation
		// all the classes
		$("<div id='slidenav-wrapper' class='slidenav-all'><div id='slidenav-left' class='slidenav-all'><\/div><div id='slidenav-right' class='slidenav-all'><\/div><div id='slidenav-background' class='slidenav-all'><\/div><div id='slidenav-scroll' class='slidenav-all'><div id='slidenav' class='slidenav-all'><\/div><\/div><\/div><div id='slidenav-zone'><\/div>").appendTo(navwrapper);
		
		// prev zindex 19,20,21

		$("#slidenav-wrapper").css({position:'absolute', left:'0', top:'655px', width:'100%', height:'96px', background:'none', opacity:'1', zIndex:'50'});
		$("#slidenav-background").css({position:'absolute', left:'0', bottom:'0', width:'100%', height:'96px', background:'#252525', opacity:'0.6', zIndex:'50'});
		
		$("#slidenav-scroll").css({position:'absolute',left:'0', bottom:'5', width:'100%', height:'90px', background:'none', opacity:'1', zIndex:'51', overflow:'hidden'});
		
		$("#slidenav").css({position:'absolute',width:'10000px', height:'90px', background:'none', opacity:'1',zIndex:'52'});
		
		$("#slidenav-left").css({position:'absolute',width:'80px', height:'90px', left:'0', bottom:'0',background:'none', opacity:'1',zIndex:'53'}).hover(function(){slidenavScrollLeft();},function(){slidenavScrollOut();}).addClass('slidenav-lr');
		
		$("#slidenav-right").css({position:'absolute',width:'80px', height:'90px', right:'0', bottom:'0',background:'none', opacity:'1',zIndex:'53'}).hover(function(){slidenavScrollRight();},function(){slidenavScrollOut();}).addClass('slidenav-lr');
		
		$("#slidenav-zone").css({position:'absolute', left:'0', bottom:'0', width:'100%', height:'96px', opacity:'1', zIndex:'18'}).mouseover(function(){slidenavOver();}).mouseleave(function(){slidenavOut();});
		
		// Ugly hack follows, IE (9 included :( ) sets the z-Index of layers with no background below the slide images.

		$("#slidenav-zone").css('background-color','rgba(255,255,255,0.01)');
		$("#slidenav-left").css('background-color','rgba(255,255,255,0.01)');
		$("#slidenav-right").css('background-color','rgba(255,255,255,0.01)');

		// Special function for the scroll zones - we hide them on mousedown so that the mouseup event passes to the thumbnail below
		$(".slidenav-lr").mousedown(function(){
			$(this).hide();
			slidenavScrollOut();
			})
		
		$(".slidenav-all").mousedown(function(e){
			clickx=e.pageX;
			e.preventDefault();
			});
		
		$(".slidenav-all").mouseup(function(e){
			$(".slidenav-lr").show();
			movex=e.pageX-clickx;
			clickx=e.pageX;

			e.stopPropagation();
			if (movex<-10)
			{
				dif=(Math.abs(movex));
				$("#slidenav-scroll").animate({scrollLeft:'+='+dif}, { duration: dif, queue:true});
			}
			else if (movex >10)
			{
				dif=(Math.abs(movex));
				$("#slidenav-scroll").animate({scrollLeft:'-='+dif}, { duration: dif, queue:true});
			}
			});
		
		// Assign click actions to the slide layers
		$(".slidelayer").click(function(){
		if(slidepaused)
			{if(slidenavhidden) slidePlay();}
		else
			if(slidenavhidden) slidePause();
		});
		
	}
}

function slidePause()
{
	clearTimeout(slidetimer);
	$("#slide-pause").fadeIn(400).delay(1200).fadeOut(400,function(){slidepaused=true;});
}

function slidePlay()
{
	clearTimeout(slidetimer);
	$("#slide-play").fadeIn(400).delay(1200).fadeOut(400,function(){
			slidetimer=setTimeout(function(){nextSlide();},delaytime/3);
			slidepaused=false;
			});
}

function slidenavOver()
{
	if(slidenavhidden)
	{
		slidenavhidden=false;
		$("#slidenav-wrapper").animate({top: '-=96'}, { duration: 200, queue: true, complete: function(){animating=false;}});
		$(".slidenav-all").mouseover(function(){slidenavElementOver();}).mouseleave(function(){slidenavOut();});
	}
	else clearTimeout(slidenavtimer);
}

function slidenavElementOver()
{
	clearTimeout(slidenavtimer);
}

function slidenavOut()
{
	if(!slidenavhidden)
	{
		clearTimeout(slidenavtimer);
		slidenavtimer=setTimeout(function(){slidenavHide();},1000);
	}
}

function slidenavHide()
{
	if(!slidenavhidden)
	{
		animating=true;
		slidenavuse=false;
		slidenavhidden=true;
		$("#slidenav-wrapper").animate({top: '+=96'}, { duration: 200, queue: true, complete: function(){animating=false;}});
	}
	
}

function slidenavScrollLeft()
{
	clearTimeout(navusetimer);
	slidenavuse=true;
	$("#slidenav-scroll").animate({scrollLeft:'-=500'}, { duration: 1000, queue:true, complete: function(){slidenavScrollLeft();}});
}

function slidenavScrollRight()
{
	clearTimeout(navusetimer);
	slidenavuse=true;
	$("#slidenav-scroll").animate({scrollLeft:'+=500'}, { duration: 1000, queue:true, complete: function(){slidenavScrollRight();}});
}

function slidenavScrollOut()
{
	clearTimeout(navusetimer);
	navusetimer=setTimeout(function(){slidenavuse=false;},10000);
	$("#slidenav-scroll").stop();
}

function slideClick(num)
{
	// returns an anonymous function that can be bound to each slide
	return function(e)
	{
		movex=e.pageX-clickx;
		clickx=e.pageX;
		e.stopPropagation();
		if (movex<-10)
		{
			dif=(Math.abs(movex));
			$("#slidenav-scroll").animate({scrollLeft:'+='+dif}, { duration: dif, queue:true});
		}
		else
		if (movex >10)
		{
			dif=(Math.abs(movex));
			$("#slidenav-scroll").animate({scrollLeft:'-='+dif}, { duration: dif, queue:true});
		}
		else
		{	
			if(!slidepaused)
				slidePause();
			showSlide(num);
		}
		
		//alert("again");
		$(".slidenav-lr").show(); // make the scroll zones reappear in case they were hidden on mouse down
	}
}


function startShow(slides)
{
	//replace the active slideshow with a new one, by putting the last displayed image in a div at the bottom, and clearing the other two divs
	
	if (!animating)
	{
		animating=true;
		clearTimeout(slidetimer);
		
		if(curimg)
		{
			// put the current slide into a layer for a smooth transition
			$("#changelayer").empty();
			$(document.createElement("img"))
				.attr({src: curimg })
				.css({border:'0', display:'block', margin:'0 auto', padding:'none'})
				.appendTo("#changelayer");
		}
		
		// empty the slide layers and hide them
		$(".slidelayer").css({opacity:0}).empty();
		$("#slidenav").empty();
		$("#slidenav").css("width","100000px");
		
		// populate the layers
		
		for(i=0,x=slides.length;i<x;i++)
		{
			// add large image to slideshow layers
			$(document.createElement("img"))
				.attr({src: slides[i] })
				.css({border:'0', display:'block', position:'relative', margin:'0 auto', padding:'none', zIndex:'-15'})
				.appendTo(".slidelayer");
			
			// add small image to navigation layer
			$(document.createElement("img"))
    			.attr({ src: slides[i] })
				.css({cursor:'pointer',border:'2px solid #252525', height:'80px', margin:'5px', zIndex:'30'})
				.css("border-radius","3px")
				.css("-moz-border-radius","3px")
				.css("webkit-border-radius","3px")
   				.addClass("slidenav-all")
   				.appendTo("#slidenav")
   				.mouseup(slideClick(i));
		}
		
		if(pagecandy)
		{
			// set the slidenav layer to a sensible width
			var posn=$("#slidenav >img:last").position();
			$("#slidenav").css("width",posn.left+1000);
			
			/* assign swipe actions to the slidenav layer and contents
			$('.slidenav-all').swipe({
			threshold:(2,50),
     		swipeLeft: function() {
				$("#slidenav-scroll").animate({scrollLeft:'-=200'}, { duration: 400, queue:true});
				},
     		swipeRight: function() {
				$("#slidenav-scroll").animate({scrollLeft:'+=200'}, { duration: 400, queue:true});
				}
			});
			*/
		}
		
		// initialise slide variables
		endslide=x-1;
		thisslide=-1;
		paused=false;
		// nextlayer=1; (we only init this at declaration
	
	
		// create a big margin to the left of the first slide in the nav layer
		$("#slidenav >img:first").css('margin-left','425px');
		$("#slidenav >img:last").css('margin-right','425px');
	
		// now hide all the images
		$(".slidelayer > img").hide();
	
		animating=false;
		// when the first image has loaded, we'll start the show
		$("#slidelayer1 > img:first").load(function(){
			nextSlide();
		});

	}
	else
	{
		changetimer=setTimeout(function(){startShow(slides);},200);
	}
}


function nextSlide()
{
	// advance slide number by one and then show the slide
	
	if(!slidepaused)
	{
		newslide=thisslide+1;
		if (newslide > endslide)
			newslide=0;
	
		showSlide(newslide, function(){
			slidetimer=setTimeout(function(){nextSlide();},delaytime)																													
			});
	}
}

function showSlide(newslide,callback)
{
	// display the relevant slide
	
	if(animating)
	{
		//come back in a little while!
		showtimer=setTimeout(function(){showSlide(newslide,callback);},200);
	}
	else
	{
		animating=true;
		prevslide=thisslide;
		thisslide=newslide;
		
		prevlayer= nextlayer;
		nextlayer= (prevlayer==2) ? 1 : 2;
	
		//swap the layer order
		$("#slidelayer"+nextlayer).css({opacity:0, zIndex:-10});
		$("#slidelayer"+prevlayer).css('z-index','-11'); 
			
		//hide all slides, then show the last one, and save its relative URL in a global variable
		$("#slidelayer"+nextlayer+" >img").hide();
		curimg=$("#slidelayer"+nextlayer+" >img:eq("+thisslide+")").show().attr("src");
		
		if(pagecandy)
		{
			//hide all borders, then put border around current image in nav frame
			$("#slidenav >img").css({border:'2px solid #252525', opacity:'0.8'});
			var posn=$("#slidenav >img:eq("+thisslide+")").css({border:'2px solid #dddddd', opacity:'1'}).position();
			scrollposn=posn.left-425;
			if(!slidenavuse)
				$("#slidenav-scroll").animate({scrollLeft:scrollposn}, { duration: 500, queue:true});
		}
		
		//start the animation
		$("#slidelayer"+nextlayer).animate({opacity:1}, { duration: fadetime, queue: true, complete: function(){
			animating=false;
			if(typeof callback == 'function')
				callback.call();
		 }});
	}
}

function navTo(url)
{
		if(overlay_out)
		{
			$("#overlay").fadeOut(400);	
		}
		$(".slidelayer").fadeOut(600);
	
		if(typeof localDocumentEnd == 'function') { 
			localDocumentEnd(url);
		}
		else
		{
			open (url,"_self");
		}
	
}

function help()
{
		// temporary help page

		navTo("help.php");
	
}


function overlay_slideout()
{
	if(!overlay_out && pagecandy)
	{
		if(!animating)
		{
			animating=true;
			$("#overlay-wrapper").css({zIndex:'40'});
			$("#overlay").animate({left: '+=355'}, { duration: 2000, queue: true, complete: function(){animating=false;}});
			overlay_out=true;
			$.cookie('overlay','true');
		}
		else
		{
			overlaytimer=setTimeout(function(){overlay_slideout();},200);
		}
	}
}

function overlay_slidein()
{
	if(overlay_out && pagecandy)
	{
		if(!animating)
		{
			animating=true;
			$("#overlay").animate({left: '-=355'}, { duration: 2000, queue: true, complete: function(){
					animating=false;
					$("#overlay-wrapper").css({zIndex:'0'});	
				}});
			$.cookie('overlay','false');
			overlay_out=false;
		}
		else
		{
			overlaytimer=setTimeout(function(){overlay_slidein();},200);
		}
	}
}

function subnav(num)
{
	//if(subnav_active>0)
	//{
	//	$("#overlay"+subnav_active).fadeOut(1200);
	//}
	$(".overlay-inner").fadeOut(1200);
	$("#overlay"+num).fadeOut(0).css('visibility','visible').fadeIn(1000);
	subnav_active=num;
	if(slideshow)
		eval("startShow(photos_"+num+");");;
}

function thumb(num)
{
	// change layer being displayed when thumbnail is clicked
	$(".team").fadeOut(0);
	$("#team"+num).css('visibility','visible').fadeIn(600);
}