var SlidingPanel = new Class({
	
	// Implement classes
	Implements: [Options, Events],
	
	// Default options
	options: {
		url: '',
		container: false,
		nav: false,
		width: 950,
		height: 400,
		interval: 6000,	// set to false to prevent auto-sliding
		duration: 500,
		direction: 'left',
		slide: 0
	},
	
	// container arrars for dynamic elements
	slides: [],
	links: [],
	
	// Run on initialisation
	initialize: function(options) {
		var thisClass = this;
		 
		// Set the options
		this.setOptions(options);
		
		// Load the data and build slides
		this.request = new Request.JSON({
			url: thisClass.options.url,
			method: 'post',
			onSuccess: function(response){
				thisClass.initSlides(response);	
			}
		});
		this.request.send();
		
	},
	
	initSlides: function(data){
		var thisClass = this;
		
		// Set the slide data
		this.slideData = data;
		
		// Build the carousel structure
		var banner = new Element('div', {
			'class': 'slidePanel'
		});
		
		// just for testing this easily on a desktop
		window.addEvent('keydown', function(event){
			if (event.key == 'right'){
				thisClass.direction = "left";
				thisClass.nextSlide();
			}
			if (event.key == 'left'){
				thisClass.direction = "right";
				thisClass.nextSlide();
			}
		});
		
		// Build the slides
		for(i=0;i<this.slideData.length;i++) {
			var slide = this.slideData[i];
			
			// Create the slide
			var a = new Element('a', { href: slide.href });

			if(i==this.options.slide){
				a.setStyle('left', 0);
			}else{
				a.setStyle('left', this.options.width);
			}
			
			// prepare fx for slide
			a.fx = new Fx.Tween(a, {
				duration: this.options.duration,
				link: 'cancel',
				property: 'left'
			});
			
			var img = new Element('img', { src: slide.src }).inject(a);

			// Inject frame into carousel
			a.inject(banner);
			this.slides[this.slides.length] = a;
		}
		
		this.direction = this.options.direction;
		
		// Inject carousel into container
		this.options.container.empty();
		banner.inject(this.options.container);
		
		// If set, build navigation
		if(this.options.nav) { this.buildNav(); }

		// Begin the rotation
		this.slide = this.options.slide;
		   this.prevSlide = this.options.slide;
		   
		   
		   // If set, automate
		if(this.options.interval){
			this.startTimer();
		}
	},
	
	buildNav: function(){
		var thisClass = this;
		
		// build previous/next links
		var menu = new Element('ul', {
			'class': 'panelMenu'
		});

		var prev = new Element('li',{
			id: 'prev',
			text: 'Previous'
		}).addEvent('click', function(e){
			thisClass.direction = "right";
			thisClass.nextSlide();
		}).inject(menu);
		
		var next = new Element('li',{
			id: 'next',
			text: 'Next'
		}).addEvent('click', function(e){
			thisClass.direction = "left";
			thisClass.nextSlide();
		}).inject(menu);	   
	   
		// Inject carousel into container
		menu.inject(this.options.container);
		
	},
	
	checkRange: function(item){
		if(item == this.slides.length){
			item = 0;
		}else if(item < 0){
			item = this.slides.length-1;
		}
		return item;
	},
	
	nextSlide: function(direction){

		// cater for direction of slides
		if(this.direction == 'left'){
			this.slide++;
		}else{
			this.slide--;
		}
		
		// determine next slide and load it
		this.slide = this.checkRange(this.slide);
		
		this.loadSlide(this.slide);
	},
	
	loadSlide: function(item){
		
		this.slide = item;
		clearTimeout(this.timer);
		
		// put the new slide on top and slide in
		this.slides[this.prevSlide].setStyle('z-index', 99);
		this.slides[this.slide].setStyle('z-index', 100);
		
		// set direction of slides and animate
		if(this.direction == 'left'){
			this.slides[this.slide].fx.start(this.options.width, 0);
			this.slides[this.prevSlide].fx.start(0, -this.options.width);
		}else{
			this.slides[this.slide].fx.start(-this.options.width, 0);
			this.slides[this.prevSlide].fx.start(0, this.options.width);
		}
		
		// log the current slide
		this.prevSlide = this.slide;
		
		// If set, automate
		if(this.options.interval){
			this.startTimer();
		}
	},
	
	startTimer: function(){
		this.timer = this.nextSlide.delay(this.options.interval, this);
	}
});