var submenuH = 45;
var submenuW = 280;
var maxW = 0;
var no_nav = 25;
borderW = 4;

function _color_obj(name,hex) {
	this.name = name;
	this.hex = hex;
	return this;
}

function submenuContent(obj) {
var cont = "";
cont += '<TABLE WIDTH="' + submenuW + '" CELLPADDING=0 CELLSPACING=0 BORDER=0>';
cont += '<TR BGCOLOR="#' + obj.hex + '">';
cont += '<TD VALIGN=TOP ROWSPAN=2><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT="' + submenuH + '" BORDER=0><IMG SRC="/images/spacer.gif" WIDTH=' + borderW + ' HEIGHT="1" BORDER=0></TD>';
cont += '<TD VALIGN=TOP><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=' + borderW + ' BORDER=0></TD>';
cont += '<TD VALIGN=TOP ROWSPAN=2><IMG SRC="/images/spacer.gif" WIDTH=' + borderW + ' HEIGHT="1" BORDER=0></TD>';
cont += '</TR>';
cont += '<TR BGCOLOR="#' + obj.hex + '">';
cont += '<TD VALIGN=TOP WIDTH=' + (submenuW - (borderW * 2)) + '><FONT STYLE="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color:#586770"><B>' + obj.title + '</B><BR>';
cont += obj.copy + '</FONT></TD></TR>';
cont += '</TABLE>';
return cont;
}

function showSubmenu(num) {
	var pos_num = nav_images[num].contentObj.start_pos;
	var position = (((pos_num - 2) * 24) + borderW);
	if ((position + submenuW) > maxW) {
		document.all.submenu.style.posLeft = maxW - submenuW;
	}
	else if (position < 0) {
		document.all.submenu.style.posLeft = borderW;
	}
	else {
		document.all.submenu.style.posLeft = position;
	}
	document.all.submenu.innerHTML = submenuContent(nav_images[num].contentObj);
	document.all.submenu.style.display = "";
}

function hideSubmenu() {
	document.all.submenu.style.display = "none";
}

function img_source(num,color) {
	var img_name = "mag_nav_" + num + "_" + color + "\.gif";
	var n_img = new Image(12,14);
	n_img.src = "/images/magazine/subnav/" + img_name;
	return n_img;
}

function _nav_obj(num,link,obj) {
	this.number = num;
	this.color = obj.color;
	this.hex = obj.hex;
	this.link = link;
	this.image = img_source(num,obj.color);
	this.contentObj = obj;
	return this;

}

function _mag_contents(start_pos,length,title,copy,links,color,hex) {
	this.start_pos = start_pos;
	this.length = length;
	this.title = title;
	this.copy = copy;
	this.links = links;
	this.color = color;
	this.hex = hex;
	return this;
}

function add_nav(obj) {
	for(i = 0; i < obj.links.length; i++) {
		var number = (obj.start_pos - 0) + i;
		number = number < 10 ? "0" + number : number;	
		nav_images[(obj.start_pos - 0 + (i - 1))] = new _nav_obj(number,obj.links[i],obj);
	}
}

function calcOnPos(val) {
	var which = Math.round(val);
	found = 0;
	len = 0;
	a = 0;
	while(found < 1) {
		len = len + contents[a].links.length;
		a++;
		if (len >= which) {
			found = 1;
		}	
	}	
	back = (((which - 1) * 24) + (a * 3) + 3);
	return back;
}

var orange = new _color_obj('orange','FFC469');
var green = new _color_obj('green','a3d878');
var ltblue = new _color_obj('ltblue','69C8ED');
var dkblue = new _color_obj('dkblue','6993D9');
var gray = new _color_obj('gray','ABACAF');

var nav_images = new Array();

//////////////////////////////////
// EDIT CONTENT HERE
// ADD EACH PAGE IN A GROUP (ONE ARRAY PER GROUP)
var toc_link = "index.html";
var pageOne = new Array();
pageOne[pageOne.length] = "01_pageone.html";


var moore = new Array();
moore[moore.length] = "02_thurston_moore.html";
moore[moore.length] = "03_thurston_moore.html";
moore[moore.length] = "04_thurston_moore.html";
moore[moore.length] = "05_thurston_moore.html";
moore[moore.length] = "06_thurston_moore.html";

var earlimart = new Array();
earlimart[earlimart.length] = "07_earlimart.html";
earlimart[earlimart.length] = "08_earlimart.html";
earlimart[earlimart.length] = "09_earlimart.html";

var sweating = new Array();
sweating[sweating.length] = "10_sweating_it.html";
sweating[sweating.length] = "11_sweating_it.html";
sweating[sweating.length] = "12_sweating_it.html";
sweating[sweating.length] = "13_sweating_it.html";
sweating[sweating.length] = "14_sweating_it.html";

var ronson = new Array();
ronson[ronson.length] = "15_mark_ronson.html";
ronson[ronson.length] = "16_mark_ronson.html";
ronson[ronson.length] = "17_mark_ronson.html"
ronson[ronson.length] = "18_mark_ronson.html"

