]> git.sur5r.net Git - i3/i3.github.io/commitdiff
Initial commit
authorMichael Stapelberg <michael@stapelberg.de>
Thu, 21 Jul 2011 18:58:50 +0000 (20:58 +0200)
committerMichael Stapelberg <michael@stapelberg.de>
Thu, 21 Jul 2011 18:58:50 +0000 (20:58 +0200)
36 files changed:
_config.py [new file with mode: 0644]
contact/index.html.mako [new file with mode: 0644]
css/style.css [new file with mode: 0644]
docs/index.html.mako [new file with mode: 0644]
downloads/index.html.mako [new file with mode: 0644]
fonts/DroidSans.ttf [new file with mode: 0644]
fonts/DroidSans.woff [new file with mode: 0644]
fonts/Ovo.ttf [new file with mode: 0644]
img/Openbsd2.png [new file with mode: 0644]
img/archlinux.png [new file with mode: 0644]
img/debian.png [new file with mode: 0644]
img/freebsd.png [new file with mode: 0644]
img/gentoo-logo.png [new file with mode: 0644]
img/logo.png [new file with mode: 0644]
img/netbsd_logo.png [new file with mode: 0644]
img/ubuntu.png [new file with mode: 0644]
index.html.mako [new file with mode: 0644]
js/jquery.ba-hashchange.js [new file with mode: 0644]
js/jquery.mousewheel.js [new file with mode: 0755]
screenshots/i3-1.png [new file with mode: 0644]
screenshots/i3-1.thumb.png [new file with mode: 0644]
screenshots/i3-2.png [new file with mode: 0644]
screenshots/i3-2.thumb.png [new file with mode: 0644]
screenshots/i3-3.png [new file with mode: 0644]
screenshots/i3-3.thumb.png [new file with mode: 0644]
screenshots/i3-4.png [new file with mode: 0644]
screenshots/i3-4.thumb.png [new file with mode: 0644]
screenshots/i3-5.png [new file with mode: 0644]
screenshots/i3-5.thumb.png [new file with mode: 0644]
screenshots/i3-6.png [new file with mode: 0644]
screenshots/i3-6.thumb.png [new file with mode: 0644]
screenshots/i3-7.png [new file with mode: 0644]
screenshots/i3-7.thumb.png [new file with mode: 0644]
screenshots/i3-8.jpg [new file with mode: 0644]
screenshots/i3-8.thumb.jpg [new file with mode: 0644]
screenshots/index.html.mako [new file with mode: 0644]

