/*

GLOBALS

*/

var totalImagesLoaded = 0;
var aryProjectIdByImageIndex = new Array();
var lastProjectID=null;
var filterWorkList = "all";
var projectView = "detail"
//var baseUrlAjax = "http://www.mayostudios.com/dev09/common/ajax/";
//var baseUrlAjax = "http://localhost/ms/common/ajax/";
var onLoadProjectId = 0;

/* 

START jQUERY 

note: api.getConf().loop=true

*/
$(function(){	

	/*
	
	PROJECT ID
	
	- if we come in from work.php, we're passing a projectId
	- check querystring for projectID and store it
	
	*/
	var tempProjectId = $.getURLParam('projectId');
	if (tempProjectId != null) {
		onLoadProjectId = tempProjectId;
	}
	
	/*
	
	FILTER
	
	- if we come in from work.php, we're passing a filter
	- check querystring for filter and store it
	
	*/
	var tempFilter = $.getURLParam('filter');
	if (tempFilter != null) {
		filterWorkList = tempFilter;
	}
	
	/*
	
	PROJECT VIEW TYPE
	
	- if we come in from work.php, we're passing the viewType
	- check querystring for filter and store it
	
	*/
	var tempViewType = $.getURLParam('view');
	if (tempViewType != null) {
		projectView = tempViewType;
	}
	
 	/*
 	
 	Q2 SCROLLER
 	
 	- initialize scrollable , and create API handle
 	
 	*/
 	
 	if ($("body").hasClass("home") || $("body").hasClass("2010cal")) {
	
		var api = $(".scroller").scrollable({ 
			api: true,		
			items: ".pages",		
			next: '#paddle-shift-right img', 		
			prev: '#paddle-shift-left img',		
			navi: "#pager",		
			naviItem: "li",	
			activeClass: "on",	
			disabledClass: "off",
			size: 1,		
			easing: 'easeInOutExpo', 		
			clickable: false,		
			keyboard: true,		
			interval: 8500, 		
			loop: true,  
			speed: 1200, 		
			onBeforeSeek: function() { 		
				this.getItems().fadeTo(600, 0);															
			}, 		 
			onSeek: function() { 						
				var curItem = this.getItems()[this.getIndex()];				
				$(curItem).fadeTo(500, 1); 				
				var curItemIndex = parseInt(this.getIndex());					
				updatePager(curItemIndex);			
				var teamProjectInfo = $("#pager li[class='on']").attr("id");				
				loadProjectInfo(msProjectsHome,teamProjectInfo);
			}
		});
 	
 	} else {
	
		var api = $(".scroller").scrollable({ 
			api: true,		
			items: ".pages",		
			next: '#paddle-shift-right img', 		
			prev: '#paddle-shift-left img',		
			navi: "#pager",		
			naviItem: "li",	
			activeClass: "on",	
			disabledClass: "psoff",
			size: 1,		
			easing: 'easeInOutExpo', 		
			clickable: false,		
			keyboard: true,			
			loop: false,  		
			speed: 1200, 		
			onBeforeSeek: function() { 		
				this.getItems().fadeTo(600, 0);															
			}, 		 
			onSeek: function() {
				var curItem = this.getItems()[this.getIndex()];	
				$(curItem).fadeTo(500, 1); 				
				var curItemIndex = parseInt(this.getIndex());					
				var itemsLen = parseInt(this.getItems().length);			
				var projectID = getProjectByImageIndex(curItemIndex);	
				if (projectID != lastProjectID){
					loadProjectInfo(msProjects,projectID); // let loadProject know the page isn't reloading
					buildPager(projectID);
				}
				lastProjectID=projectID;					
				updatePager(curItemIndex);
				if ($("body").hasClass("team")) {				
					var teamProjectInfo = $("#pager li[class='on']").attr("id");				
					loadProjectInfo(msTeam,teamProjectInfo);
				}				
			}
		});	
	}
	
	
	/*
	
	LOAD IMAGES FOR HOME 
	
	*/
	if ($("body").hasClass("home")) {
		loadProjectInfo(msProjectsHome,100);
		$("#pager li").click(function(){
			loadProjectInfo(msProjectsHome,$(this).attr("id"));
		});
	}
	
	/*
	
	LOAD IMAGES FOR TEAM PAGE
	
	- todo: add in an msProjectsTeam JSON
	
	*/
	if ($("body").hasClass("team")) {
		loadProjectInfo(msTeam,200);
		$("#pager li").click(function(){
			loadProjectInfo(msTeam,$(this).attr("id"));
		});
	}
	
	/*
	
	LOAD WORK LIST ON WORK.PHP
	
	*/
	if ($("body").hasClass("work")) {
		loadProjectList(msProjects,filterWorkList);
	}
	
	/*
	
	WORK LIST FILTER
	- Check for filter link click and store the value
	
	*/
	$("#filters a").click(function(){
		filterWorkList = $(this).attr("href").split("#",2)[1];
		loadProjectList(msProjects,filterWorkList);
		if ($(this).parent("li").parent("ul").hasClass("filters")) {
			$("#filters ul").hide();	
			$("#filters a").removeClass("on");		
		}	
		if ($(this).parents("ul").hasClass("filters")) {
			$("#filters ul a").removeClass("on");		
		}
		$(this).addClass("on");		
		$(this).parent("li").children("ul").show();				
		var numImages = $(".page").length;
		$("#pager").empty();
		var str = "";
		for (var i = 0; i < numImages; ++i) {
			$("<li/>").html(i+1).appendTo("#pager");
		}
		$("#pager li:first").addClass("on");	
		api.reload().begin();
		return false	
	});

	/*
	
	LOAD PROJECT IMAGES
	
	- onload get project 1 and 2
	- when hit next at end of 1 get 3, hit next at end of 2 get 4
	
	*/
		
	if ($("body").hasClass("projects")) {
		$("body").addClass(projectView);
		loadProjects(msProjects,filterWorkList);		
		api.seekTo(getImageIndexByProjectId(onLoadProjectId));
		$("#q2 .pages").hide();	
		setTimeout('$("#q2 .pages").fadeIn(1200)',200);	
		
	}
	

	/*
	
	PADDLE SHIFT: HOVER
	
	*/	
	$(".paddle-shift").hover(
		function () {
			$(this).addClass("pshover");
		}, 
		function () {
			$(this).removeClass("pshover");
		}
	);	
	

	
	
	/*
	
	Q1 Toggler
	
	*/
    $("#q1 #toggler").click(function(){    
    	if (toggleQ1.isClosed()) {
    		toggleQ1.open();
		} else {
    		toggleQ1.close();
		}
		return false;
    });
    
    
 });

