<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88
/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}

a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}

h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}

.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}

.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}

.tabSelected{color:[[ColorPalette::PrimaryDark]];
	background:[[ColorPalette::TertiaryPale]];
	border-left:1px solid [[ColorPalette::TertiaryLight]];
	border-top:1px solid [[ColorPalette::TertiaryLight]];
	border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}

#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}

.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
	border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background:[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
	border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
	border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}

.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}

#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}

.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}

.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}

.tiddler .defaultCommand {font-weight:bold;}

.shadow .title {color:[[ColorPalette::TertiaryDark]];}

.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}

.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}

.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}

.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}

.sparkline {background:[[ColorPalette::PrimaryPale]]; border:0;}
.sparktick {background:[[ColorPalette::PrimaryDark]];}

.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}

.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}

.imageLink, #displayArea .imageLink {background:transparent;}

.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}

.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}

.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}

.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}

.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}

.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}

#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:'alpha(opacity:60)';}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}

body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}

hr {height:1px;}

a {text-decoration:none;}

dt {font-weight:bold;}

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}

.txtOptionInput {width:11em;}

#contentWrapper .chkOptionInput {border:0;}

.externalLink {text-decoration:underline;}

.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}

.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}

/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

#mainMenu .tiddlyLinkExisting,
	#mainMenu .tiddlyLinkNonExisting,
	#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0em 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0em 1em 1em; left:0px; top:0px;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0em 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 .3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 0em 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0em 0em 0em; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0em;}
.wizardFooter .status {padding:0em 0.4em 0em 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em 0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0em; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em 0.2em 0.2em 0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em 0.2em 0.2em 0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em 1em 1em 1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0em;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.tabset {padding:1em 0em 0em 0.5em;}
.tab {margin:0em 0em 0em 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0em 14em;}

.toolbar {text-align:right; font-size:.9em;}

.tiddler {padding:1em 1em 0em 1em;}

.missing .viewer,.missing .title {font-style:italic;}

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

.tiddler .button {padding:0.2em 0.4em;}

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}

.footer {font-size:.9em;}
.footer li {display:inline;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0em 0.25em; padding:0em 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0em; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}

.fieldsetFix {border:0; padding:0; margin:1px 0px 1px 0px;}

.sparkline {line-height:1em;}
.sparktick {outline:0;}

.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; right:0em;}
#backstageButton a {padding:0.1em 0.4em 0.1em 0.4em; margin:0.1em 0.1em 0.1em 0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin:0em 3em 0em 3em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none ! important;}
#displayArea {margin: 1em 1em 0em 1em;}
/* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
noscript {display:none;}
}
/*}}}*/
<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<!--}}}-->
To get started with this blank TiddlyWiki, you'll need to modify the following tiddlers:
* SiteTitle & SiteSubtitle: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* MainMenu: The menu (usually on the left)
* DefaultTiddlers: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>
These InterfaceOptions for customising TiddlyWiki are saved in your browser

Your username for signing your edits. Write it as a WikiWord (eg JoeBloggs)

<<option txtUserName>>
<<option chkSaveBackups>> SaveBackups
<<option chkAutoSave>> AutoSave
<<option chkRegExpSearch>> RegExpSearch
<<option chkCaseSensitiveSearch>> CaseSensitiveSearch
<<option chkAnimate>> EnableAnimations

----
Also see [[AdvancedOptions]]
<<importTiddlers>>
<html>

<body id="twoCol" onLoad="results('var items = [\'shoes\', \'socks\', \'belt\', \'hat\']');">
<div id="container">
  <div id="contentWrap">
  <div id="main">
  <h1> Array Test Bed</h1>
<div id="results"><h2>Results</h2>
<div id="start">items[] contents at start: <code>&nbsp;</code></div>

<div id="code">JavaScript code: <code>&nbsp;</code></div>
<div id="finish">items[] contents after JavaScript: <code>&nbsp;</code></div>
<div id="return">Returned value: <code>&nbsp;</code></div>
<div id="explanation">Explanation: <br><span class="explanation">&nbsp;blah</span></div>
</div>
  <h2>Original Array</h2>
  <p class="example"><code title="Initializes array with 4 items">items = ['shoes', 'socks', 'belt', 'hat'];</code>
    <a href="#">Run It</a>  </p>

  <h2>Splice</h2>
  <p class="example"><code title="removes 3rd item, and inserts two new items">items.splice(2,1,'coat','scarf');</code> <a href="#">Run It</a> </p>
  <h2>Push</h2>
  <p class="example"><code title="adds two items to end of array and returns total number of items in array">items.push('umbrella','shirt');</code> <a href="#">Run It</a></p>

  <h2>Unshift</h2>
  <p class="example"><code title="adds two items to beginning of array and returns total number of items in array">items.unshift('tie','pants');</code> <a href="#">Run It</a> </p>
  <h2>Shift</h2>
  <p class="example"><code title="removes 1 item from the beginning of the array">items.shift();</code> <a href="#">Run It</a> </p>

  <h2>Pop</h2>
  <p class="example"><code title="removes 1 item from end of array">items.pop();</code> <a href="#">Run It</a></p>
  <h2></h2>
  <h2>Slice</h2>
<p class="example"><code title="creates a new array made up of a 'slice' of the original array. The first number is the starting index, the second number is the ending index">items.slice(1,2);</code> 
  <a href="#">Run It</a></p>

<h2>Reverse</h2>
<p class="example"><code title="reverses the order of the items in the array">items.reverse();</code>
  <a href="#">Run It</a></p>
<h2>Join</h2>
<p class="example"><code title="creates a string by combining the value of each array item. The string given to the join() command is used as the seperator">items.join(':');</code>
  <a href="#">Run It</a></p>

  </div>
  
  </div>

</div>
</body>
</html>


<script show>
(function($) {
$(document).ready(function( ) {
	$('.example').each(function() {
		$this = $(this); // reference to the p tag
		//alert($this.find('a').html());
		$this.find('a').click(function() {
			codeElem = $(this).prev('code');
			var code = codeElem.text();
			var expl = codeElem.attr('title') || 'none';
			results(code,expl);
		});
	});
	
	
		
});

var items = ['shoes', 'socks', 'belt', 'hat'];

function results(code,expl) {
	if (items[0]!=undefined) {
		$('#start code').html(items.toString());
	} else {
		$('#start code').html('<strong>empty array</strong>');
	}
		$('#code code').html(code);
		var originalItems = items.toString();
		var returnVal = eval(code);
	if (items[0]!=undefined) {
		if (originalItems==items.toString()) {
		$('#finish code').html('<strong>Array unchanged</strong>');
		} else {
		$('#finish code').html(items.toString());
		}
	} else {
		$('#finish code').html('<strong>empty array</strong>');
	}
		if (returnVal) {
		$('#return code').html(returnVal.toString());
		} else {
		$('#return code').html('nothing returned');
		}
		
		$('#explanation span').html(expl);
	}
})(jQuery);
</script>
!Using a Do/While Loop
<script show>
do {
	var luckyNumber = prompt('What is your lucky number?','');
	luckyNumber = parseInt(luckyNumber);
} while (isNaN(luckyNumber));
	if (luckyNumber == 7 ) {
		return("Hey, that's my lucky number too!");
	} else if (luckyNumber == 13 || luckyNumber == 24) {
		return("Wooh. " + luckyNumber + "? That's an unlucky number!");
	} else {
		return("The number " + luckyNumber + " is lucky for you!");
	}
</script>
<html>
<head>
<style type="text/css">
<!--
#messageBox {
	float: right;
	width: 400px;
	padding: 10px;
	background: #E6E2AE;
	border: 1px solid #0A3737;
	margin-top: 15px;
}

#messageBox code {
	font-size: 15px;
}

#message {
	font-size: 16px;
	border: 1px solid red;
	padding: 5px;
}

#message p {
	font-size: 16px;
}

.codeRun {
	font-weight: bold !important;
	color: red;
}

#oneCol #contentWrap {
	float: none;
}
#oneCol #main {
	float: none;
	margin-left: 20px;
}
-->
</style>
</head>

<body id="oneCol">
<div id="container">
  
  <div id="contentWrap">
  <div id="main">
   
  <h1> jQuery Content Functions Test Bed</h1>
 <h2>jQuery Command</h2>
  <p id="jquery" class="codeRun">jQuery command will appear here.</p>
  <div id="messageBox">

   <div id="changeContainer">
  <div id="message"><p>New content will go here</p></div>
  </div>
    <h2>HTML Before:</h2>
  <code id="before">&lt;div id=&quot;message&quot;&gt;&lt;p&gt;New content will go here&lt;/p&gt;&lt;/div&gt;</code>

  <h2>HTML After:</h2>
  <code id="after"></code>
	</div>
  <form name="form1" method="post" action="">
    <h2>Replacement Content</h2>
    <p>
      <textarea name="content" cols="30" rows="4" id="content"></textarea>

   
    </p>
  </form>
  
  <h2>.text()</h2>
  <p class="example"><code>$('#message').text(<span class="text"></span>);</code>
    <a href="#">Run It</a></p>
    <h2>.html()</h2>

  <p class="example"><code>$('#message').html(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
   <h2>.append()</h2>
  <p class="example"><code>$('#message').append(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>

   <h2>.prepend()</h2>
  <p class="example"><code>$('#message').prepend(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
    <h2>.after()</h2>
  <p class="example"><code>$('#message').after(<span class="text"></span>);</code>

   <a href="#">Run It</a></p>
    <h2>.before()</h2>
  <p class="example"><code>$('#message').before(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
       <h2>.replaceWith()</h2>
    <p class="example"><code>$('#message').replaceWith(<span class="text"></span>);</code>

   <a href="#">Run It</a></p>
       <h2>.remove()</h2>
    <p class="example"><code>$('#message').remove(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
       <h2>.empty()</h2>
    <p class="example"><code>$('#message').empty(<span class="text"></span>);</code>

   <a href="#">Run It</a></p>
  </div>
  </div>

</body>
</html>

<script show>
(function($) {
$(document).ready(function( ) {
	$('.example').each(function() {
		$this = $(this); // reference to the p tag
		//alert($this.find('a').html());
		$this.find('a').click(function() {
			var oldHTML=$('#messageBox #changeContainer').html();
			oldHTML = oldHTML.replace(/></g,'> <');
			$('#before').text(oldHTML);
			text = $('#content').val();
			//text = text.replace(/\s/g,'');
			var codeElem = $(this).prev('code');
			var code = codeElem.text();
			code = code.replace(/\(\)/,"('" + text + "')");
			$('#jquery').text(code);
			eval(code);
			var newHTML=$('#messageBox #changeContainer').html();
			newHTML = newHTML.replace(/></g,'> <');
			$('#after').text(newHTML);
		});
	});
});
})(jQuery);
</script>
/***
 * jQuery Cycle Plugin (with Transition Definitions)
 * Examples and documentation at: http://jquery.malsup.com/cycle/
 * Copyright (c) 2007-2009 M. Alsup
 * Version: 2.51 (16-FEB-2009)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Requires: jQuery v1.2.3 or later
 *
 * Originally based on the work of:
 *	1) Matt Oakes (http://portfolio.gizone.co.uk/applications/slideshow/)
 *	2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/)
 *	3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/)
 ***/
//{{{
;(function($){var ver="2.51";if($.support==undefined){$.support={opacity:!($.browser.msie&&/MSIE 6.0/.test(navigator.userAgent))};}function log(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments,""));}}$.fn.cycle=function(options){if(this.length==0){log("terminating; zero elements found by selector"+($.isReady?"":" (DOM not ready)"));return this;}var opt2=arguments[1];return this.each(function(){if(this.cycleStop==undefined){this.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"stop":this.cycleStop++;if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=0;$(this).removeData("cycle.opts");return;case"pause":this.cyclePause=1;return;case"resume":this.cyclePause=0;if(opt2===true){options=$(this).data("cycle.opts");if(!options){log("options not found, can not resume");return;}if(this.cycleTimeout){clearTimeout(this.cycleTimeout);this.cycleTimeout=0;}go(options.elements,options,1,1);}return;default:options={fx:options};}}else{if(options.constructor==Number){var num=options;options=$(this).data("cycle.opts");if(!options){log("options not found, can not advance slide");return;}if(num<0||num>=options.elements.length){log("invalid slide index: "+num);return;}options.nextSlide=num;if(this.cycleTimeout){clearTimeout(this.cycleTimeout);this.cycleTimeout=0;}go(options.elements,options,1,num>=options.currSlide);return;}}if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=0;this.cyclePause=0;var $cont=$(this);var $slides=options.slideExpr?$(options.slideExpr,this):$cont.children();var els=$slides.get();if(els.length<2){log("terminating; too few slides: "+els.length);return;}var opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}$cont.data("cycle.opts",opts);opts.container=this;opts.stopCount=this.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(opts.continuous){opts.after.push(function(){go(els,opts,0,!opts.rev);});}opts.originalBefore=opts.before;opts.originalAfter=opts.after;if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}var cls=this.className;opts.width=parseInt((cls.match(/w:(\d+)/)||[])[1])||opts.width;opts.height=parseInt((cls.match(/h:(\d+)/)||[])[1])||opts.height;opts.timeout=parseInt((cls.match(/t:(\d+)/)||[])[1])||opts.timeout;if($cont.css("position")=="static"){$cont.css("position","relative");}if(opts.width){$cont.width(opts.width);}if(opts.height&&opts.height!="auto"){$cont.height(opts.height);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}if(opts.random){opts.randomMap=[];for(var i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return Math.random()-0.5;});opts.randomIndex=0;opts.startingSlide=opts.randomMap[0];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide=opts.startingSlide||0;var first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var z=first?i>=first?els.length-(i-first):first-i:els.length-i;$(this).css("z-index",z);});$(els[first]).css("opacity",1).show();if($.browser.msie){els[first].style.removeAttribute("filter");}if(opts.fit&&opts.width){$slides.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}var reshape=opts.containerResize&&!$cont.innerHeight();if(reshape){var maxw=0,maxh=0;for(var i=0;i<els.length;i++){var $e=$(els[i]),w=$e.outerWidth(),h=$e.outerHeight();maxw=w>maxw?w:maxw;maxh=h>maxh?h:maxh;}$cont.css({width:maxw+"px",height:maxh+"px"});}if(opts.pause){$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});}var txs=$.fn.cycle.transitions;if(opts.fx.indexOf(",")>0){opts.multiFx=true;opts.fxs=opts.fx.replace(/\s*/g,"").split(",");for(var i=0;i<opts.fxs.length;i++){var fx=opts.fxs[i];var tx=txs[fx];if(!tx||!txs.hasOwnProperty(fx)||!$.isFunction(tx)){log("discarding unknowtn transition: ",fx);opts.fxs.splice(i,1);i--;}}if(!opts.fxs.length){log("No valid transitions named; slideshow terminating.");return;}}else{if(opts.fx=="all"){opts.multiFx=true;opts.fxs=[];for(p in txs){var tx=txs[p];if(txs.hasOwnProperty(p)&&$.isFunction(tx)){opts.fxs.push(p);}}}}if(opts.multiFx&&opts.randomizeEffects){var r1=Math.floor(Math.random()*20)+20;for(var i=0;i<r1;i++){var r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)[0]);}log("randomized fx sequence: ",opts.fxs);}if(!opts.multiFx){var init=txs[opts.fx];if($.isFunction(init)){init($cont,$slides,opts);}else{if(opts.fx!="custom"&&!opts.multiFx){log("unknown transition: "+opts.fx,"; slideshow terminating");return;}}}$slides.each(function(){var $el=$(this);this.cycleH=(opts.fit&&opts.height)?opts.height:$el.height();this.cycleW=(opts.fit&&opts.width)?opts.width:$el.width();});opts.cssBefore=opts.cssBefore||{};opts.animIn=opts.animIn||{};opts.animOut=opts.animOut||{};$slides.not(":eq("+first+")").css(opts.cssBefore);if(opts.cssFirst){$($slides[first]).css(opts.cssFirst);}if(opts.timeout){opts.timeout=parseInt(opts.timeout);if(opts.speed.constructor==String){opts.speed=$.fx.speeds[opts.speed]||parseInt(opts.speed);}if(!opts.sync){opts.speed=opts.speed/2;}while((opts.timeout-opts.speed)<250){opts.timeout+=opts.speed;}}if(opts.easing){opts.easeIn=opts.easeOut=opts.easing;}if(!opts.speedIn){opts.speedIn=opts.speed;}if(!opts.speedOut){opts.speedOut=opts.speed;}opts.slideCount=els.length;opts.currSlide=opts.lastSlide=first;if(opts.random){opts.nextSlide=opts.currSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.startingSlide>=(els.length-1)?0:opts.startingSlide+1;}var e0=$slides[first];if(opts.before.length){opts.before[0].apply(e0,[e0,e0,opts,true]);}if(opts.after.length>1){opts.after[1].apply(e0,[e0,e0,opts,true]);}if(opts.click&&!opts.next){opts.next=opts.click;}if(opts.next){$(opts.next).bind("click",function(){return advance(els,opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).bind("click",function(){return advance(els,opts,opts.rev?1:-1);});}if(opts.pager){buildPager(els,opts);}opts.addSlide=function(newSlide,prepend){var $s=$(newSlide),s=$s[0];if(!opts.autostopCount){opts.countdown++;}els[prepend?"unshift":"push"](s);if(opts.els){opts.els[prepend?"unshift":"push"](s);}opts.slideCount=els.length;$s.css("position","absolute");$s[prepend?"prependTo":"appendTo"]($cont);if(prepend){opts.currSlide++;opts.nextSlide++;}if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($s);}if(opts.fit&&opts.width){$s.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}s.cycleH=(opts.fit&&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager){$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);}if(typeof opts.onAddSlide=="function"){opts.onAddSlide($s);}else{$s.hide();}};if(opts.timeout||opts.continuous){this.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},opts.continuous?10:opts.timeout+(opts.delay||0));}});};function go(els,opts,manual,fwd){if(manual&&opts.busy){$(els).stop(true,true);opts.busy=false;}if(opts.busy){return;}var p=opts.container,curr=els[opts.currSlide],next=els[opts.nextSlide];if(p.cycleStop!=opts.stopCount||p.cycleTimeout===0&&!manual){return;}if(!manual&&!p.cyclePause&&((opts.autostop&&(--opts.countdown<=0))||(opts.nowrap&&!opts.random&&opts.nextSlide<opts.currSlide))){if(opts.end){opts.end(opts);}return;}if(manual||!p.cyclePause){curr.cycleH=curr.cycleH||curr.offsetHeight;curr.cycleW=curr.cycleW||curr.offsetWidth;next.cycleH=next.cycleH||next.offsetHeight;next.cycleW=next.cycleW||next.offsetWidth;if(opts.multiFx){if(opts.lastFx==undefined||++opts.lastFx>=opts.fxs.length){opts.lastFx=0;}var fx=opts.fxs[opts.lastFx];opts.currFx=fx;opts.before=[];opts.after=[];opts.cssBefore={};opts.cssAfter={};opts.animIn={};opts.animOut={};opts.fxFn=null;$.each(opts.originalBefore,function(){opts.before.push(this);});$.each(opts.originalAfter,function(){opts.after.push(this);});var init=$.fn.cycle.transitions[fx];if($.isFunction(init)){init($(opts.container),$(opts.elements),opts);}}if(opts.before.length){$.each(opts.before,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});}var after=function(){if($.browser.msie&&opts.cleartype){this.style.removeAttribute("filter");}$.each(opts.after,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});};if(opts.nextSlide!=opts.currSlide){opts.busy=1;if(opts.fxFn){opts.fxFn(curr,next,opts,after,fwd);}else{if($.isFunction($.fn.cycle[opts.fx])){$.fn.cycle[opts.fx](curr,next,opts,after);}else{$.fn.cycle.custom(curr,next,opts,after,manual&&opts.fastOnEvent);}}}opts.lastSlide=opts.currSlide;if(opts.random){opts.currSlide=opts.nextSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{var roll=(opts.nextSlide+1)==els.length;opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;}if(opts.pager){$.fn.cycle.updateActivePagerLink(opts.pager,opts.currSlide);}}if(opts.timeout&&!opts.continuous){p.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},getTimeout(curr,next,opts,fwd));}else{if(opts.continuous&&p.cyclePause){p.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},10);}}}$.fn.cycle.updateActivePagerLink=function(pager,currSlide){$(pager).find("a").removeClass("activeSlide").filter("a:eq("+currSlide+")").addClass("activeSlide");};function getTimeout(curr,next,opts,fwd){if(opts.timeoutFn){var t=opts.timeoutFn(curr,next,opts,fwd);if(t!==false){return t;}}return opts.timeout;}function advance(els,opts,val){var p=opts.container,timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(opts.random&&val<0){opts.randomIndex--;if(--opts.randomIndex==-2){opts.randomIndex=els.length-2;}else{if(opts.randomIndex==-1){opts.randomIndex=els.length-1;}}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.random){if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.currSlide+val;if(opts.nextSlide<0){if(opts.nowrap){return false;}opts.nextSlide=els.length-1;}else{if(opts.nextSlide>=els.length){if(opts.nowrap){return false;}opts.nextSlide=0;}}}}if(opts.prevNextClick&&typeof opts.prevNextClick=="function"){opts.prevNextClick(val>0,opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,val>=0);return false;}function buildPager(els,opts){var $p=$(opts.pager);$.each(els,function(i,o){$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);});$.fn.cycle.updateActivePagerLink(opts.pager,opts.startingSlide);}$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts){var a=(typeof opts.pagerAnchorBuilder=="function")?opts.pagerAnchorBuilder(i,el):'<a href="#">'+(i+1)+"</a>";if(!a){return;}var $a=$(a);if($a.parents("body").length==0){$a.appendTo($p);}$a.bind(opts.pagerEvent,function(){opts.nextSlide=i;var p=opts.container,timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(typeof opts.pagerClick=="function"){opts.pagerClick(opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,opts.currSlide<i);return false;});if(opts.pauseOnPagerHover){$a.hover(function(){opts.container.cyclePause++;},function(){opts.container.cyclePause--;});}};$.fn.cycle.hopsFromLast=function(opts,fwd){var hops,l=opts.lastSlide,c=opts.currSlide;if(fwd){hops=c>l?c-l:opts.slideCount-l;}else{hops=c<l?l-c:l+opts.slideCount-c;}return hops;};function clearTypeFix($slides){function hex(s){var s=parseInt(s).toString(16);return s.length<2?"0"+s:s;}function getBg(e){for(;e&&e.nodeName.toLowerCase()!="html";e=e.parentNode){var v=$.css(e,"background-color");if(v.indexOf("rgb")>=0){var rgb=v.match(/\d+/g);return"#"+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}if(v&&v!="transparent"){return v;}}return"#ffffff";}$slides.each(function(){$(this).css("background-color",getBg(this));});}$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display="block";if(w!==false){opts.cssBefore.width=next.cycleW;}if(h!==false){opts.cssBefore.height=next.cycleH;}opts.cssAfter=opts.cssAfter||{};opts.cssAfter.display="none";$(curr).css("zIndex",opts.slideCount+(rev===true?1:0));$(next).css("zIndex",opts.slideCount+(rev===true?0:1));};$.fn.cycle.custom=function(curr,next,opts,cb,speedOverride){var $l=$(curr),$n=$(next);$n.css(opts.cssBefore);var speedIn=opts.speedIn;var speedOut=opts.speedOut;var easeIn=opts.easeIn;var easeOut=opts.easeOut;if(speedOverride){if(typeof speedOverride=="number"){speedIn=speedOut=speedOverride;}else{speedIn=speedOut=1;}easeIn=easeOut=null;}var fn=function(){$n.animate(opts.animIn,speedIn,easeIn,cb);};$l.animate(opts.animOut,speedOut,easeOut,function(){if(opts.cssAfter){$l.css(opts.cssAfter);}if(!opts.sync){fn();}});if(opts.sync){fn();}};$.fn.cycle.transitions={fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn.cycle.ver=function(){return ver;};$.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,prevNextClick:null,pager:null,pagerClick:null,pagerEvent:"click",pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:0,nowrap:0,fastOnEvent:0,randomizeEffects:1};})(jQuery);(function($){$.fn.cycle.transitions.scrollUp=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssBefore={top:h,left:0};opts.cssFirst={top:0};opts.animIn={top:0};opts.animOut={top:-h};};$.fn.cycle.transitions.scrollDown=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssFirst={top:0};opts.cssBefore={top:-h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.scrollLeft=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:0-w};};$.fn.cycle.transitions.scrollRight=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:-w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.scrollHorz=function($cont,$slides,opts){$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.left=fwd?(next.cycleW-1):(1-next.cycleW);opts.animOut.left=fwd?-curr.cycleW:curr.cycleW;});opts.cssFirst={left:0};opts.cssBefore={top:0};opts.animIn={left:0};opts.animOut={top:0};};$.fn.cycle.transitions.scrollVert=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.top=fwd?(1-next.cycleH):(next.cycleH-1);opts.animOut.top=fwd?curr.cycleH:-curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0};opts.animIn={top:0};opts.animOut={left:0};};$.fn.cycle.transitions.slideX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;});opts.cssBefore={left:0,top:0,width:0};opts.animIn={width:"show"};opts.animOut={width:0};};$.fn.cycle.transitions.slideY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;});opts.cssBefore={left:0,top:0,height:0};opts.animIn={height:"show"};opts.animOut={height:0};};$.fn.cycle.transitions.shuffle=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();$slides.css({left:0,top:0});opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);});opts.speed=opts.speed/2;opts.random=0;opts.shuffle=opts.shuffle||{left:-w,top:15};opts.els=[];for(var i=0;i<$slides.length;i++){opts.els.push($slides[i]);}for(var i=0;i<opts.currSlide;i++){opts.els.push(opts.els.shift());}opts.fxFn=function(curr,next,opts,cb,fwd){var $el=fwd?$(curr):$(next);$(next).css(opts.cssBefore);var count=opts.slideCount;$el.animate(opts.shuffle,opts.speedIn,opts.easeIn,function(){var hops=$.fn.cycle.hopsFromLast(opts,fwd);for(var k=0;k<hops;k++){fwd?opts.els.push(opts.els.shift()):opts.els.unshift(opts.els.pop());}if(fwd){for(var i=0,len=opts.els.length;i<len;i++){$(opts.els[i]).css("z-index",len-i+count);}}else{var z=$(curr).css("z-index");$el.css("z-index",parseInt(z)+1+count);}$el.animate({left:0,top:0},opts.speedOut,opts.easeOut,function(){$(fwd?this:curr).hide();if(cb){cb();}});});};opts.cssBefore={display:"block",opacity:1,top:0,left:0};};$.fn.cycle.transitions.turnUp=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH;opts.animIn.height=next.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,height:0};opts.animIn={top:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnDown=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,top:0,height:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnLeft=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW;opts.animIn.width=next.cycleW;});opts.cssBefore={top:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.turnRight=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={top:0,left:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.zoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false,true);opts.cssBefore.top=next.cycleH/2;opts.cssBefore.left=next.cycleW/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};opts.animOut={width:0,height:0,top:curr.cycleH/2,left:curr.cycleW/2};});opts.cssFirst={top:0,left:0};opts.cssBefore={width:0,height:0};};$.fn.cycle.transitions.fadeZoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false);opts.cssBefore.left=next.cycleW/2;opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};});opts.cssBefore={width:0,height:0};opts.animOut={opacity:0};};$.fn.cycle.transitions.blindX=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.blindY=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.blindZ=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();var w=$cont.width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:w};opts.animIn={top:0,left:0};opts.animOut={top:h,left:w};};$.fn.cycle.transitions.growX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=this.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:0};});opts.cssBefore={width:0,top:0};};$.fn.cycle.transitions.growY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=this.cycleH/2;opts.animIn={top:0,height:this.cycleH};opts.animOut={top:0};});opts.cssBefore={height:0,left:0};};$.fn.cycle.transitions.curtainX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:curr.cycleW/2,width:0};});opts.cssBefore={top:0,width:0};};$.fn.cycle.transitions.curtainY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,height:next.cycleH};opts.animOut={top:curr.cycleH/2,height:0};});opts.cssBefore={left:0,height:0};};$.fn.cycle.transitions.cover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);if(d=="right"){opts.cssBefore.left=-w;}else{if(d=="up"){opts.cssBefore.top=h;}else{if(d=="down"){opts.cssBefore.top=-h;}else{opts.cssBefore.left=w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.uncover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(d=="right"){opts.animOut.left=w;}else{if(d=="up"){opts.animOut.top=-h;}else{if(d=="down"){opts.animOut.top=h;}else{opts.animOut.left=-w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.toss=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(!opts.animOut.left&&!opts.animOut.top){opts.animOut={left:w*2,top:-h/2,opacity:0};}else{opts.animOut.opacity=0;}});opts.cssBefore={left:0,top:0};opts.animIn={left:0};};$.fn.cycle.transitions.wipe=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.cssBefore=opts.cssBefore||{};var clip;if(opts.clip){if(/l2r/.test(opts.clip)){clip="rect(0px 0px "+h+"px 0px)";}else{if(/r2l/.test(opts.clip)){clip="rect(0px "+w+"px "+h+"px "+w+"px)";}else{if(/t2b/.test(opts.clip)){clip="rect(0px "+w+"px 0px 0px)";}else{if(/b2t/.test(opts.clip)){clip="rect("+h+"px "+w+"px "+h+"px 0px)";}else{if(/zoom/.test(opts.clip)){var t=parseInt(h/2);var l=parseInt(w/2);clip="rect("+t+"px "+l+"px "+t+"px "+l+"px)";}}}}}}opts.cssBefore.clip=opts.cssBefore.clip||clip||"rect(0px 0px 0px 0px)";var d=opts.cssBefore.clip.match(/(\d+)/g);var t=parseInt(d[0]),r=parseInt(d[1]),b=parseInt(d[2]),l=parseInt(d[3]);opts.before.push(function(curr,next,opts){if(curr==next){return;}var $curr=$(curr),$next=$(next);$.fn.cycle.commonReset(curr,next,opts);var step=1,count=parseInt((opts.speedIn/13))-1;(function f(){var tt=t?t-parseInt(step*(t/count)):0;var ll=l?l-parseInt(step*(l/count)):0;var bb=b<h?b+parseInt(step*((h-b)/count||1)):h;var rr=r<w?r+parseInt(step*((w-r)/count||1)):w;$next.css({clip:"rect("+tt+"px "+rr+"px "+bb+"px "+ll+"px)"});(step++<=count)?setTimeout(f,13):$curr.css("display","none");})();});opts.cssBefore={display:"block",opacity:1,top:0,left:0};opts.animIn={left:0};opts.animOut={left:0};};})(jQuery);
//}}}
!Today’s Date
Using [[dateStringPlugin]] instead of external file
<script show>
	var today = new Date();
	var message = dateString(today, 'Today is %W, the %O of %M, %Y');
	return(message);
