var spirals = new Object();

var STATE_OFFS=1, STATE_HOME=2, STATE_PROJ=3, STATE_GLUION=4, STATE_GLUIPH=5, STATE_MCLOCK=6, STATE_WORK=7, STATE_ABOUT=8;
var STATE_EX=9, STATE_CONTACT=10, STATE_PROJ_POSTS=11;
var firstState = 1, lastState = 11;

var currentState, targetState;

var windowWidth = 0, windowHeight = 0;
var globalMargin = 5;
var centerX = 0, centerY = 0;
var logolexW,logolexH;
var offS = 2.0;

var projDots = 5, workDots = 5;
var drawDotsFlag = 0;
var defaultSteps = 7;

var	examplePicNum = 1, examplePicMax = 1, exampleSelection;

var projects = new Object();
var examples = new Object();
var lastProj=0, lastExam=0;
var customers = new Object();
var custSelect = 0;
var csCustomer = 0;
var allTags = new Object();
var tagSelect = 0;

var URL, e;

var editMode = 0;

var lastTag=0, lastCat=0;
var projMap, projMapInv, projMapDefault;
var	arrYears, arrYearsNum;
var arrProj, arrProjNum;

//var wpURL = 'wordpress/';
var wpURL = 'wp/';

// ######################################### functions called from HTML page ############################################################
//	init()
//	redraw()
//	mainClick()
//	projClick()
function init (post) {
	getWinSize ();
	
	initCustSelect ();	// customer menu
	initExplain ();		// dynamic glui text
	initTagSelect ();
	
	// ----- process PHP jump request 
	pjump = projects [jump];
	xjump = examples [jump];
	if (typeof(pjump) != "undefined") {
		currentState = STATE_PROJ;
	}
	else if (typeof(xjump) != "undefined") {
		currentState = STATE_EX;
	}
	else {		
		switch (jump) {
			case "project":		
			case "projects":	currentState = STATE_PROJ;			break;
			case "gluion":		currentState = STATE_GLUION;		break;
			case "example":
			case "examples":
			case "ex":			currentState = STATE_EX;			break;
			case "gluiph":		currentState = STATE_GLUIPH;		break;
			case "about":		currentState = STATE_ABOUT;			break;
			case "contact":		currentState = STATE_CONTACT;		break;
			case "workshop":
			case "workshops":	currentState = STATE_WORK;			break;
			default:			currentState = STATE_HOME;			break;
		}
	}
	
	// ----- set "tool tips"
	$("ilogo_0").title = "glui home";
	$("ilogoon_0").title = "gluion home";
	
	// ----- blank targets (should go to DB)
	setBlankTarget (['amanual_0', 'aconfig_0', 'apatches_0', 'amusiClock_0', 'amusiclockImg_0']);
	
	
	// ----- build inital maps for project spiral ordering (could go in extra function, down to where we actually do the mapping)
	projMap = new Array (prSpiral);
	projMapInv = new Array (prSpiral);
	projMapDefault = new Array (prSpiral);
	for (i=0; i<prSpiral; i++) {
		projMap [i] = i;
		projMapInv [i] = i;
		projMapDefault [i] = i;
	}

	arrYears = strYears.split(',');
	arrYearsNum = arrYears.length;
	for (i=0; i<arrYearsNum; i++) {
		projMap [i] = arrYears [i];
	}
	arrProj = strProj.split(',');
	arrProjNum = arrProj.length;	
	

	// ----- actual (i.e. multi-element) spirals: projects, examples, workshops
	spirals["P"] = new spiral (prSpiral, projDots, "P");
	spirals["P"].newPos	(STATE_OFFS,	2.0,	2.5,	225.0,	0.1,	1.0);
	spirals["P"].newPos (STATE_HOME, 	0.6, 	0.6,	144.0,	0.010,	1.073);			// dense segment
	spirals["P"].newPos (STATE_ABOUT, 	0.6,	0.9,	200.0,	0.010,	1.075);
	spirals["P"].newPos (STATE_CONTACT,	0.6, 	0.6,	104.0,	0.010,	1.070);			// turned clockwise
	spirals["P"].newPos (STATE_PROJ, 	0.15, 	0.9,	 90.0,	60.0,	0.9728);		// multi-turn spiral

	spirals["P"].newPos (STATE_PROJ_POSTS, 	0.8, 	0.9,	 150.0,	0.75,	1.02);		// posts in projects

	spirals["X"] = new spiral (exSpiral, 0, "X");
	spirals["X"].newPos	(STATE_OFFS,	2.0,	2.5,	225.0,	0.01,	1.0);
	spirals["X"].newPos	(STATE_EX,		0.70,	1.0,	190.0,	8.0,	0.98);			// left side

	spirals["W"] = new spiral (wsSpiral, workDots, "W");
	spirals["W"].newPos	(STATE_OFFS,	2.0,	2.5,	-45.0,	0.1,	1.0);
	spirals["W"].newPos (STATE_WORK, 	0.4, 	0.9,	 220.0,	12.0,	1.0);			// half-turn spiral
	
	
	// ----- preload (largely) static html
	reqContact = new loadXMLrequest();
	reqContact.loadXMLdoc ('contact.html', 'tcontAbst_0', 'contAbst');
	reqAbout = new loadXMLrequest();
	reqAbout.loadXMLdoc ('about.html', 'tgluiAbst_0', 'gluiAbst');
	reqAboutGluion = new loadXMLrequest();
	reqAboutGluion.loadXMLdoc ('gluion/about.html', 'tgluionAbst_0', 'gluionAbst');
	reqAboutGluiph = new loadXMLrequest();
	reqAboutGluiph.loadXMLdoc ('gluiph/about0.html', 'tphabout_0', 'phabout');
	$('tyear_0').innerHTML = "(2063)";
	$('tcust_0').innerHTML = '<a id="acust_0" href="" class="out" target="_blank">for</a> ' + custSelect;
	$('ttags_0').innerHTML = "hello";
	$('ttagMenu_0').innerHTML = tagSelect;
	
	
	redraw ();
	
	
	if (typeof(pjump) != "undefined") {
		selectProj(jump);
		expandProjEnd ();
	}
	if (typeof(xjump) != "undefined") {
		exampleClick (jump);
		hide ('gluionText');
	}
	switch (jump) {
		case "project":		
		case "projects":	expandProjEnd ();				break;
		case "gluion":		hide ('gluionText');
							show ('gluionAbst');			break;		
		case "gluiph":		mainClick ('zoomInGluiph');		break;		
		case "about":		mainClick ('about');			break;
		case "contact":		mainClick ('contact');			break;
	}
	
	if (post) {
		tagClick (post);
	}
}


