/*
 *
 *	Brian Corr; Corr@F-Robots.com
 *	for F-Robots; F-Robots.com
 *	for The Guild; GuildIsGood.com
 *	2011
 *
 */

/*
 * code that is common to both standard and mobile versions
 */ 



var isMobile = false;

var pgNameIndex = new Object();

var currentPage = 0;

var workPage;
var workOverview;
var projectLayer;
var projectContent;
var projectMainImg;
var projectMainLoadingLayer;
var videoPlayerContainer;
var projectTitle;
var projectDesription;
var projectThumbnailBar;

var isProjectOpen = false;
var loadedProjectId = -1;
var loadedVideoId = -1;
var videoTimeout;

var projectBtns = [];
var currentProjectImageId;

var projectImagesLoader;
var bioImagesLoader;

//
//$(document).ready(function(){
$(window).load(function(){
	//return;// FOR TESTING
	window.scrollTo(0, 0);
	
	//stage = document.getElementById("stage");
	//header = document.getElementById("header");
	
	if (typeof onDocumentReady == 'function'){
		onDocumentReady();
	}
	
	workPage = document.getElementById("pg2_content");
	workOverview = document.getElementById("work_overview");
	projectLayer = document.getElementById("project_layer");
	projectContent = document.getElementById("project_content");
	projectMainImg = document.getElementById("project_main_img");
	projectMainLoadingLayer = document.getElementById("project_main_loading_layer");
	videoPlayerContainer = document.getElementById("video_player_container");
	projectTitle = document.getElementById("project_title");
	projectDesription = document.getElementById("project_desription");
	projectThumbnailBar = document.getElementById("project_thumbnail_bar");
	
	$(projectContent).click(function(event){
	     event.stopPropagation();
	});
	
	$(projectMainImg).bind("load", toggleMainImageLoader).bind("error", toggleMainImageLoader);
	
	initPages();
	
	var bioImages = $(".bio_image_to_load");
	bioImagesLoader = batchLoadImages(bioImages, function(){
		//trace("all bio images loaded");
		$(".bio_image_load_layer").remove();
	});
	
	var projectImages = $(".project_image_to_load");
	projectImagesLoader = batchLoadImages(projectImages, function(){
		//trace("all project images loaded");
		$(".project_image_load_layer").remove();
		bioImagesLoader.load();
	});
	
	
	if (!isMobile){
		var layerImages = $(".layer_image_to_load");
		var layerImagesLoader = batchLoadImages(layerImages, function(){
			//trace("all layer images loaded");
			projectImagesLoader.load();
		});
		
		layerImagesLoader.load();
	}else{
		projectImagesLoader.load();
	}
	
	preloadImages();
});

function preloadImages(){
	var preloadImg = new Image();
	preloadImg.src = "assets/overImageBarBG.png";
}

function showSite(){
	document.body.removeChild( document.getElementById("loading_layer") );
	document.getElementById("header").style.display = "inline-block";
	document.getElementById("stage").style.display = "inline-block";
}

// --- code for individual pages --- //

function initPages(){
	
	var element;
	var outElement;
	var overElement;
	var i;
	
	var rollovers = $(".talent_overview_item");
	//batchMakeDivButton(rollovers, "bio_btn_", openBio, "data-arrayid");// - perhaps for future use
	batchMakeDivButton(rollovers, "bio_btn_");
	
	rollovers = $(".work_overview_item");
	batchMakeDivButton(rollovers, "project_btn_", openProject, "data-arrayid");
	
	makeImageButton("#project_close_btn", "#project_close_btn", "assets/closeX_over.png", closeProject);
	makeImageButton("#project_back_btn", "#project_back_btn", "assets/arrowLeft_btn_over.png", incrimentCurrentProjectImage, -1);
	makeImageButton("#project_next_btn", "#project_next_btn", "assets/arrowRight_btn_over.png", incrimentCurrentProjectImage, 1);
	
}

