//Global Variables
var thumbnailNum = 15; //set to however many portfolio pieces you want to show
var activeThumb = 0;
var hoverIndex = 0;
var howFarLeft = 0;
var yourLink = 'http://www.colourfulstrokes.com/oldsite/index.htm';//add link url here
var linkName = 'old website';//add link name here

var descriptionArray = new Array(thumbnailNum); //array of descriptions for each piece
var hoverBox = new Array(thumbnailNum); //array of balloon text


//create thumbs
$(document).ready(function(){
	for(i=0; i<thumbnailNum; i++)
	{
		$('#thumbs').append("<div class='thumbnail'>\
				<img src='images/portfolio/thumbs/thumb" + (1+i) + ".png' alt='' /></div>"); //loads the thumbnails
	}
	
	$('.thumbnail').eq(0).addClass('active'); //*makes first thumbnail active
	$('.thumbnail').eq(0).before("<div class='hoverBox'></div>"); //inserts the balloon in the page
	$('#pieceTitle').html("<img class='pieceTitle' src='images/portfolio/title/title" + activeThumb + ".png' alt='' />");
});

//load large image
$(document).ready(function(){
	$('.thumbnail').click(function(){
		activeThumb = $('.thumbnail').index(this); //sets activeThumb variable so other scripts know which one is active
		changePiece(); //calls function to change portfolip piece
	});
		$('.thumbnail:last').after("<div id='linkList'>Check out my <a href='"+ yourLink + "' target='_blank'>" + linkName + "</a> for more designs, prototypes, flash demos and paintings.</div>");


});

//changes portfolio piece
function changePiece()
{
	$('#portfolioPiece').attr('src', 'images/portfolio/portfolioPieces/project'+(activeThumb+1)+'.jpg'); //changes portfolio piece
	$('#descriptionCopy').text(descriptionArray[activeThumb])
	$('.thumbnail').removeClass('active'); //makes previous thumbnail unactive
	$('.thumbnail:eq(' + (activeThumb) +')').addClass('active'); //makes new thumbnail active
	$('#pieceTitle').html("<img class='pieceTitle' src='images/portfolio/title/title" + activeThumb + ".png' alt='' />");
	$('.pieceTitle').fadeIn('fast');
	
	
	console.log($('.pieceTitle'));
}


$(document).ready(function(){
$('#portfolioPiece').click(function(){
	fullScreen();
	});
});

function fullScreen()
{
	window.open('project' + (activeThumb+1) + '.html', 'fullscreen');
}

//function for next/previous controls
$(document).ready(function(){
	$('#previous').click(function(){
		previous()
	});
	
	$('#next').click(function(){
		next()
	});
});

//previous
function previous()
{
	if(activeThumb>0)
	{
		activeThumb--;//progresses backwards through the portfolio pieces and thumbnails
	}
	else
	{
		activeThumb=thumbnailNum-1; //once you've reached the first piece, go to the end
	}
	changePiece();
}

//next
function next()
{
	if(activeThumb<thumbnailNum-1){
		activeThumb++; //progresses forward through the portfolio pieces and thumbnails
	}
	else
	{
		activeThumb=0;// once you've reached the last piece, go to the begining
	}
	changePiece();
}

//hover info
$(document).ready(function()
{
	$('.thumbnail').mouseover(function()
	{
		hoverIndex = ($('.thumbnail').index(this)); //sets variable to the index of the thumb you're hovering over
		balloon();
	});
	$('.thumbnail').mouseout(function()
	{
		$('.hoverBox').hide(); // hides the balloon

	});
});

function balloon()
{
	/*if($('.thumbnail').eq(hoverIndex).position().left>335) // makes sure it doesn't go too far right
	{
		howFarLeft=335; //limit
	}
	else
	{
		*/
	howFarLeft = Math.ceil($('.thumbnail').eq(hoverIndex).position().left)+40;
	//gets position of thumbnail and sets variable to that
	//}
	
	$('.hoverBox').fadeIn(200);//fades the balloon in
	$('.hoverBox').css('left', howFarLeft);	//aligns balloon with thumbnail (left)
	$('.hoverBox').css('top', ($('.thumbnail').eq(hoverIndex).position().top)-40);	//aligns balloon with thumbnail (top)
	$('.hoverBox').text(hoverBox[hoverIndex]); //sets the balloons text to whatever you set it in the array below
	
}