function redraw () {
	getWinSize ();
	
	// make sure the top div is as big as the window
	e = $("all");	e.style.width = windowWidth + 'px';		e.style.height = windowHeight + 'px';
			
	arrangeAllSpirals ();
	drawAllSpirals ();
	
	showState ();
}


function mainClick (selection) {
	if (movingFlag == 1) return;	// block further clicks until movement completed
	if (editMode == 1) return;
			
	show ('gluionText');	

//	alert (currentState);
		
	switch (selection) {
		case 'home':			if (currentState != STATE_HOME)			animateArray (STATE_HOME, 		"expandEndDefault();", 		100);	break;
		case 'about':			if (currentState != STATE_ABOUT)		animateArray (STATE_ABOUT, 		"expandEndDefault();",		100);	break;
		case 'contact':			if (currentState != STATE_CONTACT)		animateArray (STATE_CONTACT,	"expandEndDefault();",		100);	break;
		case 'zoomInProj':		if (currentState != STATE_PROJ)			animateArray (STATE_PROJ, 		"expandProjEnd();", 		100);	break;
		case 'zoomInWorkshops':	if (currentState != STATE_WORK)			animateArray (STATE_WORK, 		"expandWorkshopsEnd();",	1000);	break;
		case 'zoomInGluiph': 	if (currentState != STATE_GLUIPH)		animateArray (STATE_GLUIPH,		"expandEndDefault();", 		100);	break;
		case 'zoomInGluion':
			if (currentState != STATE_GLUION) {
				reqAboutGluion = new loadXMLrequest();
				reqAboutGluion.loadXMLdoc ('gluion/about.html', 'tgluionAbst_0', 'gluionAbst');
				hide ('gluionVersionImg');
				show ('gluionAbst');
				hide ('gluionAbst2');
				animateArray (STATE_GLUION, "expandGluionEnd();", 100);
			}
			else {	// if already on gluion page, the sneaker picture selects the sneaker (duh)
				hide ('gluionText');
				gluionClick ('sneaker');
			}
			break;
		case 'blog':			
			if (currentState != STATE_PROJ_POSTS) {
			//	alert ("ddd");
			//	reqPosts = new loadXMLrequest();
			//	reqPosts.loadXMLdoc (wpURL, 'tposts_0', 'posts');	
			//	animateArray (STATE_PROJ_POSTS,	"expandProjPostsEnd();", 100);
				tagClick ('allposts');	// ööö is not a tag, nor a category, so all posts are shown
			}
			break;
	}
}
// -------------------------------------- mainClick() callbacks ---------------------------------------------
function expandEndDefault () {}

		function expandProjEnd () {
			show ('abst');

			drawDotsFlag = 1;
			spirals["P"].draw (STATE_PROJ, centerX, centerY); 
		}
		function expandGluionEnd () {	
			hide ('gluionText');
		}
		function expandExamplesEnd () {
			if (lastExam == 0) {
				hide ('gluionNext');
			}
		}
		function expandWorkshopsEnd () {
			drawDotsFlag = 1;
			spirals["W"].draw (STATE_WORK, centerX, centerY); 		
		}
