var colorOn = '#EB5321';

var colorOff = '#2A1911';

var currCat = '';

var currClient = '';

var currImgs = new Array();

var currImg = 0;

var currImgSrc = '';

var introShowing = true;



function slideOut(cat){

	sliding_panel.moveTo(-1000,149);

	sliding_panel.show();

	sliding_panel.slideTo(12, 149, 400, 150, 0);

	sliding_panel.onSlideEnd = function(){

		if( cat!='' ){

			introShowing=false;

			showWork( 'worknav_'+cat )

		}

		else{

			fadeIn('work_introDiv');

		}

	}

}



function showWork( cat ){

	if( !isLoaded ) return;

	setCurrCat( cat );

	if( introShowing ){

		fadeOut( 'work_introDiv' );

		introShowing = false;

	}

	worknavOn( cat );

	clientImgNav.show();

	currClient = '';

	writeClientLinks( cat );

	writeImgBrowser();

	return false;

}



function setCurrCat( cat ){

	if( cat == 'worknav_packaging' ) currCat = 'pk';

	else if( cat == 'worknav_identity' ) currCat = 'id';

	else if( cat == 'worknav_interactive' ) currCat = 'in';

	else if( cat == 'worknav_marketing' ) currCat = 'mc';

	else if( cat == 'worknav_graphiti' ) currCat = 'ge';

}



function writeClientLinks( cat ){

	var html = '';

	var first = false;

	var hilite = '';

	for( var i=0; i<Client.all.length; i++ ){ //for each client

		client = Client.all[i];

		if( client.cats.indexOf(currCat)!=-1 ){ //client category contains currCat

			if( currClient == '' ){

				currClient = client.id;

			}

			if( currClient == client.id ){

				hilite = 'color:' + colorOn;

				displayImgFor( currClient );

			}

			html += '<p><a href="#" onclick="displayImgFor( \'' + client.id + '\' ); currClient=\'' + client.id + '\'; writeClientLinks( \' ' +cat+ ' \' ); writeImgBrowser(); return false;" style="' + hilite + '">' + client.title + '</a></p>';

			hilite = '';

		}

	}

	clients.write( html );

}



function displayImgFor( clientID, num ){

	if( !num ) num = 0;

	currImgs = new Array(); //clear current imgs array

	getImgArrayFor( clientID ); //create new imgs array

	if( currImgs[num] == undefined ) num=0;

	currImgSrc = currImgs[num];

	clientImg.write( '<img src="/images/work/' + currImgs[num] + '" alt="' + currImgs[num] + '" style="border-right:1px solid #fff;">' );

	writeDescFor( clientID, num );

	currImg = num;

}



function getImgArrayFor( clientID ){

	var cnt = 0;

	var clientImg;

	for( var i=0; i<ClientImg.all.length; i++ ){

		clientImg = ClientImg.all[i];

		if( clientImg.id == currClient && clientImg.cat == currCat ){

			currImgs[cnt] = clientImg.src;

			cnt++;

		}

	}

}



function writeDescFor( clientID, num ){

	var html = '';

	var clientImg;

	for( var i=0; i<ClientImg.all.length; i++ ){

		clientImg = ClientImg.all[i];

		if( clientImg.cat == currCat && clientImg.src == currImgSrc ) html += clientImg.desc;

	}

	projectDesc.write( '<p>' + html + '</p>' );

}



function writeImgBrowser(num){

	if( num == undefined ) num = 0;

	var hilite;

	var html = '<a href="#previous" onclick="currImg=' + currImg + '; imgGo(\'prev\'); writeImgBrowser(' + currImg +'); return false;"><img src="/images/work/arrow_left.gif" width="12" height="12" alt="" border="0" align="absmiddle"></a>&nbsp;&nbsp;'

	+ '<a href="#next" onclick="currImg=' + currImg + '; imgGo(\'next\'); writeImgBrowser(' + currImg +'); return false;"><img src="/images/work/arrow_right.gif" width="12" height="12" alt="" border="0" align="absmiddle"></a>&nbsp;&nbsp;&nbsp;';

	for( var i=0; i<currImgs.length; i++ ){

		if( currImg == i ) hilite = 'color:' + colorOn;

		html += '&nbsp;<a href="#" onclick="currImg=' + i + '; displayImgFor( \'' + currClient + '\', \'' + i + '\' ); writeImgBrowser( \'' + i + '\' ); return false;" style="' + hilite + '">' + formatNumber(i+1) + '</a>';
	
		if( i<currImgs.length-1 ) html += '&nbsp;|';
		
		hilite = '';

	}

	imgBrowser.write( html );

}



function formatNumber( num ){

	if( num < 10 ) num = "0" + num;

	return num;

}



function imgGo(mode){

	if( mode=='next' ) num=currImg+1;

	else num=currImg-1;

	if( num==-1 ) num=currImgs.length-1;

	displayImgFor( currClient, num );

}



function worknavOn( cat ){

	resetWorknavs();

	var worknavObj = document.getElementById( cat );

	worknavObj.style.color = '#BF3701';

}



function resetWorknavs(){

	document.getElementById( 'worknav_packaging' ).style.color = colorOff;

	document.getElementById( 'worknav_identity' ).style.color = colorOff;

	document.getElementById( 'worknav_interactive' ).style.color = colorOff;

	document.getElementById( 'worknav_marketing' ).style.color = colorOff;

	document.getElementById( 'worknav_graphiti' ).style.color = colorOff;

}



/* client object constructors */

function Client( id, title, cats ){

	this.id = id;

	this.title = title;

	this.cats = cats;

	Client[ this.name ] = this;

	Client.all[ Client.all.length ] = this;

}

Client.all = new Array();



function ClientImg( id, cat, src, desc ){

	this.id = id;

	this.cat = cat;

	this.src = src;

	this.desc = (desc) ? desc : '';

	ClientImg[ this.name ] = this;

	ClientImg.all[ ClientImg.all.length ] = this;

}

ClientImg.all = new Array();