var main = {
	init: function(){
		this.slideshow.init();
	}
};

main.slideshow = {
	init: function(){
		var images = document.getElementsByTagName('img');
		for(var i = 0; i < images.length; i++){
			if(images[i].className.match(/(^|\s)slideshow($|\s)/)){
				new this.item(images[i]);
			}
		}
	},

	item: function(image){
		var layer = document.createElement('ins');
		layer.className = 'slideshow';
		image.parentNode.insertBefore(layer, image);
		layer.appendChild(document.createElement('ins'));
		this.selectors_container = document.createElement('ins');
		layer.firstChild.appendChild(this.selectors_container);
		layer.firstChild.appendChild(image);
		this.image = image;
		var slides = image.onclick();
		var path = image.src.replace(/[^\/]+$/, '');
		this.selectors = [new main.slideshow.selector(this, image.src, 0)];
		for(i = 0; i < slides.length; i++){
			this.selectors[this.selectors.length] = new main.slideshow.selector(this, (slides[i].indexOf('/') < 0? path: '') + slides[i], i + 1);
		}
		this.selectors[0].container.className = 'selected';
		this.i = 0;
		var t = this;
		image.onclick = function(){
			t.selectors[t.i >= t.selectors.length - 1? 0: t.i + 1].select();
		};
	},

	selector: function(item, src, i){
		this.container = document.createElement('ins');
		item.selectors_container.appendChild(this.container);
		var t = this;
		this.container.onclick = function(){
			t.select();
		};
		this.select = function(){
			item.selectors[item.i].container.className = '';
			t.container.className = 'selected';
			item.i = i;
			item.image.src = src;
		}
	}
};

main.init();