//------------------------------------------------------------------------------------------------------------
		
		
function gluionClick (selection) {
	if (movingFlag == 1) 	return;	// block further clicks until movement completed
	if (editMode == 1)		return;
	
	if ((currentState != STATE_GLUION) &&
		(currentState != STATE_EX))
		return;

	switch (selection) {
		case 'selectExamples':
			if (currentState != STATE_EX) {
				$('igluionAbstImg_0').src = 'gluion/ex/pics/examples.png';
				animateArray (STATE_EX, "expandExamplesEnd();", 100);
				hide ('gluionVersionImg');
				hide ('gluionAbst');
				hide ('gluionAbst2');
				return;
			}
			else return;
			
		case 'showAbout':
			reqAboutGluion = new loadXMLrequest();
			reqAboutGluion.loadXMLdoc ('gluion/about.html', 'tgluionAbst_0', 'gluionAbst');
			hide ('gluionVersionImg');
			show ('gluionAbst');
			hide ('gluionAbst2');
			break;			
			
		case 'next':
			examplePicNum++;
			if (examplePicNum > examplePicMax)		examplePicNum = 1;
			$('igluionAbstImg_0').src = 'gluion/ex/pics/'+exampleSelection+'-'+examplePicNum+'-400.jpg';
			return;
			
		case 'barefoot':
		case 'slipper':
		case 'sneaker':
		case 'tailor':
			$('igluionVersionImg_0').src = 'prodpics/'+selection+'400.png';
			show ('gluionVersionImg');
			hide ('gluionAbst');
			show ('gluionAbst2');
			URL = 'gluion/' + selection + '.html';
			reqAboutGluion = new loadXMLrequest();
			reqAboutGluion.loadXMLdoc (URL, 'tgluionAbst2_0', 'gluionAbst2');
			break;
			
		case 'barefootCon':
		case 'slipperCon':
		case 'sneakerCon':
			$('igluionVersionImg_0').src = 'prodpics/'+selection+'400.png';
			show ('gluionVersionImg');
			hide ('gluionAbst');
			show ('gluionAbst2');
			break;
			
		case 'resolution':
		case 'speed':
		case 'interface':
		case 'channels':
		case 'functions':
		case 'flexible':
			hide ('gluionVersionImg');
			show ('gluionAbst');
			show ('gluionAbst2');
			URL = 'gluion/' + selection + '.html';
			reqAboutGluion = new loadXMLrequest();
			reqAboutGluion.loadXMLdoc (URL, 'tgluionAbst2_0', 'gluionAbst2');
			break;
	}
	if (currentState == STATE_EX) {
		animateArray (STATE_GLUION, "expandGluionEnd();", 100);
	}
}



function editClick (selection) {
	e = $('body');
	if (editMode == 0) {
		editMode = 1;
		e.style.backgroundColor = '#0033ff';
	}
	else {
		editMode = 0;
		e.style.backgroundColor = '#ffcc00';
	}
}
function keyup (event) {
	if (editMode != 1) return;
	
	switch (event.keyCode) {
		case 69: editClick ();		break;
		case 85: confirmUpdate ();	break;
	}
}

// ----- pulldown menu for customer selection
function initCustSelect () {
	custSelect = "<select id=\"cs\" onChange=\"csGo()\">";
	for (var iCust in customers) {
		custSelect += "<option>";
		custSelect += customers [iCust];
		custSelect += "</option>";
	}
	custSelect += "</select>";
}
function csGo () {
	var firstMatch = 1;
	var mylist=$('cs');
	var customer = mylist.options[mylist.selectedIndex].text;
//	alert (mylist.options[mylist.selectedIndex].text);
	for (var iProj in projects) {
		e=$(projects [iProj].pid);
		if (customer == projects [iProj].customer) {
		//	alert (customer);
			if (firstMatch) {
				projClick (projects [iProj].shortname);
				firstMatch = 0;
				csCustomer = customer;
			}
			e.style.fontWeight = 'bold';
		}
		else {
			e.style.fontWeight = 'normal';
		}
	}
}
function initTagSelect () {
	tagSelect = "<select id=\"ts\" onChange=\"tsGo()\">";
	tagSelect += "<option value=\"allposts\">all tags</option>";
	for (var iTag in allTags) {
		tagSelect += "<option value=\"" + allTags[iTag].slug + "\">";
		tagSelect += allTags[iTag].name;
		tagSelect += "</option>";
	}
	tagSelect += "</select>";
}
function tsGo () {
	var mylist=$('ts');
	var tag = mylist.options[mylist.selectedIndex].value;
//	alert (tag);
	tagClick (tag);
}

