// Oculus Digital site interactions. Created on 03/04/2009 by Jon Frost

var init = function() {
	//Set the animation easing from the jquery.easing.1.3 plugin
	jQuery.easing.def = 'easeOutCubic';

	//Grab the container div
	//Listen for any clicks and send them to clickHandler for delegation
	var page = document.getElementById("page");
	page.onclick = clickHandler;
	
	team();
	services();
	methodology();
	//gallery();
	caseStudy();
	//twitter();
}

//Delegate page div clicks
function clickHandler(e) {
	
	var el = getTarget(e);
	
	if(el.className == "nav" || el.parentNode.className == "nav") {
		
		//Match the hash attribute of the clicked element with the id of an existing div
		if(el.className == "nav") {
			var target = document.getElementById(el.hash.slice(1));
		}
		else if(el.parentNode.className == "nav") {
			var target = document.getElementById(el.parentNode.hash.slice(1));
		}
		var targetOffset = target.offsetTop-35;
		
		//If the target div cannot reach the top of the viewport, set the animation to go to the end of the page
		//Otherwise the animation will cut short when the scrollbar runs out
		var viewportSize = getViewportSize();
		if((document.body.offsetHeight - targetOffset) <= viewportSize[1] && target.id != 'main') targetOffset = document.body.offsetHeight - viewportSize[1];
	
		//Animate the page body to the offsetTop attribute of the target div
		$('html,body').animate({
			scrollTop: targetOffset
		}, 750);
		
		return false;
			
	}

}

function twitter() {
	twitterPosition = 0;
	
	aTwitterPrev = document.getElementById("twitterPrev");
	
	aTwitterPrev.onclick = function () {
		$(".tweet:eq("+twitterPosition+")").animate({
			opacity: 0
		}, 500);
		return false;
	}
}

function team() {
	var teamGalleryWidth = 660;
	document.getElementById("teamNav").className = "dynamic";
	
	divTeamFrame = document.getElementById("teamFrame");
	divTeamFrame.className = "dynamic";
	
	divTeamSet = document.getElementById("teamSet");
	divTeamSet.className = "dynamic";
	
	divTeamMember = $(".teamMember");
	
	$("#teamNav a").each(function(i) {
		this.onclick = function(e) {

			$(divTeamFrame).animate({
				height: divTeamMember[i+1].offsetHeight
			}, 500);	

			$(divTeamSet).animate({ 
				left: -teamGalleryWidth * (i+1)
			}, 500);
			
			$("#teamNav a.selected").removeClass("selected");
			$("#teamNav a:eq("+i+")").addClass("selected");

			return false;
		}
	})
}

function services(){
	var servicesGalleryWidth = 640;
	document.getElementById("servicesNav").className = "dynamic";
	
	divServicesFrame = document.getElementById("servicesFrame");
	divServicesFrame.className = "dynamic";
	
	divServicesSet = document.getElementById("servicesSet");
	divServicesSet.className = "dynamic";
	
	divServicesItem = $(".servicesItem");
	
	$("#servicesNav a").each(function(i){
		this.onclick = function(e){
		
			$(divServicesFrame).animate({
				height: divServicesItem[i].offsetHeight
			}, 500);
			
			
			$(divServicesSet).animate({
				left: -servicesGalleryWidth * i
			}, 500);
			
			$("#servicesNav a.selected").removeClass("selected");
			$("#servicesNav a:eq(" + i + ")").addClass("selected");
			
			return false;
		}
	})
}

function methodology() {
	var methodologyGalleryWidth = 640;
	document.getElementById("methodologyNav").className = "dynamic";
	
	divMethodologyFrame = document.getElementById("methodologyFrame");
	divMethodologyFrame.className = "dynamic";
	
	divMethodologySet = document.getElementById("methodologySet");
	divMethodologySet.className = "dynamic";
	
	divMethodologyItem = $(".methodologyItem");
	
	$("#methodologyNav a").each(function(i) {
		this.onclick = function(e) {

			$(divMethodologyFrame).animate({
				height: divMethodologyItem[i].offsetHeight
			}, 500);	

			
			$(divMethodologySet).animate({ 
				left: -methodologyGalleryWidth * i
			}, 500);
			
			$("#methodologyNav a.selected").removeClass("selected");
			$("#methodologyNav a:eq("+i+")").addClass("selected");

			return false;
		}
	})
}

