ArrayLoop.html

## ArrayLoop.html
<html>
<body>
<span id='counter' style='position:fixed;bottom:10px;right:10px;color:white;background:black;padding:10px;'></span>
</body>

<script>
	Object.defineProperty(Array.prototype,'onPassLast',{
		get: function(){this.onPassLastFN(this)},
		set: function(fn){this.onPassLastFN=fn;}
	});
	Object.defineProperty(Array.prototype,'loop',{
		set: function(cb){
			if(typeof cb == "function"){this.callBack=cb;}else{this.currentIndex=this.currentIndex+cb;};
			this.currentIndex=this.currentIndex==undefined?0:this.currentIndex;
			if(this.currentIndex>=this.length){
				return this.onPassLast;
			}else{
				this.callBack!=undefined?this.callBack(this[this.currentIndex],this):false;
			};
		}
	});
	Object.defineProperty(Array.prototype,'next',{
		get: function(){this.loop=1;}
	});

	var ajax=function(url,cb){//a trivial version of Ajax, only for download data from a remote server
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (xhttp.readyState == 4 && xhttp.status == 200) {
				cb(JSON.parse(xhttp.responseText));
			}
		};
		xhttp.open("GET", url, true);
		xhttp.send();
	}
	var counter=document.getElementById("counter");

	ajax("http://jsonplaceholder.typicode.com/photos",function(data){
		data=data.slice(0, 50);//what the heck, I just need 50 elements :)
		data.onPassLast=function(array){alert("finish!", JSON.stringify(array));}//on passed all elements, do this function
		data.loop=function(element,array){
			var img=document.createElement("img");
			img.src=element.url;
			img.style.width="100px";
			img.onload=function(){
				window.scrollTo(0,document.body.scrollHeight);//subtle touch
				array.next;//and when the image is loaded move to next member of the series
				counter.innerHTML=data.currentIndex+"/"+data.length;//Show me on counter
			}
			document.body.appendChild(img);
		}
	});
</script>
</html>