// ----- "explain" glui by generating random sequence with words below, changes when mouse hovers/moves
var gWords = new Array();
var lWords = new Array();
var uWords = new Array();
var iWords = new Array();
var g=0, l=0, u=0, i=0;

function initExplain () {
	gWords[g++]='graphic';		lWords[l++]='less';				uWords[u++]='user';				iWords[i++]='interface'; 
	gWords[g++]='global';		lWords[l++]='local';			uWords[u++]='universal';		iWords[i++]='international'; 
	gWords[g++]='green';		lWords[l++]='luminuous';		uWords[u++]='underground';		iWords[i++]='insects'; 
	gWords[g++]='glue';			lWords[l++]='logic';			uWords[u++]='ubiquitous';		iWords[i++]='intercity'; 
	gWords[g++]='gigantic';		lWords[l++]='listening';		uWords[u++]='universe';			iWords[i++]='inc.'; 
	gWords[g++]='geek';			lWords[l++]='link';				uWords[u++]='unit';				iWords[i++]='item';
	gWords[g++]='god';			lWords[l++]='like';				uWords[u++]='unpack';			iWords[i++]='inlet';
	gWords[g++]='guava';		lWords[l++]='licking';			uWords[u++]='urn';				iWords[i++]='island';
	gWords[g++]='grab';			lWords[l++]='light';			uWords[u++]='utter';			iWords[i++]='iteration';
	gWords[g++]='gate';			lWords[l++]='love';				uWords[u++]='ultimate';			iWords[i++]='inertia';
	gWords[g++]='gestalt';		lWords[l++]='language';			uWords[u++]='undone';			iWords[i++]='icon';
	gWords[g++]='garden';		lWords[l++]='line';				uWords[u++]='union';			iWords[i++]='inlet';
	gWords[g++]='great';		lWords[l++]='lateral';			uWords[u++]='unison';			iWords[i++]='insight';
	gWords[g++]='gamelan';		lWords[l++]='latex';			uWords[u++]='unorthodox';		iWords[i++]='illumination';
	gWords[g++]='generation';	lWords[l++]='lust';				uWords[u++]='unravel';			iWords[i++]='improvisation';
	gWords[g++]='glittering';	lWords[l++]='larum';			uWords[u++]='upper';			iWords[i++]='indigo';
	gWords[g++]='guitar';		lWords[l++]='landscape';		uWords[u++]='uranus';			iWords[i++]='induction';
	gWords[g++]='ghost';		lWords[l++]='lateral';			uWords[u++]='unguarded';		iWords[i++]='indiscipline';
	gWords[g++]='german';		lWords[l++]='leather';											iWords[i++]='intro';
								lWords[l++]='lark';												iWords[i++]='inside';
								lWords[l++]='life';												iWords[i++]='indonesia';
								lWords[l++]='lightning';										iWords[i++]='instrument';
								lWords[l++]='lotus';
								lWords[l++]='lost';
								lWords[l++]='lower';
								lWords[l++]='lux';
								lWords[l++]='luthier';
}
function getRandom (range) {
	return (Math.floor(Math.random()*range));
}
function firstBold (word) {
	return ("<strong>"+word.charAt(0)+"</strong>"+word.slice(1));
}
function explainBuildBold () {
	return  (firstBold (gWords[getRandom(g)]) + " " +
			 firstBold (lWords[getRandom(l)]) + " " + 
			 firstBold (uWords[getRandom(u)]) + " " + 
			 firstBold (iWords[getRandom(i)]));
}
function explainBuild () {
	return  (gWords[getRandom(g)] + " " +
			 lWords[getRandom(l)] + " " + 
			 uWords[getRandom(u)] + " " + 
			 iWords[getRandom(i)]);
}
function explainGlui () {
	$('explain').innerHTML = explainBuildBold();
}
function toldYouAll () {
	$('explain').innerHTML = "Now, what does <strong>glui</strong> stand for?";
}

	
	
	
	
