// ==UserScript==
// @name         elegant alert()
// @namespace    http://tampermonkey.net/
// @version      1.01
// @description  Customized alert box at the top right corner, auto close in a few seconds. Click on the alert box will close it immediately and copy the alert message to clipboard.
// @author       Evan Tseng
// @include      http://*
// @include      https://*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
	'use strict';

	const boxFont = '400 13pt sans-serif',
		  boxFontColor = '#024',
		  boxColor = 'rgba(240,240,210,.8)',
		  boxHoverColor = 'rgba(250,250,220,.9)',
		  popColor = '#F44',
		  countdownColor1 = '#48c',
		  countdownColor2 = '#d60',
		  duration = 6000;

	var alertWrap=null;
	var ElegantAlertBoxWrapper=function(msg){
		this.exist=true;
		this.createBox = function(text){
			var box=this,
				alBox=document.createElement('div');
			alBox.innerHTML=text + '<div class="bar"></div>';
			alBox.onclick=function(){
				window.Clipboard.copy(text);
				box.close();
			};
			return alBox;
		};
		this.show=function(){
			var box=this;
			setTimeout(function(){
				box.elm.setAttribute("class","normal");
				setTimeout(function(){
					if(box.exist)	box.close();
				}, duration);
			},30);
		};
		this.close=function(){
			var box=this;
			box.elm.setAttribute("class","close");
			setTimeout(function(){
				if(box.exist) {
					alertWrap.removeChild(box.elm);
					box.exist=false;
				}
			}, 800);
		};
		this.elm=this.createBox(msg);
		alertWrap.appendChild(this.elm);
		this.show();
		return this.elm;
	};

	window.Clipboard = (function(window, document, navigator) {
		var textArea,
			copy;
		function isOS() {
			return navigator.userAgent.match(/ipad|iphone/i);
		}
		function createTextArea(text) {
			textArea = document.createElement('textArea');
			textArea.value = text;
			document.body.appendChild(textArea);
		}
		function selectText() {
			var range,
				selection;
			if (isOS()) {
				range = document.createRange();
				range.selectNodeContents(textArea);
				selection = window.getSelection();
				selection.removeAllRanges();
				selection.addRange(range);
				textArea.setSelectionRange(0, 999999);
			} else {
				textArea.select();
			}
		}
		function copyToClipboard() {
			document.execCommand('copy');
			document.body.removeChild(textArea);
		}
		copy = function(text) {
			createTextArea(text);
			selectText();
			copyToClipboard();
		};
		return {
			copy: copy
		};
	})(window, document, navigator);

	window.alert=function(message){
		if(!alertWrap) {
			const css='.elegantAlertBoxWrapper { position:fixed; top:8mm; right:10mm; max-width:40vw; text-align:right; z-index:2147483647; -webkit-user-select:none; user-select:none }'+
				'.elegantAlertBoxWrapper>div { position:relative; font:'+ boxFont +'; color:'+ boxFontColor +'; background:'+ popColor +'; max-height:0; overflow:hidden; padding:.15em .5em; margin-bottom: 1.5mm; border-radius:2mm; opacity:0; cursor:pointer; box-shadow: 0 0 0 1px #aa8, 0 1px 2px #aaa; }'+
				'.elegantAlertBoxWrapper>div>.bar { position: absolute; left:0; bottom:1px; width:100%; height:2px; background:'+countdownColor1+' }'+
				'.elegantAlertBoxWrapper>div.normal { background:'+ boxColor +'; opacity: 1; max-height: 5em; transition:max-height .1s, opacity .1s, background .1s 60ms }'+
				'.elegantAlertBoxWrapper>div.normal>.bar, .elegantAlertBoxWrapper>div.close>.bar { background: '+countdownColor2+'; width:0; transition:'+(duration-30)+'ms linear}'+
				'.elegantAlertBoxWrapper>div.close { background:'+ boxColor +'; opacity: 0; max-height: 0; padding:0 .5em; margin-bottom: 0; transition: all .8s }'+
				'.elegantAlertBoxWrapper>div:hover { background:'+ boxHoverColor +'; box-shadow:0 0 0 1px #aa8, 0 1px 2px #777 }'+
				'.elegantAlertBoxWrapper>div:active { box-shadow:0 0 0 1px #aa8, inset 0 1px 2px #777 }',
				cssStyle=document.createElement('style');
			if(cssStyle.styleSheet)	cssStyle.styleSheet.cssText=css;
			else	cssStyle.appendChild(document.createTextNode(css));
			document.querySelector('head').appendChild(cssStyle);

			alertWrap=document.createElement('div');
			document.body.appendChild(alertWrap);
			alertWrap.setAttribute("class","elegantAlertBoxWrapper");
		}
		var alertBox = new ElegantAlertBoxWrapper(message);
	};

})();