var portfolio = new Array();

portfolio[0] = new Object();
portfolio[0].loc = "Will & Grace";
portfolio[0].pic = new Array();
portfolio[0].pic[0] = '5';
portfolio[0].pic[1] = "Grace-&-Leo\'s-Apt.-3";
portfolio[0].pic[2] = '19';
portfolio[0].pic[3] = 'Wills-Bedroom-2';
portfolio[0].pic[4] = "Grace-&-Leo\'s-Apt.-1";
portfolio[0].pic[5] = 'Karens-Bedroom-1';
portfolio[0].pic[6] = 'wng2';
portfolio[0].pic[7] = '18';
portfolio[0].pic[8] = 'Karens-Bedroom-2';
portfolio[0].pic[9] = '7';
portfolio[0].pic[10] = "Grace-&-Leo\'s-DR-3";
portfolio[0].pic[11] = 'wng1';
portfolio[0].pic[12] = '9';
portfolio[0].pic[13] = "Grace-&-Leo\'s-DR-2";
portfolio[0].pic[14] = '4';
portfolio[0].pic[15] = '3';
portfolio[0].pic[16] = '17';	
portfolio[0].pic[17] = 'Wills-Bedroom-1';
portfolio[0].pic[18] = "Grace-&-Leo\'s-DR-1";
portfolio[0].pic[19] = 'wg1';
portfolio[0].pic[20] = 'wg2';	
portfolio[0].pic[21] = 'wg3';
portfolio[0].pic[22] = "wg4";

portfolio[1] = new Object();
portfolio[1].loc = "Good Morning Miami";
portfolio[1].pic = new Array();
portfolio[1].pic[0] = 'gmm1';
portfolio[1].pic[1] = 'gmm2';
portfolio[1].pic[2] = 'gmm3';
portfolio[1].pic[3] = 'gmm4';
portfolio[1].pic[4] = 'gmm5';
portfolio[1].pic[5] = 'gmm6';
portfolio[1].pic[6] = 'gmm7';
portfolio[1].pic[7] = 'gmm8';

function thumbsElem() {
	this.portfolio = 0;
	this.pic = 0;
}

thumbsElem.prototype.fill = function() {
	
	var usePortfolio = this.portfolio;
	var iterateTo = this.pic+6;
	var navHTML = "<div style=\"text-align:right;padding-right:26px;\"><a href=\"javascript:nav.goBack();\" style=\"color:#000000;\">&lt;&lt;</a> " + portfolio[usePortfolio].loc + " <a href=\"javascript:nav.goForward();\" style=\"color:#000000;\">&gt;&gt;</a></div>";
	var filledMain = false;
	var imgA = new Array();
	for (var i = this.pic; i < iterateTo; i++) {
		if (portfolio[usePortfolio].pic[i]) {
			var imgName = portfolio[usePortfolio].pic[i];
			var ln = (!imgA.length)?0:imgA.length;
			imgA[ln] = new Object();
			imgA[ln].main = new Image();
			imgA[ln].tn = new Image();
			imgA[ln].main.src = "images/set/" + imgName + ".jpg";
			imgA[ln].tn.src = 'images/set/th_c/' + imgName + '_th_c.jpg';
			if (!filledMain) {
				document.images['mainimage'].src = "images/set/" + imgName + ".jpg";
				document.images['mainimage'].height = 351;
				filledMain = true;
			}
			var dbldimgName = imgName.replace(/\'/,"\\'");
			navHTML += '<img name=" '+ dbldimgName +' " src="images/set/th_bw/' + imgName + '_th_bw.jpg" width="100" height="79" border="1" hspace="1" vspace="1" onmouseover="this.src=\'images/set/th_c/' + dbldimgName + '_th_c.jpg\';document.images[\'mainimage\'].src=\'images/set/' + dbldimgName + '.jpg\';" onmouseout="this.src=\'images/set/th_bw/' + dbldimgName + '_th_bw.jpg\';">';
		}
	}
	//alert(navHTML);
	return navHTML;
}

thumbsElem.prototype.goForward = function() {
	
	var at = portfolio[this.portfolio].pic[this.pic];
	if (portfolio[this.portfolio].pic[this.pic+6]) {
		this.pic = this.pic + 6;
	}
	else {
		if (this.portfolio == portfolio.length-1)
			this.portfolio = 0;
		else
			this.portfolio = this.portfolio + 1;
		this.pic = 0;
	}
	document.getElementById('thumbnails').innerHTML = this.fill();
}

thumbsElem.prototype.goBack = function() {
	var at = portfolio[this.portfolio].pic[this.pic];
	if (portfolio[this.portfolio].pic[this.pic-1]) {
		this.pic = this.pic - 6;
	}
	else {
		if (this.portfolio == 0)
			this.portfolio = portfolio.length-1;
		else
			this.portfolio = this.portfolio - 1;
		this.pic = portfolio[this.portfolio].pic.length-6;
	}
	document.getElementById('thumbnails').innerHTML = this.fill();
}

function buildThumbs() {
	
	document.getElementById('thumbnails').innerHTML = nav.fill();
	//alert(document.getElementById('thumbnails').innerHTML);
	
}

var nav = new thumbsElem();