function gluiphClick (selection) {
	if (editMode == 1)	return;
	
//	alert (selection);
	switch (selection) {
		case 0:
		case 1:
		case 2:
			URL = 'gluiph/about'+selection+'.html';
			reqAboutGluiph = new loadXMLrequest();
			reqAboutGluiph.loadXMLdoc (URL, 'tphabout_0', 'phabout');
			break;
	}
}

function workshopClick (pid, selection, name, start, end) {
	if (editMode == 1)	return;
	
	URL = 'workshops/' + selection + '.html';
	reqWork = new loadXMLrequest();
	reqWork.loadXMLdoc (URL, 'tworkAbst_0', 'workAbst');
}


function exampleClick (shortname) {
	if (editMode == 1)	return;
	
	var x = examples[shortname];
	
	show ('gluionAbst');
	show ('gluionAbstImg');
	show ('gluionVersionImg');
	hide ('gluionAbst2');
	URL = 'gluion/ex/'+x.shortname+'.html';
	reqAboutGluion = new loadXMLrequest();
	reqAboutGluion.loadXMLdoc (URL, 'tgluionAbst_0', 'gluionAbst');
	e=$('igluionAbstImg_0');
	e.src = 'gluion/ex/pics/'+x.shortname+'-1-400.jpg';
	examplePicNum = 1;
	examplePicMax = x.picnum;
	exampleSelection = x.shortname;
	
	if (x.picnum == 1)
		hide ('gluionNext');
	else
		show ('gluionNext');
		
	// ---------------- mark visited links in example spiral
	if (lastExam) {
		lastExam.style.border = '1px none black';
		lastExam.style.textDecoration ='line-through';
	//	lastProj.style.fontWeight = 'normal';
	}
	e=$(x.pid);
//	e.style.backgroundColor = '#0000FF';
//	e.style.fontWeight = 'bold';
	e.style.border = '1px solid black';
	e.style.textDecoration = 'none';
	lastExam = e;
}

function selectProj (shortname) {
	mainClick('zoomInProj');
	projClick (shortname);
}
function projClick (shortname) {
	if (editMode == 1)	return;
	
	var p = projects[shortname]; 
	var catID = p.termID;
	var years;
	
	switch (currentState) {
		case STATE_HOME:
		case STATE_ABOUT:
		case STATE_CONTACT:
			animateArray (STATE_PROJ, "expandProjEnd();", 100);
			break;
		case STATE_PROJ:
			break;
		case STATE_PROJ_POSTS:
			reqPosts = new loadXMLrequest();
			reqPosts.loadXMLdoc (wpURL + '?cat=' + catID + '&call=internal', 'tposts_0', 'posts');
			break;
		//	return;
		default:
			return;
	}
	
	// ---------- generate 'years' string
	if (p.year) {
		if (p.endYear > 2090)
			years = ' (' + p.year + '-now)';
		else if ((p.endYear > 0) && (p.endYear != p.year))
			years = ' (' + p.year + '-' + p.endYear + ')';
		else
			years = ' (' + p.year + ')';
	}
	else
		years = '';
		
	// ------ update project information fields
	$("iimag_0").src = 'projpics/'+p.shortname+'.jpg';

	show ('year');
	$('tyear_0').innerHTML = years;

	show ('cust');
	$('acust_0').href = "http://" + p.clink;
	e=$('cs');
	for (var iCust in customers) {
		if (p.customer == customers [iCust]) {
			e.selectedIndex = iCust;
		}
	}
	if (p.customer != csCustomer) {		// if new customer is selected via spiral after selecting one via drop down we reset the bold projects
		for (var iProj in projects) {
			e=$(projects [iProj].pid);
			e.style.fontWeight = 'normal';
		}	
	}

	$('abst_0').innerHTML = p.pabstract + '<a href="javascript:tagClick(\'c' + catID + '\')"> view posts</a>';	// treat project name as tag, then when nothing is found we can call the actual project

	
//	abstW = windowWidth - $("iimag_0").width - 2*globalMargin;
//	tagtext = '<div style="position:absolute; bottom:0px; width:' + abstW + 'px;">';	// extra div to fix it to the bottom -> should be handled by the class
	tagtext = '';
	tags 		= p.tags.split(",");
	tagslugs 	= p.tagslugs.split(",");
	for (iTag=0; iTag<tags.length; iTag++) {
		tagtext += '<a style="border:1px solid black" href="javascript:tagClick(\'' + tagslugs[iTag] + '\')"> ' + tags[iTag] + ' </a>';
	}
	tagtext += '&nbsp&nbsp';

//	alert (tagtext);
	show ('tags');
	$('ttags_0').innerHTML = tagtext;
//	alert (e.innerHTML);
//	e.innerHTML.append("hallo");
//	for (var iTag in tags) {
//		e.innerHTML += tags[iTag];
//	}
//	e.innerHTML += 'gaga';
//	e.innerHTML += '</div>';
//	alert (e.innerHTML);
//	show ('detailButton');

	// ---------------- mark visited links in main spiral
	if (lastProj) {
		lastProj.style.border = '1px none black';
		lastProj.style.textDecoration ='line-through';
	}
	e=$(p.pid);
	e.style.border = '1px solid black';
	e.style.textDecoration = 'none';
	lastProj = e;
}
function projClick2 (catID) {
	reqPosts = new loadXMLrequest();
	reqPosts.loadXMLdoc (wpURL + '?cat=' + catID + '&call=internal', 'tposts_0', 'posts');
}
function postClick2 (postID) {
	reqPosts = new loadXMLrequest();
	reqPosts.loadXMLdoc (wpURL + '?p=' + postID + '&call=internal', 'tposts_0', 'posts');
}
// ---------------- handling tag clicks -----------------------------------------------------------
function tagClick (tag) {
	if (editMode == 1)	return;

	lastTag = tag;

	if (window.XMLHttpRequest)			xmlhttp=new XMLHttpRequest();
	else if (window.ActiveXObject)		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	if (xmlhttp!=null) {
		xmlhttp.onreadystatechange = tagClick_phase_1;
		url = "sortByTag.php/?tag=" + tag;
	//	alert (url);
		xmlhttp.open ("GET", url, true);
		xmlhttp.send (null);
	}
	else	alert("Your browser does not support XMLHTTP.");
}

