function PixIterator () {
	this.limit = 0;
	this.idx = 0;
	this.nextIdx = function () {
		if ( this.idx === this.limit ) {
			this.idx = 0;
		} else {
			this.idx += 1;
		}
		return this.idx;
	}	
}

function CreateLayer (thisId, thisImgId) {
	this.layer = document.createElement('td');
	this.layer.setAttribute('id', thisId);
	this.layer.setAttribute('style', 'left: '+((window.innerWidth - 760) / 2 + 330) + 'px');
	document.getElementById('slideshow').parentNode.appendChild(this.layer);
	this.layer = document.getElementById(thisId);
	this.slide = document.createElement('img');
	this.slide.setAttribute('id', thisImgId);
	this.layer.appendChild(this.slide);
}

function slideshow () {
	var layer1, layer2, layer1Img, layer2Img, slides, slidesIterator;
	slides = ["image/home0.jpg", "image/home46.jpg", "image/home53.jpg", "image/home41.jpg", "image/home51.jpg", "image/home47.jpg", "image/home48.jpg", "image/home35.jpg", "image/home52.jpg", "image/home54.jpg", "image/home49.jpg"];	
	layer1 = new CreateLayer("layer1", "layer1Img");
	layer2 = new CreateLayer("layer2", "layer2Img");
	slidesIterator = new PixIterator();
	slidesIterator.limit = slides.length - 1;
	layer1Img = document.getElementById('layer1Img');
	layer1Img.setAttribute('src', slides[slidesIterator.idx]);	
	layer2Img = document.getElementById('layer2Img');
	layer2Img.setAttribute('src', slides[slidesIterator.nextIdx()]);
	layer2Img.setAttribute('style', 'opacity: 0');

	setInterval(function () {
		var op = 0;
		var transition = setInterval(function () {
			if (op < 0.95) {
				op += 0.05;	
				layer2Img.setAttribute('style', 'opacity: ' + op);
			} else {
				op = 1;
				layer2Img.setAttribute('style', 'opacity: ' + op);
				clearInterval(transition);	
				layer1Img.setAttribute('src', slides[slidesIterator.idx]);
				layer2Img.setAttribute('style', 'opacity: 0');
				layer2Img.setAttribute('src', slides[slidesIterator.nextIdx()]);			
			}
		}, 40);
	}, 5000);
}

window.onresize = function () {
	layer1.setAttribute('style', 'left: '+((window.innerWidth - 760) / 2 + 330) + 'px');
	layer2.setAttribute('style', 'left: '+((window.innerWidth - 760) / 2 + 330) + 'px');
};

window.onload = function () {
	slideshow();
};