Athena/TopBarPrototype

So I was looking at Athena, and that thing looks really cool, and I felt like fiddling with some code, so...

Athena isn't actually finished being designed yet (and anyway some of this doesn't work on a lot of browsers), so this stuff is probably pretty much useless, but meh.   Main  Search Wikipedia  You CSS:

top: 0px; height: 45px; }
 * 1) mw-top-bar {

bottom: 0px; height: 40px; }
 * 1) mw-bottom-bar {

position: fixed; width: 100%; color: #FFFFFF; -webkit-transition: all 0.3s; border-spacing: 0px; }
 * 1) mw-top-bar, #mw-bottom-bar {

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3E3E3E), color-stop(14%,#393939), color-stop(32%,2E2E2E), color-stop(64%,#151515), color-stop(84%,#080808), color-stop(100%,#000000)); background: -webkit-linear-gradient(top, #3E3E3E 0%,#393939 14%,#2E2E2E 32%,#151515 64%,#080808 84%,#010101 100%); }
 * 1) mw-top-bar, #bottom-bar-left, #bottom-bar-right {

position:absolute; bottom: 0px; font-size: 10px; font-weight: bold; }
 * 1) mw-bottom-bar div {

left: 0px; width: 58px; height: 45px; }
 * 1) bottom-bar-left {

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6D6D6D), color-stop(15%,#676767), color-stop(36%,#5A5A5A), color-stop(77%,#494949), color-stop(100%,#282828)); background: -webkit-linear-gradient(top, #6D6D6D 0%,#676767 15%,#5A5A5A 36%,#494949 77%,#282828 100%); left: 58px; right: 112px; height: 40px; box-shadow: 0px -15px 15px #3A3A3A inset; }
 * 1) bottom-bar-center {

right: 0px; width: 112px; height: 45px; }
 * 1) bottom-bar-right {

bottom: -45px; }
 * 1) mw-bottom-bar.closed {

top: -50px; }
 * 1) mw-top-bar.closed {

font-size: 10px; font-weight: bold; height:45px; width: 63px; padding: 0px; text-align: center; }
 * 1) mw-you, #mw-logo {

display: block; color: #FFFFFF; height: 15px; padding-top: 30px; }
 * 1) mw-logo a, #mw-bottom-bar a, #mw-interwiki {

float: right; width: 50px; text-align: center; }
 * 1) mw-bottom-bar a {

float: left; padding-top: 22px; height: 18px; }
 * 1) bottom-bar-center a {

div #mw-interwiki { float: right; width: 62px; }

padding-top: 27px; height: 15px; }
 * 1) mw-you {

padding:2px 30px 2px 0px; }
 * 1) mw-searchtd {

border: 1px solid #787878; border-radius: 3px; width: 100%; font-size: 18px; padding-left: 5px; padding-right: 25px; box-shadow: 0px 3px 7px #BBBBBB inset; }
 * 1) mw-search {

display: none; position: absolute; top: 35px; left: 67px; right: 64px; background-color: #AAAAAA; border: 1px solid #AAAAAA; }
 * 1) mw-results {

border:0px; position: absolute; right: 65px; top: 10px; width: 25px; height: 25px; }
 * 1) mw-searchbutton {

.selectedSlider { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3964C0), color-stop(20%,#335FBE), color-stop(68%,#194BB7), color-stop(100%,#0D41B4)); background: -webkit-linear-gradient(top, #3964C0 0%,#335FBE 20%,#194BB7 68%,#0D41B4 100%); }

position: absolute; bottom: 40px; height: 5px; width: 5px; }
 * 1) bottom-bar-left a::after, #bottom-bar-right a:last-child::after {

