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 lizphair = new Array();
lizphair[lizphair.length] = "02_lizphair.html";
lizphair[lizphair.length] = "03_lizphair.html";
lizphair[lizphair.length] = "04_lizphair.html";
lizphair[lizphair.length] = "05_lizphair.html";
lizphair[lizphair.length] = "06_lizphair.html";

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

var outside = new Array();
outside[outside.length] = "10_outsidein.html";
outside[outside.length] = "11_outsidein.html";
outside[outside.length] = "12_outsidein.html";
outside[outside.length] = "13_outsidein.html";

var boyssummer = new Array();
boyssummer[boyssummer.length] = "14_boyssummer.html";

var wit = new Array();
wit[wit.length] = "15_wit.html";
wit[wit.length] = "16_wit.html";

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

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

var napsterbits = new Array();
napsterbits[napsterbits.length] = "20_napsterbits.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)),lizphair.length,'NOT PHAIR?','Liz Phair on Songwriting, Sex, and Selling Out',lizphair,green.name,green.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),warhols.length,'WELCOME TO OUR FACTORY','Dandy Warhols go pop in the Odditorium',warhols,ltblue.name,ltblue.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),outside.length,'STYLE: OUT SIDE IN','Uncool rules the school',outside,orange.name,orange.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),boyssummer.length,'BOYS OF SUMMER','Warped Tour Videos featuring Rancid, the Ataris, and more...',boyssummer,dkblue.name,dkblue.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),wit.length,'INCOMING','Brooklyn\'s W.I.T. are ready for their close-up',wit,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,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,ltblue.name,ltblue.hex);
contents[contents.length] =  new _mag_contents((contents[contents.length - 1].links.length + (contents[contents.length - 1].start_pos - 0)),napsterbits.length,'NAPSTER BITS','<BR>',napsterbits,orange.name,orange.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) {

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>'); 
}