/* global variables  */
var eventTarget, eventParent;
var masterNum = 0;
var nDiv, nPar;
var eP;
var eDir;

function stango (headline, imgSrc, thWidth, thHeight, eWidth, eHeight, description, url) {
	this.length = 8;
	this.headline = headline;
	this.imgSrc = imgSrc;
	this.thWidth = thWidth;			/* thumbnail */
	this.thHeight = thHeight;
	this.eWidth = eWidth;			/* enlargement */
	this.eHeight = eHeight;
	this.description = description;
	this.url = url;
}

/* put arrays here if you want */


function init() {
	
	/*
	eUL = document.createElement('UL');
	eUL.setAttribute('id', 'navbar');
	
	eLIbio = document.createElement('LI');
	eLIbioText = document.createTextNode('Bio');
	eLIbio.appendChild(eLIbioText);
	eLIbio.addEventListener ? eLIbio.addEventListener('mousedown', section, false) : eLIbio.attachEvent('onmousedown', section);
	eUL.appendChild(eLIbio);
	
	eLIoils = document.createElement('LI');
	eLIoilsText = document.createTextNode('Oils');
	eLIoils.appendChild(eLIoilsText);
	eLIoils.addEventListener ? eLIoils.addEventListener('mousedown', section, false) : eLIoils.attachEvent('onmousedown', section);
	eUL.appendChild(eLIoils);
	
	eLIinks = document.createElement('LI');
	eLIinksText = document.createTextNode('Inks');
	eLIinks.appendChild(eLIinksText);
	eLIinks.addEventListener ? eLIinks.addEventListener('mousedown', section, false) : eLIinks.attachEvent('onmousedown', section);
	eUL.appendChild(eLIinks);

	document.appendChild(eUL);
	
	function section(event) { 
		setEventTargets(event);
		divBio = document.getElementById('bio');
		divOils = document.getElementById('oils');
		divInks = document.getElementById('inks');
	alert(divBio.nodeName);
		
		if (eventTarget == 'Bio') { 
			divBio.style.display = "block";
			divOils.style.display = "none";
			divInks.style.display = "none";
		} else if (eventTarget == 'Oils') { 
			sdImages = oils;
			divBio.style.display = "none";
			divOils.style.display = "block";
			divInks.style.display = "none";
			eIMGlist = divOils.getElementsByTagName('IMG');
			listen();
		} else if (eventTarget == 'Inks') { 
			sdImages = inks;
			divBio.style.display = "block";
			divOils.style.display = "none";
			divInks.style.display = "block";
			eIMGlist = divInks.getElementsByTagName('IMG');
			listen();
		}
	}

	
	
	function listen() {
		// add event listeners to each thumbnail (or attach events to them, in IE)
		for (var x = 0; x < eIMGlist.length; x++) {
			eIMGlist[x].addEventListener ? eIMGlist[x].addEventListener('mousedown', changeContentTemp, false) : eIMGlist[x].attachEvent('onmousedown', changeContentTemp);
		}
	}
	*/
	
	
	
	/*
	if (document.getElementById('oils')) { 
		eP = document.getElementById('oils');
		sdImages = oils;
		eDir = "oil/"
	}
	if (document.getElementById('inks')) { 
		eP = document.getElementById('inks');
		sdImages = inks;
		eDir = "pen/"
	}
	*/
	
	eDir = "portfolio/";
	
	
	
	eP = document.getElementById('portfolio');
	eIMGlist = eP.getElementsByTagName('IMG');
	
	
	
	for (var x = 0; x < eIMGlist.length; x++) {
		eIMGlist[x].addEventListener ? eIMGlist[x].addEventListener('mousedown', changeContentTemp, false) : eIMGlist[x].attachEvent('onmousedown', changeContentTemp);
	}

	
	
	
	function changeContentTemp (event) { 
		whereAmI(event);
		displayImage();
	}
	
	
	
	/* setEventTargets grabs info about the source image that triggered this function */
	function setEventTargets (event) {
		event.target ? eventTarget = event.target : eventTarget = event.srcElement;
		eventParent = eventTarget.parentNode;
	}
	
	
	
	/* prevNext increments enlargements by one more, or one less */
	function prevNext (event) { 
		setEventTargets(event);
		
		if (eventTarget.firstChild) { 
			/* if the "prev" A link was clicked... */
			if (eventTarget.firstChild.nodeValue.toLowerCase() == 'prev') { 
				masterNum--;
			} 
			/* if the "next" A link was clicked... */
			else if (eventTarget.firstChild.nodeValue.toLowerCase() == 'next') { 
				masterNum++;
			}
			/* if the "first" A link was clicked... */
			else if (eventTarget.firstChild.nodeValue.toLowerCase() == 'first') { 
				masterNum = 0;
			}
			/* if the "last" A link was clicked... */
			else if (eventTarget.firstChild.nodeValue.toLowerCase() == 'last') { 
				masterNum = sdImages.length - 1;
			}
		} 
		/* if the enlargement image was clicked... */
		else { 
			masterNum++;
		}
		
		/* 
		// if you clicked on the LAST enlargement image, then keep it there.
		if (masterNum == sdImages.length) { 
			masterNum--;
		} */
		
		// if you clicked on the LAST enlargement image, then show thumbnails.
		if (masterNum == sdImages.length) { 
			masterNum = 0;
		}
		
		displayImage();
	}
	
	
	
	/* whereAmI matches thumbs' alt tag with sdImages' headline strings to find sdImages index */
	function whereAmI (event) { 
		setEventTargets(event);
		
		for (var x = 0; x < sdImages.length; x++) {
			if (eventTarget.alt == sdImages[x].headline) { 
				masterNum = x;
				break;	/* breaks the for-loop */
			}
		}
	}
	
	
	
	/* show thumbnails section, hide enlargement section */
	function toggleThumbs (event) { 
		eP.style.display = "block";
		nDiv.style.display = "none";
	}
	
	
	
	function displayImage () {
		/* hide thumbnails section first */
		eP.style.display = "none";
		
		/*If an enlargement div is present, get it and remove it, so we can create a new one */
		if (document.getElementById('enlargement')) {
			nDiv = document.getElementById('enlargement');
			nPar = nDiv.parentNode;
			nPar.removeChild(nDiv);
		}
		nDiv = document.createElement('DIV');
		nDiv.setAttribute ('id', 'enlargement');
		/* nDiv.style.display = "block"; */
		
		/* render "prev" and "next" links section */
		nP = document.createElement('P');
		nP.setAttribute ('id', 'iterate');
		/* nPtext = document.createTextNode(' | '); */
		
		nAthumb = document.createElement('A');
		nAthumb.setAttribute('id', 'thumbLink');
		nAthumbText = document.createTextNode('Thumbs');
		nAthumb.appendChild(nAthumbText);
		nAthumb.addEventListener ? nAthumb.addEventListener('mousedown', toggleThumbs, false) : nAthumb.attachEvent('onmousedown', toggleThumbs);

		/*
		nAfirst = document.createElement('A');
		nAfirst.setAttribute('id', 'firstLink');
		nAfirstText = document.createTextNode('First');
		nAfirst.appendChild(nAfirstText);
		nAfirst.addEventListener ? nAfirst.addEventListener('mousedown', prevNext, false) : nAfirst.attachEvent('onmousedown', prevNext);
		*/
		
		nAprev = document.createElement('A');
		nAprev.setAttribute('id', 'prevLink');
		nAprevText = document.createTextNode('Prev');
		nAprev.appendChild(nAprevText);
		nAprev.addEventListener ? nAprev.addEventListener('mousedown', prevNext, false) : nAprev.attachEvent('onmousedown', prevNext);
		
		nAnext = document.createElement('A');
		nAnext.setAttribute('id', 'nextLink');
		nAnextText = document.createTextNode('Next');
		nAnext.appendChild(nAnextText);
		nAnext.addEventListener ? nAnext.addEventListener('mousedown', prevNext, false) : nAnext.attachEvent('onmousedown', prevNext);
		
		/*
		nAlast = document.createElement('A');
		nAlast.setAttribute('id', 'lastLink');
		nAlastText = document.createTextNode('Last');
		nAlast.appendChild(nAlastText);
		nAlast.addEventListener ? nAlast.addEventListener('mousedown', prevNext, false) : nAlast.attachEvent('onmousedown', prevNext);
		*/
		
		// render "prev | next" if image is (not first) AND (not last) in the array
		if ((masterNum > 0) && (masterNum != (sdImages.length - 1))) { 
			//nP.appendChild(nAfirst);
			nP.appendChild(nAthumb);
			nP.appendChild(nAprev);
			nP.appendChild(nAnext);
			//nP.appendChild(nAlast);
			} 
			// only render "next" and "last" if enlargement is first in array
			else if (masterNum == 0) { 
				nP.appendChild(nAthumb);
				nP.appendChild(nAnext);
				//nP.appendChild(nAlast);
			} 
			// only render "first" and "prev" if enlargement is last in array
			else { 
				//nP.appendChild(nAfirst);
				nP.appendChild(nAthumb);
				nP.appendChild(nAprev);
			}

		nDiv.appendChild(nP);

		// render enlargement image
		nImg = document.createElement('IMG');
		nImgURL = eDir + sdImages[masterNum].imgSrc + '.jpg';
		
		nImg.setAttribute ('id', 'artwork');
		nImg.setAttribute ('src', nImgURL);
		nImg.setAttribute ('width', sdImages[masterNum].eWidth);
		nImg.setAttribute ('height', sdImages[masterNum].eHeight);
		nImg.setAttribute ('alt', sdImages[masterNum].headline);
		nImg.setAttribute ('title', sdImages[masterNum].headline);
		nDiv.appendChild(nImg);
		/* alert ('Enlargement image URL (nImgURL) is: ' + nImgURL); */
		/* alert (nImg.width+'*'+nImg.height+' or '+sdImages[masterNum].width+'*'+sdImages[masterNum].height); */
		
		// if enlargement image is clicked, go to next enlargement in array
		nImg.addEventListener ? nImg.addEventListener('mousedown', prevNext, false) : nImg.attachEvent('onmousedown', prevNext);
		
		// render enlargement title, or headline
		nHeader = document.createElement('H5');
		nHeaderText = document.createTextNode(sdImages[masterNum].headline);
		nHeader.appendChild(nHeaderText);
		nDiv.appendChild(nHeader);
		
		// render url
		nURL = document.createElement('A');
		nURL.setAttribute('href', 'http://' + sdImages[masterNum].url);
		nURL.setAttribute('target', '_blank');
		nURLtext = document.createTextNode('Visit this website.');
		nURL.appendChild(nURLtext);
		nDiv.appendChild(nURL);
		
		// render image description, if any
		if (sdImages[masterNum].description != null) { 
			nDescription = document.createElement('P');
			nDescripText = document.createTextNode(sdImages[masterNum].description);
			nDescription.appendChild(nDescripText);
			nDiv.appendChild(nDescription);
		}
		
		document.body.appendChild(nDiv);
		
	}
}