<!--


function webcomiclist() {
//---THE WEBCOMIC TITLE LIST:---

document.write("<option id=''>Choose a Comic</option>");

document.write("<option id='2008may'>&nbsp&nbsp&nbsp; may- Artist Alley Humour</option>");
document.write("<option id='2008apr'>&nbsp&nbsp&nbsp; apr &nbsp;- The Art of Optimism</option>");
document.write("<option id='2008mar'>&nbsp&nbsp&nbsp; mar - Throwing a Fit</option>");
document.write("<option id='2008feb'>&nbsp&nbsp&nbsp; feb &nbsp;- Quickest Draw in the West</option>");
document.write("<option id='2008jan'>&nbsp&nbsp&nbsp; jan &nbsp;- Back on Schedule</option>");
document.write("<option id=''>2007:</option>");
document.write("<option id='2007dec'>&nbsp&nbsp&nbsp; dec - Jump on the Bandwagon</option>");
document.write("<option id='2007nov'>&nbsp&nbsp&nbsp; nov - Lost in Time</option>");
document.write("<option id='2007oct'>&nbsp&nbsp&nbsp; oct &nbsp;&nbsp;- Out, Now!</option>");
document.write("<option id=''>2006:</option>");
document.write("<option id='2006nov'>&nbsp&nbsp&nbsp; nov - Funny You Asked</option>");
document.write("<option id='2006oct'>&nbsp&nbsp&nbsp; oct &nbsp;- Size Matters</option>");
document.write("<option id='2006sep'>&nbsp&nbsp&nbsp; sep - In Stores</option>");
document.write("<option id='2006aug'>&nbsp&nbsp&nbsp; aug - The Webshop Setup</option>");
document.write("<option id='2006juli'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp; - Planning Ahead</option>");
document.write("<option id='2006acon-1'>&nbsp&nbsp&nbsp july &nbsp;- Days of a Dealer</option>");
document.write("<option id='2006june'>&nbsp&nbsp&nbsp; june- The Lost List</option>");
document.write("<option id='2006may'>&nbsp&nbsp&nbsp; may- Delay</option>");
document.write("<option id='2006mar'>&nbsp&nbsp&nbsp; mar - Dead Meat Argument</option>");
document.write("<option id='2006feb'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;- Dead Lines</option>");
document.write("<option id='2006feb-2'>&nbsp&nbsp&nbsp feb &nbsp;- The End is Nigh</option>");
document.write("<option id='2006jan2'>&nbsp&nbsp&nbsp jan &nbsp;- Too much to talk About</option>");
document.write("<option id=''>2005:</option>");
document.write("<option id='2005dec'>&nbsp&nbsp&nbsp; dec - Year of the Wolf</option>");
document.write("<option id='2005nov'>&nbsp&nbsp&nbsp; nov - Who mods the Mods?</option>");
document.write("<option id='2005oct'>&nbsp&nbsp&nbsp; oct &nbsp;&nbsp;- A Matter of Style</option>");
document.write("<option id='2005sep-1'>&nbsp&nbsp&nbsp; sep - Check out our... Flyer!</option>");
document.write("<option id='2005aug-1'>&nbsp&nbsp&nbsp; aug - (un-) Common Goals</option>");
document.write("<option id='2005juli-3'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;- A very Shounen Group</option>");
document.write("<option id='2005juli-2'>&nbsp&nbsp&nbsp; july &nbsp;- Stray Wolf</option>");
document.write("<option id='2005teaser'>Teaser - Taking Initiatives</option>");

//note: start button should start at 2005july. intro button should start at teaser.
}	//end of function webcomiclist().



