//define thumb line object
function thumline (display,category,link,label,thumb) {
	this.length = 6;
	this.disp = display;
	this.cat = category;
	this.lnk = link;
	this.lbl = label;
	this.thm = thumb;
}
//Make Array of Images and Descriptions
var thumbs = new Array(34);
thumbs[0] = 34;

thumbs[1]  = new thumline(true,"web","projweb","web development&nbsp;<br>&nbsp;projects","cordus-thm.jpg");
thumbs[2]  = new thumline(true,"web","preslot","lotus notes&nbsp;<br>&nbsp;and domino&nbsp;<br>&nbsp;applications","duf-thm.gif");
thumbs[3]  = new thumline(true,"web","http://www.jackrosenphotos.com/","website for&nbsp;<br>&nbsp;Jack Rosen&nbsp;<br>&nbsp;Photos","jrosen-thm.jpg");
thumbs[4]  = new thumline(true,"web","http://www.breakfreedesigngroup.org/","website for&nbsp;<br>&nbsp;Breakfree<br>&nbsp;Design Group","breakfree-thm.jpg");
thumbs[5]  = new thumline(true,"web","http://www.gdunnous.com/","website for&nbsp;<br>&nbsp;Dunnous &&nbsp;<br>&nbsp;Associates","gzd-thm.jpg");
thumbs[6]  = new thumline(true,"web","http://www.helenwmallon.com/","website for&nbsp;<br>&nbsp;Helen W Mallon&nbsp;<br>&nbsp;writer","hmallon-thm.jpg");
thumbs[7]  = new thumline(true,"web","http://www.strobelightproductions.net/","website for&nbsp;<br>Strobe Light<br>Productions","slambe-thm.jpg");
thumbs[8]  = new thumline(true,"web","http://www.jubileefund.org/","website for&nbsp;<br>&nbsp;Children's&nbsp;<br>&nbsp;Jubilee Fund","cjf-thm.jpg");
thumbs[9]  = new thumline(true,"web","http://www.jlgarch.com/","website for&nbsp;<br>&nbsp;Jeffrey L Grogan&nbsp;<br>&nbsp;architects","jlgarch-thm.jpg");
thumbs[10] = new thumline(true,"web","http://www.donaldwilliams.net/","website for&nbsp;<br>&nbsp;Donald Williams&nbsp;<br>&nbsp;saxophonist","dtm-thm.gif");
thumbs[11] = new thumline(true,"web","http://www.cordusmundi.com/","website for&nbsp;<br>&nbsp;Cordus Mundi&nbsp;<br>&nbsp;male a cappella","cordus-thm.jpg");
thumbs[12] = new thumline(true,"web","http://www.johnteetsarchitect.com/","website for&nbsp;<br>&nbsp;John Teets&nbsp;<br>&nbsp;architect","jta-thm.jpg");
thumbs[13] = new thumline(true,"web","http://www.archimg.com/pettyskiffs/","website for&nbsp;<br>&nbsp;Petty Skiffs","pettyskiffs-thm.jpg");
thumbs[14] = new thumline(true,"web","http://www.archimg.com/inx/Home00.htm","website for&nbsp;<br>&nbsp;InterNetEx Inc.","inx-thm.gif");
thumbs[15] = new thumline(true,"web","http://www.kingdomgospelministries.org/","website for&nbsp;<br>&nbsp;Kingdom Gospel&nbsp;<br>&nbsp;Ministries","kgm-thm.jpg");
thumbs[16] = new thumline(true,"web","http://www.archimg.com/hamburger/index.html","website for&nbsp;<br>&nbsp;Hamburger Color&nbsp;<br>&nbsp;Company","ham-thm.gif");

thumbs[17] = new thumline(true,"arc","projass","places of&nbsp;<br>&nbsp;assembly","CBC20A-thm.jpg");
thumbs[18] = new thumline(true,"arc","projhea","health care&nbsp;<br>&nbsp;and veterinary","ani-vsds-021-thm.jpg");
thumbs[19] = new thumline(true,"arc","projcom","commercial","sola12-thm.jpg");
thumbs[20] = new thumline(true,"arc","projint","interior design","DS08-thm.jpg");
thumbs[21] = new thumline(true,"arc","projres","residential","fm18-thm.jpg");
thumbs[22] = new thumline(true,"arc","presray","raytraced&nbsp;<br>&nbsp;presentations","DB5c-thm.jpg");
thumbs[23] = new thumline(true,"arc","presren","rendered&nbsp;<br>&nbsp;presentations","P06a-thm.jpg");
thumbs[24] = new thumline(false,"arc","pressha","quick shaded&nbsp;<br>&nbsp;presentations","pyr-thm.jpg");
thumbs[25] = new thumline(false,"arc","preshid","hidden line&nbsp;<br>&nbsp;drawings","FM2-thm.jpg");

