[Greasemonkey script]1470 Navigation and Ads Switcher

1470navigationandadsswit.user.js

// ==UserScript==
// @name            1470 Navigation and Ads Switcher
// @namespace       http://d.hatena.ne.jp/kurumigi/
// @description     Can switch display of the header, navigation bar and ads by clicking the triangle icon on top or on right.
// @include         http://1470.net/*
// ==/UserScript==

// This script based on "Google Calendar Header and Navigation Switcher".
//   (http://userscripts.org/scripts/show/8507)
// Thanks to yooskeh.

function init(id, selector, onresize) {
  var style = document.createElement("style");
  style.type = "text/css";
  document.getElementsByTagName("head")[0].appendChild(style);

  function toggleDisplay() {
    var hide = !GM_getValue(id);
    GM_setValue(id, hide);
    style.innerHTML = hide ? selector+"{display:none;}" : "";
    switchButton.className = hide ? "closed" : "opened";
    setTimeout(onresize, 0);
  }

  var switchButton = document.createElement("div");
  switchButton.id = id + "SwitchButton";
  switchButton.addEventListener("click", toggleDisplay, false);
  window.addEventListener("load", function() {
    document.body.appendChild(switchButton);
    }, false);

  GM_setValue(id, !GM_getValue(id));
  toggleDisplay();
}

var obj_head = document.getElementById("hd");
if (obj_head) {
  init("head", "#hd", function(){})
};

var obj_nav = document.getElementById("sidebarArea");
if (obj_nav) {
  init("nav", "#sidebarArea", function() {
    var hide = GM_getValue("nav");

    var obj = document.getElementById("sidebarArea");
    if (obj) {
      obj.style.width = hide ? "0%" : "24%";
    }
    obj = document.getElementById("mainContentsArea");
    if (obj) {
      obj.style.width = hide ? "100%" : "73.4%";
    }
  })
};

// Styles for Switch Button
GM_addStyle(<><![CDATA[
  #navSwitchButton, #headSwitchButton {
    position: absolute;
    width: 0;
    height: 0;
    cursor: pointer;
    opacity: 0.3;
  }
  #navSwitchButton:hover, #headSwitchButton:hover {
    opacity: 0.6;
  }
  #navSwitchButton {
    top: 49%;
    left: 0;
    z-index: 1;
    border-style: solid none;
  }
  #navSwitchButton.closed {
    border-top:    12px solid transparent; 
    border-bottom: 12px solid transparent;
    border-left:   12px solid blue;
    border-right:   0;
  }
  #navSwitchButton.opened {
    border-top:    12px solid transparent; 
    border-bottom: 12px solid transparent;
    border-right:  12px solid blue;
    border-left:    0;
  }
  #headSwitchButton {
    top: 0;
    left: 49%;
    z-index: 1;
  }
  #headSwitchButton.closed {
    border-left:   12px solid transparent; 
    border-right:  12px solid transparent;
    border-top:    12px solid blue;
    border-bottom:  0;
  }
  #headSwitchButton.opened {
    border-left:   12px solid transparent; 
    border-right:  12px solid transparent;
    border-bottom: 12px solid blue;
    border-top:     0;
  }
]]></>);