function webcomicbuttons() {
//Activated as a webcomic page loads. forms the webcomic interface layout just beneath the comic.
document.write('<table border="0" cellspacing="0" cellpadding="0">');
document.write('<td width="20" valign="top"><img src="images/paragraph.gif" width="20" height="40" vspace="8"></td>');
document.write('<td valign="center" width="460">');
document.write('<form name="cf">');	//must be inside a form,
					//or the "next" and "previous" buttons won't work in firefox.
//---"previous" button:---
if (comicpage == "2005teaser") {	//no "previous" button on first webcomic.
 document.write('<img src="images/invisible.gif" height="45" width="100">');
} else {
 document.write('<a href="javascript:webcomicchange(\'previous\');">');
 document.write('<img src="images/prevbutton.gif" alt="Previous" border="0" height="45" width="100"></a>');
}
//---webcomic list:---
document.write('&nbsp<select name="selectcomic" align="center" onChange="webcomicchange(this.options[selectedIndex].id)">');
 webcomiclist();			//fills in the selection list options.
document.write('</select>&nbsp');

//---"next" button:---
if (comicpage == document.cf.selectcomic.options[1].id) {	//no "next" button on newest webcomic.
 document.write('<img src="images/invisible.gif" height="45" width="100">');
} else {
 document.write('<a href="javascript:webcomicchange(\'next\');">');
 document.write('<img src="images/nextbutton.gif" alt="Next" border="0" height="45" width="100"></a>');
}
document.write('</form>');		//the form tag does cause an extra empty line after it, causing the table to appear higher. so instead of the paragraph background line, I used it as an image height.
document.write('</td>');
document.write('</table>');
document.close();

//---set current webcomic:---
// if (document.getElementById) {
// document.getElementById( comicpage ).selected="selected";
 //'comicpage' is a variable on each webcomic page, with the id of the page/option. e.g."2005nov".
 //works only in IE5+, NN6+ and FF. extra backup for IE4 and NS4; (this does Not work in FF:)
// }
 document.cf.selectcomic.options( comicpage ).selected="selected";
 //do this last, because firefox stops on javascript errors.
 //when using firefox, the fist encountered selection list will be set right, any others won't. but that doesn't matter for the interface functionality.
}



function webcomictopbuttons() {
//activated as a webcomic page loads. forms the webcomic interface layout above the comic.
//The main difference is the comics list, which is not linked to the next and previous buttons.
document.write('<table border="0" cellspacing="0" cellpadding="0">');
document.write('<td width="20" background="images/paragraph.gif"></td>');
document.write('<td valign="center" width="460">');

if (document.location == "http://www.howlingriot.com/webcomic.htm"
 || document.location == "http://howlingriot.com/webcomic.htm"
 || comicpage == "2005teaser") {
 //---"introduction" button:---
 if (comicpage != "2005teaser") {
 document.write('<a href="javascript:webcomicchange(\'2005teaser\');">');
 document.write('<img src="images/wbcintro.gif" alt="Intro" border="0" height="45" width="100"></a>');
 } else {	//(hide on introduction page itself:)
 document.write('<img src="images/invisible.gif" alt="" border="0" height="45" width="100">');
 }

 //---webcomic list:---
 //note that this list will have the first "choose a comic" option selected, and has a different id.
 document.write('&nbsp<select align="center" onChange="webcomicchange(this.options[selectedIndex].id)">');
 webcomiclist();		//fills in the selection list options.
 document.write('</select>&nbsp');

 //---"start" button:---
 document.write('<a href="javascript:webcomicchange(\'2005juli-2\');">');
 //(topbuttons staat nu uitgeschakeld in 2005teaser page zelf)
 document.write('<img src="images/wbcstart.gif" alt="Start" border="0" height="45" width="100"></a>');
}	//only top start menu on the first page.

else {
 //---"previous" button:---
 if (comicpage == "2005teaser") {	//no "previous" button on first webcomic.
  document.write('<img src="images/invisible.gif" height="45" width="100">');
 } else {
  document.write('<a href="javascript:webcomicchange(\'previous\');">');
  document.write('<img src="images/prevbutton.gif" alt="Previous" border="0" height="45" width="100"></a>');
 }

 //---webcomic list:---
 //note that this list will have the first "choose a comic" option selected, and has a different id.
 document.write('&nbsp<select align="center" onChange="webcomicchange(this.options[selectedIndex].id)">');
 webcomiclist();		//fills in the selection list options.
 document.write('</select>&nbsp');

 //---"next" button:---
 document.write('<a href="javascript:webcomicchange(\'next\');">');
 document.write('<img src="images/nextbutton.gif" alt="Next" border="0" height="45" width="100"></a>');
}

document.write('</td>');
document.write('</table>');
document.close();
}




