├── LICENSE
├── README.md
├── instano.js
└── instano.hack.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2013 Antony Lau and Zbyszek Tenerowicz
 2 | 
 3 | Permission is hereby granted, free of charge, to any person
 4 | obtaining a copy of this software and associated documentation
 5 | files (the "Software"), to deal in the Software without
 6 | restriction, including without limitation the rights to use,
 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the
 9 | Software is furnished to do so, subject to the following
10 | conditions:
11 | 
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | instano
 2 | =======
 3 | 
 4 | instano.js - Instant NoScript Detection
 5 | 
 6 | > instano.js is in Alpha stage. Development use only.
 7 | 
 8 | instano.js allows you to instantly detect if JavaScript is disabled after the page is loaded. It modifies the standard `<noscript>` tags so that the messages inside can be shown immediately whenever JavaScript is disabled.
 9 | 
10 | A CSS animation is used to display the message and a `setInterval` continuously stops the animation. Once JavaScript is disabled, the animation kicks in and the message is shown.
11 | 
12 | Also, callback functions can be applied upon reenabling of JavaScript.
13 | 
14 | See it in action: http://laucheukhim.github.io/instano/
15 | 
16 | ## Basic Usage
17 | 
18 |     instano();
19 |     
20 | This tells instano.js to search for all the `<noscript>` tags on a page and convert them to instant noscript messages.
21 | 
22 | ### Select elements
23 | 
24 | To specify the elements for processing, pass the element (or its id) or an array of elements (or their ids) as the parameter of `instano()`. 
25 |     
26 |     instano({
27 |     	indicator:<element>
28 |     	});
29 | 
30 | 	instano({
31 |     	indicator:<array of elements>
32 |     	});
33 | 
34 | 
35 | 
36 | Make sure the elements contain at least one pair of `<noscript>` tags so that the message shows correctly when the page is first loaded with JavaScript disabled.
37 | 
38 |     <div id="nojs1"><noscript>First message</noscript></div>
39 |     <div id="nojs2"><noscript>Second message</noscript></div>
40 | 
41 | - `instano({
42 |     	indicator:document.getElementById("nojs1")
43 |     });` applies only to the first message.
44 | - `instano({
45 |     	indicator:["nojs1","nojs2"]
46 |     });` applies to both of the messages.
47 | 
48 | ### Modify frequency and style
49 | 
50 | To specify the detection frequency and the display style of the messages, provide the following parameters for `init()`:
51 | 
52 |     instano({
53 | 		interval:<detect each X miliseconds>,
54 | 		displayStyle:<style>
55 |     	});
56 | 
57 | - `instano({
58 | 		interval:50,
59 | 		displayStyle:"block"
60 |     	});` converts all the `<noscript>` tags into instant noscript messages with a detection frequency of 50ms and a CSS style of `display: block`.
61 | - The default values are 100ms and `display: inline-block` respectively.
62 | - Allowed values for interval: numbers above 0 (small values are CPU intensive. Choose it wisely)
63 | - Allowed values for style: "block", "inline-block"
64 | 
65 | ## Callback Function 
66 | 
67 |     instano({
68 |     	reenabledCallback:function(){}
69 |     	})
70 | 
71 | This tells instano.js to run a function when JavaScript is reenabled.
72 | 
73 | ### Hackers' edition (instano.hack.js)
74 | 
75 | Callback functions can be applied upon both disabling and reenabling of JavaScript by taking advantage of `requestAnimationFrame` to keep JavaScript running.
76 | 
77 |     instano({
78 |         disabledCallback:function(){},
79 |         [disabledCallbackDelay: <setTimeout or setInterval>,]
80 |         [disabledCallbackDuration: <duration in miliseconds>,]
81 |         reenabledCallback:function(){}
82 |         })
83 | 
84 | This tells instano.hack.js to run a function when JavaScript is disabled and/or reenabled. The disabled callback function runs immediately after JavaScript is disabled. You can also run it after a delay or set it to run in repeating intervals by passing relevant parameters to disabledCallbackDelay and disabledCallbackDuration.
85 | 