function tagClick_phase_1 () {	
	if (xmlhttp.readyState == 4) {
		if (xmlhttp.status==200) {
			var str = xmlhttp.responseText;
			var str2 = str.split(';');
		//	alert (str2[0]);
		//	alert (lastTag);
			if (str2[0] == '') {	// no match means we called with a project or post ID rather than an actual tag
				matchNum = 0;
				arr = str2[1].split(',');
				noMatchNum = arr.length;
				
				if (lastTag == 'allposts') {
					
				}
				else if (isNaN(lastTag)) {
				//	alert (lastTag);
					lastCat = lastTag.substring(1);
				//	alert (lastCat);
					lastTag = 'cat';
				}
				else {
					lastPost = lastTag;
					lastTag = 'post';
				}
			}
			else {
				matchNum = str2[0].split(',').length;				
				noMatchNum	= str2[1].split(',').length;
				str = str.replace (/;/, ',');
				arr = str.split(',');
			}

			for (i=0; i<arr.length; i++) {
				// map matching (and not matching) IDs retrieved from database to div IDs
				var projID 		= arr [arr.length - i - 1];
				var projDivID	= arrProj [projID - 1];
				projMap [i+arrYearsNum] = projDivID;

				// render matching projects bold
				e = $('P_'+projDivID);
				if (i < noMatchNum) {
					e.style.fontWeight = 'normal';
				}				
				else {
					e.style.fontWeight = 'bold';
				}
			}

			animateArray (STATE_PROJ_POSTS, "tagClick_phase_2();", 100);
/*			switch (currentState) {
				case STATE_HOME:
				case STATE_PROJ:
				case STATE_PROJ_POSTS:
					animateArray (STATE_PROJ_POSTS, "tagClick_phase_2();", 100);
					break;
				default:
					return;
			}
*/		}	
  		else {
			alert ("Problem retrieving data:" + xmlhttp.statusText);
		}
	}
}

function tagClick_phase_2 () {
	if (lastTag == 'cat') {
		reqPosts = new loadXMLrequest();
		reqPosts.loadXMLdoc (wpURL + '?cat=' + lastCat + '&call=internal', 'tposts_0', 'posts');
	}
	else if (lastTag == 'post') {
		reqPosts = new loadXMLrequest();
		reqPosts.loadXMLdoc (wpURL + '?p=' + lastPost + '&call=internal', 'tposts_0', 'posts');		
	}
	else if (lastTag == 'allposts') {
		reqPosts = new loadXMLrequest();
		reqPosts.loadXMLdoc (wpURL + '?allposts=true&call=internal', 'tposts_0', 'posts');		
	}
	else {
		reqPosts = new loadXMLrequest();
		reqPosts.loadXMLdoc (wpURL + '?tag=' + lastTag + '&call=internal', 'tposts_0', 'posts');
	}
	
	for (var iTag in allTags) {
		if (lastTag == allTags [iTag].slug) {
		//	alert (lastTag);
		//	alert ((iTag * 1) + 1);
			$('ts').selectedIndex = parseInt(iTag) + 1;	// add one because of "all tags" header
		}
	}
}		