</script>
[[Home]]
[[Selectors|chapter06/events.html]]

<html><div align="center"><iframe src="chapter06/events.html" width="800" height="750" scrolling="no"></iframe></div></html> 
US Zip Code REGEX
var ZipCode = /\d{5}(-\d{4})?/;
if you want to make sure the string ONLY contains a Zip Code use the ^ and $ to match the beginning and ending of the string like this:
var ZipCode = /^\d{5}(-\d{4})?$/;

US Phone Number REGEX
var phoneNum = /\(?(\d{3})\)?[ -.](\d{3})[ -.](\d{4})/;
if you want to make sure the string ONLY contains a phone number use the ^ and $ to match the beginning and ending of the string like this:
var ZipCode = /^\(?(\d{3})\)?[ -.](\d{3})[ -.](\d{4})$/;

Email Address REGEX
var email = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
if you want to make sure the string ONLY contains an email address use the ^ and $ to match the beginning and ending of the string like this:
var email = /^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$/;

Date REGEX
var date = /([01]?\d)[-\/ .]([0123]?\d)[-\/ .](\d{4})/;
if you want to make sure the string ONLY contains a date use the ^ and $ to match the beginning and ending of the string like this:
var date = /^([01]?\d)[-\/ .]([0123]?\d)[-\/ .](\d{4})$/;

URL REGEX
var URL = /((\bhttps?:\/\/)|(\bwww\.))\S*/;
if you want to make sure the string ONLY contains a URL use the ^ and $ to match the beginning and ending of the string and remove the \b characters like this:
var URL = /^((https?:\/\/)|(www\.))\S*$/;
/***
|''Name''|FirefoxPrivilegesPlugin|
|''Description''|Create a backstage tab to manage Firefox url privileges|
|''Author''|Xavier Vergés (xverges at gmail dot com)|
|''Version''|1.1.1 ($Rev: 4266 $)|
|''Date''|$Date: 2008-04-06 09:04:49 +0200 (dom, 06 abr 2008) $|
|''Status''|@@beta@@|
|''Source''|http://firefoxprivileges.tiddlyspot.com/|
|''CodeRepository''|http://trac.tiddlywiki.org/browser/Trunk/contributors/XavierVerges/plugins/FirefoxPrivilegesPlugin.js|
|''License''|BSD tbd|
|''CoreVersion''|2.2.4 (maybe 2.2+?)|
|''Feedback''|http://groups.google.com/group/TiddlyWiki|
|''BookmarkletReady''|http://icanhaz.com/firefoxprivileges|
|''Browser''|Mozilla. Tested under Firefox 2.0.0.12 and Firefox 3.0b4|
|''Documentation''|http://firefoxprivileges.tiddlyspot.com/#HowTo|
/%
!Description
!Notes
!Usage
!Revision History
!!v1.0 (2008-03-23)
* First public version
%/
!Usage
The wizard can be opened from the backstage or using the macro {{{<<firefoxPrivileges>>}}}
The step to show when opening the wizard can be set with the {{{txtPrivWizardDefaultStep}}} option: <<option txtPrivWizardDefaultStep>>
!Code
***/
//{{{
if(window.Components) {
config.macros.firefoxPrivileges = {};
config.macros.firefoxPrivileges.lingo = {};
/*
//}}}
!!! Strings to translate
//{{{
*/
merge(config.macros.firefoxPrivileges.lingo ,{
	wizardTitle: "Manage Firefox Privileges",
	learnStepTitle: "1. Learn about the risks of giving privileges to file: urls",
	learnStepHtml: "<h3>Local files</h3><p>Firefox can be configured to grant the same security privileges to every html document loaded from disk (those <i>file:</i> urls), or to grant different privileges on a per file basis. Local TiddyWikis need some high security privileges in order to let you save changes to disk, or to import tiddlers from remote servers. Unfortunately, these same privileges can potentially be used by the bad guys to launch programs, get files from your disk and upload them somewhere, access your browsing history...</p><p>While it is more convenient to let Firefox give all your local files the same security privileges, and I'm not aware of any malware attack that tries to take advantage of privileged <i>file:</i> urls, an ounce of prevention is worth a pound of cure.</p><p>You can learn more about this by reading <a href='http://www.mozilla.org/projects/security/components/per-file.html' class='externalLink'>Per-File Permissions</a> and <a href='http://www.mozilla.org/projects/security/components/signed-scripts.html#privs-list' class='externalLink'>JavaScript Security: Signed Script</a> at mozilla.org.</p><h3>Remote files</h3><p>When a remote document (<i>http:</i> urls) requests especial privileges, Firefox <ul><li>checks the value of <code>signed.applets.codebase_principal_support</code>, a preference that can be configured from the page that is loaded when you type <code>about:config</code> in the address bar</li><li>if the previous value is set to false, Firefox denies silently the request</li><li>if the previous value is set to true, Firefox looks for the document's domain in the list of privileges urls that can be configured from this wizard, and, if not there, asks the user to grant the privilege</li></ul><p>Note that, in this case, and unlike when dealing with local files, Firefox will only take into account the document's domain instead of performing an exact match of the url.</p><p>Take a look at <a href='http://messfromabove.tiddlyspot.com' class='externalLink'>http://messfromabove.tiddlyspot.com</a> to learn more about the nice and nasty possibilities that this setting provides.</p><h3>This Wizard</h3><p>This wizard will help you to grant the required privileges to your TiddlyWikis, local or remote, and warn you if you have enabled a dangerous default. To do so, Firefox will probably prompt you to grant it some special privileges in order to list and modify the list of privileged urls.</p><p>Please note that changing the privileges for an url may not have effect until you reload it in the browser.</p><input type='hidden' name='mark'></input>",
	learnStepButton: "1. Learn about the risks",
	learnStepButtonTooltip: "Learn why 'Remember this' is an unsafe choice in security prompts",
	grantStepTitle: "2. Grant privileges to individual local documents or remote domains",
	grantStepHtml: "Url: <input type='text' size=80 name='txtUrl'><br/><br/><input type='checkbox' checked='true' name='chkUniversalXPConnect'>Grant rights required to save to disk (Run or install software on your machine - UniversalXPConnect)</input><br/><input type='checkbox' checked='true' name='chkUniversalBrowserRead'>Grant rights required to import tiddlers from servers or access TiddlySpot (Read and upload local files - UniversalBrowserRead)</input><br/><input type='checkbox' name='chkUniversalBrowserWrite'>Modify any open window - UniversalBrowserWrite</input><br/><input type='checkbox' name='chkUniversalFileRead'>Read and upload local files - UniversalFileRead</input><br/><input type='checkbox' name='chkCapabilityPreferencesAccess'>By-pass core security settings - CapabilityPreferencesAccess</input><br/><input type='checkbox' name='chkUniversalPreferencesRead'>Read program settings - UniversalPreferencesRead</input><br/><input type='checkbox' name='chkUniversalPreferencesWrite'>Modify program settings - UniversalPreferencesWrite</input><br/><input type='button' class='button' name='btnGrant' value='Set privileges'/>",
	grantStepButton: "2. Set privileges",
	grantStepButtonTooltip: "Manage privileges for this or other docs",
	viewStepTitle: "3. Granted privileges",
	viewStepHtml: "<input type='hidden' name='mark'></input>",
	viewStepButton: "3. View privileges",
	viewStepButtonTooltip: "List granted privileges, and optionally reset them",
	viewStepEmptyMsg: "Asking for temporary privileges to list permanent privileges...",
	listViewTemplate: {
		columns: [
			{name: 'Selected', field: 'Selected', rowName: 'url', type: 'Selector'},
			{name: 'Url', field: 'url', title: "Url", type: 'LongLink'},
			{name: 'Granted', field: 'granted', title: "Granted", type: 'StringList'},
			{name: 'Denied', field: 'denied', title: "Denied", type: 'StringList'},
			{name: 'Handle', field: 'handle', title: "Handle", type: 'String'},
            {name: 'Notes', field: 'notes', title: "Notes", type: 'String'}
			],
		rowClasses: [
			{className: 'lowlight', field: 'highlight'},
			{className: 'error', field: 'warning'}
			]
		},
	listResetButton: "Reset the privileges of the selected urls",
	noteDangerous: "This is dangerous",
	noteNoEffect: "This has no effect",
	noteThisUrl: "This document's url",
	noteTheUrlYouUpdated: "The url you just updated",
	errNoUrl: "The url is required",
	errNotAuthorized: "Not enough privileges. Maybe you are trying this from a tiddlywiki loaded from a server?",
	msgUpdating: "Updating privileges for %0",
	msgSetting: "Setting privileges for %0",
	msgResetting: "Resetting privileges for %0"
});
merge(config.optionsDesc,{
	txtPrivWizardDefaultStep: "Step to show when opening the 'Manage Firefox Privileges' wizard"
});
merge(config.tasks,{
	firefoxPrivileges: {text: "security", tooltip: "Work with Firefox url privileges", content: '<<firefoxPrivileges>>'}
});
/*
//}}}
!!! Regular code
//{{{
*/
config.backstageTasks.pushUnique("firefoxPrivileges");
if (typeof(config.options.txtPrivWizardDefaultStep) === "undefined"){
	config.options.txtPrivWizardDefaultStep = "1";
}

(function(){

var plugin = config.macros.firefoxPrivileges;
var lingo = plugin.lingo;
plugin.privAccessCapabilities = "UniversalXPConnect CapabilityPreferencesAccess";
plugin.stepNames = ["learn", "grant", "view"];
plugin.lastUrl = document.location.toString();

plugin.handler = function(place,macroName,params,wikifier,paramString,tiddler)
{
	var wizard = new Wizard();
	wizard.createWizard(place,lingo.wizardTitle);
	var step = parseInt(config.options.txtPrivWizardDefaultStep);
	step = (isNaN(step)||(step<=0)||(step>3))? 0 : step-1;
	plugin.step(wizard, step);
};
plugin.buttons = (function(){
	var onclick = {};
	for (var ii=0; ii<plugin.stepNames.length; ii++) {
		onclick[plugin.stepNames[ii]] = 
			(function() {
				var index = ii;
				var handler = function(e) {
					plugin.step(new Wizard(resolveTarget(e)), index);
					return false;
				};
				return handler;})();
	}
	var getButtons = function(index) {
		var buttons = [];
		for (var ii= 0; ii<plugin.stepNames.length; ii++) {
			if (ii !== index) {
				var name = plugin.stepNames[ii];
				buttons.push({
					onClick: onclick[name],
					caption: lingo[name+"StepButton"],
					tooltip: lingo[name+"StepButtonTooltip"]
				});
			}
		}
		return buttons;
	};
	return getButtons;
})();
plugin.step = function(wizard, stepIndex, extraParams)
{
	var name = plugin.stepNames[stepIndex];
	var stepResult = {};
	wizard.addStep(lingo[name+"StepTitle"],lingo[name+"StepHtml"]);
	wizard.setButtons(plugin.buttons(stepIndex));
	if (plugin[name+"StepProcess"]) {
		plugin[name+"StepProcess"](wizard, extraParams);
	}
};
plugin.getMarkedDiv = function(wizard)
{
	var mark = wizard.getElement("mark");
	var div = document.createElement("div");
	mark.parentNode.insertBefore(div,mark);
	return div;
};
plugin.learnStepProcess = function(wizard)
{
	var src = config.optionsDesc.txtPrivWizardDefaultStep + ": <<option txtPrivWizardDefaultStep>>";
	wikify(src, plugin.getMarkedDiv(wizard));
}
plugin.grantStepProcess = function(wizard)
{
	wizard.getElement("btnGrant").onclick = plugin.btnSetPrivileges;
	wizard.getElement("txtUrl").value = plugin.lastUrl;
};
plugin.viewStepProcess = function(wizard, extraParams)
{
	var listWrapper = plugin.getMarkedDiv(wizard);
	listWrapper.innerHTML = lingo.viewStepEmptyMsg;

	var html = [];
	try {
		if (!extraParams || extraParams.reqAcccess) {
			netscape.security.PrivilegeManager.enablePrivilege(plugin.privAccessCapabilities);
		}

		var thisUrl = document.location.toString();
		var privs = plugin.getPrivilegedUrls(false);
		var listItems = [];
		for (var handle in privs) {
			if (privs.hasOwnProperty(handle)) {
				var priv = privs[handle];
				if ((priv.url === "file://") ||
					(priv.url.indexOf(" ") !== -1)) {
					priv.warning = true;
					priv.notes = (priv.url === "file://")? lingo.noteDangerous:lingo.noteNoEffect;
				} else if ((priv.url === thisUrl) || 
				           (priv.url === plugin.lastUrl)) {
					priv.highlight = true;
					priv.notes = (priv.url === thisUrl)? lingo.noteThisUrl:lingo.noteTheUrlYouUpdated;
				} 
				listItems.push(priv);
			}
		}
		var sortFunc = function(a,b) {
			if(a.url > b.url) {return 1;}
			if(a.url < b.url) {return -1;}
			return 0;
		};
		listItems.sort(sortFunc);
		listWrapper.innerHTML = "";
		var listView = ListView.create(listWrapper, listItems, lingo.listViewTemplate);
		wizard.setValue("listView",listView);

		createTiddlyButton(listWrapper, lingo.listResetButton, "", plugin.btnResetPrivileges);
	} catch (ex) {
		listWrapper.innerHTML = "Error: " + ex;
	}
};
plugin.btnSetPrivileges = function(ev)
{
	var wizard = new Wizard(this);
	var checkboxes = wizard.bodyElem.getElementsByTagName("input");
	var grant = [];
	for(var t=0; t<checkboxes.length; t++) {
		var cb = checkboxes[t];
		if((cb.getAttribute("type") === "checkbox")&&cb.checked) {
			grant.push(cb.name.substring(3));
		}
	}
	var url = wizard.getElement("txtUrl").value;
	if (!url) {
		alert(lingo.errNoUrl);
	} else {
		plugin.lastUrl = url;
		var viewStepExtraParams = {reqAcccess: false};
		var gotPrivileges = false;
		try {
			netscape.security.PrivilegeManager.enablePrivilege(config.macros.firefoxPrivileges.privAccessCapabilities);
			gotPrivileges = true;
		} catch(ex) {}
		if (gotPrivileges) {
			plugin.setUrlPrivilege(false, url, grant, false);
			plugin.step(wizard, 2, viewStepExtraParams);
		} else {
			alert(lingo.errNotAuthorized);
		}
	}
	return false;
};
plugin.btnResetPrivileges = function(ev)
{
	var wizard = new Wizard(this);
	var listView = wizard.getValue("listView");
	var urls = ListView.getSelectedRows(listView);
	if(urls.length === 0) {
		alert(config.messages.nothingSelected);
	} else {
		netscape.security.PrivilegeManager.enablePrivilege(config.macros.firefoxPrivileges.privAccessCapabilities);
		for (var ii=0; ii<urls.length; ii++) {
			plugin.setUrlPrivilege(false, urls[ii], [], true);
		}
		plugin.step(wizard, 2, {reqAcccess: false});
	}
	return false;
};
plugin.setUrlPrivilege = function(reqAccess, url, rights, reset)
{
	function getFreeHandle(dict, prefix) {
		var handle = prefix;
		var ii = 0;
		while("undefined" !== typeof(dict[handle])) {
			ii++;
			handle = prefix + ii;
		}
		return handle;
	}
	if (reqAccess) {
		netscape.security.PrivilegeManager.enablePrivilege(plugin.privAccessCapabilities);
	}
	var isUpdate = true;
	var urlHandle = "";
	var urls = plugin.getPrivilegedUrls(false);
	for (var handle in urls) {
		if (urls[handle].url === url) {
			urlHandle = handle;
			break;
		}
	}
	var denied = [];
	var granted = [];
	if (urlHandle) {
		if (!reset) {
			displayMessage(lingo.msgUpdating.format([url]), url);
			denied = urls[urlHandle].denied.slice();
			granted = urls[urlHandle].granted.slice();
		} else {
			displayMessage(lingo.msgResetting.format([url]), url);
		}
	} else {
		displayMessage(lingo.msgSetting.format([url]), url);
		urlHandle = getFreeHandle(urls, "FirefoxPrivilegesPlugin");
		isUpdate = false;
	}
	for (var ii=0; ii<rights.length; ii++) {
		denied.remove(rights[ii]);
		granted.pushUnique(rights[ii]);
	}
	var prefs = plugin.getPrefsBranch();
	var idStr = urlHandle + ".id";
	var deniedStr = urlHandle + ".denied";
	var grantedStr = urlHandle + ".granted";
	function clearPref(str) {
		if (prefs.prefHasUserValue(str)) {
			prefs.clearUserPref(str);
		}
	}
	function setOrClearPref(str, val) {
		if (val.length) {
			val = ("string" === typeof(val))? val : val.join(" ");
			prefs.setCharPref(str, val);
			// why oh why?!
			if (!prefs.prefHasUserValue(str)) {
				prefs.setCharPref(str, val);
			}
		} else {
			clearPref(str);
		}
	}
	if (!denied.length && !granted.length) {
		prefs.deleteBranch(urlHandle + ".");
	} else {
		setOrClearPref(idStr, url);
		setOrClearPref(deniedStr, denied);
		setOrClearPref(grantedStr , granted);
		setOrClearPref(idStr, url);
	}
	var prefService = plugin.getPrefsService();
	prefService.savePrefFile(null);

	return !isUpdate;
};
plugin.getPrivilegedUrls = function(reqAccess)
{
	function Privileged(url, granted, denied, handle) {
		this.url = url;
		this.granted = granted;
		this.denied = denied;
		this.handle = handle;
	}
	function getPermissions(branch, handle, type) {
		var permissions = [];
		var pref = handle + "." + type;
		if (branch.prefHasUserValue(pref)) {
			permissions = branch.getCharPref(pref).split(/\s+/);
			permissions.sort();
		}
		return permissions;
	}
	var privileged = {};
	if (reqAccess) {
		netscape.security.PrivilegeManager.enablePrivilege(plugin.privAccessCapabilities);
	}
	var prefs = plugin.getPrefsBranch(); 
	var capsEntries = prefs.getChildList("", { value: 0 }); 

	for (var ii=0; ii < capsEntries.length; ii++) 
	{ 
		var matches = capsEntries[ii].match(/([^\.]*)[\.]id/); 
		if (matches && (2 === matches.length)) 
		{ 
			var handle = matches[1];
			var url = prefs.prefHasUserValue(capsEntries[ii])? prefs.getCharPref(capsEntries[ii]) : "Error getting " + capsEntries[ii]; 
			var granted = getPermissions(prefs, handle, "granted");
			var denied = getPermissions(prefs, handle, "denied");
			privileged[handle] = new Privileged(url, granted, denied, handle);
		}
	}
	return privileged;
};
plugin.getPrefsService = function()
{
	return Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService);
};
plugin.getPrefsBranch = function()
{
	var prefsService = plugin.getPrefsService();
	return prefsService.getBranch("capability.principal.codebase."); 
};
/*
//}}}
!!! Bookmarklet interface
//{{{
*/
plugin.onload = function()
{
	var b=backstage;
	var bt=createTiddlyButton(b.toolbar, "security"+glyph("downTriangle"), "", b.onClickTab,"backstageTab");
	var fp="firefoxPrivileges";
	bt.setAttribute("task",fp);
	b.switchTab(fp);
};
/*
//}}}
!!! ListView tweak for long urls. http://trac.tiddlywiki.org/ticket/570
//{{{
*/
ListView.columnTypes.LongLink = {
	createHeader: ListView.columnTypes.String.createHeader,
	createItem: function(place,listObject,field,columnTemplate,col,row)
		{
			var v = listObject[field];
			var c = columnTemplate.text;
			if(v != undefined) {
				var link = createExternalLink(place,v);
				if(!c) {
					c = v.replace(/#|\.|\/|(\%..)|\?|\&/g, config.browser.isIE? "$&<wbr>": "$&&#8203;");
					link.innerHTML = c;
				} else {
					createTiddlyText(link, c);
				}
			}
		}
};


})();	// scope hiding

} // endif(window.Components)
//}}}
/*{{{*/
.simple #gallery {
	float: none;
	width: auto;
	padding: 0;
}
.simple p.credit {
	margin: 150px 0 0 0;
}