diff --git a/_config.py b/_config.py
new file mode 100644 (file)
index 0000000..e69de29
diff --git a/contact/index.html.mako b/contact/index.html.mako
new file mode 100644 (file)
index 0000000..1f4230c
--- /dev/null
@@ -0,0 +1,38 @@
+<%!
+       section = "contact"
+%>
+<%inherit file="_templates/i3.mako" />
+<div id="content">
+<h2>Contact</h2>
+
+<p>
+If you have any questions which are not answered by the <a
+href="/docs/">Documentation</a>, please do not hesitate to contact us. The best
+way to reach us is via IRC:
+</p>
+
+<p>
+i3’s IRC channel is <a href="irc://irc.twice-irc.de/i3" title="#i3 on irc.twice-irc.de">
+irc://irc.twice-irc.de/i3</a> (or, #i3 on irc.twice-irc.de, for those without proper URL
+handling setup). Feel free to ask questions, please don’t ask to ask and please
+think before you ask :-).
+</p>
+
+<h3 style="margin-top: 2em">Mailing lists</h3>
+
+<p>
+If you dislike IRC, you can also post questions etc. to our mailing list.
+</p>
+
+<h3 style="margin-top: 2em">Package maintainers</h3>
+
+<p>
+<strong>If you are a package maintainer</strong> and have any questions,
+ideas, hints, problems or whatever, please do not hesitate to contact me. I
+will help you out. Just drop me an <a
+href="http://michael.stapelberg.de/Kontakt">E-Mail (scroll down to
+bottom)</a>, contact me using the same address in jabber or ask on our IRC
+channel (see above).
+</p>
+
+</div>
diff --git a/css/style.css b/css/style.css
new file mode 100644 (file)
index 0000000..9ad8474
--- /dev/null
@@ -0,0 +1,318 @@
+body {
+    background-color: #2e2e2e;
+    color: #CCC;
+    font-family: 'Droid Sans', "Lucida Grande", "Lucida Sans", "Liberation Sans", sans-serif;
+    font-size: 0.8em;
+}
+
+h2, h3 {
+    font-family: "Helvetica Neue", Helvetica, 'Ovo', Arial, sans-serif;
+    font-weight: bold;
+    letter-spacing: -1px;
+    color: #FFF;
+    line-height: 1.2em;
+    border-bottom: 2px solid #333;
+}
+
+h2 {
+    font-size: 1.8em;
+}
+
+a {
+    color: #2b7dbc;
+    text-decoration: underline;
+}
+
+
+a:hover {
+    text-decoration: none;
+}
+
+#main {
+    width: 912px;
+    margin: 0 auto;
+    padding: 0;
+}
+
+#nav {
+    float: right;
+    color: #FFF;
+    margin: 10px 18px 0 0;
+    padding: 0;
+}
+
+#nav li {
+    font-size: 1.3em;
+    list-style: none;
+    float: left;
+    margin-top: 1.8em;
+    margin-left: 5px;
+    border-right: 2px solid #3A8ECD;
+}
+
+#nav li:last-child {
+    border-right: 0;
+}
+
+#nav li a {
+    font-size: 1.2em;
+    margin: 0.4em 0.8em;
+    display: block;
+    color: #FFF;
+    text-decoration: none;
+}
+
+#nav li a:hover {
+    border-bottom: 2px solid #fff;
+}
+
+h1#title {
+    height: 146px;
+    width: 458px;
+    float: left;
+    margin: 0;
+    background-image: url(../img/logo.png);
+    background-repeat: no-repeat;
+    text-indent: -9999px;
+}
+
+#screens {
+    padding-top: 1em;
+    float: right;
+}
+
+#info img, .screenshots img, .video img {
+    -webkit-box-shadow: 0px 0px 0.20em #000;
+    -moz-box-shadow: 0px 0px 0.20em #000;
+    -o-box-shadow: 0px 0px 0.20em #000;
+}
+
+#info {
+    clear: both;
+    padding: 5px 30px 15px 18px;
+    border-radius: 4px;
+    margin-right: 0.9em;
+    margin-top: 1em;
+
+    width: 840px;
+    color: #666;
+    font-size: 1.6em;
+    letter-spacing: -1px;
+    background-color: #dddddd;
+    background-repeat: no-repeat;
+
+    -webkit-box-shadow: 0px 0px 0.60em #000;
+    -moz-box-shadow: 0px 0px 0.60em #000;
+    -o-box-shadow: 0px 0px 0.60em #000;
+
+}
+
+#download {
+    background-color: #000;
+    background-image: -webkit-gradient(
+        linear,
+        left bottom,
+        left top,
+        color-stop(0.44, rgb(0,0,0)),
+        color-stop(0.61, rgb(53,53,53))
+    );
+    background-image: -moz-linear-gradient(
+        center bottom,
+        rgb(0,0,0) 44%,
+        rgb(53,53,53) 61%
+    );
+    color: #ffffff;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    margin-top: 1.0em;
+    -webkit-box-shadow: 0px 0px 0.30em #000;
+    -moz-box-shadow: 0px 0px 0.30em #000;
+    -o-box-shadow: 0px 0px 0.30em #000;
+    float: left;
+}
+
+#download a {
+    color: white;
+    text-decoration: none;
+    padding-left: 1em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    padding-right: 1em;
+}
+
+#info h2 {
+    margin: 17px 0 15px 0;
+    border: 0;
+    font-family: 'Georgia', 'Ovo', serif;
+    color: #2b7dbc;
+    font-size: 1.75em;
+    font-weight: normal;
+}
+
+#info p {
+    line-height: 150%;
+}
+
+#content {
+    text-align: justify;
+    width: 874px;
+    padding-left: 1em;
+    padding-right: 1em;
+    line-height: 150%;
+    color: #fff;
+    font-size: 1.2em;
+}
+
+#content p {
+    padding-right: 2em;
+}
+#content li {
+    margin-bottom: 1em;
+    padding-right: 2em;
+}
+
+#distributions {
+    margin-left: 2em;
+    line-height: 100px;
+}
+
+#distributions img {
+    vertical-align: middle;
+    margin-left: 1.5em;
+    margin-right: 1.5em;
+    margin-bottom: 1.5em;
+    margin-top: .5em;
+}
+
+#footer {
+    border-top: 2px solid #333;
+    margin-top: 4em;
+    padding-top: 1em;
+    font-size: 90%;
+    text-align: center;
+}
+
+.docs {
+    float: left;
+    width: 48%;
+}
+
+@font-face {
+    font-family: 'Droid Sans';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Droid Sans'), local('DroidSans'), url('/fonts/DroidSans.woff') format('woff'), url('/fonts/DroidSans.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Ovo';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Ovo'), url('/fonts/Ovo.ttf') format('truetype');
+}
+
+.video img {
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+.imgdesc {
+    margin-bottom: 1em;
+}
+
+.screenshots .shot {
+    float: left;
+    margin-left: 1em;
+    margin-right: 1em;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    text-align: center;
+    color: #c0c0c0;
+}
+
+.screenshots br {
+    clear: left;
+}
+
+#mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: #000;
+    opacity: 0.7;
+    display: none;
+}
+
+#loading {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    width: 64px;
+    height: 64px;
+    background-color: red;
+    opacity: 0.9;
+    z-index: 20;
+    display: none;
+    border-radius: 4px;
+}
+
+#bigimg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+}
+
+#maskouter {
+    height: 100%;
+    display: table;
+    margin: 0 auto;
+}
+
+#maskinner {
+    vertical-align: middle;
+    display: table-cell;
+}
+
+#imgleft, #imgright {
+    position: fixed;
+    top: 50%;
+    width: 64px;
+    height: 64px;
+    border-radius: 4px;
+    background-color: green;
+    z-index: 19;
+}
+
+#imgleft {
+    left: 0;
+}
+
+#imgright {
+    right: 0;
+    background-color: blue;
+}
+
+/* clearfix */
+.clearfix:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+.clearfix {
+    display: inline-block;
+}
+html[xmlns] .clearfix {
+    display: block;
+}
+* html .clearfix {
+    height: 1%;
+}
diff --git a/docs/index.html.mako b/docs/index.html.mako
new file mode 100644 (file)
index 0000000..c52a4f6
--- /dev/null
@@ -0,0 +1,66 @@
+<%!
+       section = "docs"
+%>
+<%inherit file="_templates/i3.mako" />
+<div id="content">
+<h2>Documentation</h2>
+
+<p>
+One of i3’s goals is good documentation. The documents which you will find
+below will hopefully answer all your questions. If you have any corrections or
+suggestions please let us know!
+</p>
+
+<div class="docs">
+<h2>For users</h2>
+
+<p style="font-size: 100%">
+<a href="/docs/userguide.html"><strong>User’s Guide</strong></a><br>
+Introduction and reference. Read this one.
+</p>
+
+<p>
+<a href="/docs/multi-monitor.html"><strong>Multi-monitor</strong></a><br>
+Interesting for users of the nVidia binary driver.
+</p>
+
+<p>
+<a href="/docs/debugging.html"><strong>Debugging i3</strong></a><br>
+Explains you how to enable the i3 logfile.
+</p>
+
+<p>
+<a href="/docs/wsbar.html"><strong>External workspace bars</strong></a><br>
+About bar programs such as i3bar or dzen2.
+</p>
+
+<p>
+<a href="/docs/refcard.pdf"><strong>i3 reference card (PDF)</strong></a><br>
+Might be useful to memorize i3’s shortcuts.
+</p>
+</div>
+
+<div class="docs">
+<h2>For developers</h2>
+
+<p>
+<a href="/docs/hacking-howto.html"><strong>Hacking Howto</strong></a><br>
+Helps you if you want to get into i3’s source code.
+</p>
+
+<p>
+<a href="/docs/debugging.html"><strong>Debugging i3</strong></a><br>
+Explains you how to enable core dumps.
+</p>
+
+<p>
+<a href="/docs/ipc.html"><strong>IPC documentation</strong></a><br>
+Explains how i3’s Inter Process Communication interface works. Read this if you
+want to talk to i3 within your own scripts or programs.
+</p>
+
+</div>
+
+<br style="clear: both">
+
+</div>
diff --git a/downloads/index.html.mako b/downloads/index.html.mako
new file mode 100644 (file)
index 0000000..4558889
--- /dev/null
@@ -0,0 +1,199 @@
+<%!
+       section = "downloads"
+%>
+<%inherit file="_templates/i3.mako" />
+<div id="content">
+
+<h2>Distributions</h2>
+
+<p>
+Please use the i3 packages provided by the distribution you are using. i3 is
+currently distributed in the following operating systems/distributions:
+</p>
+
+<div id="distributions">
+<%
+       distros = [
+               [
+                 "Debian GNU/Linux",
+                 "http://packages.debian.org/sid/i3",
+                 "/img/debian.png",
+                 93
+               ],
+               [
+                 "Arch Linux",
+                 "http://www.archlinux.org/packages/community/x86_64/i3-wm/",
+                 "/img/archlinux.png",
+                 75
+               ],
+               [
+                 "Gentoo Linux",
+                 "http://packages.gentoo.org/package/x11-wm/i3",
+                 "/img/gentoo-logo.png",
+                 79
+               ],
+               [
+                 "Ubuntu Linux",
+                 "http://packages.ubuntu.com/karmic/i3",
+                 "/img/ubuntu.png",
+                 75
+               ],
+               [
+                 "FreeBSD",
+                 "http://www.freebsd.org/cgi/cvsweb.cgi/ports/x11-wm/i3/",
+                 "/img/freebsd.png",
+                 59
+               ],
+               [
+                 "NetBSD",
+                 "http://pkgsrc.se/wip/i3",
+                 "/img/netbsd_logo.png",
+                 56
+               ],
+               [
+                 "OpenBSD",
+                 "http://www.openbsd.org/cgi-bin/cvsweb/ports/x11/i3/",
+                 "/img/Openbsd2.png",
+                 49
+               ]
+       ]
+
+       c = 0
+%>
+% for title, link, img, height in distros:
+<div style="display: inline; min-width: 100px"><a title="i3 in ${title}" href="${link}"><img src="${img}" width="75" height="${height}" alt="${title}" title="i3 in ${title}"></a></div>
+<% c += 1 %>
+% if c == (len(distros) / 4) * 4:
+<br>
+% endif
+% endfor
+</div>
+
+<!--
+<p>
+    Because Ubuntu packages are always outdated, you can also install
+    up-to-date third-party i3 packages for Ubuntu by adding the following line
+    to your <code>/etc/apt/sources.list</code> and using <code>apt-get install
+    i3</code> afterwards:<br>
+    <pre>
+    deb http://debian.sur5r.net/i3/ karmic universe
+    </pre>
+    Or, if you are running lucid:
+    <pre>
+    deb http://debian.sur5r.net/i3/ lucid universe
+    </pre>
+</p>
+-->
+<p>
+Because Ubuntu syncs its packages only every 6 months with Debian, we provide a more recent repository.
+</p>
+
+<h2>Downloads</h2>
+
+<p>
+  The current stable version is 3.ε-bf3 (transcribed 3.e-bf3 because many systems still can’t
+  handle UTF-8 in version numbers).
+</p>
+
+<p>
+  <strong>IMPORTANT:</strong> If you use the nVidia binary driver (which does
+  not support XRandR at the moment), read <a
+  href="/docs/multi-monitor.html">this document</a> for an explanation and how
+  to enable the work-around!
+</p>
+
+<ul>
+  <li>
+    <a href="/downloads/i3-3.e-bf3.tar.bz2">i3-3.e-bf3.tar.bz2</a>
+    (<a href="/downloads/i3-3.e-bf3.tar.bz2.asc">GPG signature</a>), Version 3.ε-bf3, 353 KiB, 2011-05-08,
+    <a href="/downloads/RELEASE-NOTES-3.e-bf3.txt">release notes</a>
+  </li>
+
+  <li>
+    <a href="/downloads/i3-3.e-bf2.tar.bz2">i3-3.e-bf2.tar.bz2</a>
+    (<a href="/downloads/i3-3.e-bf2.tar.bz2.asc">GPG signature</a>), Version 3.ε-bf2, 285 KiB, 2011-01-19,
+    <a href="/downloads/RELEASE-NOTES-3.e-bf2.txt">release notes</a>
+  </li>
+
+  <li>
+    <a href="/downloads/i3-3.e-bf1.tar.bz2">i3-3.e-bf1.tar.bz2</a>
+    (<a href="/downloads/i3-3.e-bf1.tar.bz2.asc">GPG signature</a>), Version 3.ε-bf1, 285 KiB, 2010-06-09,
+    <a href="/downloads/RELEASE-NOTES-3.e-bf1.txt">release notes</a>
+  </li>
+
+  <li>
+    <a href="/downloads/i3-3.e.tar.bz2">i3-3.e.tar.bz2</a>
+    (<a href="/downloads/i3-3.e.tar.bz2.asc">GPG signature</a>), Version 3.ε, 271 KiB, 2010-03-30,
+    <a href="/downloads/RELEASE-NOTES-3.e.txt">release notes</a>
+  </li>
+
+  <li>
+    <a href="/downloads/i3-3.d-bf1.tar.bz2">i3-3.d-bf1.tar.bz2</a>
+    (<a href="/downloads/i3-3.d-bf1.tar.bz2.asc">GPG signature</a>), Version 3.δ-bf1, 153 KiB, 2009-12-21,
+    <a href="/downloads/RELEASE-NOTES-3.d-bf1.txt">release notes</a>
+  </li>
+
+  <li>
+    <a href="/downloads/i3-3.d.tar.bz2">i3-3.d.tar.bz2</a>
+    (<a href="/downloads/i3-3.d.tar.bz2.asc">GPG signature</a>), Version 3.δ, 153 KiB, 2009-11-09,
+    <a href="/downloads/RELEASE-NOTES-3.d.txt">release notes</a>
+  </li>
+
+  <li>
+    <a href="/downloads/i3-3.c.tar.bz2">i3-3.c.tar.bz2</a>
+    (<a href="/downloads/i3-3.c.tar.bz2.asc">GPG signature</a>), Version 3.γ, 107 KiB, 2009-08-19,
+    <a href="/downloads/RELEASE-NOTES-3.c.txt">release notes</a>
+  </li>
+
+  <li>
+    <a href="/downloads/i3-3.b.tar.bz2">i3-3.b.tar.bz2</a>
+    (<a href="/downloads/i3-3.b.tar.bz2.asc">GPG signature</a>), Version 3.β, 96 KiB, 2009-06-26,
+    <a href="/downloads/RELEASE-NOTES-3.b.txt">release notes</a>
+  </li>
+
+  <li>
+    <a href="/downloads/i3-3.a-bf2.tar.bz2">i3-3.a-bf2.tar.bz2</a>
+    (<a href="/downloads/i3-3.a-bf2.tar.bz2.asc">GPG signature</a>), Version 3.α-bf2, 65 KiB, 2009-05-03,
+    hotfix for a problem with -bf1
+  </li>
+
+  <li>
+    <a href="/downloads/i3-3.a-bf1.tar.bz2">i3-3.a-bf1.tar.bz2</a>
+    (<a href="/downloads/i3-3.a-bf1.tar.bz2.asc">GPG signature</a>), Version 3.α-bf1, 65 KiB, 2009-05-03,
+    <a href="/downloads/RELEASE-NOTES-3.a-bf1.txt">release notes</a>
+  </li>
+
+  <li>
+    <a href="/downloads/i3-3.a.tar.bz2">i3-3.a.tar.bz2</a>
+    (<a href="/downloads/i3-3.a.tar.bz2.asc">GPG signature</a>), Version 3.α, 50 KiB, 2009-03-15
+  </li>
+</ul>
+
+
+<h2>Development version</h2>
+
+<p>
+  Use <a href="http://git-scm.com/">git</a> to follow the latest changes:
+</p>
+
+<pre>
+  $ git clone git://code.stapelberg.de/i3
+</pre>
+
+<p>
+  If you prefer to download a tarball, or if you cannot use git for whatever reason,
+  you may download the current master branch from
+  <a href="http://code.stapelberg.de/git/i3/snapshot/i3-master.tar.bz2">
+    http://code.stapelberg.de/git/i3/snapshot/i3-master.tar.bz2
+  </a>
+</p>
+
+<h2>Announce mailing list</h2>
+
+<p>
+  If you want to be notified when a new version of i3 is released, please subscribe
+  to the announce mailing list by sending a mail to <code>i3-announce-subscribe@i3.zekjur.net</code>
+</p>
+
+
+</div>
diff --git a/fonts/DroidSans.ttf b/fonts/DroidSans.ttf
new file mode 100644 (file)
index 0000000..69a61da
Binary files /dev/null and b/fonts/DroidSans.ttf differ
diff --git a/fonts/DroidSans.woff b/fonts/DroidSans.woff
new file mode 100644 (file)
index 0000000..891ce42
Binary files /dev/null and b/fonts/DroidSans.woff differ
diff --git a/fonts/Ovo.ttf b/fonts/Ovo.ttf
new file mode 100644 (file)
index 0000000..c0aecf7
Binary files /dev/null and b/fonts/Ovo.ttf differ
diff --git a/img/Openbsd2.png b/img/Openbsd2.png
new file mode 100644 (file)
index 0000000..65ac3bb
Binary files /dev/null and b/img/Openbsd2.png differ
diff --git a/img/archlinux.png b/img/archlinux.png
new file mode 100644 (file)
index 0000000..7ff6f40
Binary files /dev/null and b/img/archlinux.png differ
diff --git a/img/debian.png b/img/debian.png
new file mode 100644 (file)
index 0000000..8924464
Binary files /dev/null and b/img/debian.png differ
diff --git a/img/freebsd.png b/img/freebsd.png
new file mode 100644 (file)
index 0000000..4d934e4
Binary files /dev/null and b/img/freebsd.png differ
diff --git a/img/gentoo-logo.png b/img/gentoo-logo.png
new file mode 100644 (file)
index 0000000..be6384f
Binary files /dev/null and b/img/gentoo-logo.png differ
diff --git a/img/logo.png b/img/logo.png
new file mode 100644 (file)
index 0000000..18ef330
Binary files /dev/null and b/img/logo.png differ
diff --git a/img/netbsd_logo.png b/img/netbsd_logo.png
new file mode 100644 (file)
index 0000000..edb8f2e
Binary files /dev/null and b/img/netbsd_logo.png differ
diff --git a/img/ubuntu.png b/img/ubuntu.png
new file mode 100644 (file)
index 0000000..df7f5b8
Binary files /dev/null and b/img/ubuntu.png differ
diff --git a/index.html.mako b/index.html.mako
new file mode 100644 (file)
index 0000000..3c124d2
--- /dev/null
@@ -0,0 +1,86 @@
+<%!
+       section = "index"
+%>
+<%inherit file="_templates/i3.mako" />
+<div id="info" class="clearfix">
+
+    <div id="screens">
+        <img id="screenshot" src="/screenshots/i3-6.png" width="375" height="219">
+    </div>
+
+    <h2>Do What I Mean. Good Docs. Clean Code. Sounds good?</h2>
+    <p>Bleh bleh.</p>
+    <div id="download">
+        <a href="/downloads">
+        <span style="font-weight: bold; color: #3A8ECD; margin-right: .5em">➡</span>
+        Download the latest version
+        <span style="margin-left: 2em; color: #c0c0c0">3.ε</span>
+        </a>
+    </div>
+</div>
+
+<div id="content">
+<p>
+i3 is a tiling window manager, completely written from scratch. It is primarily
+targeted at advanced users and developers. Based upon the experiences we made
+when wanting to hack/fix wmii, we agreed upon the following goals for i3:
+</p> 
+<ol> 
+  <li> 
+    Write well readable, well <strong>documented</strong> code. Create additional
+    documentation on how to extend i3 by explaining its internal workings.
+    <br /> 
+    This includes being modifiable by people who do know how to program but who are
+    not necessarily familiar with all of X11’s internals. That is, document why
+    things happen and when they happen so that the user gets a picture of the whole
+    process a Window Manager is responsible of by just reading the source code.
+  </li> 
+  <li> 
+    Use xcb as far as possible (it does not provide functions for some features
+    yet, like XKB) instead of Xlib. xcb has a much cleaner API and should be faster
+    in quite a lot of situations.
+  </li> 
+  <li> 
+    Implement multi-monitor correctly, that is by assigning each workspace to a
+    virtual screen. Especially make sure that attaching and detaching new monitors
+    like video projectors works during operation and does the right thing. Also
+    provide support for rotated monitors.
+  </li> 
+  <li> 
+    Use a tree as data structure. This allows for more flexible layouts than
+    the column-based approach used by other window managers.
+  </li> 
+  <li> 
+    Implement different modes, like in vim. You can use different keybindings
+    when in the 'resize' mode than when you are in the default mode, for
+    example.
+  </li> 
+  <li> 
+    Do <strong>not</strong> use programs such as autoconf/automake for configuration and
+    creating unreadable/broken makefiles. Instead, use a clean makefile which automatically
+    enables/disables features for specific platforms. Also, document the dependencies
+    properly, so that package maintainers have an easy job packaging i3.
+  </li> 
+  <li> 
+    Implement an IPC interface for other programs. Provide subscription to
+    certain events and accept commands.
+    <br /> 
+    This approach should be more lightweight than wmii’s usage of the 9P filesystem.
+    Furthermore, core functionality does not depend on a separate program, so that i3
+    runs faster, especially when your system is under load.
+  </li> 
+  <li> 
+    Be UTF-8 clean.
+  </li> 
+  <li> 
+    The usual elitism amongst minimal window managers: Don’t be bloated, don’t be fancy
+    (simple borders are the most decoration we want to have), don’t add support for Xft
+    and blurred fonts.
+    <br /> 
+    However, we do not enforce unnecessary limits such as a maximum amount of source lines
+    of code. If it needs to be a bit bigger, it will be.
+  </li> 
+</ol> 
+</div>
diff --git a/js/jquery.ba-hashchange.js b/js/jquery.ba-hashchange.js
new file mode 100644 (file)
index 0000000..47105f4
--- /dev/null
@@ -0,0 +1,390 @@
+/*!
+ * jQuery hashchange event - v1.3 - 7/21/2010
+ * http://benalman.com/projects/jquery-hashchange-plugin/
+ * 
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+
+// Script: jQuery hashchange event
+//
+// *Version: 1.3, Last updated: 7/21/2010*
+// 
+// Project Home - http://benalman.com/projects/jquery-hashchange-plugin/
+// GitHub       - http://github.com/cowboy/jquery-hashchange/
+// Source       - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js
+// (Minified)   - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.min.js (0.8kb gzipped)
+// 
+// About: License
+// 
+// Copyright (c) 2010 "Cowboy" Ben Alman,
+// Dual licensed under the MIT and GPL licenses.
+// http://benalman.com/about/license/
+// 
+// About: Examples
+// 
+// These working examples, complete with fully commented code, illustrate a few
+// ways in which this plugin can be used.
+// 
+// hashchange event - http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
+// document.domain - http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
+// 
+// About: Support and Testing
+// 
+// Information about what version or versions of jQuery this plugin has been
+// tested with, what browsers it has been tested in, and where the unit tests
+// reside (so you can test it yourself).
+// 
+// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
+// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
+//                   Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
+// Unit Tests      - http://benalman.com/code/projects/jquery-hashchange/unit/
+// 
+// About: Known issues
+// 
+// While this jQuery hashchange event implementation is quite stable and
+// robust, there are a few unfortunate browser bugs surrounding expected
+// hashchange event-based behaviors, independent of any JavaScript
+// window.onhashchange abstraction. See the following examples for more
+// information:
+// 
+// Chrome: Back Button - http://benalman.com/code/projects/jquery-hashchange/examples/bug-chrome-back-button/
+// Firefox: Remote XMLHttpRequest - http://benalman.com/code/projects/jquery-hashchange/examples/bug-firefox-remote-xhr/
+// WebKit: Back Button in an Iframe - http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/
+// Safari: Back Button from a different domain - http://benalman.com/code/projects/jquery-hashchange/examples/bug-safari-back-from-diff-domain/
+// 
+// Also note that should a browser natively support the window.onhashchange 
+// event, but not report that it does, the fallback polling loop will be used.
+// 
+// About: Release History
+// 
+// 1.3   - (7/21/2010) Reorganized IE6/7 Iframe code to make it more
+//         "removable" for mobile-only development. Added IE6/7 document.title
+//         support. Attempted to make Iframe as hidden as possible by using
+//         techniques from http://www.paciellogroup.com/blog/?p=604. Added 
+//         support for the "shortcut" format $(window).hashchange( fn ) and
+//         $(window).hashchange() like jQuery provides for built-in events.
+//         Renamed jQuery.hashchangeDelay to <jQuery.fn.hashchange.delay> and
+//         lowered its default value to 50. Added <jQuery.fn.hashchange.domain>
+//         and <jQuery.fn.hashchange.src> properties plus document-domain.html
+//         file to address access denied issues when setting document.domain in
+//         IE6/7.
+// 1.2   - (2/11/2010) Fixed a bug where coming back to a page using this plugin
+//         from a page on another domain would cause an error in Safari 4. Also,
+//         IE6/7 Iframe is now inserted after the body (this actually works),
+//         which prevents the page from scrolling when the event is first bound.
+//         Event can also now be bound before DOM ready, but it won't be usable
+//         before then in IE6/7.
+// 1.1   - (1/21/2010) Incorporated document.documentMode test to fix IE8 bug
+//         where browser version is incorrectly reported as 8.0, despite
+//         inclusion of the X-UA-Compatible IE=EmulateIE7 meta tag.
+// 1.0   - (1/9/2010) Initial Release. Broke out the jQuery BBQ event.special
+//         window.onhashchange functionality into a separate plugin for users
+//         who want just the basic event & back button support, without all the
+//         extra awesomeness that BBQ provides. This plugin will be included as
+//         part of jQuery BBQ, but also be available separately.
+
+(function($,window,undefined){
+  '$:nomunge'; // Used by YUI compressor.
+  
+  // Reused string.
+  var str_hashchange = 'hashchange',
+    
+    // Method / object references.
+    doc = document,
+    fake_onhashchange,
+    special = $.event.special,
+    
+    // Does the browser support window.onhashchange? Note that IE8 running in
+    // IE7 compatibility mode reports true for 'onhashchange' in window, even
+    // though the event isn't supported, so also test document.documentMode.
+    doc_mode = doc.documentMode,
+    supports_onhashchange = 'on' + str_hashchange in window && ( doc_mode === undefined || doc_mode > 7 );
+  
+  // Get location.hash (or what you'd expect location.hash to be) sans any
+  // leading #. Thanks for making this necessary, Firefox!
+  function get_fragment( url ) {
+    url = url || location.href;
+    return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
+  };
+  
+  // Method: jQuery.fn.hashchange
+  // 
+  // Bind a handler to the window.onhashchange event or trigger all bound
+  // window.onhashchange event handlers. This behavior is consistent with
+  // jQuery's built-in event handlers.
+  // 
+  // Usage:
+  // 
+  // > jQuery(window).hashchange( [ handler ] );
+  // 
+  // Arguments:
+  // 
+  //  handler - (Function) Optional handler to be bound to the hashchange
+  //    event. This is a "shortcut" for the more verbose form:
+  //    jQuery(window).bind( 'hashchange', handler ). If handler is omitted,
+  //    all bound window.onhashchange event handlers will be triggered. This
+  //    is a shortcut for the more verbose
+  //    jQuery(window).trigger( 'hashchange' ). These forms are described in
+  //    the <hashchange event> section.
+  // 
+  // Returns:
+  // 
+  //  (jQuery) The initial jQuery collection of elements.
+  
+  // Allow the "shortcut" format $(elem).hashchange( fn ) for binding and
+  // $(elem).hashchange() for triggering, like jQuery does for built-in events.
+  $.fn[ str_hashchange ] = function( fn ) {
+    return fn ? this.bind( str_hashchange, fn ) : this.trigger( str_hashchange );
+  };
+  
+  // Property: jQuery.fn.hashchange.delay
+  // 
+  // The numeric interval (in milliseconds) at which the <hashchange event>
+  // polling loop executes. Defaults to 50.
+  
+  // Property: jQuery.fn.hashchange.domain
+  // 
+  // If you're setting document.domain in your JavaScript, and you want hash
+  // history to work in IE6/7, not only must this property be set, but you must
+  // also set document.domain BEFORE jQuery is loaded into the page. This
+  // property is only applicable if you are supporting IE6/7 (or IE8 operating
+  // in "IE7 compatibility" mode).
+  // 
+  // In addition, the <jQuery.fn.hashchange.src> property must be set to the
+  // path of the included "document-domain.html" file, which can be renamed or
+  // modified if necessary (note that the document.domain specified must be the
+  // same in both your main JavaScript as well as in this file).
+  // 
+  // Usage:
+  // 
+  // jQuery.fn.hashchange.domain = document.domain;
+  
+  // Property: jQuery.fn.hashchange.src
+  // 
+  // If, for some reason, you need to specify an Iframe src file (for example,
+  // when setting document.domain as in <jQuery.fn.hashchange.domain>), you can
+  // do so using this property. Note that when using this property, history
+  // won't be recorded in IE6/7 until the Iframe src file loads. This property
+  // is only applicable if you are supporting IE6/7 (or IE8 operating in "IE7
+  // compatibility" mode).
+  // 
+  // Usage:
+  // 
+  // jQuery.fn.hashchange.src = 'path/to/file.html';
+  
+  $.fn[ str_hashchange ].delay = 50;
+  /*
+  $.fn[ str_hashchange ].domain = null;
+  $.fn[ str_hashchange ].src = null;
+  */
+  
+  // Event: hashchange event
+  // 
+  // Fired when location.hash changes. In browsers that support it, the native
+  // HTML5 window.onhashchange event is used, otherwise a polling loop is
+  // initialized, running every <jQuery.fn.hashchange.delay> milliseconds to
+  // see if the hash has changed. In IE6/7 (and IE8 operating in "IE7
+  // compatibility" mode), a hidden Iframe is created to allow the back button
+  // and hash-based history to work.
+  // 
+  // Usage as described in <jQuery.fn.hashchange>:
+  // 
+  // > // Bind an event handler.
+  // > jQuery(window).hashchange( function(e) {
+  // >   var hash = location.hash;
+  // >   ...
+  // > });
+  // > 
+  // > // Manually trigger the event handler.
+  // > jQuery(window).hashchange();
+  // 
+  // A more verbose usage that allows for event namespacing:
+  // 
+  // > // Bind an event handler.
+  // > jQuery(window).bind( 'hashchange', function(e) {
+  // >   var hash = location.hash;
+  // >   ...
+  // > });
+  // > 
+  // > // Manually trigger the event handler.
+  // > jQuery(window).trigger( 'hashchange' );
+  // 
+  // Additional Notes:
+  // 
+  // * The polling loop and Iframe are not created until at least one handler
+  //   is actually bound to the 'hashchange' event.
+  // * If you need the bound handler(s) to execute immediately, in cases where
+  //   a location.hash exists on page load, via bookmark or page refresh for
+  //   example, use jQuery(window).hashchange() or the more verbose 
+  //   jQuery(window).trigger( 'hashchange' ).
+  // * The event can be bound before DOM ready, but since it won't be usable
+  //   before then in IE6/7 (due to the necessary Iframe), recommended usage is
+  //   to bind it inside a DOM ready handler.
+  
+  // Override existing $.event.special.hashchange methods (allowing this plugin
+  // to be defined after jQuery BBQ in BBQ's source code).
+  special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
+    
+    // Called only when the first 'hashchange' event is bound to window.
+    setup: function() {
+      // If window.onhashchange is supported natively, there's nothing to do..
+      if ( supports_onhashchange ) { return false; }
+      
+      // Otherwise, we need to create our own. And we don't want to call this
+      // until the user binds to the event, just in case they never do, since it
+      // will create a polling loop and possibly even a hidden Iframe.
+      $( fake_onhashchange.start );
+    },
+    
+    // Called only when the last 'hashchange' event is unbound from window.
+    teardown: function() {
+      // If window.onhashchange is supported natively, there's nothing to do..
+      if ( supports_onhashchange ) { return false; }
+      
+      // Otherwise, we need to stop ours (if possible).
+      $( fake_onhashchange.stop );
+    }
+    
+  });
+  
+  // fake_onhashchange does all the work of triggering the window.onhashchange
+  // event for browsers that don't natively support it, including creating a
+  // polling loop to watch for hash changes and in IE 6/7 creating a hidden
+  // Iframe to enable back and forward.
+  fake_onhashchange = (function(){
+    var self = {},
+      timeout_id,
+      
+      // Remember the initial hash so it doesn't get triggered immediately.
+      last_hash = get_fragment(),
+      
+      fn_retval = function(val){ return val; },
+      history_set = fn_retval,
+      history_get = fn_retval;
+    
+    // Start the polling loop.
+    self.start = function() {
+      timeout_id || poll();
+    };
+    
+    // Stop the polling loop.
+    self.stop = function() {
+      timeout_id && clearTimeout( timeout_id );
+      timeout_id = undefined;
+    };
+    
+    // This polling loop checks every $.fn.hashchange.delay milliseconds to see
+    // if location.hash has changed, and triggers the 'hashchange' event on
+    // window when necessary.
+    function poll() {
+      var hash = get_fragment(),
+        history_hash = history_get( last_hash );
+      
+      if ( hash !== last_hash ) {
+        history_set( last_hash = hash, history_hash );
+        
+        $(window).trigger( str_hashchange );
+        
+      } else if ( history_hash !== last_hash ) {
+        location.href = location.href.replace( /#.*/, '' ) + history_hash;
+      }
+      
+      timeout_id = setTimeout( poll, $.fn[ str_hashchange ].delay );
+    };
+    
+    // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
+    // vvvvvvvvvvvvvvvvvvv REMOVE IF NOT SUPPORTING IE6/7/8 vvvvvvvvvvvvvvvvvvv
+    // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
+    $.browser.msie && !supports_onhashchange && (function(){
+      // Not only do IE6/7 need the "magical" Iframe treatment, but so does IE8
+      // when running in "IE7 compatibility" mode.
+      
+      var iframe,
+        iframe_src;
+      
+      // When the event is bound and polling starts in IE 6/7, create a hidden
+      // Iframe for history handling.
+      self.start = function(){
+        if ( !iframe ) {
+          iframe_src = $.fn[ str_hashchange ].src;
+          iframe_src = iframe_src && iframe_src + get_fragment();
+          
+          // Create hidden Iframe. Attempt to make Iframe as hidden as possible
+          // by using techniques from http://www.paciellogroup.com/blog/?p=604.
+          iframe = $('<iframe tabindex="-1" title="empty"/>').hide()
+            
+            // When Iframe has completely loaded, initialize the history and
+            // start polling.
+            .one( 'load', function(){
+              iframe_src || history_set( get_fragment() );
+              poll();
+            })
+            
+            // Load Iframe src if specified, otherwise nothing.
+            .attr( 'src', iframe_src || 'javascript:0' )
+            
+            // Append Iframe after the end of the body to prevent unnecessary
+            // initial page scrolling (yes, this works).
+            .insertAfter( 'body' )[0].contentWindow;
+          
+          // Whenever `document.title` changes, update the Iframe's title to
+          // prettify the back/next history menu entries. Since IE sometimes
+          // errors with "Unspecified error" the very first time this is set
+          // (yes, very useful) wrap this with a try/catch block.
+          doc.onpropertychange = function(){
+            try {
+              if ( event.propertyName === 'title' ) {
+                iframe.document.title = doc.title;
+              }
+            } catch(e) {}
+          };
+          
+        }
+      };
+      
+      // Override the "stop" method since an IE6/7 Iframe was created. Even
+      // if there are no longer any bound event handlers, the polling loop
+      // is still necessary for back/next to work at all!
+      self.stop = fn_retval;
+      
+      // Get history by looking at the hidden Iframe's location.hash.
+      history_get = function() {
+        return get_fragment( iframe.location.href );
+      };
+      
+      // Set a new history item by opening and then closing the Iframe
+      // document, *then* setting its location.hash. If document.domain has
+      // been set, update that as well.
+      history_set = function( hash, history_hash ) {
+        var iframe_doc = iframe.document,
+          domain = $.fn[ str_hashchange ].domain;
+        
+        if ( hash !== history_hash ) {
+          // Update Iframe with any initial `document.title` that might be set.
+          iframe_doc.title = doc.title;
+          
+          // Opening the Iframe's document after it has been closed is what
+          // actually adds a history entry.
+          iframe_doc.open();
+          
+          // Set document.domain for the Iframe document as well, if necessary.
+          domain && iframe_doc.write( '<script>document.domain="' + domain + '"</script>' );
+          
+          iframe_doc.close();
+          
+          // Update the Iframe's hash, for great justice.
+          iframe.location.hash = hash;
+        }
+      };
+      
+    })();
+    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    // ^^^^^^^^^^^^^^^^^^^ REMOVE IF NOT SUPPORTING IE6/7/8 ^^^^^^^^^^^^^^^^^^^
+    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    
+    return self;
+  })();
+  
+})(jQuery,this);
diff --git a/js/jquery.mousewheel.js b/js/jquery.mousewheel.js
new file mode 100755 (executable)
index 0000000..b6b89ba
--- /dev/null
@@ -0,0 +1,60 @@
+/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ *
+ * Version: 3.0.2
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+$.event.special.mousewheel = {
+       setup: function() {
+               if ( this.addEventListener )
+                       for ( var i=types.length; i; )
+                               this.addEventListener( types[--i], handler, false );
+               else
+                       this.onmousewheel = handler;
+       },
+       
+       teardown: function() {
+               if ( this.removeEventListener )
+                       for ( var i=types.length; i; )
+                               this.removeEventListener( types[--i], handler, false );
+               else
+                       this.onmousewheel = null;
+       }
+};
+
+$.fn.extend({
+       mousewheel: function(fn) {
+               return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+       },
+       
+       unmousewheel: function(fn) {
+               return this.unbind("mousewheel", fn);
+       }
+});
+
+
+function handler(event) {
+       var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
+       
+       event = $.event.fix(event || window.event);
+       event.type = "mousewheel";
+       
+       if ( event.wheelDelta ) delta = event.wheelDelta/120;
+       if ( event.detail     ) delta = -event.detail/3;
+       
+       // Add events and delta to the front of the arguments
+       args.unshift(event, delta);
+
+       return $.event.handle.apply(this, args);
+}
+
+})(jQuery);
\ No newline at end of file
diff --git a/screenshots/i3-1.png b/screenshots/i3-1.png
new file mode 100644 (file)
index 0000000..502bc6e
Binary files /dev/null and b/screenshots/i3-1.png differ
diff --git a/screenshots/i3-1.thumb.png b/screenshots/i3-1.thumb.png
new file mode 100644 (file)
index 0000000..434f744
Binary files /dev/null and b/screenshots/i3-1.thumb.png differ
diff --git a/screenshots/i3-2.png b/screenshots/i3-2.png
new file mode 100644 (file)
index 0000000..76e52af
Binary files /dev/null and b/screenshots/i3-2.png differ
diff --git a/screenshots/i3-2.thumb.png b/screenshots/i3-2.thumb.png
new file mode 100644 (file)
index 0000000..af41647
Binary files /dev/null and b/screenshots/i3-2.thumb.png differ
diff --git a/screenshots/i3-3.png b/screenshots/i3-3.png
new file mode 100644 (file)
index 0000000..32585fc
Binary files /dev/null and b/screenshots/i3-3.png differ
diff --git a/screenshots/i3-3.thumb.png b/screenshots/i3-3.thumb.png
new file mode 100644 (file)
index 0000000..82554b1
Binary files /dev/null and b/screenshots/i3-3.thumb.png differ
diff --git a/screenshots/i3-4.png b/screenshots/i3-4.png
new file mode 100644 (file)
index 0000000..80a3adf
Binary files /dev/null and b/screenshots/i3-4.png differ
diff --git a/screenshots/i3-4.thumb.png b/screenshots/i3-4.thumb.png
new file mode 100644 (file)
index 0000000..2f20b62
Binary files /dev/null and b/screenshots/i3-4.thumb.png differ
diff --git a/screenshots/i3-5.png b/screenshots/i3-5.png
new file mode 100644 (file)
index 0000000..7777665
Binary files /dev/null and b/screenshots/i3-5.png differ
diff --git a/screenshots/i3-5.thumb.png b/screenshots/i3-5.thumb.png
new file mode 100644 (file)
index 0000000..7dc830c
Binary files /dev/null and b/screenshots/i3-5.thumb.png differ
diff --git a/screenshots/i3-6.png b/screenshots/i3-6.png
new file mode 100644 (file)
index 0000000..ab183d6
Binary files /dev/null and b/screenshots/i3-6.png differ
diff --git a/screenshots/i3-6.thumb.png b/screenshots/i3-6.thumb.png
new file mode 100644 (file)
index 0000000..8ea7dcd
Binary files /dev/null and b/screenshots/i3-6.thumb.png differ
diff --git a/screenshots/i3-7.png b/screenshots/i3-7.png
new file mode 100644 (file)
index 0000000..b9a2119
Binary files /dev/null and b/screenshots/i3-7.png differ
diff --git a/screenshots/i3-7.thumb.png b/screenshots/i3-7.thumb.png
new file mode 100644 (file)
index 0000000..f3ae2ff
Binary files /dev/null and b/screenshots/i3-7.thumb.png differ
diff --git a/screenshots/i3-8.jpg b/screenshots/i3-8.jpg
new file mode 100644 (file)
index 0000000..00ec7f5
Binary files /dev/null and b/screenshots/i3-8.jpg differ
diff --git a/screenshots/i3-8.thumb.jpg b/screenshots/i3-8.thumb.jpg
new file mode 100644 (file)
index 0000000..df2862e
Binary files /dev/null and b/screenshots/i3-8.thumb.jpg differ
diff --git a/screenshots/index.html.mako b/screenshots/index.html.mako
new file mode 100644 (file)
index 0000000..70a741f
--- /dev/null
@@ -0,0 +1,335 @@
+<%!
+       section = "screens"
+%>
+<%inherit file="_templates/i3.mako" />
+
+<div id="mask">
+</div>
+
+<div id="loading">
+</div>
+
+<div id="bigimg">
+    <div id="maskouter">
+        <div id="maskinner">
+            <div id="imgleft">
+            </div>
+            <div id="imgright">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="content">
+
+<h2>Latest Video</h2>
+
+<div class="video clearfix">
+<img src="http://i1.ytimg.com/vi/pKfP7Ws-CN8/default.jpg" width="240" style="float: left">
+<div style="float: left; padding-top: 0.25em">
+<strong>Screencast of v3.δ</strong>
+<p>
+This video shows the basic features of i3:
+</p>
+<ul>
+<li>Different layouts</li>
+<li>Meh</li>
+</ul>
+<p>
+Download it here.
+</p>
+</div>
+</div>
+
+<h2>Screenshots</h2>
+
+<p>
+To get a quick impression of i3, have a look at these screenshots.
+</p>
+
+<div class="screenshots clearfix">
+    <div class="shot">
+        <a href="/screenshots/i3-1.png"><img src="/screenshots/i3-1.thumb.png" width="240" border="0"></a><br>
+        <span>Vimperator, VIM, MPlayer, dzen2</span>
+    </div>
+
+    <div class="shot">
+        <a href="/screenshots/i3-2.png"><img src="/screenshots/i3-2.thumb.png" width="240" border="0"></a><br>
+        <span>Vimperator, VIM, xpdf, bc</span>
+    </div>
+
+    <div class="shot">
+        <a href="/screenshots/i3-3.png"><img src="/screenshots/i3-3.thumb.png" width="240" border="0"></a><br>
+        <span>PCManFM, ROXTerm, evince</span>
+    </div>
+
+    <br>
+
+    <div class="shot">
+        <a href="/screenshots/i3-4.png"><img src="/screenshots/i3-4.thumb.png" width="240" border="0"></a><br>
+        <span>i3 logo out of terminals</span>
+    </div>
+
+    <div class="shot">
+        <a href="/screenshots/i3-6.png"><img src="/screenshots/i3-6.thumb.png" width="240" border="0"></a><br>
+        <span>VIM, zsh, i3status (FreeBSD)</span>
+    </div>
+
+    <div class="shot">
+        <a href="/screenshots/i3-7.png"><img src="/screenshots/i3-7.thumb.png" width="240" border="0"></a><br>
+        <span>GIMP, urxvt (both floating)</span>
+    </div>
+
+    <br>
+
+    <div class="shot">
+        <a href="/screenshots/i3-5.png"><img src="/screenshots/i3-5.thumb.png" width="240" border="0"></a><br>
+        <span>mc, xosview, MPlayer, irssi, gajim</span>
+    </div>
+
+    <div class="shot">
+        <a href="/screenshots/i3-8.jpg"><img src="/screenshots/i3-8.thumb.jpg" width="240" border="0"></a><br>
+        <span>git, synergy, htop, urxvt</span>
+    </div>
+
+</div>
+
+</div>
+
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
+</script>
+<script type="text/javascript" src="/js/jquery.mousewheel.js">
+</script>
+<script type="text/javascript" src="/js/jquery.ba-hashchange.js">
+</script>
+<script type="text/javascript">
+$(document).ready(function() {
+    $('.shot span').css('color', '#888');
+
+    $('.shot').mouseover(function() {
+        $(this).children('span').css('color', 'white');
+    });
+
+    $('.shot').mouseout(function() {
+        $(this).children('span').css('color', '#888');
+    });
+
+    // build an array of all images (full URLs)
+    var images = [];
+    var cnt = 0;
+    $('.shot a').each(function(idx, element) {
+        images[cnt++] = $(element).attr('href');
+    });
+
+    // handlers for mousewheel scrolling
+    // defined here because we need to enable it after the animation finished
+    $(window).mousewheel(function(event, delta) {
+        // if we are not in the slideshow mode, process the event as normal
+        return (!$('#mask').is(':visible'));
+    });
+
+    var wheelhandler = function(event, delta) {
+        //console.log('event = ' + event + ', delta = ' + delta);
+
+        // if we are not in the slideshow mode, process the event as normal
+        if (!$('#mask').is(':visible')) {
+            return true;
+        }
+
+        if (delta < 0) {
+            // scroll down
+            imgright();
+            return false;
+        } else if (delta > 0) {
+            // scroll up
+            imgleft();
+            return false;
+        }
+    };
+
+    $(window).mousewheel(wheelhandler);
+
+    var loadimage = function(url, direction, fromhash) {
+        // now load the image
+        var img = new Image();
+        img.src = url;
+
+        var loadcomplete = function() {
+            var winW = $(window).width();
+            var winH = $(window).height();
+            var max_w = winW - (2 * 64);
+            var max_h = winH - 64;
+            var dims = {
+                'top': 0,
+                'left': 0,
+                'width': (img.width > max_w ? max_w : img.width),
+                'height': img.height
+            };
+            dims.height = (dims.width / img.width) * img.height;
+            if (dims.height > max_h) {
+                dims.height = max_h;
+                dims.width = (dims.height / img.height) * img.width;
+            }
+            dims.top = (winH - dims.height) / 2;
+            dims.left = ((max_w - dims.width) / 2) + 64;
+            $('#loading').hide();
+            var element = $('<img>');
+            element.attr({ 'src': url, 'width':dims.width });
+            element.css({ 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
+            if (direction !== undefined) {
+                // slide from right to left
+                if (direction === 'left') {
+                    element.css({ 'left':winW + 'px' });
+                    element.animate({ 'left': '-=' + (winW - dims.left) }, 'fast', function() {
+                        $(window).mousewheel(wheelhandler);
+                    });
+                } else {
+                    element.css({ 'left':'-' + winW + 'px' });
+                    element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() {
+                        $(window).mousewheel(wheelhandler);
+                    });
+                }
+            }
+            $('#maskinner').append(element);
+            $('#maskinner').show();
+
+            $('#bigimg').show();
+
+            if (!fromhash && window.history.pushState) {
+                window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url);
+            }
+        };
+
+        if (img.complete) {
+            //console.log('image already in cache');
+            loadcomplete();
+        } else {
+            //console.log('loading image');
+            img.onload = loadcomplete;
+        }
+    };
+
+    // clicking anywhere outside the image will bring you back to the page
+    var masks = $('#mask, #bigimg');
+
+    var endshow = function() {
+        masks.hide();
+        $('#maskinner img').remove();
+
+        if (window.history.pushState) {
+            window.history.pushState(undefined, 'i3 screenshots', '#');
+        }
+    };
+
+    masks.click(function() {
+        endshow();
+    });
+    
+    $('.shot img').click(function() {
+        var winH = $(window).height();
+        var maskHeight = $(document).height();
+        var maskWidth = $(window).width();
+
+        var full = $(this).parent().attr('href');
+        var mask = $('#mask');
+        mask.css({ 'width': maskWidth, 'height': maskHeight }).show();
+
+        var loading = $('#loading');
+        loading.show();
+
+        loadimage(full, undefined, false);
+
+// TODO: also preload the next image?
+
+        // don't follow the link
+        return false;
+    });
+
+    var imgright = function() {
+        var idx = $.inArray($('#maskinner img').attr('src'), images);
+        var next = images[idx+1];
+
+        if (next === undefined) {
+            //console.log('there is no next image');
+            return false;
+        }
+
+        //console.log('loading next one: ' + next);
+        // slide out the current image
+        var winW = $(window).width();
+        $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() {
+            $(this).remove();
+        });
+        loadimage(next, 'left', false);
+
+        // disable mousewheel handler during load (will be re-enabled after the animation)
+        $(window).unmousewheel(wheelhandler);
+
+        return true;
+    };
+    $('#imgright').click(imgright);
+
+    var imgleft = function() {
+        var idx = $.inArray($('#maskinner img').attr('src'), images);
+        var prev = images[idx-1];
+
+        if (prev === undefined) {
+            //console.log('there is no next image');
+            return false;
+        }
+
+        //console.log('loading prev one: ' + prev);
+        // slide out the current image
+        var winW = $(window).width();
+        $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() {
+            $(this).remove();
+        });
+        loadimage(prev, 'right', false);
+
+        // disable mousewheel handler during load (will be re-enabled after the animation)
+        $(window).unmousewheel(wheelhandler);
+
+        return false;
+    };
+    $('#imgleft').click(imgleft);
+
+    // setup key press handlers for the left/right arrow keys
+    var keydown = function(e) {
+        switch (e.keyCode) {
+            // left arrow
+            case 37:
+                imgleft();
+                break;
+            // right arrow
+            case 39:
+                imgright();
+                break;
+            // escape
+            case 27:
+                endshow();
+                break;
+        }
+    };
+
+    if ($.browser.mozilla) {
+        $(document).keypress(keydown);
+    } else {
+        $(document).keydown(keydown);
+    }
+
+    if (location.hash.length > 0) {
+        var url = location.hash.substring(1);
+        loadimage(url, undefined, true);
+    }
+
+    $(window).hashchange(function() {
+        if (location.hash.length === 0) {
+            return;
+        }
+        //console.log('hash has changed to ' + location.hash);
+        var url = location.hash.substring(1);
+        loadimage(url, undefined, true);
+    });
+
+});
+</script>