var currentSelection = 1;
var currentPage = "work";
var maxNumber = 12;
var opacityTween;
var opacityTween2;
var newNumber;

var titleArray;
var descArray;
var linkArray;
var imageArray;


titleArray = ['',
			  'A Girl Story',
			  'ADIF: Falling Petals',
			  'Just Terraces',
			  'Soul NYC',
			  'Gotham Inc.',
			  'Ten One Architecture',
			  'Eddie Van Bloem',
			  'Smirnoff: Pour',
			  'Axe: Hair Crisis',
			  'Rexona: Window On Women',
			  'Saab: Blast Off',
			  'XM: Hair'];

descArray = ['',
			 'A pro-bono project wth Strawberry Frog. Users unlock portions of a short film by donating to the cause. Shortlisted at Cannes and was The FWA site of the day.<br /><br />Custom javascript functions working with the Youtube API.',
			 'Rich Media banner created with Free Association. Random particle animation and banner to banner communication.',
			 'Design and development. Extreme wordpress modification.',
			 'Development with Planet Logic.',
			 'Site refresh for Gotham. Designed and created new modules for an existing site. Cleaned up a dated look.',
			 'A classic architecture website.',
			 'Portfolio for a creative director who was looking for something more.',
			 'Flash banner animation with Free Assication.',
			 'Blog design concepts for Axe, for BBH.',
			 'Designed for Lowe New York. Created a mass of headers and color schemes, allowing users to give their blog a custom look.',
			 'Rich media concept with 3D animation, for Lowe New York',
			 'Broadcast animation for Lowe New York'];

linkArray = ['',
			 'http://www.agirlstory.org',
			 'http://www.thingsonthescreen.com/ADIF',
			 'http://www.justterraces.com',
			 'http://www.soulnyc.com',
			 'http://thingsonthescreen.com/gotham',
			 'http://tenonearchitecture.com',
			 'http://www.eddievanbloem.com',
			 'http://www.thingsonthescreen.com/smirnoff',
			 'http://thingsonthescreen.com/axeHair/',
			 'http://thingsonthescreen.com/rexona/',
			 'http://www.thingsonthescreen.com/new/JetBanner.html',
			 'http://thingsonthescreen.com/xm/hair.mov'];

imgNumArray = [0,
			   3,
			   2,
			   3,
			   2,
			   3,
			   2,
			   3,
			   1,
			   2,
			   3,
			   2,
			   2];

imgPrefixArray = ['',
			   'girl',
			   'adif',
			   'terrace',
			   'soul',
			   'gotham',
			   'tenone',
			   'eddie',
			   'smirnoff',
			   'axe',
			   'wow',
			   'saab',
			   'xm'];

function fillContent()
{
	document.getElementById("title").innerHTML=titleArray[1];
	document.getElementById("desc").innerHTML=descArray[1];
	document.getElementById("link").innerHTML='<a href="'+linkArray[1]+'" onClick="pageTracker._trackEvent(\'Linked\', \'Selected\', \''+titleArray[1]+'\');"><img src="images/view_btn.png" width="110" height="22" border="0" /></a>';
	
	if(imgNumArray[1] > 1){ // if there is more than one image
		document.getElementById("img_nav").innerHTML='<ul>';
		for (i=1; i<imgNumArray[1]+1; i++)
		{
			document.getElementById("img_nav").innerHTML+='<li><a href="#" onclick="getImage('+i+')"><img src="images/img_'+i+'.png" alt="1" width="19" height="19" border="0" /></a></li>\n';
		}
		document.getElementById("img_nav").innerHTML+='</ul>';
	}else{
		document.getElementById("img_nav").innerHTML='';
	}
		
	document.getElementById("work").innerHTML='<div class="title">Projects</div>\n<ul>';
	for (i=1; i<maxNumber+1; i++)
	{
		if(i == 1){
			document.getElementById("work").innerHTML+='<li><a id="workLink'+i+'" href="#" onclick="selectProject('+i+')"  class="current">'+titleArray[i]+'</a></li>'
		}else{	
			document.getElementById("work").innerHTML+='<li><a id="workLink'+i+'" href="#" onclick="selectProject('+i+')">'+titleArray[i]+'</a></li>';
		}
	}
	document.getElementById("work").innerHTML+='</ul>';
	Cufon.replace('#work', { });
 	Cufon.replace('#title', { });
}
fillContent();


