var slider = new Class({
	
	current:0,
	initialize:function(settings) {
		
		this.loading = new Element('p',{'id':'loading','text':'Loading...'});
		
		// Set up the previous and next buttons
		
		settings.next.setStyle('opacity',0.1);
		settings.prev.setStyle('opacity',0.1);
		
		settings.next.addEvents({
		'click':function(e) {
			e.stop();									 
			if(!this.playing) {
				this.playing = true;
				this.slide();
			}
		}.bind(this),
		'mouseover':function() {
			this.get('tween',{'property':'opacity'}).start(1);
		},
		'mouseout':function() {
			this.get('tween',{'property':'opacity'}).start(0.1);
		}
		
		});
		
		settings.prev.addEvents({
			'click':function(e) {
				e.stop();
				if(!this.playing) {
					this.playing = true;
					this.slide('prev');
				}
			}.bind(this),
			'mouseover':function() {
				this.get('tween',{'property':'opacity'}).start(1);
			},
			'mouseout':function() {
				this.get('tween',{'property':'opacity'}).start(0.1);
			}
		});
		
		this.settings = settings;
		//Order the images by name...
		this.settings.imageList = this.settings.imageList.sort();
		this.loadImage(this.current,'right');
		this.curImage.setStyle('left',this.findMiddle());
		
		window.addEvent('resize',function() {

			this.reSizeIm();
			this.curImage.setStyle('left',this.findMiddle());
		}.bind(this));
		
		
		//var controls = new Element('div',{'id':'cntrl'});
		new Element('a',{'href':'index.html','text':'home'}).inject(this.settings.controls);
		//add the title to the controls div...
		new Element('h1',{'text':this.settings.title}).inject(this.settings.controls);
		//add the home button
		//create control buttons...
		
		var obj = this;
		
		for(var i = 1; i <= this.settings.imageList.length; i++) {
		
			if(i < 10) {
				var txt = '0' + i;
			} else {
				var txt = i;	
			}
			new Element('a',{'href':'#',
							 'text':txt,
							 'class':'lnk',
							 'events':{
							 	'click':function(e) {

									e.stop();
									if(!obj.playing) {
										var next = this.get('text') -1;
	
										if(next !== obj.current) {
											
											obj.playing = true;
											if(obj.current > next) {
												var side = 'left';
											} else {
												var side = 'right';
											}
											obj.loadImage(next,side);
											$$('#cntrl a.lnk')[obj.current].setStyle('color','#C7C7C7');
											obj.current = next;
											this.setStyle('color','#E64097');
																					
										}
									}
										
								}
							  }}).inject(this.settings.controls);	
		}

		$$('#cntrl a.lnk')[0].setStyle('color','#E64097');
	
		
	},
	
	slide:function(direction) {
		
		var dir = window.getSize().x + 'px';
		$$('#cntrl a.lnk')[this.current].setStyle('color','#fff');
		
		if(direction == 'prev') {
			--this.current;
			var side = 'left';
		} else {
			++this.current;
			var side = 'right';
		}
		
		if(this.current >= this.settings.imageList.length) {
			this.current = 0;
		} else if(this.current < 0) {
			this.current = this.settings.imageList.length - 1;
		}
		
		$$('#cntrl a.lnk')[this.current].setStyle('color','#E64097');
		
		//Load image...
		this.loadImage(this.current,side);
	},
	
	loadImage:function(im,side) {
		//Display the loading gif...
		
		var time = function() {
			this.loading.setStyles({
								   'left':(window.getSize().x - 60)/2,
								   'top':(window.getSize().y - 18)/2							   
								   });
			this.loading.inject(this.settings.container);
		}.delay(500,this);
		
		// The first image is being loaded
		if(!$defined(this.curImage)) {
			
			var first = true;	
		}
		
		this.curImage = new Asset.image(this.settings.imageList[im],{'id':'im',																
			'onload':function() {
				this.loading.dispose();
				$clear(time);
				if(side == 'right') {
									
					this.curImage.setStyle('left',window.getSize().x);
				} else {
					var end = window.getSize().x;
					this.curImage.setStyle('left',0 - this.curImage.width);
				}		
				
				this.curImage.inject(this.settings.container);
				
				this.reSizeIm();
				this.curImage.get('tween',{'property':'left',
								  'onComplete':function() {
									  this.playing = false;
								  }.bind(this)
								  }).start(this.findMiddle());
				if(!$defined(first)) {
					if(side == 'right') {
						var end = 0 - this.settings.container.getFirst().width;	
					}
					
					this.settings.container.getFirst().get('tween',{
						'property':'left',
						'onComplete':function() {
							this.dispose();							 
						}.bind(this.settings.container.getFirst())
														   
					}).start(end);
				}
				
			}.bind(this)
		});

	},
	
	findMiddle:function() {

		return (window.getSize().x - this.curImage.width)/2;
	},
	reSizeIm:function() {
		
		var screenSize = window.getSize();
		
		// Work out the scaling factors for x and y...
		var xFactor = screenSize.x/this.curImage.width;
		var yFactor = screenSize.y/this.curImage.height;
		
		// scale both dimensions by whichever is smaller...
		this.curImage.width *= Math.min(xFactor, yFactor);
		this.curImage.height *= Math.min(xFactor, yFactor);
		
		this.curImage.setStyle('top',(window.getSize().y - this.curImage.height)/2);
	}
});