/*

LOADING PROJECTS

*/

function loadProjectImages(project){			
	var projectId = project.projectId;
	var images = project.images;	
	$.each(images, function(i,image){
		var imageSrc = image.imgSrc;	
		aryProjectIdByImageIndex[totalImagesLoaded]=projectId;
		$("#q2 .pages").append('<div class="page"><img src="'+imageSrc+'" alt="" /></div>');
		totalImagesLoaded++;
	});	
 }
 
function loadProjectInfo(projectJSON, projectId){		
	var projects = projectJSON.projects;		
	$.each(projects, function(i,project){	
		if (project.projectId == projectId) {		
			var internalProjectId = project.projectId;	
			var clientName = project.clientName;
			var viewType = project.viewType;	
			var titleImageSrc = project.titleImage.imgSrc;
			var titleImageAlt = project.titleImage.alt;
			var titleImageHeight = project.titleImage.height;
			var brief = project.brief;
			var images = project.images;
			var verbose = project.verbose;
			var awards = project.awards;
			var awardsLen = awards.length;
			var fadeInRate = 1200;
			if (!$("body").hasClass(viewType)) {
				toggleQ1.open();
				if (viewType == "detail"){	
					setTimeout('$("body").addClass("detail")', 100);
					setTimeout('$("body").removeClass("casestudy")', 200);	
				} else if (viewType == "casestudy") {
					setTimeout('$("body").addClass("casestudy")', 100);	
					setTimeout('$("body").removeClass("detail")', 0);	
				}
			}
			if (!$("body").hasClass("team")) {	
				$("#title h2").hide().html($("<img/>").attr("src", titleImageSrc).attr("alt", clientName).attr("title", clientName).css("height",titleImageHeight)).fadeIn(fadeInRate);			
				$("#brief").hide().html(brief).fadeIn(fadeInRate);
			}
			$("#q3").empty();						
			if (verbose != "") {
				$("#q3").hide().html(verbose).fadeIn(fadeInRate);
			}	
			if ((awardsLen > 0) && (project.awards[0].url != "")) {
				var awardStr = '<div class="awards clearfix">'; //<h3>Awards</h3>
				$.each(awards, function(i,award){
					var awardUrl = award.url;
					var awardText = award.text;
					var awardImg = award.imgSrc;					
					awardStr += '<a href="'+awardUrl+'" target="_blank" alt="'+awardText+'" title="'+awardText+'"><img src="'+awardImg+'" /></a>';
				});				
				awardStr += '</div>';
				$("#q4").hide().append(awardStr).fadeIn(fadeInRate);
			} else {
				$("#q4").empty();
			}	
			// since we found a match, we can exit the each loop
			return false;
		}		
	});
 }