$(document).ready(function()
{
	$('#next').hover(function(){
		$(this).attr('src', 'images/next_hover.png')}, function(){$(this).attr('src', 'images/next.png') ;
	});
	
	$('#previous').hover(function(){
		$(this).attr('src', 'images/previous_hover.png')}, function(){$(this).attr('src', 'images/previous.png') ;
	});
});

//array of description text
descriptionArray[0] = "Designed and developed multiple projects using W3C standards for myTELUS.com, Globetrotter.net and TELUS.com that provided interactive components to customers. TELUS IP Messaging application was one of the key projects.";
descriptionArray[1] = "myTELUS.com 2.0: allowed users to customise the Web portal according to their needs.  I was part of the wireframe and design team. During the wireframe and design process, we tried to incorporate elements of Web 2.0 such as Search, Links, Authoring, Tags, Extensions and Signals.";
descriptionArray[2] = "Maayatheevu is a animated Tamil CD ROM developed for Ministry of Education-Singapore. I was responsible for in-between drawing, Ink and paint and Rendering.";
descriptionArray[3] = "Designer and HTML intergrater for Spiderman 3 microsite and mobile interface.";
descriptionArray[4] = "Applied user centered design methodology to create detailed user experience strategy documents in support of enterprise web/TV/mobile applications and portals. Worked on the TELUS TV project for over a year creating GUI.";
descriptionArray[5] = "Worked as a Flash designer for Avaya Singapore, creating Flash demos to educate users to better understand  and to use Avaya Intranet Tools.";
descriptionArray[6] = "Designer and HTML intergrater for Canadian Idol microsite and mobile interface. Created content for Web/Tv and Mobile interface.";
descriptionArray[7] = "myTELUS Photos:  allowed users to upload, tag, share, edit and print photos.  I was part of the design and development team for this bilingual (English/French) site.";
descriptionArray[8] = "Developed micro websites highlighting the features of enterprise portal solutions of Oracle for different user perspectives using Flash.";
descriptionArray[9] = "Designed and Integrated a mircosite for Quebec Junior Hockey League and TELUS. Assisted them in setting up online Brand Identity. This site allows users to search and watch games online (English and French).";
descriptionArray[10] = "Involved in reengineering of Consumer Internet Banking Portal for OCBC, by applying Best Practices for User experience and conducting focus group to deliver a better online experience.";
descriptionArray[11] = "Designed and Integrated a mircosite for Mastercard Memorial Cup -2009 with a tight deadline to webcast the matches LIVE (English and French).";
descriptionArray[12] = "Mobile WAP design for Indiana Jones (English and French).";
descriptionArray[13] = "Worked on more the 50 Mobile WAP design like Metallica, Depeche Mode, Fall Out Boys, No Doubt, Tragically Hip, ACDC, Eva Avila, Girlicious, The Killers, Nickel Back, Sugarland, etc...";
descriptionArray[14] = "Online contest form for ACDC (English and French).";

//array of hoverBox Text
hoverBox[0] = "IP Messaging Application for TELUS.com";
hoverBox[1] = "Music - myTELUS.com 2008";
hoverBox[2] = "Maayatheevu- Tamil CD ROM";
hoverBox[3] = "Spiderman 3 microsite for myTELUS.com";
hoverBox[4] = "Graphic User Interface Design for TELUS TV";
hoverBox[5] = "Flash Demo for Avaya Singapore";
hoverBox[6] = "Canadian Idol microsite and Mobile FX";
hoverBox[7] = "Photos- myTELUS.com (English/French)";
hoverBox[8] = "Marketing Flash Demo for Oracle Asis Pacific";
hoverBox[9] = "QJHML microsite for Globetrotter.net";
hoverBox[10] = "Secure site transcation design for OCBC Singapore";
hoverBox[11] = "Microsite for Memorial Cup 2009 LIVE streaming";
hoverBox[12] = "Indiana Jones Mobile FX for TELUS Mobility";
hoverBox[13] = "Mobile FX for TELUS Mobility";
hoverBox[14] = "ACDC Mobile FX and Contest design";