--------------------------------------------------------------------------------
/instano.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * instano.js - Instant NoScript Detection
  3 |  *
  4 |  * authors: Antony Lau and Zbyszek Tenerowicz
  5 |  * email: instano.js@gmail.com
  6 |  * license : MIT
  7 |  */
  8 | 
  9 |  var instano = (function (settings) {
 10 |  	"use strict";
 11 | 
 12 |  	settings || (settings = {});
 13 | 
 14 |     settings.interval || (settings.interval = 100); // rejects 0
 15 | 	(settings.displayStyle && settings.displayStyle === "block") || (settings.displayStyle = "inline-block");
 16 | 	settings.indicator || (settings.indicator = false);
 17 | 	//settings.reenabledCallback
 18 | 
 19 | /* Testing for CSS animation support 
 20 | ***************************************************************************/
 21 | 
 22 | 	var isAnimationSupported = false,
 23 | 	domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
 24 | 	testel = document.createElement('div');
 25 | 
 26 | 	if(typeof testel.style.animationName !== "undefined") { isAnimationSupported = true; }    
 27 | 
 28 | 	if( isAnimationSupported === false ) {
 29 | 		for( var i = 0; i < domPrefixes.length; i++ ) {
 30 | 			if( typeof testel.style[ domPrefixes[i] + 'AnimationName' ] !== "undefined" ) {
 31 | 				isAnimationSupported = true;
 32 | 				break;
 33 | 			}
 34 | 		}
 35 | 	}
 36 | 
 37 | /* Detect if JavaScript is reenabled
 38 | ***************************************************************************/
 39 | 	var t1 = Date.now(),
 40 | 		t1p = t1,
 41 | 		dd = 0;
 42 | 	
 43 | 	// Detect if timestamp is updated with setInterval (resume upon reenabling)
 44 | 	function t1check() {
 45 | 		dd = t1 === t1p ? dd+1 : 0;
 46 | 		if (dd >= 4) {
 47 | 			// JavaScript is reenabled
 48 | 			dd = 0;
 49 | 			if (typeof settings.reenabledCallback === "function") settings.reenabledCallback(); // apply callback
 50 | 			setTimeout(function(){t1update()}, 40); // restart update
 51 | 		}
 52 | 		t1p = t1;
 53 | 	}
 54 | 	setInterval(function(){t1check()}, 100);
 55 | 	
 56 | 	// Update timestamp with setTimeout (does not resume upon reenabling)
 57 | 	function t1update() {
 58 | 		t1 = Date.now();
 59 | 		setTimeout(function(){t1update()}, 40);
 60 | 	}
 61 | 	setTimeout(function(){t1update()}, 40);
 62 | 
 63 | /* Create the CSS animation class
 64 | ***************************************************************************/
 65 | 	if (isAnimationSupported) {
 66 | 		var css = 
 67 | 		'.nojs_init { position:relative; display:inline-block; vertical-align:top; animation:nojs-animation 0.2s step-end; -moz-animation:nojs-animation 0.2s step-end; -webkit-animation:nojs-animation 0.2s step-end;  -o-animation:nojs-animation 0.2s step-end; } ' + 
 68 | 		'@keyframes nojs-animation { from {width:0px;height:0px;visibility:hidden;opacity:0;} to {width:1px;height:1px;visibility:visible;opacity:1;} } ' + 
 69 | 		'@-moz-keyframes nojs-animation { from {width:0px;height:0px;visibility:hidden;opacity:0;} to {width:1px;height:1px;visibility:visible;opacity:1;} } ' + 
 70 | 		'@-webkit-keyframes nojs-animation { from {width:0px;height:0px;visibility:hidden;opacity:0;} to {width:1px;height:1px;visibility:visible;opacity:1;} } ' + 
 71 | 		'@-o-keyframes nojs-animation { from {width:0px;height:0px;visibility:hidden;opacity:0;} to {width:1px;height:1px;visibility:visible;opacity:1;} }';
 72 | 		if ('\v' == 'v') /* ie only */ {
 73 | 			document.createStyleSheet().cssText = css;
 74 | 		}
 75 | 		else {
 76 | 			var style = document.createElement('style');
 77 | 			style.type = 'text/css';
 78 | 			style.innerHTML = css;
 79 | 			document.getElementsByTagName('head')[0].appendChild(style);
 80 | 		}
 81 | 
 82 | 	    //start working immediately
 83 | 	    init(settings.indicator);
 84 | 	}
 85 | 
 86 | 
 87 | 	// Check if object o is a DOM element
 88 | 	function isElement(o){
 89 | 		return (
 90 | 			typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
 91 | 			o && typeof o === "object" && o.nodeType === 1 && typeof o.nodeName==="string"
 92 | 		);
 93 | 	}
 94 | 
 95 | 	//inits
 96 | 	function init(el){
 97 | 		if (!el) {
 98 | 	        // Find all the noscript tags
 99 | 	        var nos = document.getElementsByTagName("noscript");
100 | 	    } else if (Object.prototype.toString.call(el) === "[object Array]") {
101 | 	    	var nos = [];
102 | 	    	for (var i = 0; i < el.length; i++) {
103 | 	    		if (isElement(el[i])) {
104 | 	    			var nosj = el[i].getElementsByTagName("noscript");
105 | 	    			for (var j in nosj) {
106 | 	    				if (isElement(nosj[j])) nos.push(nosj[j]);
107 | 	    			}
108 | 	    		} else if (document.getElementById(el[i])) {
109 | 	    			var nosj = document.getElementById(el[i]).getElementsByTagName("noscript");
110 | 	    			for (var j in nosj) {
111 | 	    				if (isElement(nosj[j])) nos.push(nosj[j]);
112 | 	    			}
113 | 	    		}
114 | 	    	}
115 | 	    } else if (isElement(el)) {
116 | 	        // Find the noscript tags within an element
117 | 	        var nos = el.getElementsByTagName("noscript");
118 | 	    } else if (document.getElementById(el)) {
119 | 	    	var nos = document.getElementById(el).getElementsByTagName("noscript");
120 | 	    }
121 | 	    var elreplace = {};
122 | 	    if (nos) {
123 | 	    	for (var i = 0; i < nos.length; i++) {
124 | 	    		var newone = document.createElement('div');
125 | 	    		newone.id = "jsdetect_" + i;
126 | 	    		newone.className = "nojs_init";
127 | 	    		newone.style.display = settings.displayStyle;
128 | 	    		newone.innerHTML = nos[i].textContent;
129 | 	    		elreplace[i] = {
130 | 	    			parent: nos[i].parentNode,
131 | 	    			newel: newone,
132 | 	    			original: nos[i]
133 | 	    		};
134 | 	    	}
135 | 	    	for (var i in elreplace) {
136 | 	            // Replace noscript with span
137 | 	            elreplace[i].parent.replaceChild(elreplace[i].newel, elreplace[i].original);
138 | 	        }
139 | 	        // Continuously replace element to stop animation
140 | 	        setInterval(function() {
141 | 	        	for (var i in elreplace) {
142 | 	        		var el = document.getElementById(elreplace[i].newel.id);
143 | 	        		var newone = el.cloneNode(true);
144 | 	        		el.parentNode.replaceChild(newone, el);
145 | 	        	}
146 | 	        }, settings.interval);
147 |             // Bug fix for #3
148 |             // Stop noscript tags from showing up in Firefox while reloading
149 |             window.addEventListener("beforeunload", function() {
150 |                 // Hide all the noscript tags since in Firefox JavaScript will
151 |                 // stop running momentarily before the page is reloaded
152 |                 for (var i in elreplace) {
153 |                     var el = document.getElementById(elreplace[i].newel.id);
154 |                     el.style.display = "none";
155 |                 }
156 |                 // But in case the user canceled the reload in the onbeforeunload
157 |                 // prompt, restore the noscript tags so they will work again
158 |                 // Use two timeouts to detect cancellation. The first timeout will
159 |                 // not fire until the prompt is dismissed and the second timeout
160 |                 // will only fire when the prompt is cancelled.
161 |                 setTimeout(function() {
162 |                     setTimeout(function() {
163 |                         for (var i in elreplace) {
164 |                             var el = document.getElementById(elreplace[i].newel.id);
165 |                             el.style.display = settings.displayStyle;
166 |                         }
167 |                     }, 0);
168 |                 }, 0);
169 |             });
170 | 	    }
171 | 	}
172 | 	//init-end
173 | 
174 | });


