var LazySlideShow = new Class({

	Implements: [Options, Events],

	options: {
		imageDotClass: 'imageDot',
		homeSlideshowId: 'homeSlideshow',
		homeShowDotWrapperId: 'homeShowDotWrapper',
		homeSlideClass: 'homeSlide',
		onChanged: $empty,
		onInterval: $empty,
		onNavClick: $empty,
		container: $$('body')[0],
		interval: 3500,
		url: 'includes/php/getHomeSlides.php'
	},

	initialize: function(options){
		
		this.images = new Array();
		this.slideshowIndex = 0;
		this.homeSlideshowIndex = 0;
		this.pauseSlideshow = false;
		this.slideshowImages = new Array();
	
		this.setOptions(options);
		this.createElements();
	},
	
	createElements: function(){
	
		this.homeShowWrapper = new Element('div', {'id': this.options.homeSlideshowId}).inject(this.options.container, 'top');
		this.homeShowDotWrapper = new Element('div', {'id': this.options.homeShowDotWrapperId}).inject(this.homeShowWrapper);
		this.imageDot = new Element('span', {'class': 'imageDotLoad'}).inject(this.homeShowDotWrapper).fade('hide'); //preload this image			
		
		var getHomeSlides = new Request.JSON({
			url: this.options.url,
			onSuccess: function(obj){
				this.images = obj.images;			
				this.loadImagesInOrder(this.images[this.slideshowIndex]);
				this.periodic = this.auto.bind(this).periodical(this.options.interval);
			}.bind(this)
		}).post();
		
	},
	
	loadImagesInOrder: function(image){		
			if(this.slideshowIndex == this.images.length){
			return;
		}
		
		var myImage = new Asset.image(image, {
			onload: function(){
				var heldIndex = this.slideshowImages.push(myImage) -1;
				var imageDot = new Element('span', {'class': this.options.imageDotClass}).inject(this.homeShowDotWrapper);
				
				imageDot.index = heldIndex;

				imageDot.addEvent('click', function(){
					//reset the timer, so it wont change right after this was changed
					$clear(this.periodic);
					this.periodic = this.auto.bind(this).periodical(this.options.interval);
					
					this.fireEvent('onNavClick', imageDot.index);
				}.bind(this));

				this.slideshowImages[heldIndex].addClass(this.options.homeSlideClass);
				this.slideshowImages[heldIndex].inject(this.homeShowWrapper, 'top').fade('hide');
				
				if(this.slideshowIndex == 0) this.slideshowImages[this.slideshowIndex].fade('in');
				if(this.slideshowIndex == 0) $$('.'+this.options.imageDotClass)[this.slideshowIndex].addClass('selected');
				
				this.slideshowIndex ++;
				this.loadImagesInOrder(this.images[this.slideshowIndex]);
								
			}.bind(this)
		});
	},
	
	
		
	pause: function() {
		this.pauseSlideshow = true;
	},
	
	play: function() {
		this.pauseSlideshow = false;
	},
	
	auto: function() {
		this.fireEvent('onInterval');
	
		if(!this.pauseSlideshow){
			this.next();
		}
	},
	
	next: function() {
		index = (this.homeSlideshowIndex != this.slideshowImages.length - 1)? this.homeSlideshowIndex +1: 0;
		this.showSlide(index);
	},
	
	prev: function() {
		index = (this.homeSlideshowIndex != 0)? this.homeSlideshowIndex -1: this.slideshowImages.length - 1;
		thisshowSlide(index);
	},
	
	
	showSlide: function(index){	
		this.fireEvent('onChanged');
		
		index = (index < 0)? 0: index;
		index = (index > this.slideshowImages.length -1)? this.slideshowImages.length -1: index;
			
		$$('.'+this.options.imageDotClass).removeClass('selected');
					
		if(this.slideshowImages[this.homeSlideshowIndex]){
			this.slideshowImages[this.homeSlideshowIndex].fade('out');
		}	
			
		this.homeSlideshowIndex = index;
		
		if(this.slideshowImages[index]){
			if($$('.'+this.options.imageDotClass)[index]) $$('.'+this.options.imageDotClass)[index].addClass('selected');
			this.slideshowImages[index].fade('in');
		}
	}

});