function webcomicchange(comicvalue) {
//Loads a webcomic page. comicvalue is something like "2005oct" or "2005halloween".
//"NEXT" and "PREVIOUS" buttons functionality:
if (comicvalue == "next" || comicvalue == "previous") {
 for (optnr=0; optnr<document.cf.selectcomic.length; optnr++) {
 //looks up the current comic name's position number in the selection list.
 if (document.cf.selectcomic.options[ optnr ].id == comicpage) {
  if (comicvalue == "next") {
   if (document.cf.selectcomic.options[ optnr -1 ].id == "") {
  	 comicvalue = document.cf.selectcomic.options[ optnr -2 ].id;}	//this skips unused options
   else {comicvalue = document.cf.selectcomic.options[ optnr -1 ].id;}
  }
  else if (comicvalue == "previous"   && optnr+1 < document.cf.selectcomic.length) {
   if (document.cf.selectcomic.options[ optnr +1 ].id == ""
   && optnr+2 < document.cf.selectcomic.length) {
  	 comicvalue = document.cf.selectcomic.options[ optnr +2 ].id;}  //this skips unused options 
   else {comicvalue = document.cf.selectcomic.options[ optnr +1 ].id;}
  }
 }
 //note: using a select list's 'selectedindex', or "selectname.options( "2005nov" ).value",
 //won't work right if there are multiple lists on the page.
 //besides, I may want it to say "choose a comic".
 }
}
//Change the page:
if (comicvalue == document.cf.selectcomic.options[1].id) {document.location.href = "webcomic.htm";} else 
if (comicvalue != "") {document.location.href = "wbc"+ comicvalue +".htm";}
}	//end of function webcomicchange().



function setwebcomicscroller(scrollerheight) {
//activated as the page loads.
//adds the webcomic page scroller div. it's a big, transparent scrollbar that goes
//over (part of) the webcomic image in the main table. why? because we want the comic to appear as images
//(images are printable and saveable), but images are also drag&drop-able, which we want to prevent,
//since this scrollbar uses mouse dragging to scroll!

document.write('<div id="webcomicscroller" style="position:absolute;Left:210px;Width:280px;Height:' +scrollerheight+ 'px; CURSOR:s-resize;" onmouseDown="webcomicdrag(event)" onmouseUp="webcomicdrag(event)" onmouseOut="webcomicdrag(event);" onmouseMove="webcomicscroll(event)">');
//notes: do not define Top, so it will stay inside the table, even if it is absolute.
//there has to be some content inside this div, or the onmouseovercursor won't work in IE.
//hence this "empty" table next. BUT a table is again, draggable in firefox. So, only for IE:
 if (document.all) {
 document.write('<table cellspacing="0" cellpadding="0" width="100%" height="100%" border="0"><td></td></table>');
 }
document.write('</div>');
document.close();
}


var webcomicdragON = false;	//turns to 'true' if mouse held down on webcomic page.
var mousegrabY = 0;
var mousegrabpageY = 0;

function webcomicdrag(event) {
if (event.type=="mousedown") {
 webcomicdragON = true; 	//turn 'grabbing' on.
 //also note the position of the mouse where the user 'grabbed' the page, and the page position.
 mousegrabY=event.clientY; mousegrabpageY=document.body.scrollTop;
}
if (event.type=="mouseout" && webcomicdragON == true && event.clientY < document.body.offsetHeight
 && event.clientY > 120 && event.clientX > 20 && event.clientX < 520) {
 //when draggin off the bottom of the comic page, de-select anything accidentally selected
 //so that in IE, the button images below won't be 'highlighted' when dragging over them.
 //Don't do this, when the mouse is leaving from the side off of the comic page (at > 520 pixels).
 if (document.selection) {document.selection.empty();}	//(IE only. firefox doesn't even need this)
}
if (event.type=="mouseup" || event.type=="mouseout") {webcomicdragON = false;}
}

function webcomicscroll(event) {
//activated when moving the mouse cursor, when over the webcomic 'scrollbar' div.
 if (webcomicdragON) {		//when user has the mouse held down on the page.
 document.body.scrollTop = (event.clientY - mousegrabY)*2.5 + mousegrabpageY;
 }
}


-->