// ==UserScript==
// @name        Bing Search AutoPager
// @author      Crab
// @namespace   autopager@bing.com
// @description 必应自动翻页，网站预览图。
// @include     /^https?:\/\/[^\.]+\.bing\.com\/search\?.*/
// @version     0.3
// @grant       none
// @downloadURL none
// ==/UserScript==

var loadingBar = null,
	scrollTimeout = null,
	originList = document.querySelectorAll('#b_results>li'),//初始页列表
	currentList = document.getElementsByClassName('b_algo'),//结果列表，live HTMLCollection
	resultsLength = currentList.length,
	queryString = location.search.match(/q=[^&]+/)[0],
	pageNum = Math.floor(((location.search.match(/&first=(\d+)/) || [0, 0])[1] - 0) / resultsLength + 1); //初始页码

var cE = function(name, attr, parent){
	var e = document.createElement(name);
	for (let i in attr || []) 
		i == 'text' ? (e.textContent = attr[i]) : e.setAttribute(i, attr[i]);
	parent && (Array.isArray(parent) ? 
		parent[0].insertBefore(e, parent.length == 2 ? parent[1] : parent[0].firstChild) : 
		parent.appendChild(e));
	return e;
}, addPreviews = function(list){
	[].forEach.call(list, function(li){
		var match = li.querySelector('h2>a').href.match(/https?:\/\/([^\/]+)/);
		cE('img', {alt: 'Preview', align: 'left', src: 'https://'+ match[1].charAt(0) + '.searchpreview.de/preview?s='+ match[0] +'&ra=0'}, [li]);
	});
}, toggleLoadingBar = function(show){
	(loadingBar || (loadingBar = cE('div', {id:'loadingBar', class: 'loader more'}, cE('li', null, [currentList[0].parentNode, currentList[0].parentNode.lastElementChild.previousElementSibling]))))
		.classList[show ? 'add' : 'remove']('loading');
}, getNextPageData = function(url, callback){
	var req = new XMLHttpRequest();
	req.open('GET', url, true);
	req.send();
	req.onload = function(){
		callback((new DOMParser()).parseFromString(req.responseText, 'text/html'));
	};
}, nextPage = function(){
	toggleLoadingBar(true);
	var url = 'search?pc=MOZI&first='+ (pageNum * resultsLength + 1) + '&' + queryString;
	getNextPageData(url, function(doc){
		//修复自带预览图
		[].forEach.call(doc.querySelectorAll('body>script:not([src]):not([data-rms])'), function(s){
			var match = s.textContent.match(/x=_ge\('(emb\d+)'\);if\(x\)\{x\.src='(data:image[^']+)/);
			if(match) doc.getElementById(match[1]).src = match[2];
		});
		var df = document.createDocumentFragment(),
			last = currentList[currentList.length - 1];
		[].forEach.call(doc.querySelectorAll('#b_results>.b_algo'), df.appendChild.bind(df));
		//添加预览图
		addPreviews(df.children);
		//往最后结果后面插入
		last.parentNode.insertBefore(df, last.nextElementSibling);
		//替换新页码
		var pageNumMenu = doc.getElementById('b_results').lastElementChild;
		last.parentNode.replaceChild(pageNumMenu, last.parentNode.lastElementChild);
		//更新地址
		history.pushState({}, doc.title, url);
		toggleLoadingBar();
		if(!pageNumMenu.querySelector('nav[role="menu"]') ||
			pageNumMenu.querySelector('nav>ul>li:last-of-type>a:not([href])'))
			return removeEventListener('scroll', onScroll); //最后一页
		pageNum++;
	});
}, onResize = function(){
	var b_context = document.getElementById('b_context'), //右侧栏高度
		li_ch = 0, //第一页搜索项累计高
		isMaxWidth = document.documentElement.clientWidth < 800;
	b_context.classList[isMaxWidth ? 'remove' : 'add']('b_resize');
	b_context.style.width = isMaxWidth ? 'auto' : '250px';
	[].forEach.call(originList, function(li){
		li.style.width = (li_ch < b_context.clientHeight) ? (isMaxWidth ? '' : 'calc(90% - '+ b_context.clientWidth +'px)') : '';
		li_ch += li.clientHeight;
	});
}, onScroll = function(){
	clearTimeout(scrollTimeout);
	scrollTimeout = setTimeout(function(){
		var de = document.documentElement;
		de.scrollTop + de.clientHeight > de.scrollHeight - 5 && nextPage();
	}, 300);
};

cE('style', {text: (function(){/*
	#b_content{
		padding: 0px 0px 20px 5%!important;
	}
	#b_results{
		width:95%;
	}
	.b_navbar {
		width: auto!important;
	}
	#b_context.b_resize {
		position: absolute;
		right: 5%;
	}

	// 序号
	body {
		counter-reset: resultNum;
		min-width: 600px!important;
	}
	#b_results .b_algo h2::before{
		content: counter(resultNum) ". ";
		counter-increment: resultNum;
		color: #000 !important;
	}

	.b_algo .b_title .b_imagePair, .b_ans .b_title .b_imagePair {
		display: block;
	}
	.b_algo>img{
		width:111px;
		height:82px;
		border: 1px solid #BBB;
		margin: 2px 4px 5px 0px;
	}
	.b_algo>.b_title, .b_algo>.b_caption{
		text-overflow: ellipsis;
		overflow: hidden;
	}

	#loadingBar:not(.loading){
		display:none;
	}
	// http://codepen.io/scrapmac/pen/IJbBD
	.loader, .loader:before, .loader:after {
		display: inline-block;
		width: 70%;
		height: 10px;
		position: absolute;
		z-index: 100000;
		animation: loading 4s cubic-bezier(.1, .85, .9, .15) infinite, loading-opacity 2s ease-in-out infinite alternate;
		background: linear-gradient(to right, #39F 0px, #39F 10px, transparent 10px) no-repeat 0px 0px / 10px 10px;
		content:' ';
	}
	.loader {
		animation-delay: .1s;
	}
	.loader:after {
		animation-delay: .2s;
	}
	@keyframes loading-opacity {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes loading {
		0% {
			background-position: -50% 0px;
		}
		100% {
			background-position: 150% 0px;
		}
	}
	// 2 more loading blocks
	.loader.more:before, .loader.more:after {
		content:' ■';
		color: #39F;
		top: 0;
		line-height: 6px;
		font-size: 22px;
		font-family:"Times New Roman";
		vertical-align: top;
		animation: loading 4s cubic-bezier(.1, .85, .9, .15) infinite, loading-font 4s cubic-bezier(.1, .85, .9, .15) infinite !important;
	}
	.loader.more:before {
		animation-delay: 0s, .2s !important;
	}
	.loader.more {
		overflow: hidden;
		opacity: 0;
		animation: loading 4s cubic-bezier(.1, .85, .9, .15) infinite, loading-opacity 2s ease-in-out infinite alternate;
		animation-delay: .6s, .4s !important;
	}
	.loader.more:after {
		animation-delay: .4s, .8s !important;
	}
	@keyframes loading-font {
		0% {
			text-indent: calc(-50% - 5px);
		}
		100% {
			text-indent: calc(150% - 10px);
		}
	}
*/}).toString().replace(/^.*|\/\/.*|.*\}$/g, '')}, document.head);

//noreferrer
cE('meta', {name: 'referrer', content: 'never'}, document.head);
//第一页预览
addPreviews(currentList);
onResize();
addEventListener('resize', onResize);
addEventListener('scroll', onScroll);