* Renamed the "Contents" box to "Index" because we already link to the "global"

contents.html on every page.
* Added an index box to Queries, Tracker, Email prefs, workshop and Deskbar. If
  anybody find another topic should get an index box, I'll add it.
* Little css tweak for the contents/index box.


git-svn-id: file:///srv/svn/repos/haiku/haiku/trunk@31426 a95241bf-73f2-0310-859d-f6bbb57e9c96

docs/Haiku-doc.css

@@ -113,7 +113,7 @@ div.bottomnav p {
 /* contents box */
 
 table.index {
-	margin-left: 30px;
+	margin: 0px 0px 30px 30px;
 	padding: 1px;
 	border-width: 1px;
 	border-style: dotted;

docs/userguide/en/applications/apps-icon-o-matic.html

@@ -63,7 +63,7 @@
 <p>Before we come to the actual creating of icons in Icon-O-Matic, a few words on Haiku's icons in general.</p>
 
 <h1>
-<a href="#contents"><img src="../../images/up.png" align="right" alt="contents" border="0" width="16" height="16" /></a>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
 <a id="bitmap-vector" name="bitmap-vector">BeOS bitmap vs. Haiku vector icons</a></h1>
 <p>Contrary to the BeOS, Haiku uses vector icons instead of bitmap icons. A special Haiku Vector Icon Format (HVIF) was developed that is highly optimized for small file sizes and fast rendering. That's why our icons are for the most part <i>much</i> smaller than either a bitmap or the widely used SVG format. Also, unlike BeOS' bitmap icons, Haiku isn't limited to an 8bit palette (256 colors).<br />
 Take this icon of the Terminal, for example:</p>
@@ -102,13 +102,13 @@ width="128" height="128" /></td>
 </table>
 
 <h1>
-<a href="#contents"><img src="../../images/up.png" align="right" alt="contents" border="0" width="16" height="16" /></a>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
 <a id="icons-attributes" name="icons-attributes">Icons are attributes</a></h1>
 <p>Icons are stored as an attribute with their file. However, that doesn't mean that every file has to have this attribute to appear with an icon in a Tracker window: data files inherit their icon from their filetype. To globally change the filetype's icon you use the <span class="app">FileTypes</span> preferences. If you only want to add a special icon to an individual file, you use the <span class="app">FileType Add-On</span> on it instead. See topic <a href="../filetypes.html">Filetypes</a> for more information.</p>
 <div class="box-info">Being an attribute, it follows that only filesystems supporting metadata can retain a file's individual icon. So, if you move files off your BFS volume, consider zipping them up so you don't lose icons or other attributes.</div>
 
 <h1>
-<a href="#contents"><img src="../../images/up.png" align="right" alt="contents" border="0" width="16" height="16" /></a>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
 <a id="i-o-m" name="i-o-m">Creating icons with Icon-O-Matic</a></h1>
 <p>Icon-O-Matic is Haiku's icon editor that can save your work as HVIF, SVG or PNG. The icon can also be directly attached as attribute to an existing file or exported as a resource or source file used by developers. Since the application was tailored to the optimized HVIF format, its usage reflects the inner workings of this format.</p>
 <p>Other than your normal vector graphics software, you don't deal with separate objects that each include all their specific properties like path, stroke width, stroke and fill color etc. Rather, you assemble your objects ("shapes") from shared paths and colors ("styles") and set certain properties. This re-using of elements is one secret of HVIF's efficiency. Although that imposes some constraints on the icon designer, there are a few advantages, too.<br />
@@ -121,7 +121,7 @@ For example, by re-using a path, several objects can be modified together by man
 
 
 <h2>
-<a href="#contents"><img src="../../images/up.png" align="right" alt="contents" border="0" width="16" height="16" /></a>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
 <a id="i-o-m-path" name="i-o-m-path">Path</a></h2>
 <p>A path consists of several points which are connected with lines or Bezier curves. To add or change points, make sure, the path is selected in the path list.</p>
 
@@ -184,7 +184,7 @@ width="16" height="16" /></td>
 
 
 <h2>
-<a href="#contents"><img src="../../images/up.png" align="right" alt="contents" border="0" width="16" height="16" /></a>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
 <a id="i-o-m-shape" name="i-o-m-shape">Shape</a></h2>
 <p>A shape groups together one or more paths with a style. Practically, it's the object that you'll actually see on the canvas. The grouping is done with the checkboxes in front of the paths and styles: Just select your shape and tick off the desired path(s) and a style.</p>
 <p>A shape defines how a path and style is applied, e.g. if the object is filled or only stroked (which is done by using Transformers on the shape, we'll get to that later). Also, a shape can be moved, rotated or resized without touching the used path. That way, you can re-use a single path and get different, but related, shapes.</p>
@@ -260,7 +260,7 @@ For example, if Shape 1 were to be shown below 48px and Shape 2 from 48px upward
 
 
 <h2>
-<a href="#contents"><img src="../../images/up.png" align="right" alt="contents" border="0" width="16" height="16" /></a>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
 <a id="i-o-m-style" name="i-o-m-style">Style</a></h2>
 <p>A style can either be a solid color or some type of gradient.<br />
 Besides the predefined colors under <span class="menu">Swatches</span>, you can mix your own by clicking on the current color. Also, note the slider under the color spectrum which sets the alpha-channel (transparency).</p>
@@ -279,7 +279,7 @@ Of course you can move these indicators to change the gradient to your liking. Y
 
 
 <h2>
-<a href="#contents"><img src="../../images/up.png" align="right" alt="contents" border="0" width="16" height="16" /></a>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
 <a id="i-o-m-transformer" name="i-o-m-transformer">Transformer</a></h2>
 <p>A shape can have Transformers which change its appearance. The effects, however, are more subtle than a truck turning into a battle robot...</p>
 
@@ -304,7 +304,7 @@ Of course you can move these indicators to change the gradient to your liking. Y
 
 
 <h2>
-<a href="#contents"><img src="../../images/up.png" align="right" alt="contents" border="0" width="16" height="16" /></a>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
 <a id="i-o-m-save" name="i-o-m-save">Saving an icon</a></h2>
 <p>There's your usual menu bar at the top, <span class="menu">File</span>, <span class="menu">Edit</span>, <span class="menu">Options</span>. The usage is pretty much self-explaining, so we'll only look at how to save your work.</p>
 <p><span class="menu">File | Save As...</span> will save in a special Icon-O-Matic format that retains additional information like the names of paths, shapes and styles. These will be stripped from the actual icon once you export it to save space. It's a good idea to back-up your work like this, because without named objects everything's named "&lt;path&gt;/&lt;shape&gt;/&lt;style&gt;" which makes specific changes tedious.</p>
@@ -323,7 +323,7 @@ Of course you can move these indicators to change the gradient to your liking. Y
 
 
 <h2>
-<a href="#contents"><img src="../../images/up.png" align="right" alt="contents" border="0" width="16" height="16" /></a>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
 <a id="i-o-m-tips" name="i-o-m-tips">Tips & Tricks</a></h2>
 <p>A few things you should keep in mind when working with Icon-O-Matic and some general tips for its usage:</p>
 <ul>
@@ -339,7 +339,7 @@ Of course you can move these indicators to change the gradient to your liking. Y
 
 <!--
 <h2>
-<a href="#contents"><img src="../../images/up.png" align="right" alt="contents" border="0" width="16" height="16" /></a>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
 <a id="i-o-m-workshops" name="i-o-m-workshops">Workshops</a></h2>
 <p>The above is of course quite theoretical. The best way to learn using Icon-O-Matic is by experimenting. To get you started and once more show the basics, have a look at these short clips:</p>
 <ul>

docs/userguide/en/deskbar.html

@@ -37,11 +37,22 @@
 <div class="content">
 
 
+<table class="index" id="index" name="index" summary="index" align="right">
+<tr class="heading"><td>Index</td></tr>
+<tr class="index"><td>
+	<a href="#deskbar-menu">The Deskbar Menu</a><br />
+	<a href="#tray">The Tray</a><br />
+	<a href="#list-of-apps">The list of running programs</a>
+</td></tr>
+</table>
+
 <p>The Deskbar is the little panel that by default is located in the upper right corner of the screen. It's Haiku's version of Windows' taskbar with its Start button. It contains the Deskbar menu from where you can start applications and preferences, a tray with a clock and other tools below that and a list of currently running programs at the bottom.</p>
 <img src="../images/deskbar-images/positions.png" alt="positions" width="640" height="480" />
 <p>You can move the Deskbar to any corner or as a bar along the upper or lower border of the screen by gripping the knobbly area on the left side of the tray and drag&amp;drop it into the new position. You can also fold it into a more compact layout by drag&amp;dropping the knobbly area onto the Deskbar menu.</p>
 
-<h1><a id="deskbar-menu" name="deskbar-menu">The Deskbar Menu</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="deskbar-menu" name="deskbar-menu">The Deskbar Menu</a></h1>
 <p>A menu opens when you click on the Deskbar's top:</p>
 <img src="../images/deskbar-images/settings.png" alt="settings.png" width="521" height="284" />
 <ul>
@@ -76,13 +87,17 @@
 This part of the panel is just a representation of the folder <span class="path">/boot/home/config/be/</span>. You can just as well link or copy files and folders directly in Tracker to configure your Deskbar.</p>
 <p>Even easier is it to simply drag a file or folder and drop it where you want it into the Deskbar.</p>
 
-<h1><a id="tray" name="tray">The Tray</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="tray" name="tray">The Tray</a></h1>
 <img src="../images/deskbar-images/calendar.png" alt="calendar.png" width="229" height="210" />
 <p>Among other things, the tray is housing the clock. Left-click it to toggle between date and time. Right-click it to hide/show it or launch the <a href="prefs-time.html">Time</a> preferences to set it.<br />
 Here you can also launch a calendar that also appears, when you hold down the left mouse button on the clock for a little time.</p>
 <p>Any program can install an icon in the tray to provide an interface to the user. The email system, for instance, shows a different symbol when there's unread mail and offers a context menu to e.g. create or check for new mail. <span class="app">ProcessController</span> is another example that uses its icon in the tray to provide information (CPU/memory usage) and to offer a context menu.</p>
 
-<h1><a id="list-of-apps" name="list-of-apps">The list of running programs</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="list-of-apps" name="list-of-apps">The list of running programs</a></h1>
 <img src="../images/deskbar-images/list-of-apps.png" alt="list-of-apps.png" width="229" height="306" />
 <p>You can change to a specific running application by clicking on its entry in the Deskbar and choosing (one of) its windows, from the submenu. By right-clicking you can minimize or close a window or the entire application.</p>
 <p>If you activated Expanders in the Deskbar settings, you can expand/collapse the list of windows directly under an application's entry.</p>

docs/userguide/en/preferences/prefs-e-mail.html

@@ -36,6 +36,18 @@
 
 <div class="content">
 
+
+<table class="index" id="index" name="index" summary="index" align="right">
+<tr class="heading"><td>Index</td></tr>
+<tr class="index"><td>
+	<a href="#creating">Creating a new e-mail account</a><br />
+	<a href="#incoming">Setting up incoming e-mail</a><br />
+	<a href="#outgoing">Setting up outgoing e-mail</a><br />
+	<a href="#filters">Setting up e-mail filters</a><br />
+	<a href="#settings">Setting up the mail_daemon</a>
+</td></tr>
+</table>
+
 <h1><img src="../../images/prefs-images/e-mail-icon_64.png" alt="e-mail-icon_64.png"
 width="64" height="64" />E-mail</h1>
 <table summary="quickinfo" border="0" cellspacing="0" cellpadding="2">
@@ -46,12 +58,16 @@ width="64" height="64" />E-mail</h1>
 <p>Haiku provides a system that retrieves e-mail regularly via a mail_daemon and saves each mail as a single text file. It parses the mail and fills its attributes with all necessary header information, like from, to, subject and its unread status. Now it can be queried by you or any application. This system also makes switching e-mail clients easy as all the data and your configuration stays the same.<br />
 The configuration is done in the E-Mail preference panel.</p>
 
-<h1><a id="creating" name="creating">Creating a new e-mail account</a></h1>
+<h1>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="creating" name="creating">Creating a new e-mail account</a></h1>
 <p>Let's go through the process of setting up an e-mail account.<br />
 You start by clicking the <span class="button">Add</span> button to create a new, unnamed account. Then you declare the <i>Account Type</i> which is either <span class="menu">Receive Mail Only</span>, <span class="menu">Send Mail Only</span>, or the most usual type, <span class="menu">Send and Receive Mail</span>.</p>
 <p>Now you enter an <i>Account Name</i>, your <i>Real Name</i> and the <i>Return Address</i> where replies will be sent to.</p>
 
-<h1><a id="incoming" name="incoming">Setting up incoming e-mail</a></h1>
+<h1>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="incoming" name="incoming">Setting up incoming e-mail</a></h1>
 <p>Click on <span class="menu">Incoming</span> under your account's name to set up how e-mails are received.</p>
 <img src="../../images/prefs-images/e-mail-in.png" alt="e-mail-in.png" width="491" height="472" />
 <p>From the drop-down menu you choose the protocol used by your provider. <span class="menu">IMAP</span> and <span class="menu">POP3</span> are supported.</p>
@@ -62,14 +78,18 @@ You start by clicking the <span class="button">Add</span> button to create a new
 <p>You can change the <i>Location</i> of your inbox (default: <span class="path">/boot/home/mail/in/</span>), which is useful if you'd like to separate the mails from different accounts into their own folders. However, queries let you sort things out just as well.</p>
 <p>Last on this page, you can opt to only <span class="menu">Partially download messages</span> that are larger than a certain size. This will only get the header and you can decide if you want to download the rest of the message plus possible attachments after seeing the subject and who sent it. Useful if you have a slow connection.</p>
 
-<h1><a id="outgoing" name="outgoing">Setting up outgoing e-mail</a></h1>
+<h1>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="outgoing" name="outgoing">Setting up outgoing e-mail</a></h1>
 <p>Click on <span class="menu">Outgoing</span> under your account's name to set up how e-mails are sent.</p>
 <img src="../../images/prefs-images/e-mail-out.png" alt="e-mail-out.png" width="491" height="472" />
 <p>As with incoming mail, you can also change the <i>Location</i> of your outbox (default: <span class="path">/boot/home/mail/out/</span>).</p>
 <p>Next is the <i>SMTP Server</i> address for outgoing mails. As with the incoming server before, you can use a specific port if needed, e.g. <tt>mail.your-provider.org:1200</tt>.</p>
 <p>If you need to login, you change the <i>Login Type</i> to <span class="menu">ESMTP</span> and enter username and password above. The other type is used for providers that need you to check for mail with <span class="menu">POP3 before SMTP</span> for identification.</p>
 
-<h1><a id="filters" name="filters">Setting up e-mail filters</a></h1>
+<h1>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="filters" name="filters">Setting up e-mail filters</a></h1>
 <p>If you want to filter your incoming email, you click on <span class="menu">E-Mail Filters</span> under your account's name to set up automatic sorting. You can add any number of filters that are applied one after the other. You can rearrange them by drag&amp;dropping them to their new position.<br />
 Besides the <span class="menu">R5 Daemon Filter</span> that's used for backward compatibility, there are two other <span class="menu">Incoming Mail Filters</span> you can add.</p>
 
@@ -119,7 +139,9 @@ With the first text field you specify which header to check against. These are a
 <p>At this moment, there's only one filter that deals with outgoing mail: <span class="cli">fortune</span>.
 <br />It will attach a randomly chosen funny or wise "fortune cookie" to the end of every mail before it's sent out. You can do a dry run by issuing the command <span class="cli">fortune</span> in a Terminal.</p>
 
-<h1><a id="settings" name="settings">Setting up the mail_daemon</a></h1>
+<h1>
+<a href="#index"><img src="../../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="settings" name="settings">Setting up the mail_daemon</a></h1>
 <p>Now that your incoming and outgoing mail servers (and maybe some filters, too), are configured, you have to tell the mail_server that does all the actual mail checking and fetching how to do its job.</p>
 <img src="../../images/prefs-images/e-mail-settings.png" alt="e-mail-settings.png" width="491" height="472" />
 <p>Under <i>Mail Checking</i> you configure the interval at which the account's mail server is probed for new mail.<br />

docs/userguide/en/queries.html

@@ -36,9 +36,23 @@
 
 <div class="content">
 
+
+<table class="index" id="index" name="index" summary="index" align="right">
+<tr class="heading"><td>Index</td></tr>
+<tr class="index"><td>
+	<a href="#find-window">The Find window</a><br />
+	<a href="#basic-query">Basic queries - "by Name"</a><br />
+	<a href="#adv-query">Advanced queries - "by Attribute"</a><br />
+	<a href="#more-adv-query">Even more advanced queries - "by Formula"</a><br />
+	<a href="#result-window">The result window</a>
+</td></tr>
+</table>
+
 <p>A query is a file search based on file attributes and can be performed within Tracker or in Terminal. Queries are saved in <span class="path">/boot/home/queries/</span> and by default last seven days before being purged. Note, that these aren't static result lists of your search, but are the query formulas which trigger a new search whenever you open them.</p>
 
-<h1><a id="find-window" name="find-window">The Find window</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="find-window" name="find-window">The Find window</a></h1>
 <p>You start a query by invoking the <span class="menu">Find...</span> menu either from the Deskbar menu or any Tracker window or the Desktop (which is actually a fullscreen Tracker window). The shortcut is <span class="key">ALT</span>&#160;<span class="key">F</span>. You're presented with the Find window:</p>
 <img src="../images/queries-images/basic-query.png" alt="basic-query.png" width="460" height="206" />
 <ol>
@@ -58,10 +72,14 @@ types.</p></li>
 <li><p>You can drag&amp;drop the icon to save the query.</p></li>
 </ol>
 
-<h1><a id="basic-query" name="basic-query">Basic queries - "by Name"</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="basic-query" name="basic-query">Basic queries - "by Name"</a></h1>
 <p>If you simply want to find all files on your mounted disks that match a certain pattern, simply leave the search method at "<span class="menu">by Name</span>", enter the search term into the text box and press <span class="key">ENTER</span>.</p>
 
-<h1><a id="adv-query" name="adv-query">Advanced queries - "by Attribute"</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="adv-query" name="adv-query">Advanced queries - "by Attribute"</a></h1>
 <p>You can create more advanced queries by searching within the attributes of specific file types. For that to work, these attributes have to be <a href="index.html">indexed</a>.</p>
 <img src="../images/queries-images/query-window.png" alt="query-window.png" width="441" height="172" />
 <p>You start by setting the filetype from "<span class="menu">All files and folders</span>" to "<span class="menu">text | E-mail</span>" and change the search method to "<span class="menu">by Attribute</span>".</p>
@@ -70,7 +88,9 @@ types.</p></li>
 <img src="../images/queries-images/query-window-filled.png" alt="query-window-filled.png" width="441" height="262" />
 <p>This is your Find window when you're looking for all emails Clara Botters has sent to you in the last two months that had in the subject "vibraphone" or "skepticality".</p>
 
-<h1><a id="more-adv-query" name="more-adv-query">Even more advanced queries - "by Formula"</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="more-adv-query" name="more-adv-query">Even more advanced queries - "by Formula"</a></h1>
 <p>Typing in a formula query by hand is daunting and really quite unpractical. It still has its uses.</p>
 <p>Take the above query by attribute of Clara's mails concerning vibraphones etc. If you have all the attributes and their search terms set, try switching to "<span class="menu">by Formula</span>" mode and be overwhelmed by this one line query string:</p>
 <img src="../images/queries-images/formula-query.png" alt="formula-query.png" width="441" height="173" />
@@ -87,7 +107,9 @@ types.</p></li>
 <li><p>You can fine tune your query by inserting parenthesis where needed, make parts case-sensitive or negate logical combinations by changing. e.g. "<tt>==</tt>" to "<tt>!=</tt>" for a NOT AND. All you need is a basic understanding of <a href="http://en.wikipedia.org/wiki/Regular_expression" class='external free' title="http://en.wikipedia.org/wiki/Regular expression">regular expressions</a> and maybe some scripting basics.</p></li>
 </ul>
 
-<h1><a id="result-window" name="result-window">The result window</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="result-window" name="result-window">The result window</a></h1>
 <p>After you start a search, the Find window will be replaced by a result window. Here is an example that queried for "server":</p>
 <img src="../images/queries-images/result-window.png" alt="result-window.png" width="704" height="359" />
 <p>Besides the gray background, result windows work exactly like any other Tracker window. Some things are worth noting:</p>

docs/userguide/en/tracker.html

@@ -36,17 +36,34 @@
 
 <div class="content">
 
+
+<table class="index" id="index" name="index" summary="index" align="right">
+<tr class="heading"><td>Index</td></tr>
+<tr class="index"><td>
+	<a href="#mounting-volumes">Mounting volumes</a><br />
+	<a href="#navigating">Navigating</a><br />
+	<a href="#appearance">Appearance</a><br />
+	<a href="#tracker-preferences">Tracker preferences</a><br />
+	<a href="#working-with-files">Working with files</a><br />
+	<a href="#transaction-status">Transaction status</a>
+</td></tr>
+</table>
+
 <p>The Tracker is the graphical interface to all your files. It let's you create new files and folders or find, launch or rename as well as copy or delete existing ones.</p>
 <p>Being an application like any other (the Desktop with its icons is really just a fullscreen window in the background), Tracker appears with its windows in the Deskbar and can be quit and restarted. The easiest way to quit and restart a crashed or frozen Tracker (or a wayward Deskbar) is to call the <a href="teammonitor.html">Team Monitor</a>.</p>
 
-<h1><a id="mounting-volumes" name="mounting-volumes">Mounting Volumes</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="mounting-volumes" name="mounting-volumes">Mounting Volumes</a></h1>
 <p>In order to access a harddisk, CD, USB stick etc., you first have to mount the volume, that is, let the system know it's there. This is done with a right-click on the Desktop or an already mounted volume (like the boot disk) and choosing the volume from the <span class="menu">Mount</span> submenu. You find the same <span class="menu">Mount</span> menu in the Deskbar.</p>
 <img src="../images/tracker-images/mount-settings.png" alt="drill-down.png" width="581" height="290" />
 <p>There are also <span class="menu">Mount Settings</span> so you don't have to mount everything manually after every bootup.<br />
 The above settings will automatically mount any storage device you connect/insert and also mount all disks on bootup that were mounted previously.</p>
 <div class="box-warning">Before you disconnect e.g. a harddrive or USB stick, make sure you have successfully unmounted the volume. This guarantees that all data transfer has finished. Otherwise you may lose data or corrupt the disk!</div>
 
-<h1><a id="navigating" name="navigating">Navigating</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="navigating" name="navigating">Navigating</a></h1>
 <p>By default, when you double-click a folder, Tracker opens a new window while leaving the parent window open. This can quickly lead to an overcrowded desktop.<br />
 You can prevent that by holding down the left <span class="key">WIN</span> key, which automatically closes the parent window.<br />
 This is also true for keyboard navigation. For more on that, see topic <a href="keyboard-shortcuts">Shortcuts and key combinations</a>.</p>
@@ -68,7 +85,9 @@ This is also true for keyboard navigation. For more on that, see topic <a href="
 <img src="../images/tracker-images/window-type-ahead.png" alt="window-type-ahead.png" width="652" height="317" />
 <p>In the above example, there are many files starting with "Haiku logo", rendering simpler approaches to typing ahead quite useless. In Haiku however, typing "web" jumps right to its first occurence in "Haiku logo - website". The characters you enter appear in the bottom left corner where you normally find the item count of all files in the folder. A second after entering a character, the display jumps back to normal and you're ready for a new type ahead search.</p>
 
-<h1><a id="appearance" name="appearance">Appearance</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="appearance" name="appearance">Appearance</a></h1>
 <img src="../images/tracker-images/window-menu.png" alt="window-menu.png" width="382" height="259" />
 <p>Tracker windows offer three different viewing modes from the <span class="menu">Window</span> menu:</p>
 <ul>
@@ -103,7 +122,9 @@ This is also true for keyboard navigation. For more on that, see topic <a href="
 </ul>
 <p>This panel, by the way, is also available as <span class="app">Tracker</span> from Deskbar's <span class="menu">Preferences</span>.</p>
 
-<h1><a id="working-with-files" name="working-with-files">Working with files</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="working-with-files" name="working-with-files">Working with files</a></h1>
 <p>When invoked on a selected file, most of the <span class="menu">File</span> menu commands are also offered in the context menu by right-clicking that file.</p>
 <p>As usual the commands are pretty clear.</p>
 <ul>
@@ -132,7 +153,9 @@ This is also true for keyboard navigation. For more on that, see topic <a href="
 <li><p><b>Add-Ons</b> - offers you every generic Tracker add-on and those that can handle the selected file(s). See topic <a href="tracker-add-ons.html">Tracker Add-ons</a> for more information.</p></li>
 </ul>
 
-<h1><a id="transaction-status" name="transaction-status">Transaction status</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="transaction-status" name="transaction-status">Transaction status</a></h1>
 <p>When you copy, move or delete files, Tracker shows its progress with a status window. If you initiate more than one transaction, each job gets its own status display.</p>
 <img src="../images/tracker-images/transaction-status.png" alt="transaction-status.png" width="361" height="149" />
 <p>To the right are two buttons to pause or stop a transaction entirely. Sometimes it can be useful to temporarily pause a large transaction. For example, you may need to quickly launch a large application. Copying large amounts of data chokes your harddisk's IO bandwidth and thus delays your workflow.</p>

docs/userguide/en/workshop-filetypes+attributes.html

@@ -36,9 +36,29 @@
 
 <div class="content">
 
+
+<table class="index" id="index" name="index" summary="index" align="right">
+<tr class="heading"><td>Index</td></tr>
+<tr class="index"><td>
+	<a href="#preparations">Preparations</a><br />
+	<a href="#custom-filetype">Creating a custom filetype</a><br />
+	&#160;&#160;<a href="#icon">Icon</a><br />
+	&#160;&#160;<a href="#file-recognition">File Recognition</a><br />
+	&#160;&#160;<a href="#indexing">Indexing</a><br />
+	&#160;&#160;<a href="#decription">Description</a><br />
+	&#160;&#160;<a href="#pref_app">Preferred Application</a><br />
+	&#160;&#160;<a href="#extra_attribute">Extra Attributes</a><br />
+	<a href="#indexing">Indexing</a><br />
+	<a href="#filling-data">Filling in the data</a><br />
+	<a href="#query-db">Querying the database</a>
+</td></tr>
+</table>
+
 <p>This is a workshop to show the use of <a href="attributes.html">Attributes</a>, <a href="queries.html">Queries</a>, the <a href="index.html">Index</a> and custom <a href="filetypes.html">Filetypes</a>. As an example, we build a database to keep track of our DVD library.</p>
 
-<h1><a id="preparations" name="preparations">Preparations</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="preparations" name="preparations">Preparations</a></h1>
 <p>Let's first decide what filetype and attributes would serve our needs. Originally, I wanted to use a Bookmark file with a link to the movie's IMdB page, but Haiku doesn't have a "bookmarkable" browser like BeOS' <span class="app">NetPositive</span> at the moment, so I came up with this: The file itself will be a JPEG image for the movie cover.<br />
 To that we add a couple of attributes. Here we have to decide if we want to query it later (then we have to add it to the index) and if so, what type of attribute it should be. Numbers (int, float) can be evaluated differently than text (&lt;/=/&gt; vs. is/contains/starts with).</p>
 <p>Here are the attributes I'd like to see for my DVDs:</p>
@@ -53,32 +73,44 @@ To that we add a couple of attributes. Here we have to decide if we want to quer
 <li>If so, who's borrowed the disk...</li>
 </ul>
 
-<h1><a id="custom-filetype" name="custom-filetype">Creating a custom filetype</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="custom-filetype" name="custom-filetype">Creating a custom filetype</a></h1>
 <p>Start the <span class="app">Filetypes</span> preferences, and click on the <span class="button">Add...</span> button below the hierarchical list on the left. A small dialog opens and you specify in which MIME Group your new filetype will reside. You can also create a completely new group. Let's put it into "<i>applications</i>" and set the "Internal Name" to <i>DVDdb</i>.</p>
 <img src="../images/workshop-filetypes+attributes-images/filetypes-new-file-type.png" alt="filetypes-new-file-type.png" width="559" height="432" />
 <p>Now, a panel for your new DVDdb filetype opens:</p>
 <img src="../images/workshop-filetypes+attributes-images/filetypes-dvddb.png" alt="filetypes-dvddb.png" width="559" height="432" />
 
-<h2><a id="icon" name="icon">Icon</a></h2>
+<h2>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="icon" name="icon">Icon</a></h2>
 <p>Double-click the icon well to open  <a href="applications/apps-icon-o-matic.html">Icon-O-Matic</a> to design an icon for your filetype. You can also drag&amp;drop an icon from the icon well of another type, maybe as starting point for a modified version.</p>
 
-<h2><a id="file-recognition" name="file-recognition">File Recognition</a></h2>
+<h2>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="file-recognition" name="file-recognition">File Recognition</a></h2>
 <p>You can add suffixes like .txt, .jpg, .mp3 to recognize files by their extention. Useful when working with files from systems without MIME typing. We don't need that for our example.</p>
 
-<h2><a id="decription" name="decription">Description</a></h2>
+<h2>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="decription" name="decription">Description</a></h2>
 <ul>
 <li><i>Type Name</i> - Appears e.g. in the Attribute menu of Tracker windows and the "Kind" attribute of a file.</li>
 <li><i>Description</i> - A bit more detailed description.</li>
 </ul>
 
-<h2><a id="pref_app" name="pref_app">Preferred Application</a></h2>
+<h2>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="pref_app" name="pref_app">Preferred Application</a></h2>
 <p>This drop-down menu shows a list of all applications that can handle this particular filetype. From here you can choose which program should open this specific file when it's double-clicked.</p>
 <table summary="layout" border="0" cellspacing="0" cellpadding="2">
 <tr><td><span class="button">Select...</span></td><td>&#160;</td><td>opens a file dialog where you choose the application to open with this filetype. Here, we set <span class="app">ShowImage</span> to display the DVD's cover.</td></tr>
 <tr><td class="onelinetop"><span class="button">Same as...</span></td><td>&#160;</td><td>opens a file dialog where you choose any file that already has the preferred application set that you're looking for.</td></tr>
 </table>
 
-<h2><a id="extra_attribute" name="extra_attribute">Extra Attributes</a></h2>
+<h2>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="extra_attribute" name="extra_attribute">Extra Attributes</a></h2>
 <p>Here we enter all the custom attributes we decided on in our preparations. Clicking the <span class="button">Add...</span> button opens a panel:</p>
 <img src="../images/workshop-filetypes+attributes-images/filetype-extra-attribute.png" alt="filetype-extra-attribute.png" width="614" height="447" />
 <ul>
@@ -117,7 +149,9 @@ To that we add a couple of attributes. Here we have to decide if we want to quer
 <tr><td>DVDdb:lent</td>		<td>text</td>		<td>yes</td>	<td>Lent to</td></tr>
 </table>
 
-<h1><a id="indexing" name="indexing">Indexing</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="indexing" name="indexing">Indexing</a></h1>
 <p>Before we start entering data in our little DVD database, we should add certain attributes to the <a href="index.html">Index</a>. Only indexed attributes can use Haiku's fast <a href="queries.html">Queries</a>.<br />
 So, what will we be searching in the future? We probably won't ask "What's in the B4 coordinate in my shelf?" or "Does the IMdB URL or the plot of the movie contain the word 'pope-shenooda'?".</p>
 <p>This leaves these attributes:</p>
@@ -136,7 +170,9 @@ mkindex -t string DVDdb:cast
 mkindex -t int DVDdb:rating</pre>
 <p>The <span class="cli">-t</span> option defines the type of attribute, which is "string" for all but the rating, which is an integer number.</p>
 
-<h1><a id="filling-data" name="filling-data">Filling in the data</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="filling-data" name="filling-data">Filling in the data</a></h1>
 <p>Now, everything's set and we can begin putting some data into our base.<br />
 Since our basic file is a cover image, we go to some online resource like IMdB, look for our first movie and save the cover or movie poster in a new folder where we want to keep our DVDdb files.</p>
 <p>Opening that folder we see a typical Tracker window with one JPEG in it. Right-clicking it, we change its filetype to <tt>application/DVDdb</tt> with the <span class="app">Filetype Addon</span>. There's more info on this in the <a href="filetypes.html">Filetypes</a> document.</p>
@@ -146,7 +182,9 @@ Since our basic file is a cover image, we go to some online resource like IMdB,
 <p>In our example, we usually start with a downloaded JPG cover and change its type to applications/DVDdb. There's another elegant way to produce a file to work with. Just copy an empty file of our filetype to <span class="path">/boot/home/config/settings/Tracker/Tracker New Templates</span> and rename it to DVDdb.</p>
 <p>Right-clicking into a Tracker window, you'll find a new entry under <span class="menu">New...</span> besides the default "New folder".</p>
 
-<h1><a id="query-db" name="query-db">Querying the database</a></h1>
+<h1>
+<a href="#index"><img src="../images/up.png" align="right" alt="index" border="0" width="16" height="16" /></a>
+<a id="query-db" name="query-db">Querying the database</a></h1>
 <p>Several hours of grunt work later, we have a nice little database that you can query to find all your Christina Ricci movies that have a 7+ rating...  :)</p>
 <p>You can assign a sensible attribute layout for query results of a specific filetype.<br />
 Open the folder containing your DVDdb files and arrange the attributes how you'd like to have query results presented. Copy this layout with <span class="menu">Attributes | Copy Attributes</span>.</p>