thumbs[26] = new thumline(true,"mul","presani","animation","ani-cbc20-4-thm.jpg");
thumbs[27] = new thumline(true,"mul","pressli","flash slideshows","PT10-thm.jpg");
thumbs[28] = new thumline(MSIE,"mul","preso2c","interactive&nbsp;<br>&nbsp;3D models","o2c-DB04-thm.jpg");
thumbs[29] = new thumline(true,"mul","prespho","photography","wa02-thm.jpg");
thumbs[30] = new thumline(true,"mul","projmus","music","Beethoven-SM-thm01.jpg");
thumbs[31] = new thumline(true,"mul","SonicSandbox","sonic sandbox&nbsp;<br>&nbsp;sound player","sandbox-thm.jpg");
thumbs[32] = new thumline(true,"mul","projima","imagination","TF10-thm.jpg");
thumbs[33] = new thumline(true,"mul","projdig","digital design","thm-Tshirt-grasp.jpg");



//category constructor
function catline (category,background,label,blurb){
	this.length=5;
	this.cat=category;
	this.bkg=background;
	this.lbl=label;
	this.blb=blurb;
}

var cats=new Array(4);
cats[0]=4;
cats[1]=new catline("web","bkg-cordus-brown.jpg","Web Development","Hand coded websites and applications are CSS and javascript driven with flash components. &nbsp; Testing is done for pixel-accurate uniformity across all major browsers and operating systems.");
cats[2]=new catline("arc","bkg-sola-blue.jpg","Architectural Illustration","Rendered or raytraced images are generated from views of precisely placed virtual cameras in carefully constructed 3D CAD models with accurate materials and lighting conditions.");
cats[3]=new catline("mul","bkg-brown-drumbot.jpg","Multimedia/Graphic Arts","Translation of human experience and imagination into something that can be seen and heard.");


function fillTabs(tabactive){
	var prevactive=false;
	var elemid="";
	var preid="";
	var preclass="";
	var cname="";
	var cstr="";
	for(i=1;i<cats[0];i++){
		elemid='tab'+ i;
		preid='tab' + (i-1) + '' + i;
		if(tabactive==i){
			preclass=(i==1) ? 'tab1o' : 'tab2co';
			cname='tab0o';
			cstr='<b>' + cats[i]["lbl"].toUpperCase() + '</b>';
			prevactive=true;
		}else{
			preclass=(i==1) ? 'tab1c' : (prevactive) ? 'tab2oc' : 'tab2cc';
			cname='tab0c';
			cstr='<a style="padding:3px 6px 3px 6px;" href="javascript:void(0);" onClick="fillTabs(' + i + ');">' + cats[i]["lbl"].toUpperCase() + '</a>';
			prevactive=false;
		}
		document.getElementById(elemid).className=cname;
		document.getElementById(elemid).innerHTML=cstr;
		document.getElementById(preid).className=preclass;
	}
	preid='tab30';
	preclass=(prevactive) ? 'tab3o' : 'tab3c';
	document.getElementById(preid).className=preclass;

	var cat=(tabactive==1) ? "web" : (tabactive==2) ? "arc" : "mul";
	fillThumbRow(cat);
}

function countThumbs(cat){
	var thumbcount=0;
	for(i=1;i<thumbs[0];i++){
		if(cat==thumbs[i]["cat"]) thumbcount++
	}
	return thumbcount;
}

function getCat(cat){
	for(i=1;i<cats[0];i++){
		if(cats[i]["cat"]==cat){
			return i;
			break;
		}
	}
	return 1;
}
//////////////////////////////////////////////////////////////////////
var thumbswide=0;