function batchMakeDivButton(rollovers, idString, clickFunction, attrParameter){
	var btnList = [];
	var element;
	var outElement;
	var overElement;
	var hitElement;
	var parameter;
	var i;
	
	for (i = 0; i < rollovers.length; i++){
		element = $(rollovers[i]);
		overElement = element.find(".overview_color")[0];
		outElement = element.find(".overview_bw")[0];
		hitElement = element.find(".hit")[0];
		
		if (typeof hitElement == 'undefined'){
			hitElement = element;
		}else{
			hitElement = $(hitElement);
		}
		
		if (typeof outElement != 'undefined' && typeof overElement != 'undefined'){
			outElement = $(outElement);
			overElement = $(overElement);
			
			if (typeof hitElement.attr("id") == 'undefined') hitElement.attr("id", idString+i);
			if (typeof overElement.attr("id") == 'undefined') overElement.attr("id", idString+i+"_over");
			if (typeof outElement.attr("id") == 'undefined') outElement.attr("id", idString+i+"_out");
			
			if (typeof attrParameter != 'undefined'){
				parameter = element.attr(attrParameter);
			}else{
				parameter = i;
			}
			
			btnList[i] = makeDivButton("#"+hitElement.attr("id"), "#"+overElement.attr("id"), "#"+outElement.attr("id"), clickFunction, parameter);
		}
	}
	
	return btnList;
}


function batchLoadImages(imageList, callback){
	var loadBatch = new Object();
	loadBatch.isWaiting = true;
	loadBatch.isAllLoaded = false;
	loadBatch.imagesToLoad = imageList.length;
	loadBatch.imagesLoadedNum = 0;
	loadBatch.bgImageLoaded = function(){
		loadBatch.imagesLoadedNum ++;
		//trace("images loaded: " + loadBatch.imagesLoadedNum+"/"+loadBatch.imagesToLoad);
		if (loadBatch.imagesLoadedNum >= loadBatch.imagesToLoad && !loadBatch.isAllLoaded){
			loadBatch.isAllLoaded = true;
			callback();
		}
	}
	
	loadBatch.load = function(){
		if (!loadBatch.isWaiting){
			//trace("early return");
			return;
		}
		loadBatch.isWaiting = false;
		var element;
		var srcToLoad;
		
		for (i = 0; i < imageList.length; i++){
			element = $(imageList[i]);
			
			srcToLoad = element.attr("data-srctoload");
			
			element.one("load", loadBatch.bgImageLoaded).one("error", loadBatch.bgImageLoaded).prop("src", srcToLoad);
		}
	}
	
	return loadBatch;
}



function closeProject(){
	isProjectOpen = false;
	$f( $('.vim')[0] ).api('pause');
	
	$('html').unbind("click");
	projectLayer.style.display = "none";
	$(".overview_cover").css("display", "none");
	workPage.style.minHeight = "0px";
	if (!isMobile){
		onResize();
	}
}


function openProject(id, event){
	event.stopPropagation();
	if (isProjectOpen) closeProject();
	
	isProjectOpen = true;
	
	$(".overview_cover").css("display", "inline-block");
	
	$('html').click(closeProject);
	
	if (loadedProjectId != id){
		loadProject(id);
	}else{
		displayProject();
	}
}


function displayProject(){
	var doScrollToZero = false;
	var projectH = $(projectLayer).height();// = projectContent.offsetHeight | will return the content-height of projectLayer (even when "display:none" !!! ) which is the offsetHeight of projectContent 
	
	
	if (currentPage != pgNameIndex.work){
		projectLayer.style.top = "0px";
		scrollToPage(pgNameIndex.work);
	}else{
		var projectY;
		var sectionTopPad = 0;
		if (isMobile){
			sectionTopPad = parseFloat( getStyle(pages[pgNameIndex.work].element, "padding-top") );
			var contentTop = parseFloat(pages[pgNameIndex.work].element.offsetTop) + sectionTopPad;
			projectY = scrollPos - contentTop;
			if (projectY < 0) projectY = 0;
		}else{
			projectY = -parseFloat( getStyle(workPage, "top") );
		}
		
		var maxY = workOverview.offsetHeight - projectH;
		if (maxY < 0) maxY = 0;
		
		if (maxY < projectY){
			projectLayer.style.top = maxY + "px";
			scrollToPage(pgNameIndex.work, maxY + sectionTopPad);// sectionTopPad is 0 unless isMobile
		}else{
			projectLayer.style.top = projectY + "px";
			if (!isMobile && workPage.offsetHeight < projectLayer.offsetHeight){
				doScrollToZero = true;
			}
		}
	}
	
	projectLayer.style.display = "inline-block";
	
	//workPage.style.minHeight = projectLayer.offsetHeight;
	workPage.style.minHeight = projectH + "px";
	
	if (!isMobile){
		if (doScrollToZero){
			onResize(0);
		}else{
			onResize();
		}
	}
}

