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, so this stuff is probably pretty much useless, but meh.   Main  Search Wikipedia  You CSS:

position: fixed; top: 0px; height: 45px; width: 100%; color: #FFFFFF; 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%); -webkit-transition: top 0.3s; }
 * 1) top-bar {

position: fixed; bottom: 0px; height: 45px; width: 100%; }
 * 1) bottom-bar {

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

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

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

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

padding:2px 30px 2px 0px; }
 * 1) 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) search {

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

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

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) results .suggestions-results a{

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

HTML (at the top) (still need to do the bottom bar):

JS (in the head):

document.onclick = function(e) { e = e || event; e = e.target || e.srcElement; if(e.id == "search" && withSliders ) { focusSlider return; }	for(e && e.nodeName != "A" && e.nodeName != "H2" && e.id != "results"; ) { 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 && e.id == "results") ) { topSlider.className = bottomSlider.className = "open"; closeSlider; }	if( (!e || e.id != "results") && results ) { results.style.display = 'none'; } }

document.onkeyup = function(e) { e = e || event; e = e.target || e.srcElement; if( e.id == "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, 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("bottom-bar"); topSlider = document.getElementById("top-bar"); results = document.getElementById("results"); return !!bottomSlider; }

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

function pageLoaded { sliderFocused || closeSlider; search.parentNode.onsubmit = function{ newHistSuggestion(search.value) } }

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 ) { if( !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