--------------------------------------------------------------------------------
/instano.hack.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * instano.hack.js - Instant NoScript Detection [hackers' edition]
  3 |  *
  4 |  * authors: Antony Lau and Zbyszek Tenerowicz
  5 |  * email: instano.js@gmail.com
  6 |  * license : MIT
  7 |  */
  8 | 
  9 |  var instano = (function (settings) {
 10 |  	"use strict";
 11 | 
 12 |  	settings || (settings = {});
 13 | 
 14 |     settings.interval || (settings.interval = 100); // rejects 0
 15 | 	(settings.displayStyle && settings.displayStyle === "block") || (settings.displayStyle = "inline-block");
 16 | 	settings.indicator || (settings.indicator = false);
 17 | 	//settings.reenabledCallback
 18 | 	//settings.disabledCallback
 19 | 	(settings.disabledCallbackDelay === "setTimeout" || settings.disabledCallbackDelay === "setInterval") || (settings.disabledCallbackDelay = false);
 20 | 	(typeof settings.disabledCallbackDuration === "number" && settings.disabledCallbackDuration >= 0) || (settings.disabledCallbackDuration = false);
 21 | 
 22 | /* Testing for CSS animation support 
 23 | ***************************************************************************/
 24 | 
 25 | 	var isAnimationSupported = false,
 26 | 	domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
 27 | 	testel = document.createElement('div');
 28 | 
 29 | 	if(typeof testel.style.animationName !== "undefined") { isAnimationSupported = true; }    
 30 | 
 31 | 	if( isAnimationSupported === false ) {
 32 | 		for( var i = 0; i < domPrefixes.length; i++ ) {
 33 | 			if( typeof testel.style[ domPrefixes[i] + 'AnimationName' ] !== "undefined" ) {
 34 | 				isAnimationSupported = true;
 35 | 				break;
 36 | 			}
 37 | 		}
 38 | 	}
 39 | 
 40 | /* Detect if JavaScript is disabled and reenabled (not supported by Opera)
 41 | ***************************************************************************/
 42 | 
 43 | 	//requestAnimationFrame crossbrowser
 44 | 	var reqFrame = (function() {
 45 | 		var lastTime = 0, 
 46 | 		vendors = ['ms', 'moz', 'webkit', 'o'],
 47 | 		reqFrame = window.requestAnimationFrame;
 48 | 
 49 | 		for(var x = 0; x < vendors.length && !reqFrame; ++x) {
 50 | 			reqFrame = window[vendors[x]+'RequestAnimationFrame'];
 51 | 		}
 52 | 
 53 | 		if (!reqFrame){
 54 | 			reqFrame = function(callback, element) {
 55 | 				var currTime = Date.now();
 56 | 				var timeToCall = Math.max(0, 16 - (currTime - lastTime));
 57 | 				var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
 58 | 					timeToCall);
 59 | 				lastTime = currTime + timeToCall;
 60 | 				return id;
 61 | 			};
 62 | 		}
 63 | 
 64 | 		return reqFrame;
 65 | 	})();
 66 | 
 67 | 	var continuousTime = Date.now(), javascriptTime = Date.now(), reportStatus = true, 
 68 | 	disabledDuration = 0, executeTimeout = false, executeInterval = false, executeTime;
 69 | 
 70 | 	function step(timestamp) {
 71 | 		continuousTime = Date.now();
 72 | 		if (reportStatus) {
 73 | 			if ((continuousTime - javascriptTime) >= 500) {
 74 | 				disabledDuration++;
 75 | 				if (disabledDuration > 10) {
 76 | 	                // JavaScript is disabled
 77 | 	                if (typeof settings.disabledCallback === "function") {
 78 | 	                	if (settings.disabledCallbackDelay !== false && settings.disabledCallbackDuration !== false) {
 79 | 	                		if (settings.disabledCallbackDelay === "setTimeout") executeTimeout = true;
 80 | 	                		if (settings.disabledCallbackDelay === "setInterval") executeInterval = true;
 81 | 	                		executeTime = continuousTime + settings.disabledCallbackDuration;
 82 | 	                	} else {
 83 | 	                		settings.disabledCallback();
 84 | 	                	}
 85 | 	                }
 86 | 	                reportStatus = false;
 87 | 	            }
 88 | 	        }
 89 | 	    } else {
 90 | 	    	if ((continuousTime - javascriptTime) < 500) {
 91 | 	            // JavaScript is reenabled
 92 | 	            if (typeof settings.reenabledCallback === "function") {
 93 | 	            	settings.reenabledCallback();
 94 | 	            }
 95 | 	            disabledDuration = 0;
 96 | 	            executeTimeout = false;
 97 | 	            executeInterval = false;
 98 | 	            reportStatus = true;
 99 | 	        }
100 | 	    }
101 | 	    if (executeTimeout) {
102 | 	    	if (continuousTime >= executeTime) {
103 | 	    		settings.disabledCallback();
104 | 	    		executeTimeout = false;
105 | 	    	}
106 | 	    }
107 | 	    if (executeInterval) {
108 | 	    	if (continuousTime >= executeTime) {
109 | 	    		settings.disabledCallback();
110 | 	    		executeTime = continuousTime + settings.disabledCallbackDuration;
111 | 	    	}
112 | 	    }
113 | 	    reqFrame(step);
114 | 	}
115 | 	//initialize 
116 | 	reqFrame(step);
117 | 
118 | 	// standard reference timestamp
119 | 	setInterval(function() {
120 | 		javascriptTime = Date.now();
121 | 	}, 16);
122 | 
123 | /* Create the CSS animation class
124 | ***************************************************************************/
125 | 	if (isAnimationSupported) {
126 | 		var css = 
127 | 		'.nojs_init { position:relative; display:inline-block; vertical-align:top; animation:nojs-animation 0.2s step-end; -moz-animation:nojs-animation 0.2s step-end; -webkit-animation:nojs-animation 0.2s step-end;  -o-animation:nojs-animation 0.2s step-end; } ' + 
128 | 		'@keyframes nojs-animation { from {width:0px;height:0px;visibility:hidden;opacity:0;} to {width:1px;height:1px;visibility:visible;opacity:1;} } ' + 
129 | 		'@-moz-keyframes nojs-animation { from {width:0px;height:0px;visibility:hidden;opacity:0;} to {width:1px;height:1px;visibility:visible;opacity:1;} } ' + 
130 | 		'@-webkit-keyframes nojs-animation { from {width:0px;height:0px;visibility:hidden;opacity:0;} to {width:1px;height:1px;visibility:visible;opacity:1;} } ' + 
131 | 		'@-o-keyframes nojs-animation { from {width:0px;height:0px;visibility:hidden;opacity:0;} to {width:1px;height:1px;visibility:visible;opacity:1;} }';
132 | 		if ('\v' == 'v') /* ie only */ {
133 | 			document.createStyleSheet().cssText = css;
134 | 		}
135 | 		else {
136 | 			var style = document.createElement('style');
137 | 			style.type = 'text/css';
138 | 			style.innerHTML = css;
139 | 			document.getElementsByTagName('head')[0].appendChild(style);
140 | 		}
141 | 
142 | 	    //start working immediately
143 | 	    init(settings.indicator);
144 | 	}
145 | 
146 | 
147 | 	// Check if object o is a DOM element
148 | 	function isElement(o){
149 | 		return (
150 | 			typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
151 | 			o && typeof o === "object" && o.nodeType === 1 && typeof o.nodeName==="string"
152 | 		);
153 | 	}
154 | 
155 | 	//inits
156 | 	function init(el){
157 | 		if (!el) {
158 | 	        // Find all the noscript tags
159 | 	        var nos = document.getElementsByTagName("noscript");
160 | 	    } else if (Object.prototype.toString.call(el) === "[object Array]") {
161 | 	    	var nos = [];
162 | 	    	for (var i = 0; i < el.length; i++) {
163 | 	    		if (isElement(el[i])) {
164 | 	    			var nosj = el[i].getElementsByTagName("noscript");
165 | 	    			for (var j in nosj) {
166 | 	    				if (isElement(nosj[j])) nos.push(nosj[j]);
167 | 	    			}
168 | 	    		} else if (document.getElementById(el[i])) {
169 | 	    			var nosj = document.getElementById(el[i]).getElementsByTagName("noscript");
170 | 	    			for (var j in nosj) {
171 | 	    				if (isElement(nosj[j])) nos.push(nosj[j]);
172 | 	    			}
173 | 	    		}
174 | 	    	}
175 | 	    } else if (isElement(el)) {
176 | 	        // Find the noscript tags within an element
177 | 	        var nos = el.getElementsByTagName("noscript");
178 | 	    } else if (document.getElementById(el)) {
179 | 	    	var nos = document.getElementById(el).getElementsByTagName("noscript");
180 | 	    }
181 | 	    var elreplace = {};
182 | 	    if (nos) {
183 | 	    	for (var i = 0; i < nos.length; i++) {
184 | 	    		var newone = document.createElement('div');
185 | 	    		newone.id = "jsdetect_" + i;
186 | 	    		newone.className = "nojs_init";
187 | 	    		newone.style.display = settings.displayStyle;
188 | 	    		newone.innerHTML = nos[i].textContent;
189 | 	    		elreplace[i] = {
190 | 	    			parent: nos[i].parentNode,
191 | 	    			newel: newone,
192 | 	    			original: nos[i]
193 | 	    		};
194 | 	    	}
195 | 	    	for (var i in elreplace) {
196 | 	            // Replace noscript with span
197 | 	            elreplace[i].parent.replaceChild(elreplace[i].newel, elreplace[i].original);
198 | 	        }
199 | 	        // Continuously replace element to stop animation
200 | 	        setInterval(function() {
201 | 	        	for (var i in elreplace) {
202 | 	        		var el = document.getElementById(elreplace[i].newel.id);
203 | 	        		var newone = el.cloneNode(true);
204 | 	        		el.parentNode.replaceChild(newone, el);
205 | 	        	}
206 | 	        }, settings.interval);
207 |             // Bug fix for #3
208 |             // Stop noscript tags from showing up in Firefox while reloading
209 |             window.addEventListener("beforeunload", function() {
210 |                 // Hide all the noscript tags since in Firefox JavaScript will
211 |                 // stop running momentarily before the page is reloaded
212 |                 for (var i in elreplace) {
213 |                     var el = document.getElementById(elreplace[i].newel.id);
214 |                     el.style.display = "none";
215 |                 }
216 |                 // But in case the user canceled the reload in the onbeforeunload
217 |                 // prompt, restore the noscript tags so they will work again
218 |                 // Use two timeouts to detect cancellation. The first timeout will
219 |                 // not fire until the prompt is dismissed and the second timeout
220 |                 // will only fire when the prompt is cancelled.
221 |                 setTimeout(function() {
222 |                     setTimeout(function() {
223 |                         for (var i in elreplace) {
224 |                             var el = document.getElementById(elreplace[i].newel.id);
225 |                             el.style.display = settings.displayStyle;
226 |                         }
227 |                     }, 0);
228 |                 }, 0);
229 |             });
230 | 	    }
231 | 	}
232 | 	//init-end
233 | 
234 | });


--------------------------------------------------------------------------------