function tagClick2 (tag) {
//	alert (tag);
//	e = $("posts_0");	
//	e.style.width  = '720px';//(windowWidth * 0.65) + 'px';
//	alert (windowWidth*0.65)
//	document.title = tag;
	tagClick (tag);
}

// #################################################### in-browser editing, incomplete #############################################################
var ePhi, eR, baseName;
function mousedown (e) {
	if (editMode != 1)
		return;
		
	var targ;
	if (!e) {
		var e=window.event;
	}
	if (e.target) {
		targ=e.target;
	}
	else if (e.srcElement) {
		targ=e.srcElement;
	}
	if (targ.tagName == "INPUT") return;
	
	while (targ.tagName != "DIV") {		// traverse up the tree to find containing DIV
		targ = targ.parentNode;
	}
	baseName = targ.id.split('_')[0];
	currentPos = spirals[baseName].positions[currentState];
	
	phi = currentPos.startPhi;		r = currentPos.minR;
	ePhi=$("inputE1");				eR=$("inputE2");
	ePhi.value = phi;				eR.value = r;
}

function showState () {
	e=$("tstate_0");
//	e.innerHTML = currentState;
}

function leaveE1 () {
//	alert ("E1");
//	alert (ePhi.value);
	spirals[baseName].positions[currentState].startPhi = ePhi.value;
	redraw ();
}
function leaveE2 () {
//	alert ("E2");
	spirals[baseName].positions[currentState].minR = eR.value;
	redraw ();
}
function confirmUpdate () {
	url = "http://localhost:8888/updatePosition.php?r=" + eR.value;//"2.0&phi=220&TID=projects&SID=1";
	url += "&phi=" + ePhi.value;
	url += "&TID=" + baseName;
	url += "&SID=" + currentState;

	x = confirm (url);
	if (x==true) {
		x=new XMLHttpRequest();
		if (x!=null) {
			x.open ("GET", url, true);
			x.send (null);
		//	alert ("sdas");
		}		
	}
//		alert ("hi");
}


// #################################################### class definitions #############################################################
//  gluiProj()
//	spiralPos()
//	spiral()
//function gluiProj (pid, shortname, customer, clink, pabstract, year, endYear, tech, html) {
function gluiProj (pid, shortname, customer, clink, pabstract, year, endYear, tags, tagslugs, termID) {
	this.pid = pid;
	this.shortname = shortname;
	this.customer = customer;
	this.clink = clink;
	this.pabstract = pabstract;
	this.year = year;
	this.endYear = endYear;
	this.tags = tags;
	this.tagslugs = tagslugs;
	this.termID = termID;
	
	this.html = 0;	//html;
}
//-----------------------------------------------------------------------------------------
function gluiEx (pid, shortname, pabstract, category, catFlag, picnum) {
	this.pid = pid;
	this.shortname = shortname;
	this.pabstract = pabstract;
	this.category = category;
	this.catFlag = catFlag;
	this.picnum = picnum;
}
//-----------------------------------------------------------------------------------------
function gluiTag (name, slug) {
	this.name = name;
	this.slug = slug;
}




// #################################################### functions to modify object properties #############################################################
function show (h) {
	e = $(h+'_0');
	e.style.visibility = 'visible';
	spirals[h].show ();
}
function hide (h) {
	e = $(h+'_0');
	e.style.visibility = 'hidden';
	spirals[h].hide ();
}
function swapImg (src, h) {
	if ((h == 'logo') && (currentState == STATE_HOME))		return;	// logo is not a link when in home position
	e = $('i'+h+'_0');
	e.src = src;
}
function restoreImg (src, h) {
	e = $('i'+h+'_0');
	e.src = src;
}
function setBlankTarget (elems) {
	for (iElem=0; iElem<elems.length; iElem++) {
		e = $(elems[iElem]);
		e.target = '_blank';
	}
}
function showElems (elems) {
	for (iElem=0; iElem<elems.length; iElem++) {
		e = $(elems[iElem]);
		e.style.visibility = 'visible';
	}
}	
function showElemsSetText (elems, text) {
	for (iElem=0; iElem<elems.length; iElem++) {
		e = $(elems[iElem]);
		e.style.visibility = 'visible';
		e.innerHTML = text[iElem];
	}
}
function showElemsArray (elemBase, num) {
	for (iElem=0; iElem<2; iElem++) {
		e = $(elemBase+'_'+iElem);
		e.style.visibility = 'visible';
	}
}
function hideElems (elems) {
	for (iElem=0; iElem<elems.length; iElem++) {
		e = $(elems[iElem]);
		e.style.visibility = 'hidden';
	}
}
function showDots (showFlag) {
	drawDotsFlag = showFlag;
	dots = document.getElementsByClassName ("dot");
	if (showFlag) 	for (iDot=0; iDot<dots.length; iDot++)	dots[iDot].style.visibility = 'visible';
	else			for (iDot=0; iDot<dots.length; iDot++)	dots[iDot].style.visibility = 'hidden';
}