// loop through projects obj and pass reference to each obj to loadProjectImages
function loadProjects(projectJSON,filter){	
	var projects = projectJSON.projects;	
	$.each(projects, function(i,project){
		var projectId = project.projectId;
		var projectType = project.projectType;						
		var subFilter = project.subFilter;			
		if ((filter == "all") || (projectType == filter) || (subFilter == filter)) {
			loadProjectImages(project);
		}
	});
}

// will add params: clientID, Tags, etc to support filtering, only used on work.php
function loadProjectList(projectJSON,filter){	
	//alert(filter);
	// empty Q2
	$("#q2 .pages").empty();
	// open first page of thumbnails
	var str = '<div class="page">';		
	var projects = projectJSON.projects;	
	var loopCount = 0;
	$.each(projects, function(i,project){
		// set local scope vars
		var clientName = project.clientName;
		var projectName = project.projectName;
		var projectId = project.projectId;
		var thumbPath = project.thumbPath;
		var projectType = project.projectType;					
		var subFilter = project.subFilter;			
		var viewType = project.viewType;
		if ((filter == "all") || (projectType == filter) || (subFilter == filter)) {			
			// create thumbnail
			//str += '<a href="project.php?projectId='+projectId+'&amp;filter='+filter+'&amp;view='+viewType+'" class="thumb-project">';
			str += '<a href="project.php?projectId='+projectId+'&amp;filter='+filter+'" class="thumb-project">';
			str += '<img src="'+thumbPath+'" alt="" />';
			str += '<span class="client">'+clientName;
			str += '<span class="type">'+projectName+'</span></span>';
			str += '</a>';
			// create new page every 12 thumbnails
			if (((loopCount+1) % 12) == 0){
				str +=  '</div><div class="page">';
			}					
			loopCount++;	
		}	
	});	
	// close last page of thumbnails
	str += '</div>';	
	// write pages of thumbnails to Q2, delay showing the thumbs until the fader has started to avoid a double flash
	$("#q2").css("background-color","#000").css("background-image","none");
	$("#q2 .pages").html(str).hide();
	setTimeout('$("#q2 .pages").fadeIn(1000)',550);
}