var subpop = new Array();
subpop[subpop.length] = "19_subpop.html";
subpop[subpop.length] = "20_subpop.html";

var visionaries = new Array();
visionaries[visionaries.length] = "21_visionaries.html";
visionaries[visionaries.length] = "22_visionaries.html";

var crossword = new Array();
crossword[crossword.length] = "23_crossword.html";

var random = new Array();
random[random.length] = "24_random_review.html";

var soundtrack = new Array();
soundtrack[soundtrack.length] = "25_soundtrack.html";



// ADD EACH GROUP TO CONTENTS ARRAY IN ORDER
var contents = new Array();
contents[contents.length] =  new _mag_contents('1',pageOne.length,'PAGE 01','<BR>',pageOne,gray.name,gray.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),moore.length,'LYDIA LUNCH VS THURSTON MOORE','<BR>',moore,dkblue.name,dkblue.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),earlimart.length,'EARLIMART DRINKS ON THE JOB','<BR>',earlimart,green.name,green.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),sweating.length,'STYLE: SWEATING IT','<BR>',sweating,orange.name,orange.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),ronson.length,'MOONLIGHTING WITH MARK RONSON','<BR>',ronson,gray.name,gray.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),subpop.length,'LABEL CHECK: SUB POP','<BR>',subpop,ltblue.name,ltblue.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),visionaries.length,'VISIONARIES','<BR>',visionaries,green.name,green.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),crossword.length,'CROSSWORD','<BR>',crossword,orange.name,orange.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),random.length,'RANDOM REVIEW','<BR>',random,gray.name,gray.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),soundtrack.length,'SOUNDTRACK','<BR>',soundtrack,ltblue.name,ltblue.hex);
// END EDIT CONTENT
/////////////////////////////

for(c = 0; c < contents.length; c++) {
	add_nav(contents[c]);	
}

// now that we've added everything, calc max width
var divW = (contents.length * 3) + (no_nav * 24) + (borderW * 2);
maxW = divW - borderW;

