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 position:fixed doesn't work (well) on pretty much anything but iOS Safari 5+ & Android 2.2+), so this stuff is probably pretty much useless, but meh.

...

So now I've gotten as far as the pics at Athena let, so I'll be doing whatever routine stuff until some new images get uploaded or I find some new area to fiddle with.

  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, #mw-signin {

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

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; }

height: 15px; width: 50px; padding-right: 8px; padding-left: 5px; }
 * 1) mw-you, #mw-signin {

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3964C0), color-stop(23%,#335FBE), color-stop(100%,#1044B5)); background: -webkit-linear-gradient(top, #3964C0 0%,#335FBE 23%,#1044B5 100%); }
 * 1) mw-you.active a, #mw-signin a {

position: absolute; right: 28px; top: 45px; z-index: 1; content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAIAAADzBuo/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABGSURBVBhXY+DUyOV33ooVscv6MwABh0Yun/NWNMQmFwiSgwAOjRw+py1wxC4fipCDq+B12gJEbIqR6HIQPrt6DptSPLIcAEZOGepxoutQAAAAAElFTkSuQmCC); }
 * 1) mw-you.active::after {

position: absolute; right: 8px; width: 50px; top: 0px; height: 20px; }
 * 1) mw-signin a {

position: absolute; right: 58px; top: 45px; z-index: 1; content: url(data:image/gif;base64,R0lGODlhBQAFAPEAAAkzjoOYxgAAAAAAACH5BAEAAAIALAAAAAAFAAUAAAIIDA5iJ8ptGiwAOw==); }
 * 1) mw-signin::after {

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; content: url(data:image/gif;base64,R0lGODlhBQAFAPIAAAAAAAYGBhsbG5ycnAAAAAAAAAAAAAAAACH5BAEAAAQALAAAAAAFAAUAAAMKOLQUukA8QBWtCQA7); }
 * 1) bottom-bar-left a::after {

right: 112px; content: url(data:image/gif;base64,R0lGODlhBQAFAPIAAAAAAAYGBhsbG5ycnAAAAAAAAAAAAAAAACH5BAEAAAQALAAAAAAFAAUAAAMLSEqzE2oIwIAd1iYAOw==); }
 * 1) bottom-bar-right a:last-child::after {

content: url(data:image/gif;base64,R0lGODlhBQAFAPEAAAgyjYSZxgAAAAAAACH5BAEAAAIALAAAAAAFAAUAAAIIjC5gB8ptGiwAOw==); }
 * 1) bottom-bar-left a.selectedSlider::after {

content: url(data:image/gif;base64,R0lGODlhBQAFAPEAAAgyjYSZxgAAAAAAACH5BAEAAAIALAAAAAAFAAUAAAIIlBUXYMsOICgAOw==); }
 * 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: 0px; height: 346px; width: 188px; border: 2px solid #323232; border-top:0; box-shadow: 2px 4px 5px #888888; display: none; }
 * 1) mw-youmenu {

color: #FFFFFF; display: block; padding: 15px; padding-left: 60px; font-weight: bold; font-size: 12px; }
 * 1) mw-youmenu a {

margin-top: 25px; padding-right: 40px; float: right; }
 * 1) mw-youmenu a#mw-logout {

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 (User Name)</a> Your Notifications</a> Your Talk Page</a> Your Watchlist</a> Your Contributions</a> Your Preferences</a> Log Out</a>

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'; document.getElementById("mw-you").className = ''; }	if( e && e.id == "mw-you" ) { youmenu = document.getElementById("mw-youmenu"); if(youmenu) { youmenu.style.display = youmenu.style.display == "block" ? (closeSlider, e.className='', "none") : (focusSlider, e.className='active', "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