function onPgChange(){
	if (isProjectOpen && currentPage != pgNameIndex.work && currentPage == Math.floor(currentPage)){
		closeProject();
	}
	
	if (currentPage == pgNameIndex.work){
		projectImagesLoader.load();// if already loaded it returns
	}
	if (currentPage == pgNameIndex.talent){
		bioImagesLoader.load();// if already loaded it returns
	}
}


function loadProject(id){
	
	onProjectLoaded(id, projects[id]);
}


function onProjectLoaded(id, data){
	loadedProjectId = id;
	
	// - delete previous TNs, DOM elements, button functions and jQuery data (keep an eye on this for mem leak)
	var btn;
	while (projectBtns.length > 0){
		btn = projectBtns.pop().element;
		$(btn).remove();
	}
	btn = null;
	
	// - add new content
	showProjectImage("assets/1x1_A0.png");
	projectTitle.innerHTML = data.title;
	projectDesription.innerHTML = data.description;
	
	// - new thumbnmails
	var tnBarContent = '';
	var tnData;
	var lgSrc;
	var visibleString;
	var i;
	for(i = 0; i < data.images.length; i++){
		tnData = data.images[i];
		
		if (tnData.full_video != null){
			visibleString = ' style="display: inline-block;"';
		}else{
			visibleString = '';
		}
		
		tnBarContent += ' '+
						'	<div class="overview_item project_overview_item" id="tn_id'+i+'">'+
						'		<div class="overview_bw" id="tn_id'+i+'_out">'+
						'			<img src="'+tnData.thumbnail_image_bw+'" class="project_thumbnail_image" alt="" />'+
						'		</div>'+
						'		<div class="overview_color" id="tn_id'+i+'_over">'+
						'			<img src="'+tnData.thumbnail_image+'" class="project_thumbnail_image" alt="" />'+
						'		</div>'+
						'		<div class="cover video_icon"'+visibleString+'>'+
						'			<img src="assets/projects/video_icon.png" alt="" />'+
						'		</div>'+
						'	</div>';
		
	}
	
	tnBarContent += ' '+
					'	<div class="clearing_div">'+
					'		&nbsp;'+
					'	</div>';
	
	projectThumbnailBar.innerHTML = tnBarContent;
	
	// - activate new thumbnails
	var btn;
	var firstBtn;
	for(i = 0; i < data.images.length; i++){
		tnData = data.images[i];
		
		if (isMobile && tnData.full_video != null){
			vimeoLink = makeVimeoLink(tnData.full_video);
			btn = makeDivButton("#tn_id"+i, "#tn_id"+i+"_over", "#tn_id"+i+"_out", vimeoLink);
		}else{
			btn = makeDivButton("#tn_id"+i, "#tn_id"+i+"_over", "#tn_id"+i+"_out", onProjectTnBtn, i);
		}
		
		if (tnData.full_video != null){
			btn.srcType = "video";
			btn.lgSrc = tnData.full_video;
		}else{
			btn.srcType = "image";
			btn.lgSrc = tnData.full_image;
			//if (firstBtn == null) firstBtn = i;
		}
		if (firstBtn == null) firstBtn = i;
		projectBtns.push(btn);
	}
	
	if (firstBtn != null){
		projectBtns[firstBtn].element.click();
	}
	
	if (isProjectOpen) displayProject();// - if close project has been called while waiting for the server isProjectOpen will be false
}

function incrimentCurrentProjectImage(increment){
	onProjectTnBtn( modulo(currentProjectImageId + increment, projectBtns.length) );
}

