1/***
2 *   http://www.page2images.com
3 *
4 *   ************demo start************
5 *   // the first para is apikey, default is free key.
6 *   // the second para is preload, if you want to load images when document load
7 *   // the third para is includeinnerlink, if your screenshots include current domain.
8 *   p2iQuery().run("Free", false, false);
9 *   // Please notice your domain when use YOUR_DIRECTLINK_KEY.
10 *   p2iQuery().run(YOUR_DIRECTLINK_KEY, false, true);
11 *
12 *   Please add below scripts in your html.
13 *   ===========================================================================
14 *   <script type="text/javascript" src="/js/p2i.thumbnails.js"></script>
15 *   <script>
16 *   	window.onload=function() {
17 *   		p2iQuery().run("6b51f3e77d98e07f", false, true);
18 *   		//p2iQuery().run("Free", true, true);
19 *   	};
20 *   </script>
21 *   ===========================================================================
22 *   ************demo end************
23 ***/
24(function () {
25	var p2iQuery = function () {
26		return p2iQuery.fn.init();
27	};
28
29	p2iQuery.fn = p2iQuery.prototype = {
30		p2iQuery: "1.0.0",
31		init: function() {
32			return this;
33		},
34		run: function(apikey, preload, includeinnerlink) {
35			this.apikey = apikey || "Free";
36			this.preload = preload || false;
37			this.includeinnerlink = includeinnerlink || false;
38			this.isonmouseover = true;
39
40			var is_free = apikey == "Free";
41			this.add_page2images_popup(is_free);
42			this.preload_all_a_link_tags();
43		},
44		add_page2images_popup: function(is_free) {
45			if (document.getElementById('page2images_popup') == null) {
46				var p2i_pop = "<div style='border: 1px solid #222222;'><img  id='page2images_img' src='' />";
47				if (is_free) {
48					p2i_pop += '<div style="border-top: 1px solid #222222; padding: 0 3px;  text-align: right;"><a href="http://www.page2images.com" style="color:#222222; font-size:10px;">Website Preview By Page2Images</a></div>';
49				}
50				p2i_pop += "</div>";
51				var elem = document.createElement("div");
52				elem.id = "page2images_popup";
53				elem.style.background = "#FFFFFF";
54				elem.style.display = "none";
55				elem.style.position = "absolute";
56				elem.style.zIndex = 999;
57				elem.style.border = "1px solid #DDDDDD";
58				elem.innerHTML = p2i_pop;
59				document.body.insertBefore(elem, document.body.childNodes[0]);
60			}
61		},
62		verified_href: function(href) {
63			href = href.replace(/[/]$/, '');
64			if (href == document.location.href) {
65				return false;
66			}
67
68			var p2ireg=new RegExp("^javascript");
69			if (p2ireg.test(href)) {
70				return false;
71			}
72
73			if (this.includeinnerlink) {
74				return true;
75			}
76
77			if ((new RegExp("^http[s]?://")).test(href) || (new RegExp("^www")).test(href)) {
78				p2ireg=new RegExp(document.location.hostname);
79				if (p2ireg.test(href)) {
80					return false;
81				} else {
82					return true;
83				}
84			} else {
85				return false;
86			}
87		},
88		get_img_api_url: function(url) {
89			if (!(new RegExp("^http[s]?://")).test(url) && !(new RegExp("^www")).test(url)) {
90				if ((new RegExp("^/")).test(url)) {
91					url = document.location.hostname+url;
92				} else {
93					url = document.location.href + '/' + url;
94				}
95			}
96
97			if (this.apikey == 'Free') {
98				return "http://api.page2images.com/freeimagetag?p2i_visual_link=1&p2i_url=" + url;
99			} else {
100				return "http://api.page2images.com/directlink?p2i_key=" + this.apikey +"&p2i_visual_link=1&p2i_url=" + url;
101			}
102		},
103		setupmouseoverout: function(elem){
104			elem.addEventListener('mouseover', function(evt) {
105				p2iQuery().isonmouseover = true;
106				p2iQuery().current_href = p2iQuery().get_img_api_url(this.href);
107				p2iQuery().evt = evt;
108				p2iQuery().Timer = setTimeout(function(){
109					p2iQuery().isonmouseover = true;
110					if (!p2iQuery().isonmouseover) {
111						return;
112					}
113					var img_src = p2iQuery().current_href;
114					document.getElementById("page2images_img").src= img_src;
115
116					var p2i_popup = document.getElementById("page2images_popup");
117					p2i_popup.style.display='block';
118					var evt = p2iQuery().evt;
119					var pleft = evt.clientX + 15;
120
121					var sp = document.body.scrollTop ||document.documentElement.scrollTop;
122					var ptop = evt.clientY + sp + 15;
123
124					if (pleft + p2i_popup.offsetWidth > window.innerWidth) {
125						pleft = pleft - p2i_popup.offsetWidth - 30;
126					}
127
128					p2i_popup.style.left=pleft + 'px';
129					p2i_popup.style.top= ptop + 'px';
130					p2iQuery().isonmouseover = false;
131				}, 500);
132			});
133			elem.onmouseout = function(evt) {
134				p2iQuery().isonmouseover = false;
135				clearTimeout(p2iQuery().Timer);
136				document.getElementById("page2images_popup").style.display = 'none';
137				document.getElementById("page2images_img").src = '';
138			};
139		},
140		preload_all_a_link_tags: function() {
141			var all_alinks = document.getElementsByTagName("a");
142			var preload_count = 0;
143			for (var i=0;i<all_alinks.length;i++) {
144				if (this.verified_href(all_alinks[i].href)) {
145					this.setupmouseoverout(all_alinks[i]);
146					if (this.preload && preload_count < 5) {
147						preload_count ++;
148						var elem = document.createElement("img");
149						elem.src = this.get_img_api_url(all_alinks[i].href);
150						elem.style = "display:none;";
151						document.body.insertBefore(elem, document.body.childNodes[0]);
152					}
153				}
154			}
155		},
156	};
157	window.p2iQuery = p2iQuery;
158})();
159p2iQuery().run("Free", false, false);