#gallery a {
	padding:5px 5px 3px 5px;
	border: 1px solid #666;
	display: block;
	float: left;
	margin: 0 10px 8px 0;
	width: 70px;
}

#gallery img {
	display:block;
}

#gallery {
	width: 85px;
	float: left;
	padding: 0 20px 30px 10px;
	border-right: 1px dotted #5C7B7B;
}
#photo {
	float: right;
	width: 422px;
	background: #FFF;
	padding-right: 10px;
	position: relative;
}

#photo img {
	padding: 10px;
	border: 1px solid #333;
	position: absolute;
	background-color:white;
}

#gallery a.selected {
	background-color: #000;
	outline:none;

}
#photoInfo {
	clear: right;
}
p.credit {
	clear: both;
	margin-left:145px;
	font-size: 125% !important;
}
p.controls {
	margin-bottom:15px;
	margin-left: 15px;
}

#prev, #next {
	color: #FFF;
	background: #103C3C;
	padding: 5px;
	cursor: pointer;
	font: bold 60% Tahoma, Geneva, sans-serif;
}
/*}}}*/
/*{{{*/
/* customizable settings */

/* settings for window where page loads */
#GB_window {
  background: #fff;
  border: 5px solid #000;
}

/* settings for caption */
#GB_caption {
	font: 12px bold helvetica, verdana, sans-serif;
	color: #fff;
	background: #000 url(close2.gif) no-repeat right center;
	padding: 2px 0 2px 5px;
}

/*overlay for all but Mac FF*/
.GB_overlayBG {
  background-color:#000;
	filter:alpha(opacity=60);
	opacity: 0.60;
}
/*overlay for Mac FF to deal with Flash in iFrame problem*/
.GB_overlayMacFFBGHack {
  background-image: url(macFFBgHack.png);
}

/* "loading" image */
#GB_loading {
	background: white url(loading.gif) no-repeat 50% 50%; 
}
/*end of custom settings*/



/*GREYBOX settings*/
#GB_overlay {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  z-index: 100;
  width:  100%;
  height: 100%;
}

/* for IE 6 overlay */
* html body, * html {
	height: 100%;
  width: 100%;
}



#GB_window {
  top: 10px;
  left: 0px;
  position: fixed;
  overflow: hidden;
  z-index: 150;
}


/* IE-6 overrule fixed */
* html #GB_window {
  position: absolute;
}




#GB_frame {
  border: 0;
  overflow: auto;
  width: 100%;
}

#GB_caption {
	margin: 0;
	text-align: left;
	position: relative;
	z-index: 100;
	cursor: pointer;
}

#GB_loading {
  position:absolute;
	width: 100%;
	height: 100%;
}
/*}}}*/
/***
 * Greybox Redux Redux Again
 * Required: http://jquery.com/
 * Written by: John Resig
 * Based on code by: 4mir Salihefendic (http://amix.dk) 
 * Turned into plugin by Dave McFarland
 * License: LGPL (read more in LGPL.txt)
***/
//{{{
(function($) {

var settings; //global to this function
var GB_DONE = false;

$.fn.greybox = function(callerSettings) {
    var GB_done = false;

    settings = $.extend({
      gbHeight : 400,
      gbWidth : 400,
      captionHeight: 18,
      ffMacFlash: false
     },callerSettings || {});
  
     return this.click(function(evt){
     evt.preventDefault();
     var t = this.title || $(this).text() || this.href;
     GB_show(t,this.href);
   });
 } // end of greybox function

var GB_hide = function() {
  $("#GB_window,#GB_overlay").hide();
} 

var GB_show = function(caption, url) {
  if(!settings.GB_DONE) {
    $(document.body)
      .append('<div id="GB_overlay"></div><div id="GB_window"><div id="GB_loading"></div><div id="GB_caption"></div></div>');

    //make overlay fill entire height of doc
    var docH = $(document).height();
    $('#GB_overlay').css('height', docH);


    if(isMacFF()&&settings.ffMacFlash){
      $("#GB_overlay").addClass("GB_overlayMacFFBGHack");//use png overlay so hide flash
    }else{
      $("#GB_overlay").addClass("GB_overlayBG");//use background and opacity
    }

    $('#GB_caption')
       .click(GB_hide)
       .css({
					height: settings.captionHeight,
          lineHeight: settings.captionHeight + 'px'
       });
    $("#GB_overlay").click(GB_hide);
    $(window).resize(GB_position);
    settings.GB_DONE = true;
  }

  $("#GB_frame").remove(); // remove previous iFrame
  $("#GB_caption").html(caption); // add caption
  $("#GB_overlay").show(); // show grey overlay
  $('#GB_loading').show();
  GB_position(); // resize and place in middle of window
  $("#GB_window").append("<iframe id='GB_frame' src='"+url+"'></iframe>");
  
  $("#GB_frame").css("height",settings.gbHeight - settings.captionHeight - 5 +"px");
  $("#GB_frame").bind('load',function() {$('#GB_loading').hide()});
  $('#GB_window').show();


}

var GB_position = function() {
  var de = document.documentElement;
  var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
  var h = self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
  $("#GB_window").css({
      width:settings.gbWidth+"px",
      height:settings.gbHeight+"px",
      left: ((w - settings.gbWidth)/2)+"px" ,
      top: (((h - settings.gbHeight)/2)-15)+"px" 
   });

}

var isMacFF = function() {
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('mac') != -1 && $.browser.mozilla) {
    return true;
  } else {
    return false;
  }
}

})(jQuery);
//}}}
@@display:block;text-align:right;{{button{<html><a href="javascript:;" onclick="story.closeAllTiddlers();restart();">Refresh Document</a></html>}}} or {{button{<html><a href="javascript:;"onclick="window.location.reload( false );">Reload Document</a></html>}}}@@<<slider chkSliderOptionsPanel Home##Banner "Javascript the Missing Manual »" "Javascript the Missing Manual">>
/%
!!!Banner

[img[Javascript the Missing Manual|Images/banner.png][index.html]]
!!!End
%/
/***
|Name|InlineJavascriptPlugin|
|Source|http://www.TiddlyTools.com/#InlineJavascriptPlugin|
|Documentation|http://www.TiddlyTools.com/#InlineJavascriptPluginInfo|
|Version|1.9.5|
|Author|Eric Shulman - ELS Design Studios|
|License|http://www.TiddlyTools.com/#LegalStatements <br>and [[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]|
|~CoreVersion|2.1|
|Type|plugin|
|Requires||
|Overrides||
|Description|Insert Javascript executable code directly into your tiddler content.|
''Call directly into TW core utility routines, define new functions, calculate values, add dynamically-generated TiddlyWiki-formatted output'' into tiddler content, or perform any other programmatic actions each time the tiddler is rendered.
!!!!!Documentation
>see [[InlineJavascriptPluginInfo]]
!!!!!Revisions
<<<
2009.04.11 [1.9.5] pass current tiddler object into wrapper code so it can be referenced from within 'onclick' scripts
2009.02.26 [1.9.4] in $(), handle leading '#' on ID for compatibility with JQuery syntax
|please see [[InlineJavascriptPluginInfo]] for additional revision details|
2005.11.08 [1.0.0] initial release
<<<
!!!!!Code
***/
//{{{
version.extensions.InlineJavascriptPlugin= {major: 1, minor: 9, revision: 5, date: new Date(2009,4,11)};

