::Start
<<display "pane">>

::pane
<<pane "left" "debug">>\
<<pane "right" "links">>

::null

::debug
THIS IS A MACRO THAT ALLOWS YOU TO PLACE SUB-PASSAGES INSIDE YOUR PASSAGES, AND TO SELECTIVELY TARGET THEM WITH LINKS (TO RELOAD OR ADVANCE, ETC).
* USE {{{<<pane "pane name" "initial passage">>}}} TO PLACE A SUB-PANE IN A GIVEN PASSAGE.
* LINKS IN THE FORM {{{<<link "to passage" "link text">>}}} WITHIN THE PASSAGE SHOWN BY THAT PANE WILL RELOAD THE PASSAGE WITHOUT TOUCHING ANY OTHER PASSAGES BEING DISPLAYED.
* LINKS IN THE FORM {{{<<linkTo "pane name" "to passage" "link text">>}}} WILL TARGET THAT PANE (REPLACING THE GIVEN PASSAGE) NO MATTER WHERE THEY ARE ON THE PAGE.
* THERE'S ALSO {{{<<linkMany "pane name" "to passage" "pane name" "to passage" (etc) "link text">>}}} FOR ALTERING MANY PANES WITH ONE LINK
PANES ARE WRAPPED IN A DIV W/ THE ID OF THEIR PANE, SO YOU CAN USE {{{#left}}} TO TARGET CSS RULES FOR THE PANE CALLED "left"
<<link "baz" "links in this pane">> / <<link "quux" "don't touch anything in the other pane">>

::baz
<<link "debug" "letting you have stories">> / <<link "quux" "that diverge and recombine">>

::quux
<<link "debug" "letting you have complex ui">> / <<link "baz" "in some passages, without touching others">>

::links
<<link "foo" "this is a link">>

<<linkTo "left" "leftOnly" "this link will always target the left pane">>
<<linkTo "right" "rightOnly" "this link will always target the right pane">>

<<linkMany "left" "doubleLeft" "right" "doubleRight" "this link targets both panes">>

::foo
JUST SOME OTHER PASSAGE

<<link "links" "BACK TO LINKS">>

::leftOnly
LEFT ONLY!!
<<link "debug" "BACK TO INFO">>

::rightOnly
RIGHT ONLY!!!
<<link "links" "BACK TO LINKS">>

::doubleLeft
THESE PASSAGES CAN ONLY

::doubleRight
BE REACHED FROM THAT DOUBLE LINK

<<linkMany "left" "debug" "right" "links" "BACK (FOR BOTH)">>


::revisioncss [stylesheet]
.revision-span-in,
.revision-span-in * {
	opacity: 0;
}
.revision-span:not(.revision-span-out),
.revision-span:not(.revision-span-out) * {
	transition: 0.5s;
	-webkit-transition: 0.5s;
}
.revision-span-out,
.revision-span-out * {
	position:absolute;
	opacity: 0;
}

::styles [stylesheet]
@font-face {
	font-family: 'Quicksand Regular';
	font-style: normal;
	font-weight: 400;
	src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://dl.dropbox.com/s/roxwdsrg09fho3b/Quicksand_Regular.ttf) format('truetype');
}
body, html {
	font-family: 'Quicksand Regular', sans-serif;
	font-size: 9pt;
	margin: 0;
	padding: 0;
	height: 100%;
}
#passages {
	min-height: 100%;
	overflow: hidden;
}
#passages {
	margin: 0;
	border: 0;
	padding: 0;
	min-height: 100%;
}
#sidebar {
	display: none;
}
#left,
#right {
	min-height: 100%;
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 1em 2em 51em 2em;
	margin-bottom: -50em;
}
#left {
	text-align: right;
	border-right-style: solid;
	border-right-width: .5em;
}
#right {
	text-align: left;
	border-left-style: solid;
	border-left-width: .5em;
}
	#left ul, #left ol {
		margin-right: .5em;
		padding-right: 1.5em;
		margin-left: 0;
		padding-left: 0;
	}
		#left li {
			margin-left: 6em;
			margin-right: 0;
		}
		#right li:before,
		#left li:before {
			display: block;
			content: "\2022";
			width: 1.0em;
			height: 1.0em;
			line-height: 1.33em;
			font-size: 150%;
			text-align: center;
		}
		#right li:before {
			position: absolute;
			top: 0;
			left: -1.33em;
		}
		#left li:before {
			position: absolute;
			top: 0;
			right: -1.33em;
		}
		#right li,
		#left li {
			position: relative;
		}