left: 58px; }
 * 1) bottom-bar-left a::after {

right: 112px; }
 * 1) bottom-bar-right a:last-child::after {

}
 * 1) bottom-bar-left a.selectedSlider::after {

}
 * 1) bottom-bar-right a.selectedSlider:last-child::after {

background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#000000), color-stop(50%,#4A4A4A), color-stop(100%,#000000)); background: -webkit-linear-gradient(45deg, #000000 0%,#4A4A4A 50%,#000000 100%); position: fixed; top: 45px; right: 2px; height: 346px; width: 188px; border: 2px solid #323232; border-top:0; box-shadow: 2px 4px 5px #888888; display: none; }
 * 1) mw-youmenu {

display: block; margin: 0; line-height: 2.7em; padding: 0.01em 0.25em; text-decoration: none; color: #000000; border-top: 1px #888888 solid; font-size: 15px; } .suggestions-results div{ float: right; margin: 0; line-height: 1.8em; padding: 0.01em 0.25em; font-size: 20px; color: #000000; }
 * 1) mw-results .suggestions-results a{

.suggestions-results a:hover{ background-color: #ACD1E9; }

HTML (at the top) (still need to do the "You" menu's contents):

Article History More Language Discuss

JS (in the head):

document.onclick = function(e) { e = e || event; e = e.target || e.srcElement; if(e.id == "mw-search" && withSliders ) { focusSlider search.onblur = closeSlider; return; }	var stopIds = {'mw-results':1,'mw-top-bar':1,'mw-bottom-bar':1,'mw-youmenu':1,'mw-you':1} for(e && !e.hash && e.nodeName != "H2" && !stopIds[e.id]; ) { e = e.parentNode; }	if( e && e.nodeName == "H2" && e.className != "xxnotsectionheader") { // headers toggleSection( e ); } else if( e && e.hash && e.hash.indexOf( '#' ) == 0 ) { // links revealForHash( e.hash ); } else if ( withSliders && !(e && !stopIds[e.id] ) ) { topSlider.className = bottomSlider.className = "open"; closeSlider; }	if( e && stopIds[e.id] ) { focusSlider; }	if( youmenu && youmenu.style.display == 'block' && (!e || e.id != "mw-youmenu" && e.id != "mw-you") ) { youmenu.style.display = 'none'; }	if( e && e.id == "mw-you" ) { youmenu = document.getElementById("mw-youmenu"); if(youmenu) { youmenu.style.display = youmenu.style.display == "block" ? (closeSlider, "none") : (focusSlider, "block"); }	}	if( (!e || e.id != "mw-results") && results ) { results.style.display = 'none'; } }

document.onkeyup = function(e) { e = e || event; e = e.target || e.srcElement; if( e.id == "mw-search") { if ( !withSliders ){ // not yet loaded? return; }		if ( search.value.length == 0 ) { results.style.display = 'none'; }		// from bottom clearTimeout( searchTimer ); var term = e.value; if ( term.length < 1 ) { results.innerHTML = ''; } else { searchTimer = setTimeout( function { searchApi( term ); }, typingDelay ); }	} }

var sliderFocused = false, sliderTimer = -1, searchTimer = -1, topSlider, bottomSlider, results, search, youmenu, typingDelay = 500, apiUrl = (window.scriptPath || "/w")+"/api.php", numResults = 5, maxHistSpace = 10;

function closeSlider { sliderFocused = false; clearTimeout(sliderTimer); sliderTimer = setTimeout(function{		if(!sliderFocused && withSliders ){			topSlider.className = bottomSlider.className = "closed";			results.style.display = "none";		}	}, 1000) }

function withSliders { if(bottomSlider) { return true; }	bottomSlider = document.getElementById("mw-bottom-bar"); topSlider = document.getElementById("mw-top-bar"); search = document.getElementById("mw-search"); results = document.getElementById("mw-results"); return !!bottomSlider; }

function focusSlider { sliderFocused = true; clearTimeout(sliderTimer); topSlider.className = bottomSlider.className = "open"; }

function pageLoaded { sliderFocused || closeSlider; withSliders; search.parentNode.onsubmit = function{ newHistSuggestion(search.value) }	// Try to scroll and hide URL bar window.scrollTo( 0, 1 ); document.location.hash.indexOf( '#' ) == 0 && revealForHash( document.location.hash ); }

function toggleSection( header ) { header.className = header.className ? '' : 'expanded'; for(header && header.nodeName != "DIV" ; ) { header = header.nextSibling; }	header = header.style; header.display = header.display == 'block' ? 'none' : 'block'; }

function revealForHash( hash ) { hash = document.getElementById( hash.substr(1) ); if( hash ) { for( var display; hash && hash.nodeName != "H2" ; hash = hash.previousSibling ) { while( hash && !hash.previousSibling ) { hash = hash.parentNode; }			if( hash && hash.nodeName == "DIV" ) { display = hash.style.display; }		}		if( hash && display != "block" ) { toggleSection( hash ); }	} }

function histSuggestions { var a=document.cookie.split("histsugg="); return a.length < 2?'':'|'+a[1].split(";")[0]; }

function newHistSuggestion(term) { if((histSuggestions+"|").indexOf("|"+term+"|") == -1 && term){ document.cookie = "histsugg="+term+histSuggestions.split("|").slice(0, maxHistSpace ).join("|")+";path=/;expires="+(new Date(+new Date+(3600000*24*30)).toGMTString) } };

function searchApi( term ) { var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject( 'Microsoft.XMLHTTP' ); for(var hist = histSuggestions.split("|").slice(1), histS = []; hist.length; hist.shift) { if(hist[0].toLowerCase.indexOf(term.toLowerCase) == 0) { histS.push(hist[0]); }	}	focusSlider; histS.splice( numResults ); xmlHttp.onreadystatechange = function { if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) { var response = histS.concat((window.JSON && JSON.parse ? JSON.parse : eval)( xmlHttp.responseText )[1]), dontDuplicate={}; results.style.display = 'block'; for(results.firstChild;){results.removeChild(results.firstChild)} if(response.length === 0){ results.appendChild( document.createTextNode( "No results" ) ); } else { results.appendChild( document.createElement('div') ).className = "suggestions-results"; for( var i = 0; i < response.length; i++ ){ if( dontDuplicate[ response[i] ] ){ continue; }					dontDuplicate[response[i]] = true; (function(re){						var newdiv = results.lastChild.appendChild( document.createElement('div') ),							newlink = results.lastChild.appendChild( document.createElement('a') );						newdiv.appendChild( document.createTextNode(' +  ') );						newdiv.onmousedown = function{							search.value = re + ' ';							searchApi(re);							return false;						}						newlink.title = re;						newlink.href = '/wiki/' + re;						newlink.onclick = function{ newHistSuggestion( re ) };						newlink.appendChild( document.createTextNode( re ) );					})(response[i]) }			}		}	}	var url = apiUrl + '?action=opensearch&limit=' + (numResults - histS.length) + '&namespace=0&format=json&search=' + term; xmlHttp.open( 'GET', url, true ); xmlHttp.send; }

and JS and the bottom:

pageLoaded