function fillThumbRow(cat){
	var str='';
	thumbswide=0;
	scrolling=true;
	str += '<div><table cellpadding=0 cellspacing=0 class="doc11" style="text-align:center;">';
	str += '<tr valign="top">';
	for(i=1;i<thumbs[0];i++){
		if(thumbs[i]["cat"]==cat && thumbs[i]["disp"]){
			thumbswide += 120 + 16;
			str += '<td width="136" style="padding-top:4px;">';
			if(thumbs[i]["lnk"].indexOf("http")!=-1){
				str += '<a href="' + thumbs[i]["lnk"] + '" target="_new" ';
			}else{
				str += '<a href="' + thumbs[i]["lnk"] + '.htm" ';
			}
			str += 'style="text-decoration:none;">';
			str += '<img src="thumbs/' + thumbs[i]["thm"] + '" class="imgoff" ';
			str += 'onMouseover="this.className=\'imgonblue\';" onMouseout="this.className=\'imgoff\';">';
			str += '<br><span style="padding:0px 4px 4px 4px;">' + thumbs[i]["lbl"] + '</span>';
			str += '</a>';
			str += '</td>';
		}
	}
	str += '</tr></table></div>';
	var bkgimg='url(thumbs/' + cats[getCat(cat)]["bkg"] + ')';
	document.getElementById("blurb").innerHTML=cats[getCat(cat)]["blb"];
	document.getElementById("thumbs").style.width=thumbswide + 'px';
	document.getElementById("thumbs").style.left='0px';
	document.getElementById("thumbs").innerHTML=str;
	document.getElementById("thumbkg").style.background=bkgimg;
}

//////////////////////////////////////////////////////////////////////

var scrolling=false;
var scrollimit;
var toleft;
var toright;

function scrollLeft(pos){
	if(pos<1 && scrollimit<0 && scrolling){
		pos+=5;
		document.getElementById("thumbs").style.left=(pos) + "px";
		toleft=setTimeout("scrollLeft(" + pos + ")",20)
	}
}

function scrollRight(pos){
	if(pos>scrollimit-10 && scrolling){
		pos-=5;
		document.getElementById("thumbs").style.left=(pos) + "px";
		toright=setTimeout("scrollRight(" + pos + ")",20)
	}
}

function stopScroll(){
	clearTimeout(toleft);
	clearTimeout(toright);
}

function getMousePos(event){
	x=event.clientX;
	y=event.clientY;

	var thmboxwide=document.body.parentNode.clientWidth - 24;
	//var thmboxwide=document.getElementById("thumbox").style.width;
	//thmboxwide=thmboxwide.substring(0,thmboxwide.indexOf("px"));
	//thmboxwide=Number(thmboxwide);

	var clientwide=document.body.parentNode.clientWidth;

	var thumbsleft=document.getElementById("thumbs").style.left;
	thumbsleft=thumbsleft.substring(0,thumbsleft.indexOf("px"));
	thumbsleft=Number(thumbsleft);

	var thmboxleftmargin=(clientwide-thmboxwide)/2;
	thmboxleftmargin=Math.round(thmboxleftmargin);

	var nupos=x-thmboxleftmargin;
	scrollimit=thmboxwide-thumbswide;

	//stats(x,y,scrollimit,clientwide,thumbsleft,thmboxwide,thmboxleftmargin,nupos);

	if(nupos>(0.8 * thmboxwide)){ //scroll right
		scrollRight(thumbsleft);
	}else{
		clearTimeout(toright);
	}

	if(nupos<(0.2 * thmboxwide)){ //scroll left
		scrollLeft(thumbsleft);
	}else{
		clearTimeout(toleft);
	}
}

///////////////////////////////
function stats(x,y,scrollimit,clientwide,thumbsleft,thmboxwide,thmboxleftmargin,nupos){
	var str="mouse position: ";
	str += 'x=' + x;
	str += ' y=' + y;
	//str += '<br>thumbox left margin=' + thmboxleft;
	//str += '<br>screen width=' + scrwide;
	//str += '<br>screen avail=' + scravail;
	str += '<br>client width = ' + clientwide;
	str += ' &nbsp;  &nbsp; effective left margin = ' + thmboxleftmargin;
	str += ' &nbsp;  &nbsp; width of thumbs = ' + thumbswide;
	str += '<br>thumbox width = ' + thmboxwide;
	str += ' &nbsp;  &nbsp; scrollimit = ' + scrollimit;
	str += ' &nbsp;  &nbsp; left thumbs = ' + thumbsleft;
	str += ' &nbsp;  &nbsp; new pos = ' + nupos;
	str += '<br>document.body.parentNode.clientWidth=' + document.body.parentNode.clientWidth;

	document.getElementById("stats").innerHTML=str;
}