config.formatters.push( {
	name: "inlineJavascript",
	match: "\\<script",
	lookahead: "\\<script(?: src=\\\"((?:.|\\n)*?)\\\")?(?: label=\\\"((?:.|\\n)*?)\\\")?(?: title=\\\"((?:.|\\n)*?)\\\")?(?: key=\\\"((?:.|\\n)*?)\\\")?( show)?\\>((?:.|\\n)*?)\\</script\\>",

	handler: function(w) {
		var lookaheadRegExp = new RegExp(this.lookahead,"mg");
		lookaheadRegExp.lastIndex = w.matchStart;
		var lookaheadMatch = lookaheadRegExp.exec(w.source)
		if(lookaheadMatch && lookaheadMatch.index == w.matchStart) {
			var src=lookaheadMatch[1];
			var label=lookaheadMatch[2];
			var tip=lookaheadMatch[3];
			var key=lookaheadMatch[4];
			var show=lookaheadMatch[5];
			var code=lookaheadMatch[6];
			if (src) { // external script library
				var script = document.createElement("script"); script.src = src;
				document.body.appendChild(script); document.body.removeChild(script);
			}
			if (code) { // inline code
				if (show) // display source in tiddler
					wikify("{{{\n"+lookaheadMatch[0]+"\n}}}\n",w.output);
				if (label) { // create 'onclick' command link
					var link=createTiddlyElement(w.output,"a",null,"tiddlyLinkExisting",wikifyPlainText(label));
					var fixup=code.replace(/document.write\s*\(/gi,'place.bufferedHTML+=(');
					link.code="function _out(place,tiddler){"+fixup+"\n};_out(this,this.tiddler);"
					link.tiddler=w.tiddler;
					link.onclick=function(){
						this.bufferedHTML="";
						try{ var r=eval(this.code);
							if(this.bufferedHTML.length || (typeof(r)==="string")&&r.length)
								var s=this.parentNode.insertBefore(document.createElement("span"),this.nextSibling);
							if(this.bufferedHTML.length)
								s.innerHTML=this.bufferedHTML;
							if((typeof(r)==="string")&&r.length) {
								wikify(r,s,null,this.tiddler);
								return false;
							} else return r!==undefined?r:false;
						} catch(e){alert(e.description||e.toString());return false;}
					};
					link.setAttribute("title",tip||"");
					var URIcode='javascript:void(eval(decodeURIComponent(%22(function(){try{';
					URIcode+=encodeURIComponent(encodeURIComponent(code.replace(/\n/g,' ')));
					URIcode+='}catch(e){alert(e.description||e.toString())}})()%22)))';
					link.setAttribute("href",URIcode);
					link.style.cursor="pointer";
					if (key) link.accessKey=key.substr(0,1); // single character only
				}
				else { // run script immediately
					var fixup=code.replace(/document.write\s*\(/gi,'place.innerHTML+=(');
					var c="function _out(place,tiddler){"+fixup+"\n};_out(w.output,w.tiddler);";
					try	 { var out=eval(c); }
					catch(e) { out=e.description?e.description:e.toString(); }
					if (out && out.length) wikify(out,w.output,w.highlightRegExp,w.tiddler);
				}
			}
			w.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;
		}
	}
} )
//}}}

// // Backward-compatibility for TW2.1.x and earlier
//{{{
if (typeof(wikifyPlainText)=="undefined") window.wikifyPlainText=function(text,limit,tiddler) {
	if(limit > 0) text = text.substr(0,limit);
	var wikifier = new Wikifier(text,formatter,null,tiddler);
	return wikifier.wikifyPlain();
}
//}}}

// // GLOBAL FUNCTION: $(...) -- 'shorthand' convenience syntax for document.getElementById()
//{{{
if (typeof($)=='undefined') { function $(id) { return document.getElementById(id.replace(/^#/,'')); } }
//}}}
/***
| Name|LessBackupsPlugin|
| Description|Intelligently limit the number of backup files you create|
| Version|3.0 ($Rev: 2320 $)|
| Date|$Date: 2007-06-18 22:37:46 +1000 (Mon, 18 Jun 2007) $|
| Source|http://mptw.tiddlyspot.com/#LessBackupsPlugin|
| Author|Simon Baird|
| Email|simon.baird@gmail.com|
| License|http://mptw.tiddlyspot.com/#TheBSDLicense|
!!!Description
You end up with just backup one per year, per month, per weekday, per hour, minute, and second.  So total number won't exceed about 200 or so. Can be reduced by commenting out the seconds/minutes/hours line from modes array

!!!Notes
Works in IE and Firefox only.  Algorithm by Daniel Baird. IE code by by Saq Imtiaz.
!!!Code
***/
//{{{
window.getSpecialBackupPath = function(backupPath) {

	var MINS  = 60 * 1000;
	var HOURS = 60 * MINS;
	var DAYS  = 24 * HOURS;

	// comment out the ones you don't want
	var modes = [
		["YYYY",  365*DAYS], // one per year for ever
		["MMM",   31*DAYS],  // one per month
		["ddd",   7*DAYS],   // one per weekday
		//["d0DD",  1*DAYS],   // one per day of month
		//["h0hh",  24*HOURS], // one per hour
		//["m0mm",  1*HOURS],  // one per minute
		//["s0ss",  1*MINS],   // one per second
		["latest",0]         // always keep last version. (leave this).
	];

	var now = new Date();

	for (var i=0;i<modes.length;i++) {

		// the filename we will try
		var specialBackupPath = backupPath.replace(/(\.)([0-9]+\.[0-9]+)(\.html)$/,
						'$1'+now.formatString(modes[i][0]).toLowerCase()+'$3')

		// open the file

		try {
			if (config.browser.isIE) {
				var fsobject = new ActiveXObject("Scripting.FileSystemObject")
				var fileExists  = fsobject.FileExists(specialBackupPath);
				if (fileExists) {
					var fileObject = fsobject.GetFile(specialBackupPath);
					var modDate = new Date(fileObject.DateLastModified).valueOf();
				}
			}
			else {
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
				var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
				file.initWithPath(specialBackupPath);
				var fileExists = file.exists();
				if (fileExists) {
					var modDate = file.lastModifiedTime;
				}
			}
		}
		catch(e) {
			// give up
			return backupPath;
		}

		// expiry is used to tell if it's an 'old' one. Eg, if the month is June and there is a
		// June file on disk that's more than an month old then it must be stale so overwrite
		// note that "latest" should be always because the expiration period is zero (see above)
		var expiry = new Date(modDate + modes[i][1]);
		if (!fileExists || now > expiry)
			return specialBackupPath;
	}
}

// hijack the core function
window.getBackupPath_orig = window.getBackupPath;
window.getBackupPath = function(localPath) {
	return getSpecialBackupPath(getBackupPath_orig(localPath));
}

//}}}
/***
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.4.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.4
 * @date November 17, 2007
 * @category jQuery plugin
 * @copyright (c) 2007 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 ***/
/*{{{*/
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}
/*}}}*/
<<tag [[Chapter01]]>>
<<tag [[Chapter02]]>>
<<tag [[Chapter03]]>>
<<tag [[Chapter04]]>>
<<tag [[Chapter05]]>>
<<tag [[Chapter06]]>>
<<tag [[Chapter07]]>>
<<tag [[Chapter08]]>>
<<tag [[Chapter09]]>>
<<tag [[Chapter10]]>>
<<tag [[Chapter11]]>>
<<tag [[Chapter12 ]]>>
<<tag [[Chapter13]]>>
<<tag [[Chapter14]]>>
<html>
<body id="twoCol">
<div id="container">
  
  <div id="contentWrap">
  <div id="main">
  <h1>Mouse Coordinates</h1>
  <h2>Click to activate</h2>
  <p>The mouse is <strong id="x"></strong> pixels from the left edge of the page</p>
  <p>The mouse is <strong id="y"></strong> pixels from the top edge of the page</p>

  </div>
  </div>
  </div>

</div>
</body>
</html>
<script>
(function($) {
$(document).ready(function() {

$('body').click(function(evt) {
  var xPos = evt.pageX;
  var yPos = evt.pageY;
	$('#x').text(xPos);
	$('#y').text(yPos);
});

	
});
})(jQuery);
</script>
[[Selectors|chapter04/regex_tester.html]]

<html><div align="center"><iframe src="chapter04/regex_tester.html" width="800" height="750" scrolling="no"></iframe></div></html> 
<script show>
alert('Hello World !');
</script>
!Writing to the document window
<script show>
return('Hello World !');
</script>
<html>
<body id="twoCol">
<div id="container">
  <div id="contentWrap">
    <div id="main">
      <h1>Striped Tables</h1>
      <table width="98%" border="0" cellspacing="0" cellpadding="0" class="striped">
        <thead>
          <tr>
            <th scope="col">Product</th>
            <th scope="col">Cost</th>

            <th scope="col">Inventory Status</th>
            <th scope="col">Weight (in lbs.)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ultra-Glow Hair Spray</td>

            <td>$20.00</td>
            <td>in stock</td>
            <td>.5</td>
          </tr>
          <tr>
            <td>Anodyne 3000</td>
            <td>$495.00</td>

            <td>back order</td>
            <td>350</td>
          </tr>
          <tr>
            <td>Big Foot Hair Dryer</td>
            <td>$55.00</td>
            <td>in stock</td>

            <td>2</td>
          </tr>
          <tr>
            <td>Cat Out of The Hat</td>
            <td>$15.00</td>
            <td>back order</td>
            <td>15</td>

          </tr>
          <tr>
            <td>Tickle Me Elmo</td>
            <td>$67.00</td>
            <td>in stock</td>
            <td>3</td>
          </tr>

          <tr>
            <td>Mens Watch</td>
            <td>$350.00</td>
            <td>in stock</td>
            <td>.5</td>
          </tr>
          <tr>

            <td>Leather Briefcase</td>
            <td>$150.00</td>
            <td>in stock</td>
            <td>7</td>
          </tr>
          <tr>
            <td>Lorem Ipsum</td>

            <td>$5.00</td>
            <td>in stock</td>
            <td>.25</td>
          </tr>
          <tr>
            <td>Dolor Sat</td>
            <td>$7.50</td>

            <td>back order</td>
            <td>.25</td>
          </tr>
          <tr>
            <td>Chicken Gumbo</td>
            <td>$15.00</td>
            <td>in stock</td>

            <td>3</td>
          </tr>
          <tr>
            <td>Another Product</td>
            <td>$3.00</td>
            <td>in stock</td>
            <td>25</td>

          </tr>
          <tr>
            <td>Hat for Cat</td>
            <td>$5.00</td>
            <td>back order</td>
            <td>.75</td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
</div>
</body>
</html>
<script show>
(function($) {
$(document).ready(function( ) {
	$('table.striped tr:even').addClass('even');
});
})(jQuery);
</script>
!Striped Tables
| Product | Cost | Inventory Status | Weight (in lbs.) |h
| ~Ultra-Glow Hair Spray | $20.00 | in stock | .5 |
| Anodyne 3000 | $495.00 | back order | 350 |
| Big Foot Hair Dryer | $55.00 | in stock | 2 |
| Cat Out of The Hat |$15.00 | back order | 15 |
| Tickle Me Elmo | $67.00 | in stock | 3 |
| Mens Watch | $350.00 | in stock | .5 |
| Leather Briefcase | $150.00 | in stock | 7 |
| Lorem Ipsum | $5.00 | in stock | .25 |
| Dolor Sat | $7.50 | back order | .25 |
| Chicken Gumbo | $15.00 | in stock | 3 |
| Another Product | $3.00 | in stock | 25 |
| Hat for Cat | $5.00 | back order | .75 |
<script show>
(function($) {
$(document).ready(function( ) {
	$('table.twtable tr:even').addClass('even');
});
})(jQuery);
</script> 
Using [[tablesorterPlugin]] instead of external file
<html>
<body id="twoCol">
<div id="container">

  <div id="contentWrap">
    <div id="main">
      <h1>Sortable Tables</h1>
      <table width="98%" border="0" cellspacing="0" cellpadding="0" class="sortable">
        <thead>
          <tr>
            <th scope="col">Product</th>

            <th scope="col">Cost</th>
            <th scope="col">Inventory Status</th>
            <th scope="col">Weight (in lbs.)</th>
          </tr>
        </thead>
        <tbody>
          <tr>

            <td>Ultra-Glow Hair Spray</td>
            <td>$20.00</td>
            <td>in stock</td>
            <td>.5</td>
          </tr>
          <tr>
            <td>Anodyne 3000</td>

            <td>$495.00</td>
            <td>back order</td>
            <td>350</td>
          </tr>
          <tr>
            <td>Big Foot Hair Dryer</td>
            <td>$55.00</td>

            <td>in stock</td>
            <td>2</td>
          </tr>
          <tr>
            <td>Cat Out of The Hat</td>
            <td>$15.00</td>
            <td>back order</td>

            <td>15</td>
          </tr>
          <tr>
            <td>Tickle Me Elmo</td>
            <td>$67.00</td>
            <td>in stock</td>
            <td>3</td>

          </tr>
          <tr>
            <td>Mens Watch</td>
            <td>$350.00</td>
            <td>in stock</td>
            <td>.5</td>
          </tr>

          <tr>
            <td>Leather Briefcase</td>
            <td>$150.00</td>
            <td>in stock</td>
            <td>7</td>
          </tr>
          <tr>

            <td>Lorem Ipsum</td>
            <td>$5.00</td>
            <td>in stock</td>
            <td>.25</td>
          </tr>
          <tr>
            <td>Dolor Sat</td>

            <td>$7.50</td>
            <td>back order</td>
            <td>.25</td>
          </tr>
          <tr>
            <td>Chicken Gumbo</td>
            <td>$15.00</td>

            <td>in stock</td>
            <td>3</td>
          </tr>
          <tr>
            <td>Another Product</td>
            <td>$3.00</td>
            <td>in stock</td>

            <td>25</td>
          </tr>
          <tr>
            <td>Hat for Cat</td>
            <td>$5.00</td>
            <td>back order</td>
            <td>.75</td>

          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>
</body>
</html>

<script show>
(function($) {
$(document).ready(function( ) {

$('table.sortable').tablesorter({widgets: ['zebra']});
	$('table.sortable tbody tr').mouseover(function() {
			$(this).addClass('highlight');
			$(this).removeClass('even');
			$(this).css('cursor','pointer');
	}).mouseout(function() {
			$(this).removeClass('highlight');
			$('table.sortable tr:odd').addClass('even');
	});

});
})(jQuery);
</script>
Using [[tablesorterPlugin]] instead of external file
!Striped Tables
| Product | Cost | Inventory Status | Weight (in lbs.) |h
| ~Ultra-Glow Hair Spray | $20.00 | in stock | .5 |
| Anodyne 3000 | $495.00 | back order | 350 |
| Big Foot Hair Dryer | $55.00 | in stock | 2 |
| Cat Out of The Hat |$15.00 | back order | 15 |
| Tickle Me Elmo | $67.00 | in stock | 3 |
| Mens Watch | $350.00 | in stock | .5 |
| Leather Briefcase | $150.00 | in stock | 7 |
| Lorem Ipsum | $5.00 | in stock | .25 |
| Dolor Sat | $7.50 | back order | .25 |
| Chicken Gumbo | $15.00 | in stock | 3 |
| Another Product | $3.00 | in stock | 25 |
| Hat for Cat | $5.00 | back order | .75 |

<script show>
(function($) {
$(document).ready(function( ) {
$('table.twtable').tablesorter({widgets: ['zebra']});
		$('table.twtable tbody tr').mouseover(function() {
			$(this).addClass('highlight');
			$(this).removeClass('even');
			$(this).css('cursor','pointer');
	}).mouseout(function() {
			$(this).removeClass('highlight');
			$('table.twtable tr:odd').addClass('even');
	});

});
})(jQuery);
</script>
!Using a Variable
<script show>
	var firstName = 'Cookie';
	var lastName = 'Monster';
	return('\n' + firstName +' '+ lastName +  '\n');
</script>
!Using a Variable, Part II
<script show>
	var name = prompt('What is your name?', '');
	return('\n' + ' Welcome ' + name +  '\n');
</script>
!Creating Arrays
<script show>
var authors = [
		'Ernest Hemingway',
		'Charlotte Bronte',
		'Dante Alighieri',
		'Emily Dickinson' 
		];
	document.write('<p>The first author is ');
	document.write('<b>' + authors[0] + '</b></p>');
	document.write('<p>The last author is ');
	document.write('<b>' + authors[authors.length-1] + '</b></p>');
		authors.unshift('Stan Lee');
	document.write('<p>I almost forgot ');
	document.write('<b>' + authors[0] + '</b></p><br>');
</script>
!Creating Arrays
<script show>
var authors = [
	"Ernest Hemingway",
	"Charlotte Bronte",
	"Dante Alighieri",
	"Emily Dickinson" 
	];
var out1 = ("\n The first author is " + " \n\n '' " + authors[0] + " '' " + "\n\n" 
+ "The last author is " + " \n\n '' " + authors[authors.length-1] + " '' " );
	authors.unshift("Stan Lee");
var out2 = ("\n\n I almost forgot " + " \n\n {{highlight{'' " + authors[0] + " ''}}} " + "\n");
	return(out1 + out2);
</script>
!Using Conditional Statements
<script show>
var luckyNumber = prompt('What is your lucky number?','');
luckyNumber = parseInt(luckyNumber);
if (isNaN(luckyNumber)) {
	luckyNumber = prompt('Please, tell me your lucky number.','');
}
	if (luckyNumber == 7 ) {
		return("Hey, that's my lucky number too!");
	} else if (luckyNumber == 13 || luckyNumber == 24) {
		return("Wooh. " + luckyNumber + "? That's an unlucky number!");
	} else {
		return("The number " + luckyNumber + " is lucky for you!");
	}
	</script>
!A Basic Function
<script show>
function printToday() {
	var today = new Date();
	document.write(today.toDateString());
	}
printToday();
</script>
!A Simple Quiz
<script show>
var score = 0; // initial score is 0
var questions = [
	['How many moons does Earth have?', 1],
	['How many moons does Saturn have?',31],
	['How many moons does Venus have?', 0]
	];

//go through the list of questions and ask each one
for (var i=0; i<questions.length; i++) {
	askQuestion(questions[i]);
}

//function for asking question
function askQuestion(question) {
  var answer = prompt(question[0],'');
	if (answer == question[1]) {
		alert('Correct!');
		score++;
	} else {
		alert('Sorry. The correct answer is ' + question[1]);
	}
}  
	var message = 'You got ' + score;
	message += ' out of ' + questions.length;
	message += ' questions correct.';
	return(message);
</script>

!Today’s Date
<script show>
function dateString(date,string) {
		/* key for creating string
			%Y = 2008
			%y = 08
			%M = January
			%m = Jan
			%N = 01 (month)
			%n = 1 (month)
			%W = Monday
			%w = Mon
			%D = 05 (day of month)
			%d = 5 (day of month)
		*/
		var year=date.getFullYear();
		var month=date.getMonth();
		var realMonth=month+1;
    var fillMonth=realMonth;
		if (realMonth<10) {
			fillMonth = '0' + realMonth;
		} 
		var months = ['January','February','March','April','May',
									'June','July','August','September',
									'October','November','December'];
		var monthName=months[month];
		var day=date.getDate();
    var fillDate=day;
		if (day<10) {
			fillDate='0' + day;
		} 
		var weekday=date.getDay();
		var weekdays = ['Sunday','Monday','Tuesday','Wednesday',
								'Thursday','Friday','Saturday'];
		var dayName=weekdays[weekday];
		
		
		//year
		string = string.replace(/%Y/g,year); // 2008
		string = string.replace(/%y/g,year.toString().slice(-2)); //08
		//month
		string = string.replace(/%M/g,monthName); //January
		string = string.replace(/%m/g,monthName.slice(0,3)); //Jan
		string = string.replace(/%N/g,fillMonth); // 01
		string = string.replace(/%n/g,realMonth); // 1
		//day of week
		string = string.replace(/%W/g,dayName); //Monday
		string = string.replace(/%w/g,dayName.slice(0,3)); //Mon
		//day of month
		string = string.replace(/%D/g,fillDate); //05
		string = string.replace(/%d/g,day); // 5
		return string;
	}
	var today = new Date();
	var message = dateString(today, 'Today is %W, %M %D, %Y');
	return(message);
</script>

!A Simple Quiz Revisited
<html>
	<p id="quizResults"></p>
</html>
<script show>
var score = 0; // initial score is 0
var questions = [
	['How many moons does Earth have?', 1],
	['How many moons does Saturn have?',31],
	['How many moons does Venus have?', 0]
	];


//go through the list of questions and ask each one

//function for asking question
function askQuestion(question) {
  var answer = prompt(question[0],'');
	if (answer == question[1]) {
		alert('Correct!');
		score++;
	} else {
		alert('Sorry. The correct answer is ' + question[1]);
	}
}  

function doQuiz() {
	for (var i=0; i<questions.length; i++) {
	askQuestion(questions[i]);
	}
	var message = 'You got ' + score;
	message += ' out of ' + questions.length;
	message += ' questions correct.';
	var results = document.getElementById('quizResults');
	results.innerHTML = message;
//	alert (message);
}

// window.onload = doQuiz;
doQuiz();
</script>
/*{{{*/
.ft {
	font: bold 30px Tahoma, Geneva, sans-serif;
	color: #036;
	border-bottom: 1px solid #666;
	margin-top:15px;
  text-transform:uppercase;
	position:relative
}
/* the class to overlay the headlines */
.ftheadEffect {
position: absolute;
width: 70%;
display: block;
height:36px;
background: url(chapter05/gradient.png) repeat;
}
/*}}}*/
<html>
  <div id="ftmain">
  <h1>jQuery Enhanced Headlines</h1>
  <h2>A  mysterious headline</h2>
  <p>Mauris imperdiet nisi ut pede. Vivamus nisi lorem, euismod in, fringilla et, porttitor in, nunc. Vivamus metus. </p>
  <h2>another cool headline</h2>

  <p>Mauris imperdiet nisi ut pede. Vivamus nisi lorem, euismod in, fringilla et, porttitor in, nunc. Vivamus metus. </p>
  <h2>The fun just won't stop</h2>
  <p>Mauris imperdiet nisi ut pede. Vivamus nisi lorem, euismod in, fringilla et, porttitor in, nunc. Vivamus metus. </p>
  <p>&nbsp;</p>
</div>
</html>
<script show>
(function($) {
$(document).ready(function() {
 $('#ftmain h2').prepend('<span class="ftheadEffect"></span>');											 
});
})(jQuery);
</script>
<html>
<body id="twoCol">

<div id="container">
 
  <div id="contentWrap">
  <div id="main">
  <h1>Auto-Pull Quotes</h1>
  <h2>Vestibulum semper</h2>
  <p>Vestibulum semper tincidunt sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, justo non fringilla dapibus, sapien tortor cursus erat, at posuere magna nisi tincidunt sapien. Sed nisl. <span class="pq">Fusce venenatis, libero porta porta fringilla, sapien odio tincidunt sem, id aliquam tellus sapien sit amet quam.</span> Vivamus justo mi, aliquam vitae, eleifend et, lobortis quis, eros. Ut felis arcu, mollis ut, interdum molestie, vehicula a, sapien. Sed nisi nunc, bibendum vel, adipiscing sed, placerat quis, augue. Nullam ut nibh sed orci tempor rutrum. Sed iaculis. Suspendisse potenti. Donec semper molestie felis. Sed vitae diam. Curabitur sed velit convallis orci luctus viverra. Quisque et quam non tortor ultrices rutrum. Nulla porttitor mauris sed nunc. Donec lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras quis massa. Sed mattis erat vitae nisi.</p>

  <h2>Morbi dictum</h2>
  <p>Donec at sapien non dolor tempor congue. Morbi dictum rutrum nisl. Curabitur tellus metus, pharetra vitae, tempus sit amet, semper ac, sapien. In hac habitasse platea dictumst. Mauris est velit, placerat eu, porta eget, aliquam in, dui. Nam mi quam, lobortis in, dictum vel, gravida et, sapien. Etiam mattis. Donec sed diam nec odio molestie iaculis. Vestibulum elementum odio sed nunc. <span class="pq">Vestibulum ac nisl a lectus posuere malesuada. </span>Praesent lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi eu nibh. In hac habitasse platea dictumst. Integer posuere tellus. Fusce et justo ac sem sagittis consectetuer. Aliquam erat volutpat. Vivamus interdum ullamcorper felis. Vestibulum pulvinar. Integer ornare malesuada diam.</p>
  <h2>Praesent sed est</h2>
  <p>Praesent sed est ac metus facilisis pharetra. Maecenas risus risus, facilisis vitae, tempus id, dapibus non, nunc. Etiam pulvinar egestas pede. Cras elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut quam. Vivamus at orci. In hac habitasse platea dictumst. Nunc et magna. Ut sollicitudin scelerisque mauris. Nam elementum nisl a enim.</p>
  <p>Integer lacus. <span class="pq">Mauris condimentum scelerisque mauris. </span>Nullam luctus. Vestibulum neque dolor, tempus quis, aliquam quis, mollis at, odio. Quisque in mi eu velit pretium commodo. Nullam fringilla mollis pede. Praesent eleifend tellus et tellus. Ut in sem. In aliquam dignissim mauris. Aenean ac magna blandit quam scelerisque accumsan. Sed suscipit odio at pede. In hac habitasse platea dictumst. Aenean sed tortor sit amet dui commodo tempus. Vestibulum sit amet arcu eu lectus scelerisque fermentum. Vivamus at arcu at est feugiat convallis. Fusce eu metus. Donec vel tellus eu massa ultrices ultricies. Cras dapibus tellus sed libero. Fusce et dolor.  </p>

<p>&nbsp;</p>
</div>
</div>
</div>
</body>
</html>
<script show>
(function($) {
$(document).ready(function() {
$('.pq').each(function() {
  var quote=$(this).clone();
	quote.removeClass('pq');
	quote.addClass('pullquote');
	$(this).before(quote);
}); 

//shorter version using chaining
/*$('.pq').each(function() {
  var quote=$(this).clone().removeClass('pq').addClass('pullquote');
	$(this).before(quote);
});
*/

});
})(jQuery);
</script>
/*{{{*/
.pullquote {
	float: right;
	clear: right;
	width: 200px;
	border: 1px solid black;
	padding: 10px;
	font-size: 20px;
	background-color:#FFC;
	margin: 20px 0 10px 10px;
	font-style: italic;
	color: #363;
	bor
}
/*}}}*/
<html>
<head>

</head>
<body id="twoCol">
<div id="container">
  <div id="contentWrap">
    <div id="main">
      <h1>Striped Tables</h1>
      <table width="98%" border="0" cellspacing="0" cellpadding="0" class="striped">
        <thead>
          <tr>
            <th scope="col">Product</th>
            <th scope="col">Cost</th>

            <th scope="col">Inventory Status</th>
            <th scope="col">Weight (in lbs.)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ultra-Glow Hair Spray</td>

            <td>$20.00</td>
            <td>in stock</td>
            <td>.5</td>
          </tr>
          <tr>
            <td>Anodyne 3000</td>
            <td>$495.00</td>

            <td>back order</td>
            <td>350</td>
          </tr>
          <tr>
            <td>Big Foot Hair Dryer</td>
            <td>$55.00</td>
            <td>in stock</td>

            <td>2</td>
          </tr>
          <tr>
            <td>Cat Out of The Hat</td>
            <td>$15.00</td>
            <td>back order</td>
            <td>15</td>

          </tr>
          <tr>
            <td>Tickle Me Elmo</td>
            <td>$67.00</td>
            <td>in stock</td>
            <td>3</td>
          </tr>

          <tr>
            <td>Mens Watch</td>
            <td>$350.00</td>
            <td>in stock</td>
            <td>.5</td>
          </tr>
          <tr>

            <td>Leather Briefcase</td>
            <td>$150.00</td>
            <td>in stock</td>
            <td>7</td>
          </tr>
          <tr>
            <td>Lorem Ipsum</td>

            <td>$5.00</td>
            <td>in stock</td>
            <td>.25</td>
          </tr>
          <tr>
            <td>Dolor Sat</td>
            <td>$7.50</td>

            <td>back order</td>
            <td>.25</td>
          </tr>
          <tr>
            <td>Chicken Gumbo</td>
            <td>$15.00</td>
            <td>in stock</td>

            <td>3</td>
          </tr>
          <tr>
            <td>Another Product</td>
            <td>$3.00</td>
            <td>in stock</td>
            <td>25</td>

          </tr>
          <tr>
            <td>Hat for Cat</td>
            <td>$5.00</td>
            <td>back order</td>
            <td>.75</td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>

</div>
</body>
</html>

<script show>
(function($) {
$(document).ready(function( ) {
	$('table.striped tr:even').addClass('even');
	$('table.striped tbody tr').mouseover(function() {
			$(this).addClass('highlight');
			$(this).removeClass('even');
			$(this).css('cursor','pointer');
	}).mouseout(function() {
			$(this).removeClass('highlight');
			$('table.striped tr:even').addClass('even');
	});
});
})(jQuery);
</script>
!Striped Tables
| Product | Cost | Inventory Status | Weight (in lbs.) |h
| ~Ultra-Glow Hair Spray | $20.00 | in stock | .5 |
| Anodyne 3000 | $495.00 | back order | 350 |
| Big Foot Hair Dryer | $55.00 | in stock | 2 |
| Cat Out of The Hat |$15.00 | back order | 15 |
| Tickle Me Elmo | $67.00 | in stock | 3 |
| Mens Watch | $350.00 | in stock | .5 |
| Leather Briefcase | $150.00 | in stock | 7 |
| Lorem Ipsum | $5.00 | in stock | .25 |
| Dolor Sat | $7.50 | back order | .25 |
| Chicken Gumbo | $15.00 | in stock | 3 |
| Another Product | $3.00 | in stock | 25 |
| Hat for Cat | $5.00 | back order | .75 |
<script show>
(function($) {
$(document).ready(function( ) {
	$('table.twtable tr:even').addClass('even');
	$('table.twtable tbody tr').mouseover(function(){
		$(this).addClass('highlight')
		$(this).removeClass('even');
	});
		$('table.twtable tbody tr').mouseout(function(){
		$(this).removeClass('highlight');
		$('table.twtable tr:even').addClass('even');
	})
});
})(jQuery);
</script> 
<html>
<head>
<style type="text/css">
#main h2 {
	background: url(chapter06/images/open.png) no-repeat 0% 10%;
	padding-left: 20px;
	cursor: pointer;
}
#main h2.close {
	background-image: url(chapter06/images/close.png);
}
#main .answer {
  background-color: white;
}
</style>
</head>
<body id="twoCol">
<div id="container">

  <div id="contentWrap">
    <div id="main">
      <h1>A One Page FAQ</h1>
      <h2>I've heard that JavaScript is the long-lost fountain of youth. Is this true?</h2>
      <div class="answer">
        <p>Why, yes it is! Studies prove that learning JavaScript freshens the mind and extends life span by several hundred years. (Note: some scientists disagree with these claims.)</p>
      </div>

      <h2>Can JavaScript really solve all of my problems?</h2>
      <div class="answer">
        <p>Why, yes it can! It's the most versatile programming language ever created and is trained to provide financial management advice, life-saving CPR, and even to take care of household pets.</p>
      </div>
      <h2>Is there nothing JavaScript <em>can&#8217;t</em> do?</h2>

      <div class="answer">
        <p>Why, no there isn&#8217;t! It&#8217;s even able to write its own public relations-oriented Frequently Asked Questions pages. Now that&#8217;s one smart programming language!</p>
      </div>
    </div>
    <div id="sidebar">
      <h2>Script 6.2</h2>

    </div>
  </div>
</div>
</body>
</html>

<script show>
(function($) {
$(document).ready(function( ) {
 $('.answer').hide();
 $('#main h2').toggle(
		function() {
	   $(this).next('.answer').fadeIn();
		 $(this).addClass('close');
		},
		function() {
		  $(this).next('.answer').fadeOut();
			$(this).removeClass('close');
	  }
	); // end toggle
});
})(jQuery);
</script>
<html>
<div align=center>
  <div id="controls">
    <span id="prev" class="control">Previous</span>
    <span id="pager"></span>
    <span id="next" class="control">Next</span>
    <span id="playControl" class="control">Pause</span>
  </div>
<br>
  <div id="gallery">
    <div><img src="chapter07/images/large/blue.jpg" width="400" height="300" alt="Blue">
    <p class="credit">Photo by <a href="http://www.morguefile.com/forum/profile.php?username=alin">Alin Nan</a></p></div>
    <div><img src="chapter07/images/large/milk.jpg" width="275" height="432" alt="Milk Fruit Explosion">
    <p class="credit">Photo by <a href="http://www.morguefile.com/forum/profile.php?username=dmscs">David Kitchenham</a></p></div>
    <div><img src="chapter07/images/large/fan.jpg" width="300" height="400" alt="Fan">
    <p class="credit">Photo by <a href="http://www.morguefile.com/forum/profile.php?username=jeltovski">jeltovski</a></p></div>
    <div><img src="chapter07/images/large/red.jpg" width="400" height="300" alt="Red">
    <p class="credit">Photos by <a href="http://www.morguefile.com/forum/profile.php?username=alin">Alin Nan</a></p></div>
    <div><img src="chapter07/images/large/weight.jpg" width="275" height="414" alt="Pink weight">
    <p class="credit">Photo by <a href="http://www.morguefile.com/forum/profile.php?username=vchip">David Pattee</a></p></div>
  </div>
</div>
</html>
<script show>
(function($) {
$(document).ready(function() {

$('#gallery').cycle({
	fx: 'scrollRight',
	timeout: 3000,
	speed: 500,
	delay: -2000,
	pager: '#pager',
	next: '#next',
	prev: '#prev'
});

$('#playControl').toggle(
		function() {
			$('#gallery').cycle('pause');
			$(this).text('Play');
		},
		function() {
			$('#gallery').cycle('resume');
			$(this).text('Pause');
		});
}); // end ready()
})(jQuery);

</script>
/*{{{*/
/***styles for the table on [[Script 1.3]] [[Script 6.1]] [[Script 10.4]]***/
table {
	border-right: 1px solid #A7A37E;
	border-bottom: 1px solid #A7A37E;
}

}
td, th {
	font-size: 1.3em;
	padding: 3px;
}
th {
	font-weight: bold !important;
	border-bottom: 1px solid #333333;
	background: url(chapter01/images/th_bg.png) repeat-x;
	border-top: 1px solid #333333;
	padding-top: 4px;
	border-left: 1px solid #A7A37E;
}

td {
	border-left: 1px solid #A7A37E;
}
.even {
	background-color: #ccc;
}
th.headerSortDown {
	background: #A6B8C2 url(chapter10/images/down_arrow.png) no-repeat 98% 7px;
}
th.headerSortUp {
	background: #A6B8C2 url(chapter10/images/up_arrow.png) no-repeat 98% 5px;
}
/*}}}*/
[[Selectors|chapter05/selectors.html]]

<html><div align="center"><iframe src="chapter05/selectors.html" width="800" height="750" scrolling="no"></iframe></div></html> 
/***
|''Name''|SimpleSearchPlugin|
|''Description''|displays search results as a simple list of matching tiddlers|
|''Authors''|FND|
|''Version''|0.4.1|
|''Status''|stable|
|''Source''|http://devpad.tiddlyspot.com/#SimpleSearchPlugin|
|''CodeRepository''|http://svn.tiddlywiki.org/Trunk/contributors/FND/plugins/SimpleSearchPlugin.js|
|''License''|[[Creative Commons Attribution-ShareAlike 3.0 License|http://creativecommons.org/licenses/by-sa/3.0/]]|
|''Keywords''|search|
!Revision History
!!v0.2.0 (2008-08-18)
* initial release
!!v0.3.0 (2008-08-19)
* added Open All button (renders Classic Search option obsolete)
* sorting by relevance (title matches before content matches)
!!v0.4.0 (2008-08-26)
* added tag matching
!To Do
* tag matching optional
* animations for container creation and removal
* when clicking on search results, do not scroll to the respective tiddler (optional)
* use template for search results
!Code
***/
//{{{
if(!version.extensions.SimpleSearchPlugin) { //# ensure that the plugin is only installed once
version.extensions.SimpleSearchPlugin = { installed: true };

if(!config.extensions) { config.extensions = {}; }

config.extensions.SimpleSearchPlugin = {
	heading: "Search Results",
	containerId: "searchResults",
	btnCloseLabel: "close",
	btnCloseTooltip: "dismiss search results",
	btnCloseId: "search_close",
	btnOpenLabel: "Open all",
	btnOpenTooltip: "open all search results",
	btnOpenId: "search_open",

	displayResults: function(matches, query) {
		story.refreshAllTiddlers(true); // update highlighting within story tiddlers
		var el = document.getElementById(this.containerId);
		query = '"""' + query + '"""'; // prevent WikiLinks
		if(el) {
			removeChildren(el);
		} else { //# fallback: use displayArea as parent
			var container = document.getElementById("displayArea");
			el = document.createElement("div");
			el.id = this.containerId;
			el = container.insertBefore(el, container.firstChild);
		}
		var msg = "!" + this.heading + "\n";
		if(matches.length > 0) {
			msg += "''" + config.macros.search.successMsg.format([matches.length.toString(), query]) + ":''\n";
			this.results = [];
			for(var i = 0 ; i < matches.length; i++) {
				this.results.push(matches[i].title);
				msg += "* [[" + matches[i].title + "]]\n";
			}
		} else {
			msg += "''" + config.macros.search.failureMsg.format([query]) + "''"; // XXX: do not use bold here!?
		}
		createTiddlyButton(el, this.btnCloseLabel, this.btnCloseTooltip, config.extensions.SimpleSearchPlugin.closeResults, "button", this.btnCloseId);
		wikify(msg, el);
		if(matches.length > 0) { // XXX: redundant!?
			createTiddlyButton(el, this.btnOpenLabel, this.btnOpenTooltip, config.extensions.SimpleSearchPlugin.openAll, "button", this.btnOpenId);
		}
	},

	closeResults: function() {
		var el = document.getElementById(config.extensions.SimpleSearchPlugin.containerId);
		removeNode(el);
		config.extensions.SimpleSearchPlugin.results = null;
		highlightHack = null;
	},

	openAll: function(ev) {
		story.displayTiddlers(null, config.extensions.SimpleSearchPlugin.results);
		return false;
	}
};

config.shadowTiddlers.StyleSheetSimpleSearch = "/*{{{*/\n" +
	"#" + config.extensions.SimpleSearchPlugin.containerId + " {\n" +
	"\toverflow: auto;\n" +
	"\tpadding: 5px 1em 10px;\n" +
	"\tbackground-color: [[ColorPalette::TertiaryPale]];\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.containerId + " h1 {\n" +
	"\tmargin-top: 0;\n" +
	"\tborder: none;\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.containerId + " ul {\n" +
	"\tmargin: 0.5em;\n" +
	"\tpadding-left: 1.5em;\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.containerId + " .button {\n" +
	"\tdisplay: block;\n" +
	"\tborder-color: [[ColorPalette::TertiaryDark]];\n" +
	"\tpadding: 5px;\n" +
	"\tbackground-color: [[ColorPalette::TertiaryLight]];\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.containerId + " .button:hover {\n" +
	"\tborder-color: [[ColorPalette::SecondaryMid]];\n" +
	"\tbackground-color: [[ColorPalette::SecondaryLight]];\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.btnCloseId + " {\n" +
	"\tfloat: right;\n" +
	"\tmargin: -5px -1em 5px 5px;\n" +
	"}\n\n" +
	"#" + config.extensions.SimpleSearchPlugin.btnOpenId + " {\n" +
	"\tfloat: left;\n" +
	"\tmargin-top: 5px;\n" +
	"}\n" +
	"/*}}}*/";
store.addNotification("StyleSheetSimpleSearch", refreshStyles);

// override Story.search()
Story.prototype.search = function(text, useCaseSensitive, useRegExp) {
	highlightHack = new RegExp(useRegExp ? text : text.escapeRegExp(), useCaseSensitive ? "mg" : "img");
	var matches = store.search(highlightHack, null, "excludeSearch");
	var q = useRegExp ? "/" : "'";
	config.extensions.SimpleSearchPlugin.displayResults(matches, q + text + q);
};

// override TiddlyWiki.search() to sort by relevance
TiddlyWiki.prototype.search = function(searchRegExp, sortField, excludeTag, match) {
	var candidates = this.reverseLookup("tags", excludeTag, !!match);
	var primary = [];
	var secondary = [];
	var tertiary = [];
	for(var t = 0; t < candidates.length; t++) {
		if(candidates[t].title.search(searchRegExp) != -1) {
			primary.push(candidates[t]);
		} else if(candidates[t].tags.join(" ").search(searchRegExp) != -1) {
			secondary.push(candidates[t]);
		} else if(candidates[t].text.search(searchRegExp) != -1) {
			tertiary.push(candidates[t]);
		}
	}
	var results = primary.concat(secondary).concat(tertiary);
	if(sortField) {
		results.sort(function(a, b) {
			return a[sortField] < b[sortField] ? -1 : (a[sortField] == b[sortField] ? 0 : +1);
		});
	}
	return results;
};

} //# end of "install only once"
//}}}
Examples & Exercises ~~(TW v<<version>> IJS v<<tiddler "InlineJavascriptPlugin::Version">>)~~
Javascript
/*{{{*/
#gallery {
	height:500px;
	width: 575px;
	margin-top: 15px;
}

#gallery div {
	text-align: center;
	width: 575px;
	height: 500px;
}

#gallery img {
	padding: 10px;
	border: 1px solid #333;
	background-color: #FFF;
}

#gallery div p {
	font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;	
}
#controls {
	text-align: center;
}
#pager    a, #main .control  {
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	background: #0E3B3B;
	padding: 2px 5px;
	text-decoration: none;
	margin-left: 5px;
	cursor: pointer;
}
#pager a.activeSlide {
	background-color: #E6E2AF;
	color: #000;
}
#pager a:hover, #playControl:hover {
	background: #900;
}
/*}}}*/
[[Script Table CSS]]
[[Script 5.2 CSS]]
[[Script 5.3 CSS]]
[[LightBox CSS]]
[[exclude Gallery CSS]]
[[Slideshow CSS]]
[[exclude Greybox CSS]]
[[exclude Superfish CSS]]
[[exclude Superfish Horizontal CSS]]
/*{{{*/
body {
 -moz-opacity: .999; //to defeat firefox redraw problem with fade effect
}

