/*!

* by zhangxinxu(.com) 2017-05-18

* 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件

* 兼容到IE8+

* MIT使用协议，使用时候保留版权

* 更多原理和使用说明参见：http://www.zhangxinxu.com/wordpress/?p=6171

*/

$.guide = function (options) {

	var defaults = {

		selector: '',  // 页面提示元素选择器物，会使用匹配的第一个元素

		content: '',  // 提示内容可是是字符串，也可以是jQuery包装器对象

		align: 'center', // center, right,

		offset: {

			x: 0,

			y: 0

		}

	};

	// options格式

	/* [{

		selector: '',

		content: '',

		align: 'left',

		offset: {

			x: 0,

			y: 0

		}

	}]

	*/

	var urlRoot = location.href.split('#')[0].replace(/\W/g, '') + 'Guide';

	// 如果要调试，最后的== '1'改成'2'就好了

	if (!window.localStorage || !options || !$.isArray(options) || localStorage[urlRoot] == '1') {

		return;

	}

	// 创建层

	var elGuideOverlay = $('#guideOverlay');

	var elGuideShut = $('#guideShut');

	var elGuide = $('#guideOverlap');

	var start = 0;

	var remove = function () {

		elGuideOverlay.remove();

		elGuideShut.remove();

		elGuide.remove();

		// 键盘事件移除

		$(document).off('keydown.guide');

		$(window).off('resize.guide');

	};

	var goto = function (change) {

		start = start + change;

		if (start < 0) {

			start = 0;

		}

		if (!options[start]) {

			remove();

			return;

		}

		var data = $.extend({}, defaults, options[start]);

		// 获取元素

		var elTrigger = $(data.selector).eq(0);

		if (elTrigger.length == 0 && change) {

			goto(change);

			return;

		}

		// 装载对应提示内容

		elGuide.empty();

		var elGuideContent = $('<div></div>').css({

			display: 'none',

			position: 'absolute'

		}).append(data.content);

		elGuide.append(elGuideContent);

		// 定位

		elGuide.css({

			width: elTrigger.outerWidth(),

			height: elTrigger.outerHeight(),

			left: elTrigger.offset().left,

			top: elTrigger.offset().top

		});

		// 提示内容定位

		elGuideContent.css({

			top: elTrigger.outerHeight() - 5 + data.offset.y

		});

		if (data.align == 'left') {

			elGuideContent.css({

				left: data.offset.x

			});

		} else if (data.align == 'right') {

			elGuideContent.css({

				right: data.offset.x

			});

		} else {

			elGuideContent.css({

				left: (elTrigger.outerWidth() - elGuideContent.width()) / 2 + data.offset.x

			});

		}

		setTimeout(function () {

			elGuideContent.show();

		}, history.pushState? 100: 0);

	};

	if (!elGuideOverlay.length) {

		elGuideOverlay = $('<a id="guideOverlay" href="javascript:" role="button"></a>').css({

			position: 'fixed',

			left: 0,

			top: 0,

			right: 0,

			bottom: 0,

			background: 'url(about:blank)',

			zIndex: 99,

			outline: 'none'

		});

		if (history.pushState) {

			elGuideOverlay.css('background', 'linear-gradient(to top, transparent, transparent)');

		}

		elGuideShut = $('<a href="javascript:" id="guideShut" role="button">关闭</a>').css({

			position: 'fixed',

			top: 10,

			right: 10,

			color: '#fff',

			zIndex: 100

		});;

		elGuide = $('<div id="guideOverlap"></div>').css({

			position: 'absolute',

			transition: 'all .3s',

			boxShadow: '0 0 0 9999px rgba(0,0,0,.75)',

			// 如果想支持圆角，下面的注释

			// borderRadius: '50%',

			zIndex: 100

		});

		if (![].map) {

			// IE8浏览器

			elGuide.css('outline', '9999px solid #000').css('filter', 'alpha(opacity=75)');

		}

		$(document.body).append(elGuideOverlay).append(elGuide).append(elGuideShut);

		// 事件

		elGuideShut.on('click', function () {

			remove();

		});

		// 翻页

		elGuideOverlay.on({

			click: function () {

				goto(1);

			}

		});

		$(document).on('keydown.guide', function (event) {

			var keycode = {

				37: 'left',

				38: 'up',

				39: 'right',

				40: 'down',

				27: 'esc'

			};

			switch (keycode[event.keyCode]) {

				case 'esc': {

					remove();

					break;

				}

				case 'up': case 'left': {

					goto(-1);

					event.preventDefault();

					break;

				}

				case 'right': case 'down': {

					goto(1);

					event.preventDefault();

					break;

				}

			}

		});

		$(window).on('resize.guide', function () {

			goto(0);

		});

	}

	goto(0);

	elGuideOverlay[0].focus();

	localStorage[urlRoot] = '1';

};