// ############################################### load dynamic contents (AJAX) #################################################
function loadXMLrequest () {
	var req;
	var element;
	var redrawElement;
	
	this.loadXMLdoc = function (url, elem, redrawElem) {
		if (window.XMLHttpRequest) {
			try 		{	req = new XMLHttpRequest();		} 
			catch (e) 	{	req = false;					}
		    } 
		else if (window.ActiveXObject) {
			try 		{	req = new ActiveXObject("Msxml2.XMLHTTP");		} 
			catch (e)	{
				try 		{	req = new ActiveXObject("Microsoft.XMLHTTP");	} 
				catch(e) 	{	req = false;							        }
			}
		}

		if (req) {
			req.onreadystatechange = procStateChange;
			req.open ("GET", url, true);
			req.send (null);
			element = elem;
			redrawElement = redrawElem;
		}
		else	alert("Your browser does not support XMLHTTP.");
	}
	
	var procStateChange = function () {
		if (req.readyState == 4) {
			if (req.status == 200) {
				var str = req.responseText;
				str = str.replace (/\<div id="page"\>(.*\n)*.*\<div id="content" class="(narrow|wide)column"\>/,'<div id="content">');	// remove everything up to the actual posts (header, page div)
				str = str.replace (/\<div id="sidebar"\>(.*\n)*.*\<\/body\>/,'</body>');												// and everything that comes after (sidebar, footer)
				
				str = str.replace (/http\S*tag=([a-zA-Z0-9-#&=;]*)/g,'javascript:tagClick2(\'$1\');');		// turn links into javascript calls
				str = str.replace (/http\S*cat=([a-zA-Z0-9-#&=;]*)/g,'javascript:projClick2(\'$1\');');
//				str = str.replace (/http\S*allposts=true&call=internal&([a-zA-Z0-9-#&=;]*)/g,'javascript:allpostClick(\'$1\');');
				str = str.replace (/http\S*p=([a-zA-Z0-9-#&=;]*)/g,'javascript:postClick2(\'$1\');');
				
				str = str.replace (/rel="tag"/g,'rel="tag" class="tagM"');		// add class to tags
				str = str.replace (/<\/a>, <a href/g,'</a><a href');			// remove commas
				str = str.replace (/<small>/g,'<p class="dateM"><small>');		// add class to date
				str = str.replace (/<\/small>/g,'</small></p>');
				str = str.replace (/<p class="postmetadata">Tags:/g,'<br /><p class="postmetadata">Tags:');		// insert linr before tags

				$(element).innerHTML = str;
				//	redraw();
				//	alert ('stateChange: ' + xmlRedrawElem);
				if (redrawElement) {
					//	alert (xmlRedrawElem);
					spirals[redrawElement].arrangeAll ();
					//	spirals[xmlRedrawElem].draw (targetState);
					//	alert (xmlRedrawElem);
					//	alert (spirals[xmlRedrawElem].getHeight ());
					//	spirals[xmlRedrawElem].draw (currentState, centerX, centerY);
				}
			}
  			else {
				alert ("Problem retrieving data:" + req.statusText);
			}
		}	
	}
}	


// ------------------------ get window size
function getWinSize () {
	if (typeof (window.innerWidth) == 'number') {
		windowWidth = window.innerWidth;
		windowHeight = window.innerHeight;
	} 
	else if (document.documentElement &&
			(document.documentElement.clientWidth || document.documentElement.clientHeight)) {
		windowWidth = document.documentElement.clientWidth; 
		windowHeight = document.documentElement.clientHeight;
	} 
	else if (document.body && 
			(document.body.clientWidth || document.body.clientHeight)) {
		windowWidth = document.body.clientWidth; 
		windowHeight = document.body.clientHeight;
	}
	
	centerX = windowWidth / 2;
	centerY = windowHeight / 2;
}