ImageSlider = new Class({
	Implements: [Options, Events],
	initialize: function(options) {
		this.setOptions(options);
		this.imageWidth = 690;
		this.totalImages = 0;
		this.actualImage = 1;
		this.imagesToLoad = 2;
		this.loadedImages = 0;
		this.imagePaths = [];
		this.pictures = [];
		this.fix = 4;
		this.slider = function(){this.slide()};
		this.timer = '';
		this.tweener = new Fx.Tween($('pic-slider-pics'), {
			'transition': Fx.Transitions.Pow.easeInOut,
			'property': 'left',
			'duration': 2000
		});
		$('pic-slider-pics').setStyle('left', this.fix + 'px');
		this.requestImages();
	},
	
	requestImages: function(url) {
		
		var request = new Request.JSON({
			'url': 'http://exaltaciondelacruz.com/static/slider/pics.php'
		});
		request.addEvent('success', function(json){
				json.each(function(item){
					this.imagePaths.push(this.options.baseURL + item);
				}, this);
				this.loadImages(this.imagesToLoad);
			}.bind(this));
		request.get();
	},
	
	loadImages: function(howMany) {
	

		// Here we take the imagePaths array and load images in groups batchs of howMany images.
		
		var nextImages = []; // array to store the next batch of images to load.
		for (var i = 0; i < this.imagePaths.length; i++) {
			if (i >= this.loadedImages && nextImages.length < howMany) {

			
			nextImages.push(this.imagePaths[i]);
			this.loadedImages++;
			}
			
			
		}

		// Preload Images
		
		var imgs = new Asset.images(nextImages, {
			'onComplete': function(){
				//console.log("inject");
				this.injectImages(imgs);
				
				}.bind(this)
		});
		
	},
	
	injectImages: function(images) {

		images.each(function(item, index) {
			this.pictures.push(item);
		}, this);

		$('pic-slider-pics').setStyle('width', this.imageWidth * (this.pictures.length + 1));
		images.each(function(item,index){
			var imageLI = new Element('li');
			var imageIMG = item;
			imageIMG.inject(imageLI);
			imageLI.inject($('pic-slider-images'), 'bottom');
			
		});
		$('pic-slider-loading').fade('out');
		images = null;
		$clear(this.timer);
		this.timer = this.slider.periodical(6000, this);
		if (this.actualImage > 1) {
			this.slide();
		}

	},
	
	slide: function() {
		if (this.actualImage < this.pictures.length) {
			
			this.tweener.start( -((this.actualImage * this.imageWidth) - this.fix) + 'px' );
			
			this.actualImage++;
			
		} else {
			
			// See if we have more images to load...
			if (this.loadedImages < this.imagePaths.length) {
				$('pic-slider-loading').tween('opacity', 0.8);
				this.loadImages(2);
			} else {
			
				this.tweener.start( this.fix + 'px' );
				this.actualImage = 1;
			}	
		}
	}


});

window.addEvent('domready', function() {
	var Slider = new ImageSlider({
		'baseURL': 'http://exaltaciondelacruz.com/static/slider/'
	});
});