// function toggleQ1 animates the opening and closing of the Q1 quadrant
toggleQ1 =  {
	animInterval: 1000,
	timeoutInterval: 600,
	isClosed: function(){
		if ($("#drawer").hasClass("closed")) {
			return true;
		} else {
			return false;
		}
	},
	open: function(){
		$("#drawer").animate({left: 0}, toggleQ1.animInterval, "easeInOutExpo", function(){$("#drawer").removeClass("closed")} );
		setTimeout('$("#q1 #toggler").removeClass("open")',toggleQ1.timeoutInterval);
	},
	close: function(){
		$("#drawer").animate({left: -300}, toggleQ1.animInterval, "easeInOutExpo", function(){$("#drawer").addClass("closed")} );	
		setTimeout('$("#q1 #toggler").addClass("open")',toggleQ1.timeoutInterval);
	}	
}

/*

SCROLLER API CALLS

*/
// updatePages is used by loadProjectList. The HTML already contains hardcoded pager LIs.
function updatePages(numImages) {
	$("#pager").empty();
	var str = "";
	for (var i = 0; i < numImages; ++i) {
		$("<li/>").html(i+1).appendTo("#pager");
	}
	$("#pager li:first").addClass("on");
}
function goToImage(imgIndex) {
	var api = $(".scroller").scrollable();
	api.seekTo(imgIndex); 
}
 
/*

CUSTOM PROJECT VIEW PAGER

- ms-pager: custom pager used by loadProject

*/
function buildPager(projectId) {
	var str = "";
	var count = 1;
	var className = 'class="on"';
	for (var i = 0; i < aryProjectIdByImageIndex.length; ++i) {
		if (aryProjectIdByImageIndex[i] == (projectId)) {
			str+='<li title="'+(i)+'">'+count+'</li>';
			count++			
		}
	}
	$("#ms-pager").empty();
	$("#ms-pager").html(str);
	var aryPager = $("#ms-pager li");
	$(aryPager[0]).addClass("on");
	bindPager();
}
function bindPager() {
	$("#ms-pager li").click(function(){
		$("#ms-pager li").removeClass("on");
		$(this).addClass("on");		
		var aryPager = $("#ms-pager li");		
		var pageIndex = parseInt($(this).attr("title"));
		goToImage(pageIndex);
	});
}
// updatePager is triggered from the scroller onSeek callback
function updatePager(curItem) {
	$("#ms-pager li.on").removeClass("on");
	$("#ms-pager li[title='"+curItem+"']").addClass("on");
}	

/*

IMAGE/PROJECT MAPPINGS

*/
 
// getProjectByImageIndex returns a project ID
function getProjectByImageIndex(imageIndex) {
	if (aryProjectIdByImageIndex[imageIndex] != '') {
		return aryProjectIdByImageIndex[imageIndex];
	} else {
		return null;
	}
}

// getImageIndexByProjectId returns the first image in the series related to the current project
function getImageIndexByProjectId(projectId) {
	for (var i = 0; i < aryProjectIdByImageIndex.length; ++i) {
		if (aryProjectIdByImageIndex[i] == (projectId)) {
			return i;
		}
	};
}

/*

SLIDE/FADE EASING FORMULA

*/
$.easing.easeInOutExpo = function (x, t, b, c, d) {
	if (t==0) return b;
	if (t==d) return b+c;
	if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
	return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
}


/*

GET QUERYSTRING PARAMS

- If the desired param does not exist, null will be returned
- @example value = $.getURLParam("paramName");

*/ 
jQuery.extend({
 getURLParam: function(strParamName){
	  var strReturn = "";
	  var strHref = window.location.href;
	  var bFound=false;
	  
	  var cmpstring = strParamName + "=";
	  var cmplen = cmpstring.length;

	  if ( strHref.indexOf("?") > -1 ){
	    var strQueryString = strHref.substr(strHref.indexOf("?")+1);
	    var aQueryString = strQueryString.split("&");
	    for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
	      if (aQueryString[iParam].substr(0,cmplen)==cmpstring){
	        var aParam = aQueryString[iParam].split("=");
	        strReturn = aParam[1];
	        bFound=true;
	        break;
	      }
	      
	    }
	  }
	  if (bFound==false) return null;
	  return strReturn;
	}
});