function onProjectTnBtn(id){
	var i;
	for(i = 0; i < projectBtns.length; i++){
		projectBtns[i].setEnable(true);
		projectBtns[i].element.removeClass("selected_thumbnail");
	}
	
	var btn = projectBtns[id];
	btn.setEnable(false, false);
	btn.element.addClass("selected_thumbnail");
	
	currentProjectImageId = id;
	
	if(btn.srcType == "video"){
		showProjectVideo(btn.lgSrc);
	}else if(btn.srcType == "image"){
		showProjectImage(btn.lgSrc);
	}
}


function makeVimeoLink(vimeoId){
	return 'http://player.vimeo.com/video/'+ vimeoId +'?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=4ab969';
}

function showProjectVideo(vimeoId){
	projectMainImg.src = "assets/1x1_A0.png";
	if (loadedVideoId != vimeoId){
		//trace("new video");
		loadedVideoId = vimeoId;
		var vimeoLink = makeVimeoLink(vimeoId);
		if (vimeoId != ""){
			if (isMobile){
				makeButton("#reel_btn", "#reel_btn_img", "assets/tabBtn_over.png", vimeoLink, "", true);
			}else{
				var videoHTML = '<iframe class="vim" id="vimeo_frame0" src="'+ vimeoLink +'" width="100%" height="100%" frameborder="0" webkitAllowFullScreen allowFullScreen>' + 
								'</iframe>';
				$("#video_player_container").html(videoHTML);
			}
		}
	}
	
	playVideo();
}

function pauseVideo(){
	$f( $('.vim')[0] ).api('pause');
	videoPlayerContainer.style.display = "none";
}

function playVideo(){
	if (!isMobile){
		videoPlayerContainer.style.display = "inline-block";
		$f( $('.vim')[0] ).api('play');// doesn't work unless container is already visible
	}
}

function showProjectImage(src){
	//projectMainImg.src = "assets/1x1_A0.png";
	/*
	var callback = function(){
		projectMainImg.src = src;
	}
	$('<img />').bind("load", toggleMainImageLoader).bind("error", toggleMainImageLoader).prop("src", src);
	*/
	
	
	projectMainLoadingLayer.style.display = "inline-block";
	projectMainImg.style.display = "none";
	projectMainImg.src = src;
	
	pauseVideo();
}

function toggleMainImageLoader(){
	projectMainLoadingLayer.style.display = "none";
	projectMainImg.style.display = "inline-block";
	
}





 // ----------------- //
// --- utilities --- //

var twoPI = 2 * Math.PI;
var sqrtTwoPI = Math.sqrt(twoPI);

function makeCenterOffsetEase(offset){
	var ease = function(pct){
			var mult = sineMult(pct);
			mult = ((offset - 1) * mult) + 1;
		return pct * mult;
	}
	
	return ease;
}

function sineMult(pct){
	var x = pct;
	y = (1-Math.cos(x * twoPI)) * 0.5;
	return y;
}

function makeExponentialEase(power){
	var ease = function(pct){
		return Math.pow(pct, power);
	}
	
	return ease;
}