/* link styles */
.nav a {
	text-decoration: none;
	display: block;
	padding: 5px 7px 4px 17px;
	color: #CCC;
	width: 9em;
	font-weight: bold;
	background-color: #4C5353;
	border-bottom: 1px solid #CCC;
	border-left: 1px solid #CCC;
  margin: 0;
}

.nav li li a {
  /* style for links on pop-up menus */
}

.nav li li li a {
	/* style for second level menu links */
}

.nav a:hover{
	background-color: #333;
	color: #FFF;
}

/* main nav bar */
.nav {
	margin: 0;
	padding: 0;
	line-height: 1;
}

/* all list items */
.nav  li {
	margin:0 !important;
	padding:0 !important;
	list-style: none; /* remove bullets */
	float: left; /* place buttons side by side */
  position: relative;
}


/* pop-up subnav */
.nav ul {
	margin: 0;
	padding: 0;
	position: absolute;
  left: 0;
  top: 1.72em; /* change when you change height of links */
	display: none;
}


/* list items in pop-up subnav */
.nav ul li {
	float: none; /* so links line up one above the other for drop-downs */
}

/*3rd level menu position*/
.nav ul ul {
	position: absolute;
  left: 10.8em; /* change when you change width of links */
  top: -1px;
  z-index: 99;
  border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
}

.nav ul ul li {
	z-index: 100;
}



/* look for buttons that have menus */
.nav .sub {
	background-image: url(../superfish/images/arrow_down.png);
  background-repeat:no-repeat;
  background-position: 2px 3px;
}

.nav .subsub {
	background-image: url(../superfish/images/arrow_left.png);
  background-repeat: no-repeat;
  background-position: 4px 7px;
}
/*}}}*/
/***
 * Superfish v1.4.1 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 * 	http://www.opensource.org/licenses/mit-license.php
 * 	http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 ***/
//{{{
(function($){
	$.superfish = {};
	$.superfish.o = [];
	$.superfish.op = {};
	$.superfish.defaults = {
		hoverClass	: 'sfHover',
		pathClass	: 'overideThisToUse',
		delay		: 800,
		animation	: {opacity:'show'},
		speed		: 'normal',
		oldJquery	: false, /* set to true if using jQuery version below 1.2 */
		disableHI	: false, /* set to true to disable hoverIntent usage */
		// callback functions:
		onInit		: function(){},
		onBeforeShow: function(){},
		onShow		: function(){}, /* note this name changed ('onshow' to 'onShow') from version 1.4 onward */
		onHide		: function(){}
	};
	$.fn.superfish = function(op){
		var bcClass = 'sfbreadcrumb',
			over = function(){
				var $$ = $(this), menu = getMenu($$);
				getOpts(menu,true);
				clearTimeout(menu.sfTimer);
				$$.showSuperfishUl().siblings().hideSuperfishUl();
			},
			out = function(){
				var $$ = $(this), menu = getMenu($$);
				var o = getOpts(menu,true);
				clearTimeout(menu.sfTimer);
				if ( !$$.is('.'+bcClass) ) {
					menu.sfTimer=setTimeout(function(){
						$$.hideSuperfishUl();
						if (o.$path.length){over.call(o.$path);}
					},o.delay);
				}		
			},
			getMenu = function($el){ return $el.parents('ul.superfish:first')[0]; },
			getOpts = function(el,menuFound){ el = menuFound ? el : getMenu(el); return $.superfish.op = $.superfish.o[el.serial]; },
			hasUl = function(){ return $.superfish.op.oldJquery ? 'li[ul]' : 'li:has(ul)'; };

		return this.each(function() {
			var s = this.serial = $.superfish.o.length;
			var o = $.extend({},$.superfish.defaults,op);
			o.$path = $('li.'+o.pathClass,this).each(function(){
				$(this).addClass(o.hoverClass+' '+bcClass)
					.filter(hasUl()).removeClass(o.pathClass);
			});
			$.superfish.o[s] = $.superfish.op = o;
			
			$(hasUl(),this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out)
			.not('.'+bcClass)
				.hideSuperfishUl();
			
			var $a = $('a',this);
			$a.each(function(i){
				var $li = $a.eq(i).parents('li');
				$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
			});
			
			o.onInit.call(this);
			
		}).addClass('superfish');
	};
	
	$.fn.extend({
		hideSuperfishUl : function(){
			var o = $.superfish.op,
				$ul = $('li.'+o.hoverClass,this).add(this).removeClass(o.hoverClass)
					.find('>ul').hide().css('visibility','hidden');
			o.onHide.call($ul);
			return this;
		},
		showSuperfishUl : function(){
			var o = $.superfish.op,
				$ul = this.addClass(o.hoverClass)
					.find('>ul:hidden').css('visibility','visible');
			o.onBeforeShow.call($ul);
			$ul.animate(o.animation,o.speed,function(){ o.onShow.call(this); });
			return this;
		}
	});
	
	$(window).unload(function(){
		$('ul.superfish').each(function(){
			$('li',this).unbind('mouseover','mouseout','mouseenter','mouseleave');
		});
	});
})(jQuery);
//}}}
/*{{{*/
body {
 -moz-opacity: .999; //to defeat firefox redraw problem with fade effect
}

