// ==UserScript==
// @name            Hatena Haiku Users and Keywords Switcher
// @namespace       http://d.hatena.ne.jp/kurumigi/
// @description     Can switch display of the "Users" and "Keywords" by clicking the triangle icon on left or right respectively.
// @include         http://h.hatena.ne.jp/*
// @include         http://h.hatena.ne.com/*
// @exclude         http://h.hatena.ne.jp/mobile/*
// @exclude         http://h.hatena.ne.com/mobile/*
// ==/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 onResize = function(){};

window.addEventListener("DOMContentLoaded", function() {
  	for (var k in unsafeWindow) 
	{
    		var f = unsafeWindow[k];
    		if (typeof f == "function" && typeof f.resizeId == "number") 
		{
      			onResize = function(){ f(f.resizeId); };
      			break;
    		}
  	}
	}, false);

	
var obj_head = document.getElementById("mt1");
if (obj_head)
{
	init("head", "body.sd > table:first-child, body.sd > table:first-child+div, body.sb > table:first-child, body.sb > table:first-child+div, body.sq > table:first-child, body.sq > table:first-child+div, body.ss > table:first-child, body.ss > table:first-child+div, table#fc > tbody > tr:first-child", function() {
	  onResize();
	})
};

var obj_leftbar = document.getElementById("leftbar");
if (obj_leftbar)
{
	init("leftbar", "#leftbar, #header #logo", function() {
		var hide = GM_getValue("leftbar");

		var obj = document.getElementById("main");
		if (obj)
		{
			obj.style.marginLeft = hide ? "0px" : "200px";
			onResize();
		}
		var obj = document.getElementById("footer");
		if (obj)
		{
			obj.style.marginLeft = hide ? "0px" : "200px";
			onResize();
		}
	})
};

var obj_rightbar = document.getElementById("rightbar");
if (obj_rightbar)
{
	init("rightbar", "#rightbar, #header #global-menu, #header p.username", function() {
		var hide = GM_getValue("rightbar");

		var obj = document.getElementById("main");
		if (obj)
		{
			obj.style.marginRight = hide ? "0px" : "200px";
			onResize();
		}
		var obj = document.getElementById("footer");
		if (obj)
		{
			obj.style.marginRight = hide ? "0px" : "200px";
			onResize();
		}
	})
};

/*
  #leftbarSwitchButton.closed, #rightbarSwitchButton.opened {
  }
  #leftbarSwitchButton.opened, #rightbarSwitchButton.closed {
  }
*/

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