li {
	list-style: none;
}
.black, #left {
	background: #111;
	color: #ddd;
	border-color: #eee;
}
.white, #right {
	background: #eee;
	color: #222;
	border-color: #111;
}
	.passage .black a,
	.passage .white a,
	#left a,
	#right a {
		transition: 0.5s;
		-webkit-transition: 0.5s;
	}
	.passage .black a:hover,
	.passage .white a:hover,
	#left a:hover,
	#right a:hover {
		text-decoration: none;
	}
	.passage .black a,
	#left a {
		color: #ccc;
		text-shadow: 1px 0 1px #ccc;
	}
	.passage .black a:hover,
	#left a:hover {
		color: #fff;
		text-shadow: 1px 0 3px #fff;
	}
	.passage .white a,
	#right a {
		color: #333;
		text-shadow: -1px 0 1px #333;
	}
	.passage .white a:hover,
	#right a:hover {
		color: #000;
		text-shadow: -1px 0 3px #000;
	}

::scripts [script]
function reshowAll(e){var t=document.querySelectorAll(".passage ."+e.replace(" ","_")),n=false;for(var r=0;r<t.length;r++){n=reshow(t[r])}return n}function reshow(e){e.innerHTML="";new Wikifier(e,e.tweecode);e.classList.remove("revision-span-out");e.classList.add("revision-span-in");if(e.timeout){clearTimeout(e.timeout)}e.timeout=setTimeout(function(){e.classList.remove("revision-span-in")},1)}macros.pane={handler:function(place,macroName,params,parser){var name=params[0][0]=="$"?eval(Wikifier.parse(params[0])):params[0];var passage=params[1][0]=="$"?eval(Wikifier.parse(params[1])):params[1];var pane=document.createElement("span");var contents=document.createElement("span");pane.id=name.replace(" ","_");contents.className=" "+name.replace(" ","_");contents.tweecode='<<set $_ to $_current.push ("'+name+'")>><<display $_'+name+">><<set $_ to $_current.pop()>>";var h=state.history[0].variables;h["_"+name]=passage;if(typeof h._current=="undefined"){h._current=[]}pane.insertBefore(contents,null);place.insertBefore(pane,null);new Wikifier(contents,contents.tweecode)}};macros.link=macros.linkTo={handler:function(place,macroName,params,parser){var to,text,target;var h=state.history[0].variables;if(typeof h._current=="undefined"){h._current=[]}if(macroName=="link"){if(params.length<2){throwError(place,macroName+" macro needs 2 parameters");return}to=params[0][0]=="$"?eval(Wikifier.parse(params[0])):params[0];text=params[1][0]=="$"?eval(Wikifier.parse(params[1])):params[1];target=h._current[h._current.length-1]}else{if(params.length<3){throwError(place,macroName+" macro needs 3 parameters");return}target=params[0][0]=="$"?eval(Wikifier.parse(params[0])):params[0];to=params[1][0]=="$"?eval(Wikifier.parse(params[1])):params[1];text=params[2][0]=="$"?eval(Wikifier.parse(params[2])):params[2]}var link=Wikifier.createInternalLink();link.className="internalLink paneLink";link.id=to;link.insertBefore(document.createTextNode(text),null);link.onclick=function(){h["_"+target]=to;reshowAll(target)};place.insertBefore(link,null)}};macros.linkMany={handler:function(place,macroName,params,parser){if(params.length<3||params.length%2!=1){throwError(place,macroName+": invalid args, needs [pane passage...] link text");return}var h=state.history[0].variables;if(typeof h._current=="undefined"){h._current=[]}var text=params[params.length-1][0]=="$"?eval(Wikifier.parse(params[params.length-1])):params[params.length-1];var to,target;var link=Wikifier.createInternalLink();link.className="internalLink paneLink";link.insertBefore(document.createTextNode(text),null);link.onclick=function(){while(params.length!=1){target=params.shift();target=text[0]=="$"?eval(Wikifier.parse(target)):target;to=params.shift();to=to[0]=="$"?eval(Wikifier.parse(to)):to;h["_"+target]=to;reshowAll(target)}};place.insertBefore(link,null)}}