/* link styles */
.nav a {
	text-decoration: none;
	display: block;
	padding: 5px 7px 4px 17px;
	color: #CCC;
	width: 9em;
	font-weight: bold;
	background-color: #4C5353;
	border-bottom: 1px solid #CCC;
	border-left: 1px solid #CCC;
}

.nav a:hover{
	background-color: #333;
	color: #FFF;
}

/* main nav bar */
.nav {
	margin: 0;
	padding: 0;
	line-height: 1;
}

/* all list items */
.nav  li {
	margin:0;
	padding:0;
	list-style: none; /* remove bullets */
	float: left; /* place buttons side by side */
  display:inline; /* fix ie space between links problem*/
}

/* pop-up subnav */
.nav ul {
	margin: 0;
	padding: 0;
	position: absolute; /*to allow positioning of 3rd level menu*/
	z-index: 90;
	display: none;
}


/* list items in pop-up subnav */
.nav ul li {
	float: none; /* so links line up one above the other for drop-downs */
}

/*3rd level menu position*/
.nav ul ul {
	position: absolute;
  left: 8.5em;
  top: -.5em;
  z-index: 99;
border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
}



/* look for buttons that have menus */
.sub {
	background: url(../superfish/images/arrow_down.png) no-repeat 2px 3px;
}

.subsub {
	background: url(../superfish/images/arrow_left.png) no-repeat 4px 7px;
}
/*}}}*/
!Displaying Time
Using [[printTimePlugin]] instead of external file
<script show>
	return(printTime(true));
</script>
|~ViewToolbar|closeTiddler closeOthers editTiddler > fields syncing permalink references jump|
|~EditToolbar|+saveTiddler -cancelTiddler deleteTiddler|
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'><span macro='tiddler ViewTemplate##Refresh'></span></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>

<div class='tagged' macro='tagging'><span macro='tags'></span></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>

<div style=display:none;>
!!!!!Refresh
{{button{<script label="(refresh)" title="redisplay the contents of this tiddler">
story.refreshTiddler(story.findContainingTiddler(place).getAttribute("tiddler"),null,true);</script>}}}
!!!!!End</div>
<!--}}}-->
/***
 * jQuery clueTip plugin
 * Version 0.9.8  (05/22/2008)
 * @requires jQuery v1.1.4+
 * @requires Dimensions plugin (for jQuery versions < 1.2.5)
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
***/
//{{{
;(function($) { 
/*
 * @name clueTip
 * @type jQuery
 * @cat Plugins/tooltip
 * @return jQuery
 * @author Karl Swedberg
 *
 * @credit Inspired by Cody Lindley's jTip (http://www.codylindley.com)
 * @credit Thanks to the following people for their many and varied contributions:
      Shelane Enos, Glen Lipka, Hector Santos, Torben Schreiter, Dan G. Switzer, Jörn Zaefferer 
 * @credit Thanks to Jonathan Chaffer, as always, for help with the hard parts. :-)
 */

 /**
 * 
 * Displays a highly customizable tooltip when the user hovers (default) or clicks (optional) the matched element. 
 * By default, the clueTip plugin loads a page indicated by the "rel" attribute via ajax and displays its contents.
 * If a "title" attribute is specified, its value is used as the clueTip's heading.
 * The attribute to be used for both the body and the heading of the clueTip is user-configurable. 
 * Optionally, the clueTip's body can display content from an element on the same page.
 * * Just indicate the element's id (e.g. "#some-id") in the rel attribute.
 * Optionally, the clueTip's body can display content from the title attribute, when a delimiter is indicated. 
 * * The string before the first instance of the delimiter is set as the clueTip's heading.
 * * All subsequent strings are wrapped in separate DIVs and placed in the clueTip's body.
 * The clueTip plugin allows for many, many more options. Pleasee see the examples and the option descriptions below...
 * 
 * 
 * @example $('#tip).cluetip();
 * @desc This is the most basic clueTip. It displays a 275px-wide clueTip on mouseover of the element with an ID of "tip." On mouseout of the element, the clueTip is hidden.
 *
 *
 * @example $('a.clue').cluetip({
 *  hoverClass: 'highlight',
 *  sticky: true,
 *  closePosition: 'bottom',
 *  closeText: '<img src="cross.png" alt="close" />',
 *  truncate: 60,
 *  ajaxSettings: {
 *    type: 'POST'
 *  }
 * });
 * @desc Displays a clueTip on mouseover of all <a> elements with class="clue". The hovered element gets a class of "highlight" added to it (so that it can be styled appropriately. This is esp. useful for non-anchor elements.). The clueTip is "sticky," which means that it will not be hidden until the user either clicks on its "close" text/graphic or displays another clueTip. The "close" text/graphic is set to diplay at the bottom of the clueTip (default is top) and display an image rather than the default "Close" text. Moreover, the body of the clueTip is truncated to the first 60 characters, which are followed by an ellipsis (...). Finally, the clueTip retrieves the content using POST rather than the $.ajax method's default "GET."
 * 
 * More examples can be found at http://plugins.learningjquery.com/cluetip/demo/
 * 
 * Full list of options/settings can be found at the bottom of this file and at http://plugins.learningjquery.com/cluetip/
 */

  var $cluetip, $cluetipInner, $cluetipOuter, $cluetipTitle, $cluetipArrows, $dropShadow, imgCount;
  $.fn.cluetip = function(js, options) {
    if (typeof js == 'object') {
      options = js;
      js = null;
    }
    return this.each(function(index) {
      var $this = $(this);      
      
      // support metadata plugin (v1.0 and 2.0)
      var opts = $.extend(false, {}, $.fn.cluetip.defaults, options || {}, $.metadata ? $this.metadata() : $.meta ? $this.data() : {});

      // start out with no contents (for ajax activation)
      var cluetipContents = false;
      var cluezIndex = parseInt(opts.cluezIndex, 10)-1;
      var isActive = false, closeOnDelay = 0;

      // create the cluetip divs
      if (!$('#cluetip').length) {
        $cluetipInner = $('<div id="cluetip-inner"></div>');
        $cluetipTitle = $('<h3 id="cluetip-title"></h3>');        
        $cluetipOuter = $('<div id="cluetip-outer"></div>').append($cluetipInner).prepend($cluetipTitle);
        $cluetip = $('<div id="cluetip"></div>').css({zIndex: opts.cluezIndex})
        .append($cluetipOuter).append('<div id="cluetip-extra"></div>')[insertionType](insertionElement).hide();
        $('<div id="cluetip-waitimage"></div>').css({position: 'absolute', zIndex: cluezIndex-1})
        .insertBefore('#cluetip').hide();
        $cluetip.css({position: 'absolute', zIndex: cluezIndex});
        $cluetipOuter.css({position: 'relative', zIndex: cluezIndex+1});
        $cluetipArrows = $('<div id="cluetip-arrows" class="cluetip-arrows"></div>').css({zIndex: cluezIndex+1}).appendTo('#cluetip');
      }
      var dropShadowSteps = (opts.dropShadow) ? +opts.dropShadowSteps : 0;
      if (!$dropShadow) {
        $dropShadow = $([]);
        for (var i=0; i < dropShadowSteps; i++) {
          $dropShadow = $dropShadow.add($('<div></div>').css({zIndex: cluezIndex-i-1, opacity:.1, top: 1+i, left: 1+i}));
        };
        $dropShadow.css({position: 'absolute', backgroundColor: '#000'})
        .prependTo($cluetip);
      }
      var tipAttribute = $this.attr(opts.attribute), ctClass = opts.cluetipClass;
      if (!tipAttribute && !opts.splitTitle && !js) return true;
      // if hideLocal is set to true, on DOM ready hide the local content that will be displayed in the clueTip      
      if (opts.local && opts.hideLocal) { $(tipAttribute + ':first').hide(); }
      var tOffset = parseInt(opts.topOffset, 10), lOffset = parseInt(opts.leftOffset, 10);
      // vertical measurement variables
      var tipHeight, wHeight;
      var defHeight = isNaN(parseInt(opts.height, 10)) ? 'auto' : (/\D/g).test(opts.height) ? opts.height : opts.height + 'px';
      var sTop, linkTop, posY, tipY, mouseY, baseline;
      // horizontal measurement variables
      var tipInnerWidth = isNaN(parseInt(opts.width, 10)) ? 275 : parseInt(opts.width, 10);
      var tipWidth = tipInnerWidth + (parseInt($cluetip.css('paddingLeft'))||0) + (parseInt($cluetip.css('paddingRight'))||0) + dropShadowSteps;
      var linkWidth = this.offsetWidth;
      var linkLeft, posX, tipX, mouseX, winWidth;
            
      // parse the title
      var tipParts;
      var tipTitle = (opts.attribute != 'title') ? $this.attr(opts.titleAttribute) : '';
      if (opts.splitTitle) {
        if(tipTitle == undefined) {tipTitle = '';}
        tipParts = tipTitle.split(opts.splitTitle);
        tipTitle = tipParts.shift();
      }
      var localContent;

/***************************************      
* ACTIVATION
****************************************/
    
//activate clueTip
    var activate = function(event) {
      if (!opts.onActivate($this)) {
        return false;
      }
      isActive = true;
      $cluetip.removeClass().css({width: tipInnerWidth});
      if (tipAttribute == $this.attr('href')) {
        $this.css('cursor', opts.cursor);
      }
      $this.attr('title','');
      if (opts.hoverClass) {
        $this.addClass(opts.hoverClass);
      }
      linkTop = posY = $this.offset().top;
      linkLeft = $this.offset().left;
      mouseX = event.pageX;
      mouseY = event.pageY;
      if ($this[0].tagName.toLowerCase() != 'area') {
        sTop = $(document).scrollTop();
        winWidth = $(window).width();
      }
// position clueTip horizontally
      if (opts.positionBy == 'fixed') {
        posX = linkWidth + linkLeft + lOffset;
        $cluetip.css({left: posX});
      } else {
        posX = (linkWidth > linkLeft && linkLeft > tipWidth)
          || linkLeft + linkWidth + tipWidth + lOffset > winWidth 
          ? linkLeft - tipWidth - lOffset 
          : linkWidth + linkLeft + lOffset;
        if ($this[0].tagName.toLowerCase() == 'area' || opts.positionBy == 'mouse' || linkWidth + tipWidth > winWidth) { // position by mouse
          if (mouseX + 20 + tipWidth > winWidth) {  
            $cluetip.addClass(' cluetip-' + ctClass);
            posX = (mouseX - tipWidth - lOffset) >= 0 ? mouseX - tipWidth - lOffset - parseInt($cluetip.css('marginLeft'),10) + parseInt($cluetipInner.css('marginRight'),10) :  mouseX - (tipWidth/2);
          } else {
            posX = mouseX + lOffset;
          }
        }
        var pY = posX < 0 ? event.pageY + tOffset : event.pageY;
        $cluetip.css({left: (posX > 0 && opts.positionBy != 'bottomTop') ? posX : (mouseX + (tipWidth/2) > winWidth) ? winWidth/2 - tipWidth/2 : Math.max(mouseX - (tipWidth/2),0)});
      }
        wHeight = $(window).height();

/***************************************
* load a string from cluetip method's first argument
***************************************/
      if (js) {
        $cluetipInner.html(js);
        cluetipShow(pY);
      }
/***************************************
* load the title attribute only (or user-selected attribute). 
* clueTip title is the string before the first delimiter
* subsequent delimiters place clueTip body text on separate lines
***************************************/

      else if (tipParts) {
        var tpl = tipParts.length;
        for (var i=0; i < tpl; i++){
          if (i == 0) {
            $cluetipInner.html(tipParts[i]);
          } else { 
            $cluetipInner.append('<div class="split-body">' + tipParts[i] + '</div>');
          }            
        };
        cluetipShow(pY);
      }
/***************************************
* load external file via ajax          
***************************************/

      else if (!opts.local && tipAttribute.indexOf('#') != 0) {
        if (cluetipContents && opts.ajaxCache) {
          $cluetipInner.html(cluetipContents);
          cluetipShow(pY);
        }
        else {
          var ajaxSettings = opts.ajaxSettings;
          ajaxSettings.url = tipAttribute;
          ajaxSettings.beforeSend = function() {
            $cluetipOuter.children().empty();
            if (opts.waitImage) {
              $('#cluetip-waitimage')
              .css({top: mouseY+20, left: mouseX+20})
              .show();
            }
          };
         ajaxSettings.error = function() {
            if (isActive) {
              $cluetipInner.html('<i>sorry, the contents could not be loaded</i>');
            }
          };
          ajaxSettings.success = function(data) {
            cluetipContents = opts.ajaxProcess(data);
            if (isActive) {
              $cluetipInner.html(cluetipContents);
            }
          };
          ajaxSettings.complete = function() {
          	imgCount = $('#cluetip-inner img').length;
        		if (imgCount && !$.browser.opera) {
        		  $('#cluetip-inner img').load(function() {
          			imgCount--;
          			if (imgCount<1) {
          				$('#cluetip-waitimage').hide();
          			  if (isActive) cluetipShow(pY);
          			}
        		  }); 
        		} else {
      				$('#cluetip-waitimage').hide();
        		  if (isActive) cluetipShow(pY);    
        		} 
          };
          $.ajax(ajaxSettings);
        }

/***************************************
* load an element from the same page
***************************************/
      } else if (opts.local){
        var $localContent = $(tipAttribute + ':first');
        var localCluetip = $.fn.wrapInner ? $localContent.wrapInner('<div></div>').children().clone(true) : $localContent.html();
        $.fn.wrapInner ? $cluetipInner.empty().append(localCluetip) : $cluetipInner.html(localCluetip);
        cluetipShow(pY);
      }
    };

// get dimensions and options for cluetip and prepare it to be shown
    var cluetipShow = function(bpY) {
      $cluetip.addClass('cluetip-' + ctClass);
      
      if (opts.truncate) { 
        var $truncloaded = $cluetipInner.text().slice(0,opts.truncate) + '...';
        $cluetipInner.html($truncloaded);
      }
      function doNothing() {}; //empty function
      tipTitle ? $cluetipTitle.show().html(tipTitle) : (opts.showTitle) ? $cluetipTitle.show().html('&nbsp;') : $cluetipTitle.hide();
      if (opts.sticky) {
        var $closeLink = $('<div id="cluetip-close"><a href="#">' + opts.closeText + '</a></div>');
        (opts.closePosition == 'bottom') ? $closeLink.appendTo($cluetipInner) : (opts.closePosition == 'title') ? $closeLink.prependTo($cluetipTitle) : $closeLink.prependTo($cluetipInner);
        $closeLink.click(function() {
          cluetipClose();
          return false;
        });
        if (opts.mouseOutClose) {
          if ($.fn.hoverIntent && opts.hoverIntent) { 
            $cluetip.hoverIntent({
              over: doNothing, 
              timeout: opts.hoverIntent.timeout,  
              out: function() { $closeLink.trigger('click'); }
            });
          } else {
            $cluetip.hover(doNothing, 
            function() {$closeLink.trigger('click'); });
          }
        } else {
          $cluetip.unbind('mouseout');
        }
      }
// now that content is loaded, finish the positioning 
      var direction = '';
      $cluetipOuter.css({overflow: defHeight == 'auto' ? 'visible' : 'auto', height: defHeight});
      tipHeight = defHeight == 'auto' ? Math.max($cluetip.outerHeight(),$cluetip.height()) : parseInt(defHeight,10);   
      tipY = posY;
      baseline = sTop + wHeight;
      if (opts.positionBy == 'fixed') {
        tipY = posY - opts.dropShadowSteps + tOffset;
      } else if ( (posX < mouseX && Math.max(posX, 0) + tipWidth > mouseX) || opts.positionBy == 'bottomTop') {
        if (posY + tipHeight + tOffset > baseline && mouseY - sTop > tipHeight + tOffset) { 
          tipY = mouseY - tipHeight - tOffset;
          direction = 'top';
        } else { 
          tipY = mouseY + tOffset;
          direction = 'bottom';
        }
      } else if ( posY + tipHeight + tOffset > baseline ) {
        tipY = (tipHeight >= wHeight) ? sTop : baseline - tipHeight - tOffset;
      } else if ($this.css('display') == 'block' || $this[0].tagName.toLowerCase() == 'area' || opts.positionBy == "mouse") {
        tipY = bpY - tOffset;
      } else {
        tipY = posY - opts.dropShadowSteps;
      }
      if (direction == '') {
        posX < linkLeft ? direction = 'left' : direction = 'right';
      }
      $cluetip.css({top: tipY + 'px'}).removeClass().addClass('clue-' + direction + '-' + ctClass).addClass(' cluetip-' + ctClass);
      if (opts.arrows) { // set up arrow positioning to align with element
        var bgY = (posY - tipY - opts.dropShadowSteps);
        $cluetipArrows.css({top: (/(left|right)/.test(direction) && posX >=0 && bgY > 0) ? bgY + 'px' : /(left|right)/.test(direction) ? 0 : ''}).show();
      } else {
        $cluetipArrows.hide();
      }

// (first hide, then) ***SHOW THE CLUETIP***
      $dropShadow.hide();
      $cluetip.hide()[opts.fx.open](opts.fx.open != 'show' && opts.fx.openSpeed);
      if (opts.dropShadow) $dropShadow.css({height: tipHeight, width: tipInnerWidth}).show();
      if ($.fn.bgiframe) { $cluetip.bgiframe(); }
      // trigger the optional onShow function
      if (opts.delayedClose > 0) {
        closeOnDelay = setTimeout(cluetipClose, opts.delayedClose);
      }
      opts.onShow($cluetip, $cluetipInner);
      
    };

/***************************************
   =INACTIVATION
-------------------------------------- */
    var inactivate = function() {
      isActive = false;
      $('#cluetip-waitimage').hide();
      if (!opts.sticky || (/click|toggle/).test(opts.activation) ) {
        cluetipClose();
clearTimeout(closeOnDelay);        
      };
      if (opts.hoverClass) {
        $this.removeClass(opts.hoverClass);
      }
      $('.cluetip-clicked').removeClass('cluetip-clicked');
    };
// close cluetip and reset some things
    var cluetipClose = function() {
      $cluetipOuter 
      .parent().hide().removeClass().end()
      .children().empty();
      if (tipTitle) {
        $this.attr(opts.titleAttribute, tipTitle);
      }
      $this.css('cursor','');
      if (opts.arrows) $cluetipArrows.css({top: ''});
    };

/***************************************
   =BIND EVENTS
-------------------------------------- */
  // activate by click
      if ( (/click|toggle/).test(opts.activation) ) {
        $this.click(function(event) {
          if ($cluetip.is(':hidden') || !$this.is('.cluetip-clicked')) {
            activate(event);
            $('.cluetip-clicked').removeClass('cluetip-clicked');
            $this.addClass('cluetip-clicked');

          } else {
            inactivate(event);

          }
          this.blur();
          return false;
        });
  // activate by focus; inactivate by blur    
      } else if (opts.activation == 'focus') {
        $this.focus(function(event) {
          activate(event);
        });
        $this.blur(function(event) {
          inactivate(event);
        });
  // activate by hover
    // clicking is returned false if cluetip url is same as href url
      } else {
        $this.click(function() {
          if ($this.attr('href') && $this.attr('href') == tipAttribute && !opts.clickThrough) {
            return false;
          }
        });
        //set up mouse tracking
        var mouseTracks = function(evt) {
          if (opts.tracking == true) {
            var trackX = posX - evt.pageX;
            var trackY = tipY ? tipY - evt.pageY : posY - evt.pageY;
            $this.mousemove(function(evt) {
              $cluetip.css({left: evt.pageX + trackX, top: evt.pageY + trackY });
            });
          }
        };
        if ($.fn.hoverIntent && opts.hoverIntent) {
          $this.mouseover(function() {$this.attr('title',''); })
          .hoverIntent({
            sensitivity: opts.hoverIntent.sensitivity,
            interval: opts.hoverIntent.interval,  
            over: function(event) {
              activate(event);
              mouseTracks(event);
            }, 
            timeout: opts.hoverIntent.timeout,  
            out: function(event) {inactivate(event); $this.unbind('mousemove');}
          });           
        } else {
          $this.hover(function(event) {
            activate(event);
            mouseTracks(event);
          }, function(event) {
            inactivate(event);
            $this.unbind('mousemove');
          });
        }
      }
    });
  };
  
/*
 * options for clueTip
 *
 * each one can be explicitly overridden by changing its value. 
 * for example: $.fn.cluetip.defaults.width = 200; 
 * would change the default width for all clueTips to 200. 
 *
 * each one can also be overridden by passing an options map to the cluetip method.
 * for example: $('a.example').cluetip({width: 200}); 
 * would change the default width to 200 for clueTips invoked by a link with class of "example"
 *
 */
  
  $.fn.cluetip.defaults = {  // set up default options
    width:            275,      // The width of the clueTip
    height:           'auto',   // The height of the clueTip
    cluezIndex:       97,       // Sets the z-index style property of the clueTip
    positionBy:       'auto',   // Sets the type of positioning: 'auto', 'mouse','bottomTop', 'fixed'
    topOffset:        15,       // Number of px to offset clueTip from top of invoking element
    leftOffset:       15,       // Number of px to offset clueTip from left of invoking element
    local:            false,    // Whether to use content from the same page for the clueTip's body
    hideLocal:        true,     // If local option is set to true, this determines whether local content
                                // to be shown in clueTip should be hidden at its original location
    attribute:        'rel',    // the attribute to be used for fetching the clueTip's body content
    titleAttribute:   'title',  // the attribute to be used for fetching the clueTip's title
    splitTitle:       '',       // A character used to split the title attribute into the clueTip title and divs
                                // within the clueTip body. more info below [6]
    showTitle:        true,     // show title bar of the clueTip, even if title attribute not set
    cluetipClass:     'default',// class added to outermost clueTip div in the form of 'cluetip-' + clueTipClass.
    hoverClass:       '',       // class applied to the invoking element onmouseover and removed onmouseout
    waitImage:        true,     // whether to show a "loading" img, which is set in jquery.cluetip.css
    cursor:           'help',
    arrows:           false,    // if true, displays arrow on appropriate side of clueTip
    dropShadow:       true,     // set to false if you don't want the drop-shadow effect on the clueTip
    dropShadowSteps:  6,        // adjusts the size of the drop shadow
    sticky:           false,    // keep visible until manually closed
    mouseOutClose:    false,    // close when clueTip is moused out
    activation:       'hover',  // set to 'click' to force user to click to show clueTip
                                // set to 'focus' to show on focus of a form element and hide on blur
    clickThrough:     false,    // if true, and activation is not 'click', then clicking on link will take user to the link's href,
                                // even if href and tipAttribute are equal
    tracking:         false,    // if true, clueTip will track mouse movement (experimental)
    delayedClose:     0,        // close clueTip on a timed delay (experimental)
    closePosition:    'top',    // location of close text for sticky cluetips; can be 'top' or 'bottom' or 'title'
    closeText:        'Close',  // text (or HTML) to to be clicked to close sticky clueTips
    truncate:         0,        // number of characters to truncate clueTip's contents. if 0, no truncation occurs

    // effect and speed for opening clueTips
    fx: {             
                      open:       'show', // can be 'show' or 'slideDown' or 'fadeIn'
                      openSpeed:  ''
    },     

    // settings for when hoverIntent plugin is used             
    hoverIntent: {    
                      sensitivity:  3,
              			  interval:     50,
              			  timeout:      0
    },

    // function to run just before clueTip is shown.           
    onActivate:       function(e) {return true;},

    // function to run just after clueTip is shown.
    onShow:           function(ct, c){},
    
    // whether to cache results of ajax request to avoid unnecessary hits to server    
    ajaxCache:        true,  

    // process data retrieved via xhr before it's displayed
    ajaxProcess:      function(data) {
                        data = data.replace(/<s(cript|tyle)(.|\s)*?\/s(cript|tyle)>/g, '').replace(/<(link|title)(.|\s)*?\/(link|title)>/g,'');
                        return data;
    },                

    // can pass in standard $.ajax() parameters, not including error, complete, success, and url
    ajaxSettings: {   
                      dataType: 'html'
    },
    debug: false
  };


/*
 * Global defaults for clueTips. Apply to all calls to the clueTip plugin.
 *
 * @example $.cluetip.setup({
 *   insertionType: 'prependTo',
 *   insertionElement: '#container'
 * });
 * 
 * @property
 * @name $.cluetip.setup
 * @type Map
 * @cat Plugins/tooltip
 * @option String insertionType: Default is 'appendTo'. Determines the method to be used for inserting the clueTip into the DOM. Permitted values are 'appendTo', 'prependTo', 'insertBefore', and 'insertAfter'
 * @option String insertionElement: Default is 'body'. Determines which element in the DOM the plugin will reference when inserting the clueTip.
 *
 */
   
  var insertionType = 'appendTo', insertionElement = 'body';
  $.cluetip = {};
  $.cluetip.setup = function(options) {
    if (options && options.insertionType && (options.insertionType).match(/appendTo|prependTo|insertBefore|insertAfter/)) {
      insertionType = options.insertionType;
    }
    if (options && options.insertionElement) {
      insertionElement = options.insertionElement;
    }
  };
  
})(jQuery);
//}}}
//{{{
function dateString(date,string) {
		/* key for creating string
			%Y = 2008
			%y = 08
			%M = January
			%m = Jan
			%N = 01 (month)
			%n = 1 (month)
			%W = Monday
			%w = Mon
			%D = 05 (day of month)
			%d = 5 (day of month)
			%O = ordinal like 'st' for 1st, or 'th' for 5th
			Example: '%W, the %d%O of %M, %Y' will return a string like
			'Tuesday, the 6th of February, 2009'
		*/
		var months = ['January','February','March','April','May',
									'June','July','August','September',
									'October','November','December'];
		var days = ['Sunday','Monday','Tuesday','Wednesday',
								'Thursday','Friday','Saturday'];
		var day=date.getDay();
		var year=date.getFullYear();
		var month=date.getMonth();
		var realMonth=month+1;
		var fillMonth = (realMonth<10) ? '0' + realMonth : realMonth;
		var date=date.getDate();
		var fillDate = (date<10) ? '0' + date : date;
		var sfx = ["th","st","nd","rd"];
		var val = date%100;
	  var ordDate = date + (sfx[(val-20)%10] || sfx[val] || sfx[0]);
		
		
		//year
		string = string.replace(/%Y/g,year); // 2008
		string = string.replace(/%y/g,year.toString().slice(-2)); //08
		//month
		string = string.replace(/%M/g,months[month]); //January
		string = string.replace(/%m/g,months[month].slice(0,3)); //Jan
		string = string.replace(/%N/g,fillMonth); // 01
		string = string.replace(/%n/g,realMonth); // 1
		//day of week
		string = string.replace(/%W/g,days[day]); //Monday
		string = string.replace(/%w/g,days[day].slice(0,3)); //Mon
		//day of month
		string = string.replace(/%D/g,fillDate); //05
		string = string.replace(/%d/g,date); // 5
		//ordinal (1st) to day
		string = string.replace(/%O/ig,ordDate);
		return string;
	}
