// ==VimperatorPlugin==
// @name           BookmarksToolbar-Hint
// @description    Feature the BookmarksToolbar-Hint
// @description-ja ブックマークツールバーのヒント機能を提供
// @version        0.2c
// ==/VimperatorPlugin==
//
// Usage:
// 
// <Leader>f   -> open current tab
// <Leader>F   -> open new tab
//
// Note: <Leader> is `\' by default
//
// duaing BookmarksToolbar-Hint, numbering tooltip is appear.
// the item of matched number will open when type the number
// and <BS> remove pending number or backward to parent (at opening a folder)
//

liberator.plugins.bookmarkToolbarHints = (function(){
	if (typeof plugins == 'undefined') plugins = liberator.plugins; // for 2.0 pre
	function createTooltip(){
		var tooltip = document.createElement('tooltip');
		tooltip.setAttribute('style','padding:0;margin:0;');
		var label = document.createElement('label');
		label.setAttribute('value',tooltipbox.childNodes.length+1);
		label.setAttribute('style','padding:0;margin:0 2px;');
		tooltip.appendChild(label);
		tooltipbox.appendChild(tooltip);
		return tooltip;
	}
	function clearTooltips(){
		while (tooltipbox.hasChildNodes()){
			tooltipbox.firstChild.hidePopup();
			tooltipbox.removeChild(tooltipbox.firstChild);
		}
	}
	function getToolbar() toolbar || (toolbar = document.getElementById('bookmarksBarContent'));
	function onKeyPress(event){
		manager.onEvent(event);
		event.stopPropagation();
		event.preventDefault();
	}
	function updateSelector(){
		for (let i=0; i<tooltipbox.childNodes.length; i++){
			tooltipbox.childNodes[i].style.color = (i+1).toString().indexOf(currentNum+1) == 0 ? "red" : "black";
		}
	}
	function itemOpen(target){
		if (target.hasAttribute('oncommand')){
			let fn = new Function("event", target.getAttribute("oncommand"));
			if (where == liberator.CURRENT_TAB)
				fn.call(target, {button:0, ctrlKey:false});
			else
				fn.call(target, {button:1, ctrlKey:true});
		} else {
			liberator.open(target.node.uri, where);
		}
		closeMenus(target);
		liberator.modules.options.guioptions = manager.go;
	}
	function folderOpen(target){
		target.firstChild.showPopup();
		manager.quit();
		manager.show(target.firstChild);
	}
	function toolbarOpen(target){
		if (target.getAttribute('container') == 'true'){
			folderOpen(target);
			return true;
		} else {
			itemOpen(target);
		}
		return false;
	}
	var hints = [];
	var toolbar;
	var current;
	var currentNum = 0;
	var useShift = false;
	var where = liberator.CURERNT_TAB;
	var manager = {
		get toolbar() getToolbar(),
		go: null,
		get where(){ return where; },
		set where(value){ where = value; },
		startup: function(where){
			this.go = options.guioptions;
			options.guioptions += "b";
			this.where = where;
			liberator.modules.modes.setCustomMode('BookmarksToolbar-Hint', function(){return;}, this.quit);
			this.show();
		},
		show:function(node){
			liberator.modules.modes.set(liberator.modules.modes.CUSTOM,liberator.modules.modes.QUICK_HINT);
			hints = [];
			window.addEventListener('keypress',onKeyPress,true);
			current = node || getToolbar();
			for (let i=0,l=current.childNodes.length; i<l; i++){
				let button = current.childNodes[i];
				if (button.localName == "menuseparator") continue;
				hints.push(button);
				let tooltip = createTooltip();
				tooltip.showPopup(button, -1, -1,"tooltip","topleft","topright");
			}
			updateSelector();
		},
		onEvent: function(event){
			var key = liberator.modules.events.toString(event);
			switch(key){
				case "<Esc>":
				case "<C-[>":
					closeMenus(current);
					liberator.modules.options.guioptions = this.go;
					break;
				case "<Return>":
				case "<Right>":
					if (toolbarOpen(hints[currentNum])) return;
					break;
				case "f":
					this.where = liberator.CURRENT_TAB;
					return;
				case "F":
				case "t":
					this.where = liberator.NEW_TAB;
					return;
				case "<Tab>":
				case "j":
				case "<Down>":
				case "<S-Tab>":
				case "k":
				case "<Up>":
					if (key == "j" || key == "<Tab>" || key == "<Down>"){
						currentNum = hints.length -1 == currentNum ? 0 : currentNum + 1;
					} else {
						currentNum = currentNum == 0 ? hints.length -1 : currentNum - 1;
					}
					useShift = true;
					updateSelector();
					return;
				case "l":
					if (hints[currentNum].getAttribute("container") == "true"){
						folderOpen(hints[currentNum]);
					}
					return;
				case "<BS>":
					if (key == "<BS>" && currentNum > 0){
						currentNum = Math.floor(currentNum / 10);
						updateSelector();
						return;
					}
				case "h":
					if (current == this.toolbar){
						closeMenus(current);
						liberator.modules.options.guioptions = this.go;
						this.quit();
					} else {
						current.hidePopup();
						clearTooltips();
						this.show(current.parentNode.parentNode);
					}
					return;
				default:
					if (/^[0-9]$/.test(key)){
						let num = parseInt(key,10);
						if (!useShift && currentNum) num += currentNum * 10;

						if (hints.length >= num*10){
							currentNum = num - 1;
							updateSelector();
							return;
						}
						if (hints[num-1]){
							if (toolbarOpen(hints[num-1])) return;
						}
					}
			}
			liberator.plugins.bookmarkToolbarHints.quit();

		},
		quit: function(){
			currentNum = 0;
			useShift = false;
			window.removeEventListener('keypress',onKeyPress,true);
			liberator.modules.modes.reset(true);
			while (tooltipbox.hasChildNodes()){
				tooltipbox.firstChild.hidePopup();
				tooltipbox.removeChild(tooltipbox.firstChild);
			}
		}
	};
	var tooltipbox = document.createElement('box');
	tooltipbox.setAttribute('id','liberator-tooltip-container');
	//document.getElementById('liberator-container').appendChild(tooltipbox);
	document.getElementById('browser').appendChild(tooltipbox);
	return manager;
})();