function writeMagNav(on,aX) {
if ((!aX) || ((aX) && (aX > 1))) {
document.writeln('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>');
document.writeln('<TR>');
document.writeln('<TD VALIGN=TOP COLSPAN=2><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=7 BORDER=0></TD>');
document.writeln('<TD VALIGN=TOP ROWSPAN=2>');

document.writeln('<DIV NAME="mag_nav" STYLE="position:relative\; width:' + divW + '">');
document.writeln('<TABLE WIDTH=' + divW + ' CELLPADDING=0 CELLSPACING=0 BORDER=0>');
document.writeln('<TR><TD VALIGN=TOP COLSPAN=7><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=7 BORDER=0></TD></TR>');
document.writeln('<TR BGCOLOR="#485458"><TD VALIGN=TOP COLSPAN=7><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=1 BORDER=0></TD></TR>');
document.writeln('<TR>');
document.writeln('<TD VALIGN=TOP ROWSPAN=3 BGCOLOR="#485458"><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=22 BORDER=0></TD>');
document.writeln('<TD VALIGN=TOP ROWSPAN=3><IMG SRC="/images/magazine/subnav/mag_nav_side_white.gif" WIDTH=1 HEIGHT=22 BORDER=0></TD>');
document.writeln('<TD VALIGN=TOP COLSPAN=3 BGCOLOR="#ffffff"><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=4 BORDER=0></TD>');
document.writeln('<TD VALIGN=TOP ROWSPAN=3><IMG SRC="/images/magazine/subnav/mag_nav_side_white.gif" WIDTH=1 HEIGHT=22 BORDER=0></TD>');
document.writeln('<TD VALIGN=TOP ROWSPAN=3 BGCOLOR="#485458"><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=22 BORDER=0></TD>');
document.writeln('</TR>');
document.writeln('<TR><TD VALIGN=TOP BGCOLOR="#ffffff"><IMG SRC="/images/spacer.gif" WIDTH=' + (borderW - 1) + ' HEIGHT=1 BORDER=0></TD>');
document.writeln('<TD VALIGN=TOP><TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0><TR>');

j = 0;
for(k = 0; k < contents.length; k++) {
document.writeln('<TD VALIGN=TOP><IMG SRC="/images/magazine/subnav/mag_nav_side_' + contents[k].color + '.gif" WIDTH=1 HEIGHT=14 BORDER=0></TD>');

for(l = 0; l < contents[k].links.length; l++) {
i = (j + l);
document.writeln('<TD VALIGN=TOP WIDTH=24 BGCOLOR="#' + nav_images[i].hex + '" onMouseOver="showSubmenu(\'' + i + '\');" onMouseOut="hideSubmenu();"><A HREF="' + nav_images[i].link + '"><IMG SRC="/images/spacer.gif" WIDTH=6 HEIGHT=1 BORDER=0><IMG SRC="' + nav_images[i].image.src + '" WIDTH=' + nav_images[i].image.width + ' HEIGHT=' + nav_images[i].image.height + ' BORDER=0><IMG SRC="/images/spacer.gif" WIDTH=6 HEIGHT=1 BORDER=0></A></TD>');
}
document.writeln('<TD VALIGN=TOP><IMG SRC="/images/magazine/subnav/mag_nav_side_' + contents[k].color + '.gif" WIDTH=1 HEIGHT=14 BORDER=0></TD>');
//update j to equal where we stopped
j = j + l;
//write single pixel spacer
document.writeln('<TD VALIGN=TOP BGCOLOR="#ffffff"><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=1 BORDER=0></TD>');

}

// now fill with white numbers for whatever's left
for (f = j; f < no_nav; f++) {
var dispNum = (f - 0) + 1;
padNum = dispNum < 10 ? "0" + dispNum : dispNum;	
document.writeln('<TD VALIGN=TOP WIDTH=24 BGCOLOR="#ffffff"><IMG SRC="/images/spacer.gif" WIDTH=6 HEIGHT=1 BORDER=0><IMG SRC="/images/magazine/subnav/mag_nav_' + padNum + '_white.gif" WIDTH=12 HEIGHT=14 BORDER=0><IMG SRC="/images/spacer.gif" WIDTH=6 HEIGHT=1 BORDER=0></TD>');

}

document.writeln('</TR></TABLE></TD>');
document.writeln('<TD VALIGN=TOP BGCOLOR="#ffffff"><IMG SRC="/images/spacer.gif" WIDTH=' + (borderW -1) + ' HEIGHT=1 BORDER=0></TD></TR>');
document.writeln('<TR BGCOLOR="#ffffff"><TD VALIGN=TOP COLSPAN=3><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=4 BORDER=0></TD></TR>');
document.writeln('<TR BGCOLOR="#485458"><TD VALIGN=TOP COLSPAN=7><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=1 BORDER=0></TD></TR>');
document.writeln('</TABLE>');

if (on) {
var leftPos = calcOnPos(on);
document.writeln('<DIV STYLE="position:absolute\; top:0\; left:' + leftPos + '\; z-index:99">');
document.writeln('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>');
document.writeln('<TR><TD VALIGN=TOP BGCOLOR="#' + nav_images[(Math.round(on) - 1)].hex + '" onMouseOver="showSubmenu(\'' + (Math.round(on) -1) + '\');" onMouseOut="hideSubmenu();"><IMG SRC="/images/magazine/subnav/mag_nav_on_' + on + '\.gif" WIDTH=24 HEIGHT=24 HSPACE=1 VSPACE=1 BORDER=0></TD></TR>');
document.writeln('</TABLE>');
document.writeln('</DIV>');
}

document.writeln('<DIV ID="submenu" STYLE="position:absolute\; top:26\; z-index:99\; width:' + submenuW + '\; height:' + submenuH + '\; display:none">');
document.writeln('</DIV>');
document.writeln('</DIV>');

document.writeln('</TD>');

document.writeln('<TD VALIGN=TOP COLSPAN=2><IMG SRC="/images/spacer.gif" WIDTH=1 HEIGHT=7 BORDER=0></TD>');
document.writeln('</TR>');

document.writeln('<TR>');
if (on) {
var lftLink = (Math.round(on) > 1) ? nav_images[(Math.round(on) - 2)].link : toc_link; 
document.writeln('<TD VALIGN=TOP BGCOLOR="#485458"><A HREF="' + lftLink + '"><IMG SRC="/images/magazine/subnav/btn_mag_nav_lft_on.gif" WIDTH=35 HEIGHT=22 BORDER=0 VSPACE=1 HSPACE=1></A></TD>');
} else {
document.writeln('<TD VALIGN=TOP BGCOLOR="#485458"><IMG SRC="/images/magazine/subnav/btn_mag_nav_lft_off.gif" WIDTH=35 HEIGHT=22 BORDER=0 VSPACE=1 HSPACE=1></TD>');
}
document.writeln('<TD VALIGN=TOP><IMG SRC="/images/spacer.gif" WIDTH=6 HEIGHT=1 BORDER=0></TD>');
document.writeln('<TD VALIGN=TOP><IMG SRC="/images/spacer.gif" WIDTH=6 HEIGHT=1 BORDER=0></TD>');

if ((!on) || (Math.round(on) < nav_images.length)) {
document.writeln('<TD VALIGN=TOP BGCOLOR="#485458"><A HREF="' + nav_images[(Math.round(on))].link + '"><IMG SRC="/images/magazine/subnav/btn_mag_nav_rt_on.gif" WIDTH=35 HEIGHT=22 BORDER=0 VSPACE=1 HSPACE=1></A></TD>');
} else {
document.writeln('<TD VALIGN=TOP BGCOLOR="#485458"><IMG SRC="/images/magazine/subnav/btn_mag_nav_rt_off.gif" WIDTH=35 HEIGHT=22 BORDER=0 VSPACE=1 HSPACE=1></TD>');
}
document.writeln('</TR></TABLE>'); 

}
}