function displayOn(shID)
{
	var newLink = shID+'Link';
	document.getElementById(newLink).className="current";
	var oldLink = currentPage+'Link';
	document.getElementById(oldLink).className="";
	
	document.getElementById(currentPage).style.display="none";
	document.getElementById(shID).style.display="block";
	currentPage = shID;
	Cufon.replace('#work', { });
 	Cufon.replace('#title', { });
}

function prevProject()
{
	if(currentSelection != 1){
		newNumber = currentSelection-1;
		selectProject(newNumber);
	}else{
		selectProject(maxNumber);
	}
}
function nextProject()
{
	if(currentSelection != maxNumber){
		newNumber = currentSelection+1;
		selectProject(newNumber);
	}else{
		selectProject(1);
	}
}
function selectProject(shID)
{
	var newLink = 'workLink'+shID;
	document.getElementById(newLink).className="current";
	var oldLink = 'workLink'+currentSelection;
	document.getElementById(oldLink).className="";
	currentSelection = shID;
	fadeOutWork(shID);
}
function loadNewContent(shID)
{
	
}
function getImage(num)
{
	var screenTween = new OpacityTween(document.getElementById('screen_on'),Tween.regularEaseInOut, 100, 0, .5);
	screenTween.start();
	screenTween.onMotionFinished = function(){
		document.getElementById("screen_on").innerHTML='<img src="images/work/'+imgPrefixArray[currentSelection]+'_'+num+'.jpg" width="322" height="185" alt="project" /></div>';
		screenTween = new OpacityTween(document.getElementById('screen_on'),Tween.backEaseOut, 0, 100, .5);
		screenTween.start();
	}
    
}
function fadeOutWork(shID)
{
	opacityTween = new OpacityTween(document.getElementById('project'),Tween.regularEaseInOut, 100, 0, 1);
	opacityTween.start();
	var screenTween = new OpacityTween(document.getElementById('screen_on'),Tween.regularEaseInOut, 100, 0, 1);
	screenTween.start();
	var imgNavTween = new OpacityTween(document.getElementById('img_nav'),Tween.regularEaseInOut, 100, 0, 1);
	imgNavTween.start();
	
	opacityTween.onMotionFinished = function(){
		document.getElementById("title").innerHTML=titleArray[shID];
		document.getElementById("desc").innerHTML=descArray[shID];
		document.getElementById("link").innerHTML='<a href="'+linkArray[shID]+'" onClick="pageTracker._trackEvent(\'Linked\', \'Selected\', \''+titleArray[shID]+'\');"><img src="images/view_btn.png" width="110" height="22" border="0" /></a>';
		if(imgNumArray[shID] > 1){ // if there is more than one image
			document.getElementById("img_nav").innerHTML='<ul>';
			for (i=1; i<imgNumArray[shID]+1; i++)
			{
				document.getElementById("img_nav").innerHTML+='<li><a href="#" onclick="getImage('+i+')"><img src="images/img_'+i+'.png" alt="1" width="19" height="19" border="0" /></a></li>\n';
			}
			document.getElementById("img_nav").innerHTML+='</ul>';
		}else{
			document.getElementById("img_nav").innerHTML='';
		}
		Cufon.replace('#title', { });
		document.getElementById("screen_on").innerHTML='<img src="images/work/'+imgPrefixArray[currentSelection]+'_1.jpg" width="322" height="185" alt="project" /></div>';
		opacityTween2 = new OpacityTween(document.getElementById('project'),Tween.regularEaseInOut, 0, 100, 1);
		opacityTween2.start();
		screenTween = new OpacityTween(document.getElementById('screen_on'),Tween.backEaseOut, 0, 100, 1);
		screenTween.start();
		imgNavTween = new OpacityTween(document.getElementById('img_nav'),Tween.regularEaseInOut, 0, 100, 1);
		imgNavTween.start();
	}
	
}