//}}}
/***
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.js
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 ***/
//{{{
(function($){$.fn.lightBox=function(settings){settings=jQuery.extend({overlayBgColor:'#000',overlayOpacity:0.8,fixedNavigation:false,imageLoading:'images/lightbox-ico-loading.gif',imageBtnPrev:'images/lightbox-btn-prev.gif',imageBtnNext:'images/lightbox-btn-next.gif',imageBtnClose:'images/lightbox-btn-close.gif',imageBlank:'images/lightbox-blank.gif',containerBorderSize:10,containerResizeSpeed:400,txtImage:'Image',txtOf:'of',keyToClose:'c',keyToPrev:'p',keyToNext:'n',imageArray:[],activeImage:0},settings);var jQueryMatchedObj=this;function _initialize(){_start(this,jQueryMatchedObj);return false;}
function _start(objClicked,jQueryMatchedObj){$('embed, object, select').css({'visibility':'hidden'});_set_interface();settings.imageArray.length=0;settings.activeImage=0;if(jQueryMatchedObj.length==1){settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));}else{for(var i=0;i<jQueryMatchedObj.length;i++){settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));}}
while(settings.imageArray[settings.activeImage][0]!=objClicked.getAttribute('href')){settings.activeImage++;}
_set_image_to_view();}
function _set_interface(){$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="'+settings.imageLoading+'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="'+settings.imageBtnClose+'"></a></div></div></div></div>');var arrPageSizes=___getPageSize();$('#jquery-overlay').css({backgroundColor:settings.overlayBgColor,opacity:settings.overlayOpacity,width:arrPageSizes[0],height:arrPageSizes[1]}).fadeIn();var arrPageScroll=___getPageScroll();$('#jquery-lightbox').css({top:arrPageScroll[1]+(arrPageSizes[3]/10),left:arrPageScroll[0]}).show();$('#jquery-overlay,#jquery-lightbox').click(function(){_finish();});$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function(){_finish();return false;});$(window).resize(function(){var arrPageSizes=___getPageSize();$('#jquery-overlay').css({width:arrPageSizes[0],height:arrPageSizes[1]});var arrPageScroll=___getPageScroll();$('#jquery-lightbox').css({top:arrPageScroll[1]+(arrPageSizes[3]/10),left:arrPageScroll[0]});});}
function _set_image_to_view(){$('#lightbox-loading').show();if(settings.fixedNavigation){$('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();}else{$('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();}
var objImagePreloader=new Image();objImagePreloader.onload=function(){$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);objImagePreloader.onload=function(){};};objImagePreloader.src=settings.imageArray[settings.activeImage][0];};function _resize_container_image_box(intImageWidth,intImageHeight){var intCurrentWidth=$('#lightbox-container-image-box').width();var intCurrentHeight=$('#lightbox-container-image-box').height();var intWidth=(intImageWidth+(settings.containerBorderSize*2));var intHeight=(intImageHeight+(settings.containerBorderSize*2));var intDiffW=intCurrentWidth-intWidth;var intDiffH=intCurrentHeight-intHeight;$('#lightbox-container-image-box').animate({width:intWidth,height:intHeight},settings.containerResizeSpeed,function(){_show_image();});if((intDiffW==0)&&(intDiffH==0)){if($.browser.msie){___pause(250);}else{___pause(100);}}
$('#lightbox-container-image-data-box').css({width:intImageWidth});$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({height:intImageHeight+(settings.containerBorderSize*2)});};function _show_image(){$('#lightbox-loading').hide();$('#lightbox-image').fadeIn(function(){_show_image_data();_set_navigation();});_preload_neighbor_images();};function _show_image_data(){$('#lightbox-container-image-data-box').slideDown('fast');$('#lightbox-image-details-caption').hide();if(settings.imageArray[settings.activeImage][1]){$('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();}
if(settings.imageArray.length>1){$('#lightbox-image-details-currentNumber').html(settings.txtImage+' '+(settings.activeImage+1)+' '+settings.txtOf+' '+settings.imageArray.length).show();}}
function _set_navigation(){$('#lightbox-nav').show();$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({'background':'transparent url('+settings.imageBlank+') no-repeat'});if(settings.activeImage!=0){if(settings.fixedNavigation){$('#lightbox-nav-btnPrev').css({'background':'url('+settings.imageBtnPrev+') left 15% no-repeat'}).unbind().bind('click',function(){settings.activeImage=settings.activeImage-1;_set_image_to_view();return false;});}else{$('#lightbox-nav-btnPrev').unbind().hover(function(){$(this).css({'background':'url('+settings.imageBtnPrev+') left 15% no-repeat'});},function(){$(this).css({'background':'transparent url('+settings.imageBlank+') no-repeat'});}).show().bind('click',function(){settings.activeImage=settings.activeImage-1;_set_image_to_view();return false;});}}
if(settings.activeImage!=(settings.imageArray.length-1)){if(settings.fixedNavigation){$('#lightbox-nav-btnNext').css({'background':'url('+settings.imageBtnNext+') right 15% no-repeat'}).unbind().bind('click',function(){settings.activeImage=settings.activeImage+1;_set_image_to_view();return false;});}else{$('#lightbox-nav-btnNext').unbind().hover(function(){$(this).css({'background':'url('+settings.imageBtnNext+') right 15% no-repeat'});},function(){$(this).css({'background':'transparent url('+settings.imageBlank+') no-repeat'});}).show().bind('click',function(){settings.activeImage=settings.activeImage+1;_set_image_to_view();return false;});}}
_enable_keyboard_navigation();}
function _enable_keyboard_navigation(){$(document).keydown(function(objEvent){_keyboard_action(objEvent);});}
function _disable_keyboard_navigation(){$(document).unbind();}
function _keyboard_action(objEvent){if(objEvent==null){keycode=event.keyCode;escapeKey=27;}else{keycode=objEvent.keyCode;escapeKey=objEvent.DOM_VK_ESCAPE;}
key=String.fromCharCode(keycode).toLowerCase();if((key==settings.keyToClose)||(key=='x')||(keycode==escapeKey)){_finish();}
if((key==settings.keyToPrev)||(keycode==37)){if(settings.activeImage!=0){settings.activeImage=settings.activeImage-1;_set_image_to_view();_disable_keyboard_navigation();}}
if((key==settings.keyToNext)||(keycode==39)){if(settings.activeImage!=(settings.imageArray.length-1)){settings.activeImage=settings.activeImage+1;_set_image_to_view();_disable_keyboard_navigation();}}}
function _preload_neighbor_images(){if((settings.imageArray.length-1)>settings.activeImage){objNext=new Image();objNext.src=settings.imageArray[settings.activeImage+1][0];}
if(settings.activeImage>0){objPrev=new Image();objPrev.src=settings.imageArray[settings.activeImage-1][0];}}
function _finish(){$('#jquery-lightbox').remove();$('#jquery-overlay').fadeOut(function(){$('#jquery-overlay').remove();});$('embed, object, select').css({'visibility':'visible'});}
function ___getPageSize(){var xScroll,yScroll;if(window.innerHeight&&window.scrollMaxY){xScroll=window.innerWidth+window.scrollMaxX;yScroll=window.innerHeight+window.scrollMaxY;}else if(document.body.scrollHeight>document.body.offsetHeight){xScroll=document.body.scrollWidth;yScroll=document.body.scrollHeight;}else{xScroll=document.body.offsetWidth;yScroll=document.body.offsetHeight;}
var windowWidth,windowHeight;if(self.innerHeight){if(document.documentElement.clientWidth){windowWidth=document.documentElement.clientWidth;}else{windowWidth=self.innerWidth;}
windowHeight=self.innerHeight;}else if(document.documentElement&&document.documentElement.clientHeight){windowWidth=document.documentElement.clientWidth;windowHeight=document.documentElement.clientHeight;}else if(document.body){windowWidth=document.body.clientWidth;windowHeight=document.body.clientHeight;}
if(yScroll<windowHeight){pageHeight=windowHeight;}else{pageHeight=yScroll;}
if(xScroll<windowWidth){pageWidth=xScroll;}else{pageWidth=windowWidth;}
arrayPageSize=new Array(pageWidth,pageHeight,windowWidth,windowHeight);return arrayPageSize;};function ___getPageScroll(){var xScroll,yScroll;if(self.pageYOffset){yScroll=self.pageYOffset;xScroll=self.pageXOffset;}else if(document.documentElement&&document.documentElement.scrollTop){yScroll=document.documentElement.scrollTop;xScroll=document.documentElement.scrollLeft;}else if(document.body){yScroll=document.body.scrollTop;xScroll=document.body.scrollLeft;}
arrayPageScroll=new Array(xScroll,yScroll);return arrayPageScroll;};function ___pause(ms){var date=new Date();curDate=null;do{var curDate=new Date();}
while(curDate-date<ms);};return this.unbind('click').click(_initialize);};})(jQuery);
//}}}
//{{{
function printTime(secs) {
	var sep = ':'; //seperator character
	var hours,minutes,seconds,time;
	var now = new Date();
	hours = now.getHours();
	if (hours < 12) {
		meridiem = 'am';
	} else {
		meridiem = 'pm';
	}
	hours = hours % 12;
	if (hours==0) {
		hours = 12;
	} 
	time = hours
	minutes = now.getMinutes();
	if (minutes<10) {
		minutes = '0' + minutes;
	}
	time += sep + minutes;
	if (secs) {
		seconds = now.getSeconds();
		if (seconds<10) {
			seconds = '0' + seconds;
		}
		time += sep + seconds
	} 
	return time + ' ' + meridiem;
}
//}}}
//{{{
function rndNum(from, to) {
  return Math.floor((Math.random()*(to-from+1))+from);
}
//}}}
/***
 * 
 * TableSorter 2.0 - Client-side table sorting with ease!
 * Version 2.0.3
 * @requires jQuery v1.2.3
 * 
 * Copyright (c) 2007 Christian Bach
 * Examples and docs at: http://tablesorter.com
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * 
 */
/**
 *
 * @description Create a sortable table with multi-column sorting capabilitys
 * 
 * @example $('table').tablesorter();
 * @desc Create a simple tablesorter interface.
 *
 * @example $('table').tablesorter({ sortList:[[0,0],[1,0]] });
 * @desc Create a tablesorter interface and sort on the first and secound column in ascending order.
 * 
 * @example $('table').tablesorter({ headers: { 0: { sorter: false}, 1: {sorter: false} } });
 * @desc Create a tablesorter interface and disableing the first and secound column headers.
 * 
 * @example $('table').tablesorter({ 0: {sorter:"integer"}, 1: {sorter:"currency"} });
 * @desc Create a tablesorter interface and set a column parser for the first and secound column.
 * 
 * 
 * @param Object settings An object literal containing key/value pairs to provide optional settings.
 * 
 * @option String cssHeader (optional) 			A string of the class name to be appended to sortable tr elements in the thead of the table. 
 * 												Default value: "header"
 * 
 * @option String cssAsc (optional) 			A string of the class name to be appended to sortable tr elements in the thead on a ascending sort. 
 * 												Default value: "headerSortUp"
 * 
 * @option String cssDesc (optional) 			A string of the class name to be appended to sortable tr elements in the thead on a descending sort. 
 * 												Default value: "headerSortDown"
 * 
 * @option String sortInitialOrder (optional) 	A string of the inital sorting order can be asc or desc. 
 * 												Default value: "asc"
 * 
 * @option String sortMultisortKey (optional) 	A string of the multi-column sort key. 
 * 												Default value: "shiftKey"
 * 
 * @option String textExtraction (optional) 	A string of the text-extraction method to use. 
 * 												For complex html structures inside td cell set this option to "complex", 
 * 												on large tables the complex option can be slow. 
 * 												Default value: "simple"
 * 
 * @option Object headers (optional) 			An array containing the forces sorting rules. 
 * 												This option let's you specify a default sorting rule. 
 * 												Default value: null
 * 
 * @option Array sortList (optional) 			An array containing the forces sorting rules. 
 * 												This option let's you specify a default sorting rule. 
 * 												Default value: null
 * 
 * @option Array sortForce (optional) 			An array containing forced sorting rules. 
 * 												This option let's you specify a default sorting rule, which is prepended to user-selected rules.
 * 												Default value: null
 *  
  * @option Array sortAppend (optional) 			An array containing forced sorting rules. 
 * 												This option let's you specify a default sorting rule, which is appended to user-selected rules.
 * 												Default value: null
 * 
 * @option Boolean widthFixed (optional) 		Boolean flag indicating if tablesorter should apply fixed widths to the table columns.
 * 												This is usefull when using the pager companion plugin.
 * 												This options requires the dimension jquery plugin.
 * 												Default value: false
 *
 * @option Boolean cancelSelection (optional) 	Boolean flag indicating if tablesorter should cancel selection of the table headers text.
 * 												Default value: true
 *
 * @option Boolean debug (optional) 			Boolean flag indicating if tablesorter should display debuging information usefull for development.
 *
 * @type jQuery
 *
 * @name tablesorter
 * 
 * @cat Plugins/Tablesorter
 * 
 * @author Christian Bach/christian.bach@polyester.se
 ***/