liberator.modules.mappings.addUserMap([liberator.modules.modes.NORMAL], ['<Leader>f'],
	'Start Toolbar-HINTS (open current tab)',
	function(){ liberator.plugins.bookmarkToolbarHints.startup(liberator.CURRENT_TAB); },
	{ rhs: 'Bookmarks Toolbar-HINTS (current-tab)'}
);
liberator.modules.mappings.addUserMap([liberator.modules.modes.NORMAL], ['<Leader>F'],
	'Start Toolbar-HINTS (open new tab)',
	function(){ liberator.plugins.bookmarkToolbarHints.startup(liberator.NEW_TAB); },
	{ rhs: 'Bookmarks Toolbar-HINTS (new-tab)' }
);

f='#n87'>87</a>
<a id='n88' href='#n88'>88</a>
<a id='n89' href='#n89'>89</a>
<a id='n90' href='#n90'>90</a>
<a id='n91' href='#n91'>91</a>
<a id='n92' href='#n92'>92</a>
<a id='n93' href='#n93'>93</a>
<a id='n94' href='#n94'>94</a>
<a id='n95' href='#n95'>95</a>
<a id='n96' href='#n96'>96</a>
<a id='n97' href='#n97'>97</a>
<a id='n98' href='#n98'>98</a>
<a id='n99' href='#n99'>99</a>
<a id='n100' href='#n100'>100</a>
<a id='n101' href='#n101'>101</a>
<a id='n102' href='#n102'>102</a>
<a id='n103' href='#n103'>103</a>
<a id='n104' href='#n104'>104</a>
<a id='n105' href='#n105'>105</a>
<a id='n106' href='#n106'>106</a>
<a id='n107' href='#n107'>107</a>
<a id='n108' href='#n108'>108</a>
<a id='n109' href='#n109'>109</a>
<a id='n110' href='#n110'>110</a>
<a id='n111' href='#n111'>111</a>
<a id='n112' href='#n112'>112</a>
<a id='n113' href='#n113'>113</a>
<a id='n114' href='#n114'>114</a>
<a id='n115' href='#n115'>115</a>
<a id='n116' href='#n116'>116</a>
<a id='n117' href='#n117'>117</a>
<a id='n118' href='#n118'>118</a>
<a id='n119' href='#n119'>119</a>
<a id='n120' href='#n120'>120</a>
<a id='n121' href='#n121'>121</a>
<a id='n122' href='#n122'>122</a>
<a id='n123' href='#n123'>123</a>
<a id='n124' href='#n124'>124</a>
<a id='n125' href='#n125'>125</a>
<a id='n126' href='#n126'>126</a>
<a id='n127' href='#n127'>127</a>
<a id='n128' href='#n128'>128</a>
<a id='n129' href='#n129'>129</a>
<a id='n130' href='#n130'>130</a>
<a id='n131' href='#n131'>131</a>
<a id='n132' href='#n132'>132</a>
<a id='n133' href='#n133'>133</a>
<a id='n134' href='#n134'>134</a>
<a id='n135' href='#n135'>135</a>
<a id='n136' href='#n136'>136</a>
<a id='n137' href='#n137'>137</a>
<a id='n138' href='#n138'>138</a>
<a id='n139' href='#n139'>139</a>
<a id='n140' href='#n140'>140</a>
<a id='n141' href='#n141'>141</a>
<a id='n142' href='#n142'>142</a>
<a id='n143' href='#n143'>143</a>
<a id='n144' href='#n144'>144</a>
<a id='n145' href='#n145'>145</a>
<a id='n146' href='#n146'>146</a>
<a id='n147' href='#n147'>147</a>
<a id='n148' href='#n148'>148</a>
<a id='n149' href='#n149'>149</a>
<a id='n150' href='#n150'>150</a>
<a id='n151' href='#n151'>151</a>
</pre></td>
<td class='lines'><pre><code>