// ==UserScript==
// @name          Helvetibook
// @namespace     http://r-ch.net
// @description   Facebook that doesn't suck.
// @include       http://lite.facebook.com/*
// ==/UserScript==

/*
 * TODO!
 *  Post in the thread if you find anything that isn't done that you'd
 *  like done.
 *
 * - White -> gray gradient BG, not sure how to dock it to the bottom
 * - Photos & Video tab
 * - Single-column completely eliminates comments on photos/videos/albums :(
 * - Events page
 * - Box in sending a message is light blue
 */

var helvetibook = function() {
  // BASE
  //  A basic Helveti*-styled Facebook skin.
  //
  //  This will eventually be reorganized to be more readable
  //  and less bunched-up; this CSS alone would be equivalent
  //  to the first Helvetibook release from Macristocracy.
  var css = '* { font-family: "Helvetica Neue", Helvetica !important; }  div#header a { color: #666 !important; font-weight: bold !important; } #navigation a:hover { background: none !important; color: #333 !important; } a#logo div span { visibility: visible !important; font-size: 150% !important; color: #D90000 !important;} a#logo div { background: none !important; }  i.nub { display: none !important; } .UFIView .comment, .UFIView .likes { background: none !important; background-color: #F1F1F1 !important; color: #999 !important; } .UFIView .comment a, .UFIView.likes a { color: #666 !important; } a:link { color: #666 !important; } a:visited { color: #666 !important; } #search th div.searchroot { border: 1px solid #666 !important; } button, a.button, a.button:visited, input.inputsubmit { background: none !important; color: #666 !important; border: none !important; color: #666 !important; box-shadow: none !important; } div.LMuffinView.group { display: none !important; } button:active, a.button:active { border-bottom-color: none !important; color: #333 !important; } button:hover, a.button:hover { border-bottom-color: none !important; color: #333 !important; } li.FN_suggestion.group a.profilePhoto img { display: none !important; } a:hover { color: #333 !important; text-decoration: none !important; } div#header { background-color: white !important; } .UFIView form.comment th div { border: 1px solid #CCC !important; }';
  // ===
  // BASE (Pt. 2)
  //  More additions, segmented out into sections.
  //- See More Stories
  css += ".streamPaginator { background: none !important; border-top: none !important; margin: 0 !important;}";
  //- Getting rid of the footer
  css += "#footer { display: none !important; }";
  //- Theme the popout results for the Search box
  css += ".LTypeaheadResults { border-bottom: 1px solid #666 !important; }";
  css += "div.LTypeaheadResults a { color: #666 !important; border-bottom: none !important; border-left: 1px solid #666 !important; border-right: 1px solid #666 !important; }";
  css += "#search .LTypeaheadResults a.focused, #search .LTypeaheadResults a:hover, .LTypeaheadResults a.focused, .LTypeaheadResults a:hover { background: white !important; color: #333 !important; border-top-color: none !important; }";
  //- Notification/alert bars
  css += "div#alertsBar .content { background: none !important; background-color: #F1F1F1 !important; color: #999 !important; border-top: 1px solid #666 !important; }";
  //- X buttons - interim solution
  //    What I would _like_ to do for this is have gray-ish
  //    X buttons that turn red on hover; no background color change.
  css += "a.remove:active, a.remove:hover { background: #999 !important; }";
  //- Profile pages
  //  - Tabs
  css += ".LTabView { background: none !important; border-right: none !important; }";
  css += ".LTabView a { background: none !important; border: none !important;  }";
  css += ".LTabView .selected a { color: #D90000 !important; }";
  //  - Publisher view
  css += ".LPublisherView { background: none !important; }";
  //      Maybe the border under this is a little too dark? I should
  //      establish a style guide or something so I don't give fields
  //      two different colors or something....
  css += ".LPublisherView th div { border: 1px solid #666 !important; }";
  //- Popup Dialogs
  css += ".LDialog .dialog-title, .pop_dialog .pop_content h2.dialog_title { background: white !important; color: #D90000 !important; }";
  css += ".LDialog .dialog-foot, .pop_dialog .pop_content .dialog_buttons { background: white !important; }";
  //- Filter control views
  css += ".LFilterControlView { background: none !important; }";
  css += ".LFilterControlView a { background: none !important; border: none !important; font-weight: bold !important; }";
  css += ".LFilterControlView a.current { color: #D90000 !important; }";
  //- Cleaning up the Inbox
  css += ".LInboxControlsView { background: none !important; border: none !important; }";
  css += ".LInboxControlsView .LTypeaheadHardpoint { border-right: 1px solid #777 !important; }";
  css += "table.LInboxView a h3 { color: #666 !important; font-weight: bold !important; }";
  //- Pager
  css += ".LPager .selected { border: none !important; color: #D90000 !important; }";
  css += ".LPager a:hover { background: none !important; border: none !important; }";

  // ===
  // ONE-COLUMN MODE
  //  The following changes make Helvetibook a one-column
  //  setup. This has consequences on certain pages, like
  //  those for photos or videos, where the right column
  //  contains comments. (To be fixed.)
  //- Make the right column disappear
  css += "div.LSplitPage_Right { display: none !important; }";
  //- Center the (80% width) left column to form one column
  css += "div.LSplitPage_Content.LSplitPage_ContentWithNoLeftColumn { width: 80% !important; margin-left: 10% !important; }";
  
	if (typeof GM_addStyle != "undefined") {
		GM_addStyle(css);
	} else if (typeof addStyle != "undefined") {
		addStyle(css);
	} else {
		var heads = document.getElementsByTagName("head");
		if (heads.length > 0) {
			var node = document.createElement("style");
			node.innerText = css;
			heads[0].appendChild(node); 
		}
	}
}

helvetibook();