$(function () {
	var slideshows = [];
	$('.slideshowitems li').each(function () {
		slideshows.push(this);
	}); 
	var btnPrev = $('<a href="#" id="slideshowprev" title="Previous">&lt;</a>');
	var btnNext = $('<a href="#" id="slideshownext" title="Next">&gt;</a>');
	
	var SlideShow = new Slider(slideshows, -378, 0, 378);
	
	$('.slideshowitems').append(btnNext).append(btnPrev);
	
	$(btnNext).bind('click', function (e) {
		SlideShow.stoptimer();
		setTimeout(function () {
			SlideShow.timer();
		}, 300);
		SlideShow.next();
		e.preventDefault();
	});
	
	$(btnPrev).bind('click', function (e) {
		SlideShow.stoptimer();
		setTimeout(function () {
			SlideShow.timer();
		}, 300);
		SlideShow.prev();
		e.preventDefault();
	});
	
	SlideShow.init();
});


/**
 * 
 * @param el array
 * @param minPos 
 * @param showPos
 * @param maxPos
 * @return Slider
 */
function Slider (el, minPos, showPos, maxPos) {
	if (this == window) {
		return new Slider(el, minPos, showPos, maxPos);
	} else {
		this.active = null;
		this.elements = el;
		this.minPos = minPos;
		this.showPos = showPos;
		this.maxPos = maxPos;
		this.timerid = null;
		return this;
	}
}

Slider.prototype.timer = function () {
	var self = this;
	
	if (this.timerid === null) {
		this.timerid = setTimeout(function () {
			// slide
			self.next();
			self.timerid = null;
			self.timer();
		}, 4000); // vertraging volgende slide 4000 = 4 sec.
	}
}

Slider.prototype.stoptimer = function () {
	clearTimeout(this.timerid);
	this.timerid = null;
}

Slider.prototype.init = function () {
	this.active = 0;
	$(this.elements[this.active]).css("left", this.showPos);
	$(this.elements[this.elements.length-1]).css("left", this.minPos);
	this.timer();
}


Slider.prototype.next = function () {
	this.active++;
	if (this.active == this.elements.length) {
		this.active = 0;
	}
	
	if (this.active == 0) {
		var prev = this.elements.length - 1;
	} else {
		var prev = this.active-1;
	}
	
	if (this.active == (this.elements.length - 1)) {
		var next = 0;
	} else {
		var next = this.active+1;
	}
	
	slideLeft(this.elements[prev], this.showPos, this.minPos);
	slideLeft(this.elements[this.active], this.maxPos, this.showPos);
	
}


function slideLeft(el, oldpos, newpos) {
	
	var step = 5;
	
	if (oldpos > newpos) {
		oldpos = oldpos - step;
	}
	
	$(el).css('left', oldpos);
	
	if (oldpos - step > newpos) {
		setTimeout(function () {
			slideLeft(el, oldpos, newpos);
		}, 10);
	} else {
		$(el).css('left', newpos);
	}
	
}

function slideRight(el, oldpos, newpos) {
	var step = 5;
	
	if (oldpos < newpos) {
		oldpos = oldpos + step;
	}
	
	$(el).css('left', oldpos);
	
	if (oldpos + step < newpos) {
		setTimeout(function () {
			slideRight(el, oldpos, newpos);
		}, 10);
	} else {
		$(el).css('left', newpos);
	}
}

Slider.prototype.prev = function () {
	this.active--;
	if (this.active == -1) {
		this.active = this.elements.length - 1;
	}
	
	if (this.active == (this.elements.length - 1)) {
		var prev = 0;
	} else {
		var prev = this.active+1;
	}
	
	if (this.active == 0) {
		var next = this.elements.length - 1;
	} else {
		var next = this.active-1;
	}
	
	slideRight(this.elements[this.active], this.minPos, this.showPos);
	slideRight(this.elements[prev], this.showPos, this.maxPos);
	
}

Slider.slide = function (el, posStart, posEnd, dir) {
	posStart = 0;
	posEnd = 378;
	var step = 5 * dir;
	
	var intvalID = setInterval(function () {
		
		$(el).css("left", $(el).css("left") + step);
		
		if ($(el).css("left") >= (posEnd-step)) {
			$(el).css("left", posEnd);
			clearInterval(intvalID);
		}
	}, 500);
}