var isUAMobile = false;
var isUATablet = false;
function checkMobile(){
	var agent = navigator.userAgent.toLowerCase();
	isUAMobile =!!(agent.match(/(iPhone|iPod|blackberry|android 0.5|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i));

	isUATablet =!!(agent.match(/(iPad|SCH-I800|xoom|kindle)/i));
}


// - thank you to Robert for the bulk of following function
//	http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
function getStyle(oElm, strCssRule){
	var strValue = "";
	
	if(document.defaultView && document.defaultView.getComputedStyle){
		strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
	}else if(oElm.currentStyle){
		var strJSRule = strCssRule;
		strJSRule = strJSRule.replace(/\-(\w)/g, function (strMatch, p1){
			return p1.toUpperCase();
		});
		strValue = oElm.currentStyle[strJSRule];
	}
	
	// special cases
	if (typeof strValue == 'undefined'){
		
		if (strCssRule == "background-position"){
			strValue = getStyle(oElm, "background-position-x") + " " + getStyle(oElm, "background-position-y");// for IE
		}
		
	}
	
	return strValue;
}


function initGetPageScroll(){
	var returnFn;
	/*
	if (typeof window.pageYOffset != 'undefined'){
		//trace("1");
		returnFn = function(){
			return [window.pageXOffset, window.pageYOffset];
		}
		
	}else if (typeof document.documentElement.scrollTop != 'undefined'){
		//trace("2");
		returnFn = function(){
			return [document.documentElement.scrollLeft, document.documentElement.scrollTop];
		}
		
	}else if (typeof document.body.scrollTop != 'undefined'){
		//trace("3");
		returnFn = function(){
			return [document.body.scrollLeft, document.body.scrollTop];
		}
		
	}else{
	*/
		//trace("4");
		returnFn = function(){
			return [$(window).scrollLeft(), $(window).scrollTop()];
		}
		
	//}
	
	return returnFn;
}

function makeDivButton(buttonId, overId, outId, href, parameters, sameWindow){
	return makeButton(buttonId, overId, outId, true, href, parameters, sameWindow);
}

function makeImageButton(buttonId, overId, overSrc, href, parameters, sameWindow){
	return makeButton(buttonId, overId, overSrc, false, href, parameters, sameWindow);
}

function makeButton(buttonId, overId, overSrcOutId, isDivBtn, href, parameters, sameWindow){// add optional callbacks for over/out?
	// - REQUIRES jQuery
	
	var overSrc = overSrcOutId;
	var outId = overSrcOutId;
	
	var btn = new Object();
	
	btn.element = $(buttonId);
	
	btn.overElement = $(overId);
	
	if (isDivBtn){
		btn.outElement = $(outId);
		
		btn.overState = function(){
			this.overElement.css('display', 'inline-block');
			this.outElement.css('display', 'none');
		}
		
		btn.outState = function(){
			this.outElement.css('display', 'inline-block');
			this.overElement.css('display', 'none');
		}
	}else{
		// - these also function as preloaders
		var linkImg = new Image();
		linkImg.src = btn.overElement.prop("src");
		
		var linkImgRO = new Image();
		
		if (typeof overSrc != undefined && overSrc != ""){
			linkImgRO.src = overSrc;
		}else{
			linkImgRO = linkImg;
		}
		
		btn.overState = function(){
			this.overElement.prop("src", linkImgRO.src);
		}
		
		btn.outState = function(){
			this.overElement.prop("src", linkImg.src);
		}
	}
	
	var isEnabled = true;
	btn.setEnable = function(enable, overstate){
		if (typeof overstate == "undefined") overstate = !enable;
		isEnabled = enable;
		if (isEnabled){
			this.element.css('cursor', 'pointer');
		}else{
			this.element.css('cursor', 'auto');
		}
		if (overstate){
			this.overState();
		}else{
			this.outState();
		}
	}
	
	
	btn.element.mouseenter(function(){
		//$(overId).prop("src", linkImgRO.src);
		if (isEnabled) btn.overState();
	}).mouseleave(function (){
		//$(overId).prop("src", linkImg.src);
		if (isEnabled) btn.outState();
	});
	
	if (typeof href != 'undefined'){
		btn.element.css('cursor', 'pointer');
		if (typeof href == 'function'){
			if (typeof parameters != 'undefined'){
				btn.element.click(function(event){
					if (isEnabled) href(parameters, event);
				});
			}else{
				btn.element.click(function(event){
					if (isEnabled) href(event);
				});
			}
		}else{
			// - we currently don't need to disable href links 
			var target = "";
			if (typeof sameWindow == 'undefined' || sameWindow == false){
				target = ' target="_blank"';
			}
			btn.element.wrap('<a href="'+href+'"' + target + ' />');
		}
	}
	
	return btn;
}


function fixIEPNG(){
	var i;
	for (i in document.images) {
	    if (document.images[i].src) {
	        var imgSrc = document.images[i].src;
	        if ( (imgSrc.substr(imgSrc.length-4)).toLowerCase() === '.png' ) {
	            document.images[i].style.filter += " progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
	        }
	    }
	}
}

function clamp(value, min, max){
	if (max < min){
		var holder = max;
		max = min;
		min = holder;
	}
	if (value < min) value = min;
	else if (max < value) value = max;
	return value;
}

function modulo(value, base){
	value = value % base;
	if (value < 0) value += base;
	return value;
}

function trace(msg){
	if (typeof(console) != 'undefined') console.log(msg);
}