var SlideShow = function(id){
	this.id = id;
	this.slides = null;
	this.timer = null;
	this.delay = 5000;
	this.transSpeed = 500;
	this.container = $('#' + this.id);
	this.currentSlideIndex = 0;
	this.slides = null;
	this.btns = [];
	this.animating = false;
	this.init();
}
SlideShow.prototype = {
	init : function(){
		this.container.css({position:'relative' });
		this.slides = this.container.children();
		this.slides.css({position : 'absolute', top : '0px', left:'0px', display: 'block'});
		this.slides.slice(1).hide();
		this.slides.eq(0).show();
		var _this = this;
		$(window).load(function(){
			_this.createImageButtons();
			_this.highlightCurrentButton(0);
			_this.start();
		});
		
	},
	
	start : function(){
		this.stop();
		var _this = this;
		var timerCallback = function(){
			_this.changeSlide();
		}
		this.timer = setInterval(timerCallback, this.delay);
	},
	
	stop : function(){
		clearInterval(this.timer);
	},
	
	changeSlide : function(newSlideIndex){
		var _this = this;
		if (newSlideIndex == null) newSlideIndex = this.nextSlideIndex();
		if (newSlideIndex == this.currentSlideIndex) return;
		this.slides.eq(newSlideIndex).css('zIndex', this.slides.size() + 1);
		this.slides.eq(this.currentSlideIndex).css('zIndex', this.slides.size());
		this.slides.eq(this.currentSlideIndex).show();
		this.highlightCurrentButton(newSlideIndex);
		var prev = this.currentSlideIndex;
		this.currentSlideIndex = newSlideIndex;
		this.slides.eq(newSlideIndex).hide();
		
		this.animating = true;
		this.slides.eq(newSlideIndex).fadeIn(this.transSpeed, function(){
			_this.animating = false;
			_this.slides.eq(prev).css('zIndex', 0);
		});
	},
	
	nextSlideIndex : function(){
		if (this.currentSlideIndex >= (this.slides.size() - 1)){
			return 0;
		} else {
			return parseInt(this.currentSlideIndex) + 1;
		}
		
	},
	
	prevSlideIndex : function(){
		if (this.currentSlideIndex <= 0){
			return this.slides.size() - 1;
		} else {
			return this.currentSlideIndex - 1;
		}
	},
	
	createImageButtons : function(){
		var btnContainer = this.container.append('<div id="' + this.id + 'btnContainer" class="slideshow-container"></div>');
		var _this = this;
		this.slides.each(function(i){
			var btn = $('#' + _this.id + 'btnContainer').append('<div index="' + i + '" id="slideshow-button' + i + '" class="slideshow-btn"></div>').get(0);
		});
		$('#' + _this.id + 'btnContainer div').click(function(e){
			if (!_this.animating){
				var index = $(this).attr('index');
				_this.changeSlide(parseInt(index));
				_this.start();
			}
		})
	},
	
	highlightCurrentButton : function(btnIndex){
		// $('#' + this.id + 'btnContainer div').eq(this.currentSlideIndex).removeClass('slideshow-btn-on');
		// $('#' + this.id + 'btnContainer div').eq(btnIndex).addClass('slideshow-btn-on');
		$('#slideshow-button' + this.currentSlideIndex).removeClass('slideshow-btn-on');
		$('#slideshow-button' + btnIndex).addClass('slideshow-btn-on');
	}
}
$().ready(function(){
	var ss = new SlideShow('slideShowContainer');
});