//Set up galleries
function gallery () {

	var captionHeight = new Array;
	var captionStatus = new Array;
	var galleryPosition = new Array;
	var galleryCount = new Array;
	var galleryWidth = 638;
		
	$(".gallery").each(function(i) {
		this.id = "gallery"+i;
		
		galleryCount[i] = this.getElementsByTagName("img").length;
		galleryPosition[i] = 0;	
		
		pGalleryNav = document.createElement("p");
		pGalleryNav.className = "galleryNav";
		this.appendChild(pGalleryNav);

		aGalleryInfo = document.createElement("a");
		aGalleryInfo.className = "galleryInfo";
		aGalleryInfo.innerHTML = "info";
		aGalleryInfo.href = "#";
		pGalleryNav.appendChild(aGalleryInfo);
		
		aGalleryNext = document.createElement("a");
		aGalleryNext.className = "galleryNext";
		aGalleryNext.innerHTML = "next";
		aGalleryNext.href = "#";
		pGalleryNav.appendChild(aGalleryNext);
		if(galleryCount[i] == 1) aGalleryNext.style.display = "none";
				
		aGalleryPrev = document.createElement("a");
		aGalleryPrev.className = "galleryPrev";
		aGalleryPrev.innerHTML = "prev";
		aGalleryPrev.href = "#";
		pGalleryNav.appendChild(aGalleryPrev);
		if(galleryCount[i] == 1) aGalleryPrev.style.display = "none";
			
	});
	
	$(".gallerySet").each(function(i) {
		this.style.width = galleryWidth*galleryCount[i]+"px";
	});
					
	$(".caption").each(function(i) {
		this.style.width = "610px";		
		this.style.bottom = "0";
		this.style.left = "0";
		this.style.position = "absolute";
		captionHeight[i] = this.clientHeight;
		captionStatus[i] = true;
	});
				
	$(".imgWithCaption").each(function(i) {
		this.style.overflow = "hidden";
	});
	
	$(".galleryInfo").each(function(i) {
		this.onclick = function(e) {
			if(!captionStatus[i]) {
				$("#gallery"+i+" .caption").animate({
					bottom: 0
				}, 250);
				captionStatus[i] = true;										
			}
			else {
				$("#gallery"+i+" .caption").animate({
					bottom: -captionHeight[i]-5
				}, 500);
				captionStatus[i] = false;										
			}
			return false;
		}
	});	
	
	$(".galleryNext").each(function(i) {
		this.onclick = function(e) {
			if (galleryPosition[i] < galleryCount[i] - 1) {
				galleryPosition[i]++;
				$("#gallery" + i + " .gallerySet").animate({
					left: -galleryWidth * galleryPosition[i]
				}, 500);
			}
			else {
				galleryPosition[i] = 0;
				$("#gallery" + i + " .gallerySet").animate({
					left: 0
				}, 500);
			}		
			return false;
		}		
	});
	
	$(".galleryPrev").each(function(i) {
		this.onclick = function(e) {
			if (galleryPosition[i] > 0) {
				galleryPosition[i]--;
				$("#gallery" + i + " .gallerySet").animate({
					left: -galleryWidth * galleryPosition[i]
				}, 500);
			}
			else {
				galleryPosition[i] = galleryCount[i]-1;
				$("#gallery" + i + " .gallerySet").animate({
					left: -galleryWidth * (galleryCount[i]-1)
				}, 500);
			}		
			return false;
		}		
	});
		
}

//Set up case study 'read more' links
function caseStudy() {

	var expander = new Array;
	var expanderHeight = new Array;
	var expanderStatus = new Array;
	
	$(".readMore").each(function(i) {
		expander[i] = getNextSibling(this);
		expanderHeight[i] = expander[i].offsetHeight;
		expanderStatus[i] = false;

		expander[i].style.height = "0";
		expander[i].style.opacity = "0";
		
		this.onclick = function() {
			if(!expanderStatus[i]) {
				$(expander[i]).animate({ height: expanderHeight[i] }, 500 )
					.animate({ opacity: "1" }, 250
				);
				expanderStatus[i] = true;				
			}
			else {
				$(expander[i]).animate({ opacity: "0" }, 250 )
					.animate({ height: "0" }, 500
				);
				expanderStatus[i] = false;
			}
			return false;
		}
	});	
}


//Return the source element of an event
function getTarget(t){
	t = t || window.event;
	return t.target || t.srcElement;
}

//Return the starting element of a mouseover event
function getFromTarget(t){
	t = t || window.event;
	return t.relatedTarget || t.fromElement;
}

//Return the finishing element of a mouseout event
function getToTarget(t){
	t = t || window.event;
	return t.relatedTarget || t.toElement;
}

//Return the next sibling element
function getNextSibling(startBrother){
	endBrother=startBrother.nextSibling;
	while(endBrother.nodeType != 1){
		endBrother = endBrother.nextSibling;
	}
	return endBrother;
} 

//Return the users current viewport size in an array
function getViewportSize() {
	var vpWidth;
	var vpHeight;
	var vpSize = [vpWidth, vpHeight];
	
	// Modern browsers
	if (typeof window.innerWidth != 'undefined')
	{
	  vpSize[0] = window.innerWidth;
	  vpSize[1] = window.innerHeight;
	}
	 
	// IE6 in standards compliant mode
	else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
	{
	   vpSize[0] = document.documentElement.clientWidth;
	   vpSize[1] = document.documentElement.clientHeight;
	}
	 
	// older versions of IE
	else
	{
	   vpSize[0] = document.getElementsByTagName('body')[0].clientWidth;
	   vpSize[1] = document.getElementsByTagName('body')[0].clientHeight;
	}
	return vpSize;
}

window.onload = init;