//{{{
(function($) {
	$.extend({
		tablesorter: new function() {
			
			var parsers = [], widgets = [];
			
			this.defaults = {
				cssHeader: "header",
				cssAsc: "headerSortUp",
				cssDesc: "headerSortDown",
				sortInitialOrder: "asc",
				sortMultiSortKey: "shiftKey",
				sortForce: null,
				sortAppend: null,
				textExtraction: "simple",
				parsers: {}, 
				widgets: [],		
				widgetZebra: {css: ["even","odd"]},
				headers: {},
				widthFixed: false,
				cancelSelection: true,
				sortList: [],
				headerList: [],
				dateFormat: "us",
				decimal: '.',
				debug: false
			};
			
			/* debuging utils */
			function benchmark(s,d) {
				log(s + "," + (new Date().getTime() - d.getTime()) + "ms");
			}
			
			this.benchmark = benchmark;
			
			function log(s) {
				if (typeof console != "undefined" && typeof console.debug != "undefined") {
					console.log(s);
				} else {
					alert(s);
				}
			}
						
			/* parsers utils */
			function buildParserCache(table,$headers) {
				
				if(table.config.debug) { var parsersDebug = ""; }
				
				var rows = table.tBodies[0].rows;
				
				if(table.tBodies[0].rows[0]) {

					var list = [], cells = rows[0].cells, l = cells.length;
					
					for (var i=0;i < l; i++) {
						var p = false;
						
						if($.metadata && ($($headers[i]).metadata() && $($headers[i]).metadata().sorter)  ) {
						
							p = getParserById($($headers[i]).metadata().sorter);	
						
						} else if((table.config.headers[i] && table.config.headers[i].sorter)) {
	
							p = getParserById(table.config.headers[i].sorter);
						}
						if(!p) {
							p = detectParserForColumn(table,cells[i]);
						}
	
						if(table.config.debug) { parsersDebug += "column:" + i + " parser:" +p.id + "\n"; }
	
						list.push(p);
					}
				}
				
				if(table.config.debug) { log(parsersDebug); }

				return list;
			};
			
			function detectParserForColumn(table,node) {
				var l = parsers.length;
				for(var i=1; i < l; i++) {
					if(parsers[i].is($.trim(getElementText(table.config,node)),table,node)) {
						return parsers[i];
					}
				}
				// 0 is always the generic parser (text)
				return parsers[0];
			}
			
			function getParserById(name) {
				var l = parsers.length;
				for(var i=0; i < l; i++) {
					if(parsers[i].id.toLowerCase() == name.toLowerCase()) {	
						return parsers[i];
					}
				}
				return false;
			}
			
			/* utils */
			function buildCache(table) {
				
				if(table.config.debug) { var cacheTime = new Date(); }
				
				
				var totalRows = (table.tBodies[0] && table.tBodies[0].rows.length) || 0,
					totalCells = (table.tBodies[0].rows[0] && table.tBodies[0].rows[0].cells.length) || 0,
					parsers = table.config.parsers, 
					cache = {row: [], normalized: []};
				
					for (var i=0;i < totalRows; ++i) {
					
						/** Add the table data to main data array */
						var c = table.tBodies[0].rows[i], cols = [];
					
						cache.row.push($(c));
						
						for(var j=0; j < totalCells; ++j) {
							cols.push(parsers[j].format(getElementText(table.config,c.cells[j]),table,c.cells[j]));	
						}
												
						cols.push(i); // add position for rowCache
						cache.normalized.push(cols);
						cols = null;
					};
				
				if(table.config.debug) { benchmark("Building cache for " + totalRows + " rows:", cacheTime); }
				
				return cache;
			};
			
			function getElementText(config,node) {
				
				if(!node) return "";
								
				var t = "";
				
				if(config.textExtraction == "simple") {
					if(node.childNodes[0] && node.childNodes[0].hasChildNodes()) {
						t = node.childNodes[0].innerHTML;
					} else {
						t = node.innerHTML;
					}
				} else {
					if(typeof(config.textExtraction) == "function") {
						t = config.textExtraction(node);
					} else { 
						t = $(node).text();
					}	
				}
				return t;
			}
			
			function appendToTable(table,cache) {
				
				if(table.config.debug) {var appendTime = new Date()}
				
				var c = cache, 
					r = c.row, 
					n= c.normalized, 
					totalRows = n.length, 
					checkCell = (n[0].length-1), 
					tableBody = $(table.tBodies[0]),
					rows = [];
				
				for (var i=0;i < totalRows; i++) {
					rows.push(r[n[i][checkCell]]);	
					if(!table.config.appender) {
						
						var o = r[n[i][checkCell]];
						var l = o.length;
						for(var j=0; j < l; j++) {
							
							tableBody[0].appendChild(o[j]);
						
						}
						
						//tableBody.append(r[n[i][checkCell]]);
					}
				}	
				
				if(table.config.appender) {
				
					table.config.appender(table,rows);	
				}
				
				rows = null;
				
				if(table.config.debug) { benchmark("Rebuilt table:", appendTime); }
								
				//apply table widgets
				applyWidget(table);
				
				// trigger sortend
				setTimeout(function() {
					$(table).trigger("sortEnd");	
				},0);
				
			};
			
			function buildHeaders(table) {
				
				if(table.config.debug) { var time = new Date(); }
				
				var meta = ($.metadata) ? true : false, tableHeadersRows = [];
			
				for(var i = 0; i < table.tHead.rows.length; i++) { tableHeadersRows[i]=0; };
				
				$tableHeaders = $("thead th",table);
		
				$tableHeaders.each(function(index) {
							
					this.count = 0;
					this.column = index;
					this.order = formatSortingOrder(table.config.sortInitialOrder);
					
					if(checkHeaderMetadata(this) || checkHeaderOptions(table,index)) this.sortDisabled = true;
					
					if(!this.sortDisabled) {
						$(this).addClass(table.config.cssHeader);
					}
					
					// add cell to headerList
					table.config.headerList[index]= this;
				});
				
				if(table.config.debug) { benchmark("Built headers:", time); log($tableHeaders); }
				
				return $tableHeaders;
				
			};
						
		   	function checkCellColSpan(table, rows, row) {
                var arr = [], r = table.tHead.rows, c = r[row].cells;
				
				for(var i=0; i < c.length; i++) {
					var cell = c[i];
					
					if ( cell.colSpan > 1) { 
						arr = arr.concat(checkCellColSpan(table, headerArr,row++));
					} else  {
						if(table.tHead.length == 1 || (cell.rowSpan > 1 || !r[row+1])) {
							arr.push(cell);
						}
						//headerArr[row] = (i+row);
					}
				}
				return arr;
			};
			
			function checkHeaderMetadata(cell) {
				if(($.metadata) && ($(cell).metadata().sorter === false)) { return true; };
				return false;
			}
			
			function checkHeaderOptions(table,i) {	
				if((table.config.headers[i]) && (table.config.headers[i].sorter === false)) { return true; };
				return false;
			}
			
			function applyWidget(table) {
				var c = table.config.widgets;
				var l = c.length;
				for(var i=0; i < l; i++) {
					
					getWidgetById(c[i]).format(table);
				}
				
			}
			
			function getWidgetById(name) {
				var l = widgets.length;
				for(var i=0; i < l; i++) {
					if(widgets[i].id.toLowerCase() == name.toLowerCase() ) {
						return widgets[i]; 
					}
				}
			};
			
			function formatSortingOrder(v) {
				
				if(typeof(v) != "Number") {
					i = (v.toLowerCase() == "desc") ? 1 : 0;
				} else {
					i = (v == (0 || 1)) ? v : 0;
				}
				return i;
			}
			
			function isValueInArray(v, a) {
				var l = a.length;
				for(var i=0; i < l; i++) {
					if(a[i][0] == v) {
						return true;	
					}
				}
				return false;
			}
				
			function setHeadersCss(table,$headers, list, css) {
				// remove all header information
				$headers.removeClass(css[0]).removeClass(css[1]);
				
				var h = [];
				$headers.each(function(offset) {
						if(!this.sortDisabled) {
							h[this.column] = $(this);					
						}
				});
				
				var l = list.length; 
				for(var i=0; i < l; i++) {
					h[list[i][0]].addClass(css[list[i][1]]);
				}
			}
			
			function fixColumnWidth(table,$headers) {
				var c = table.config;
				if(c.widthFixed) {
					var colgroup = $('<colgroup>');
					$("tr:first td",table.tBodies[0]).each(function() {
						colgroup.append($('<col>').css('width',$(this).width()));
					});
					$(table).prepend(colgroup);
				};
			}
			
			function updateHeaderSortCount(table,sortList) {
				var c = table.config, l = sortList.length;
				for(var i=0; i < l; i++) {
					var s = sortList[i], o = c.headerList[s[0]];
					o.count = s[1];
					o.count++;
				}
			}
			
			/* sorting methods */
			function multisort(table,sortList,cache) {
				
				if(table.config.debug) { var sortTime = new Date(); }
				
				var dynamicExp = "var sortWrapper = function(a,b) {", l = sortList.length;
					
				for(var i=0; i < l; i++) {
					
					var c = sortList[i][0];
					var order = sortList[i][1];
					var s = (getCachedSortType(table.config.parsers,c) == "text") ? ((order == 0) ? "sortText" : "sortTextDesc") : ((order == 0) ? "sortNumeric" : "sortNumericDesc");
					
					var e = "e" + i;
					
					dynamicExp += "var " + e + " = " + s + "(a[" + c + "],b[" + c + "]); ";
					dynamicExp += "if(" + e + ") { return " + e + "; } ";
					dynamicExp += "else { ";
				}
				
				// if value is the same keep orignal order	
				var orgOrderCol = cache.normalized[0].length - 1;
				dynamicExp += "return a[" + orgOrderCol + "]-b[" + orgOrderCol + "];";
						
				for(var i=0; i < l; i++) {
					dynamicExp += "}; ";
				}
				
				dynamicExp += "return 0; ";	
				dynamicExp += "}; ";	
				
				eval(dynamicExp);
				
				cache.normalized.sort(sortWrapper);
				
				if(table.config.debug) { benchmark("Sorting on " + sortList.toString() + " and dir " + order+ " time:", sortTime); }
				
				return cache;
			};
			
			function sortText(a,b) {
				return ((a < b) ? -1 : ((a > b) ? 1 : 0));
			};
			
			function sortTextDesc(a,b) {
				return ((b < a) ? -1 : ((b > a) ? 1 : 0));
			};	
			
	 		function sortNumeric(a,b) {
				return a-b;
			};
			
			function sortNumericDesc(a,b) {
				return b-a;
			};
			
			function getCachedSortType(parsers,i) {
				return parsers[i].type;
			};
			
			/* public methods */
			this.construct = function(settings) {

				return this.each(function() {
					
					if(!this.tHead || !this.tBodies) return;
					
					var $this, $document,$headers, cache, config, shiftDown = 0, sortOrder;
					
					this.config = {};
					
					config = $.extend(this.config, $.tablesorter.defaults, settings);
					
					// store common expression for speed					
					$this = $(this);
					
					// build headers
					$headers = buildHeaders(this);
					
					// try to auto detect column type, and store in tables config
					this.config.parsers = buildParserCache(this,$headers);
					
					
					// build the cache for the tbody cells
					cache = buildCache(this);
					
					// get the css class names, could be done else where.
					var sortCSS = [config.cssDesc,config.cssAsc];
					
					// fixate columns if the users supplies the fixedWidth option
					fixColumnWidth(this);
					
					// apply event handling to headers
					// this is to big, perhaps break it out?
					$headers.click(function(e) {
						
						$this.trigger("sortStart");
						
						var totalRows = ($this[0].tBodies[0] && $this[0].tBodies[0].rows.length) || 0;
						
						if(!this.sortDisabled && totalRows > 0) {
							
							
							// store exp, for speed
							var $cell = $(this);
	
							// get current column index
							var i = this.column;
							
							// get current column sort order
							this.order = this.count++ % 2;
							
							// user only whants to sort on one column
							if(!e[config.sortMultiSortKey]) {
								
								// flush the sort list
								config.sortList = [];
								
								if(config.sortForce != null) {
									var a = config.sortForce; 
									for(var j=0; j < a.length; j++) {
										if(a[j][0] != i) {
											config.sortList.push(a[j]);
										}
									}
								}
								
								// add column to sort list
								config.sortList.push([i,this.order]);
							
							// multi column sorting
							} else {
								// the user has clicked on an all ready sortet column.
								if(isValueInArray(i,config.sortList)) {	 
									
									// revers the sorting direction for all tables.
									for(var j=0; j < config.sortList.length; j++) {
										var s = config.sortList[j], o = config.headerList[s[0]];
										if(s[0] == i) {
											o.count = s[1];
											o.count++;
											s[1] = o.count % 2;
										}
									}	
								} else {
									// add column to sort list array
									config.sortList.push([i,this.order]);
								}
							};
							setTimeout(function() {
								//set css for headers
								setHeadersCss($this[0],$headers,config.sortList,sortCSS);
								appendToTable($this[0],multisort($this[0],config.sortList,cache));
							},1);
							// stop normal event by returning false
							return false;
						}
					// cancel selection	
					}).mousedown(function() {
						if(config.cancelSelection) {
							this.onselectstart = function() {return false};
							return false;
						}
					});
					
					// apply easy methods that trigger binded events
					$this.bind("update",function() {
						
						// rebuild parsers.
						this.config.parsers = buildParserCache(this,$headers);
						
						// rebuild the cache map
						cache = buildCache(this);
						
					}).bind("sorton",function(e,list) {
						
						$(this).trigger("sortStart");
						
						config.sortList = list;
						
						// update and store the sortlist
						var sortList = config.sortList;
						
						// update header count index
						updateHeaderSortCount(this,sortList);
						
						//set css for headers
						setHeadersCss(this,$headers,sortList,sortCSS);
						
						
						// sort the table and append it to the dom
						appendToTable(this,multisort(this,sortList,cache));

					}).bind("appendCache",function() {
						
						appendToTable(this,cache);
					
					}).bind("applyWidgetId",function(e,id) {
						
						getWidgetById(id).format(this);
						
					}).bind("applyWidgets",function() {
						// apply widgets
						applyWidget(this);
					});
					
					if($.metadata && ($(this).metadata() && $(this).metadata().sortlist)) {
						config.sortList = $(this).metadata().sortlist;
					}
					// if user has supplied a sort list to constructor.
					if(config.sortList.length > 0) {
						$this.trigger("sorton",[config.sortList]);	
					}
					
					// apply widgets
					applyWidget(this);
				});
			};
			
			this.addParser = function(parser) {
				var l = parsers.length, a = true;
				for(var i=0; i < l; i++) {
					if(parsers[i].id.toLowerCase() == parser.id.toLowerCase()) {
						a = false;
					}
				}
				if(a) { parsers.push(parser); };
			};
			
			this.addWidget = function(widget) {
				widgets.push(widget);
			};
			
			this.formatFloat = function(s) {
				var i = parseFloat(s);
				return (isNaN(i)) ? 0 : i;
			};
			this.formatInt = function(s) {
				var i = parseInt(s);
				return (isNaN(i)) ? 0 : i;
			};
			
			this.isDigit = function(s,config) {
				var DECIMAL = '\\' + config.decimal;
				var exp = '/(^[+]?0(' + DECIMAL +'0+)?$)|(^([-+]?[1-9][0-9]*)$)|(^([-+]?((0?|[1-9][0-9]*)' + DECIMAL +'(0*[1-9][0-9]*)))$)|(^[-+]?[1-9]+[0-9]*' + DECIMAL +'0+$)/';
				return RegExp(exp).test($.trim(s));
			};
			
			this.clearTableBody = function(table) {
				if($.browser.msie) {
					function empty() {
						while ( this.firstChild ) this.removeChild( this.firstChild );
					}
					empty.apply(table.tBodies[0]);
				} else {
					table.tBodies[0].innerHTML = "";
				}
			};
		}
	});
	
	// extend plugin scope
	$.fn.extend({
        tablesorter: $.tablesorter.construct
	});
	
	var ts = $.tablesorter;
	
	// add default parsers
	ts.addParser({
		id: "text",
		is: function(s) {
			return true;
		},
		format: function(s) {
			return $.trim(s.toLowerCase());
		},
		type: "text"
	});
	
	ts.addParser({
		id: "digit",
		is: function(s,table) {
			var c = table.config;
			return $.tablesorter.isDigit(s,c);
		},
		format: function(s) {
			return $.tablesorter.formatFloat(s);
		},
		type: "numeric"
	});
	
	ts.addParser({
		id: "currency",
		is: function(s) {
			return /^[£$€?.]/.test(s);
		},
		format: function(s) {
			return $.tablesorter.formatFloat(s.replace(new RegExp(/[^0-9.]/g),""));
		},
		type: "numeric"
	});
	
	ts.addParser({
		id: "ipAddress",
		is: function(s) {
			return /^\d{2,3}[\.]\d{2,3}[\.]\d{2,3}[\.]\d{2,3}$/.test(s);
		},
		format: function(s) {
			var a = s.split("."), r = "", l = a.length;
			for(var i = 0; i < l; i++) {
				var item = a[i];
			   	if(item.length == 2) {
					r += "0" + item;
			   	} else {
					r += item;
			   	}
			}
			return $.tablesorter.formatFloat(r);
		},
		type: "numeric"
	});
	
	ts.addParser({
		id: "url",
		is: function(s) {
			return /^(https?|ftp|file):\/\/$/.test(s);
		},
		format: function(s) {
			return jQuery.trim(s.replace(new RegExp(/(https?|ftp|file):\/\//),''));
		},
		type: "text"
	});
	
	ts.addParser({
		id: "isoDate",
		is: function(s) {
			return /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(s);
		},
		format: function(s) {
			return $.tablesorter.formatFloat((s != "") ? new Date(s.replace(new RegExp(/-/g),"/")).getTime() : "0");
		},
		type: "numeric"
	});
		
	ts.addParser({
		id: "percent",
		is: function(s) { 
			return /\%$/.test($.trim(s));
		},
		format: function(s) {
			return $.tablesorter.formatFloat(s.replace(new RegExp(/%/g),""));
		},
		type: "numeric"
	});

	ts.addParser({
		id: "usLongDate",
		is: function(s) {
			return s.match(new RegExp(/^[A-Za-z]{3,10}\.? [0-9]{1,2}, ([0-9]{4}|'?[0-9]{2}) (([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(AM|PM)))$/));
		},
		format: function(s) {
			return $.tablesorter.formatFloat(new Date(s).getTime());
		},
		type: "numeric"
	});

	ts.addParser({
		id: "shortDate",
		is: function(s) {
			return /\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/.test(s);
		},
		format: function(s,table) {
			var c = table.config;
			s = s.replace(/\-/g,"/");
			if(c.dateFormat == "us") {
				// reformat the string in ISO format
				s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$1/$2");
			} else if(c.dateFormat == "uk") {
				//reformat the string in ISO format
				s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
			} else if(c.dateFormat == "dd/mm/yy" || c.dateFormat == "dd-mm-yy") {
				s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/, "$1/$2/$3");	
			}
			return $.tablesorter.formatFloat(new Date(s).getTime());
		},
		type: "numeric"
	});

	ts.addParser({
	    id: "time",
	    is: function(s) {
	        return /^(([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(am|pm)))$/.test(s);
	    },
	    format: function(s) {
	        return $.tablesorter.formatFloat(new Date("2000/01/01 " + s).getTime());
	    },
	  type: "numeric"
	});
	
	
	ts.addParser({
	    id: "metadata",
	    is: function(s) {
	        return false;
	    },
	    format: function(s,table,cell) {
			var c = table.config, p = (!c.parserMetadataName) ? 'sortValue' : c.parserMetadataName;
	        return $(cell).metadata()[p];
	    },
	  type: "numeric"
	});
	
	// add default widgets
	ts.addWidget({
		id: "zebra",
		format: function(table) {
			if(table.config.debug) { var time = new Date(); }
			$("tr:visible",table.tBodies[0])
	        .filter(':even')
	        .removeClass(table.config.widgetZebra.css[1]).addClass(table.config.widgetZebra.css[0])
	        .end().filter(':odd')
	        .removeClass(table.config.widgetZebra.css[0]).addClass(table.config.widgetZebra.css[1]);
			if(table.config.debug) { $.tablesorter.benchmark("Applying Zebra widget", time); }
		}
	});	
})(jQuery);
//}}}
config.options.txtUserName="Mike P.";
config.options.txtBackupFolder="Backup";
config.options.chkAnimate=false;
config.options.chkSaveBackups=true;
config.options.chkAutoSave=true;
//config.options.txtTheme = "CustomTheme";
config.options.chkHttpReadOnly = false; // means web visitors can experiment with your site by clicking edit
config.options.chkInsertTabs = true;    // tab inserts a tab when editing a tiddler

config.views.wikified.defaultText = ""; // don't need message when a tiddler doesn't exist
config.views.editor.defaultText = "";   // don't need message when creating a new tiddler 

//config.options.chkSearchListTiddler=true; // SearchOptionsPlugin - results to tiddler
//config.options.chkShowQuickEdit=true; // QuickEditPlugin - show edit bar
//config.options.chkRandomTheme=true; // SwitchThemePlugin - random theme at start up