var Benefits = new Class({
					 
	loadedImages:[],
	imagePaths:[],
	busy:false,
	curImage:null,
	waiting:false,
	errorP:new Element('p',{'class':'imError'}),
	pause:false,
	initialize:function(settings) {
		
		this.settings = settings;
		//  the name of the DOM element that contains the links
		this.settings.controls = $$(this.settings.controls + ' a');
		// the DOM element that holds the images
		this.settings.container = $(this.settings.container);
		//the loading image...
		this.settings.loadingImage = new Asset.image(this.settings.loadingImage,{'class':'loader','styles':{'opacity':'0'},'alt':''});

		this.create();
	},
	
	load:function(whichImage) {
		
		this.busy = true;

		switch(true) {
		
			case $defined(this.loadedImages[whichImage]):
			
				// inject the new image and fade in...
				this.loadedImages[whichImage].inject(this.settings.container);
	
				//once faded, remove the previous image and set current image.
				this.settings.container.getLast().get('tween',{'property':'opacity','onComplete':function() {
					var first = this.settings.container.getFirst();
					first.setStyle('opacity','0');
					first.dispose();
					this.busy = false;
				}.bind(this)}).start(1);
				
				// Set other values
				this.settings.container.setProperty('href',this.settings.images[whichImage].link);
				//this.settings.container.setProperty('title',this.settings.images[whichImage].title);
				
				
				// Set the colour of the links.
				this.settings.controls[this.curImage + 1].setStyle('color','#fff');
				this.settings.controls[this.curImage + 1].active = false;
				
				this.settings.controls[whichImage + 1].setStyle('color','#a62975');
				this.settings.controls[whichImage + 1].active = true;
				
				this.curImage = whichImage;
			break;
			
			case $defined(this.imagePaths[whichImage]):
			//Set waiting to true and display a loading gif...
			
			//Handle the loading gif
			this.wait();
			// Call if times out
			this.timeOut = function() {
				this.settings.loadingImage.dispose();
				this.error(2);
			}.delay(50000,this);
			
			//Incase image takes more than 3 secs to load...
			$clear(this.timer);
			
			this.loadedImages[whichImage] = new Asset.image(this.imagePaths[whichImage],{'alt':this.settings.images[whichImage].title,'styles':{'opacity':0},
					'onerror':function(el) {
						$clear(this.timer);
						this.error(1);
						
					}.bind(this),
					'onload':function(el){
						//Clear the timeout
						//Hide the loading gif
						$clear(this.timeOut);
						this.wait();
						//restart the timer if not paused
						if(!this.pause) { 
							this.setTimer();
						}
						this.load(whichImage);
					}.bind(this)});
			break;
			
			default:
				whichImage = 0;	
				this.load(whichImage);
		}
	},
	// Execute if the image loading times out...
	wait:function(whichImage) {
		
		var fade = 0;
		if(this.waiting == false) {
			this.waiting = true;
			this.settings.loadingImage.inject(this.settings.container);	
			fade = 1;
		} else {
			this.waiting = false
		}
		//fade to 0 or 1 base on if waiting or not...
		this.settings.loadingImage.get('tween',{'property':'opacity'}).start(fade);
	},
	// Handles errors...
	error:function(errCode) {
		
		var errTxt = '* ';
		
		switch(errCode) {
			
			case 1:
				errTxt +=  'There was an error loading images, please try again.';
			break;
			
			case 2:
				errTxt +=  'The image is taking too long to load, please try again later.';
			break;
		}
		
		this.busy = false;
		if(this.waiting == true) {
			this.wait();
		}
		this.errorP.set('text',errTxt).inject(this.settings.container);
	},
	// RETURN IMAGES AS ELEMENTS LOADED...
	create:function() {
			
			//Add functions to controls
			var obj = this;
			
			this.settings.container.addEvents({
				'mouseover':function() {
					this.get('tween',{'property':'opacity','duration':'short'}).start(0.8);
				},
				'mouseout':function() {
					this.get('tween',{'property':'opacity','duration':'short'}).start(1);
				}

				
			});

			this.settings.controls.each(function(el) {
				el.active = false;
				el.addEvents({'click':function(e) {
					
					e.stop();
		
					var whichImage = this.get('text');

					if(!obj.busy) {
						//Pause the playback
						obj.pause = true;
						$clear(obj.timer);
						
						if(whichImage.test('[0-9]')) {
							// If whichImage is different than the current image, load it
							if(whichImage -1 != obj.curImage) {
								obj.load(whichImage - 1);
							}
						} else {
							obj.load(obj.curImage + 1);
						}
					}
				},
				mouseover:function() {
					this.setStyle('color','#a62975');
				},
				mouseout:function() {

					if(!this.active) {
						this.setStyle('color','#fff');	
					}
				}});
			});
			
			// Loop through the passed array and extract the path.
			this.settings.images.each(function(el) {
				
				this.imagePaths.push(el.path);
			}.bind(this));
			
			this.load(0);
		
	},
	setTimer:function() {
		//Set up the timer that will loop through the images if nothing is pressed...
		this.timer = function() {this.load(this.curImage + 1);}.periodical(6000,this);
	},
	clearTimer:function() {
		$clear(this.timer);
		this.setTimer();
	}

});