/**
 * @author rhys
 */
var Carousel = new Class({
	initialize: function(){
		this.carousel = $('carousel');
		if(!this.carousel) { return false; }
		var instance = this;
		this.loop_time = 7000;
		this.heading = this.carousel.getElements('h2')[0];
		this.slides = this.carousel.getElements('div.slide');
		this.buttons = [];
		this.current_slide_num = null;
		// total count of slides (starting from 0)
		this.n_slides = this.slides.length -1;
		// increment for loop
		// NB: can only get it to work if the increment number is stored at window level
		//     so using a var on window instead of something like this.i_slides = 0;
		window.__carousel_i_slides__ = 0; // var name should be unique enough
		if(this.slides.length>0){
			var slide_height = this.slides[0].getStyle('height')
			var heading_height = this.heading.getStyle('height').toInt()+this.heading.getStyle('padding-top').toInt()+this.heading.getStyle('padding-bottom').toInt()+this.heading.getStyle('margin-top').toInt();
			var button_wrapper = new Element('span');
			this.heading.adopt(button_wrapper);
			button_wrapper.setStyles({
				'position':'absolute',
				'top':'2px',
				'right':'5px'
			});
			
			this.heading.setStyles({
				'margin-bottom':slide_height
			});
			
			this.slides.each(function(slide,index){
				var n = index+1;
				slide.setProperty('id','slide_'+n);
				slide.setStyles({
					'position':'absolute',
					'top':heading_height+3+'px',
					'left':'0',
					'opacity':0
				});
				// add buttons if more than 1 item
				if(instance.n_slides>0) {
					instance.buttons[index] = new Element('img',{
						'id':'slide_btn_'+n,
						'src':'images/btn_'+n+'.gif',
						'styles':{
							'width': '19px',
							'height':'19px',
							'margin-left':'4px',
							'cursor':'pointer'
						},
						'events':{
							'mouseover':function(){
											this.setOpacity(1);
										},
							'mouseout':function(){
											if(!this.hasClass('active')){
												this.setOpacity(0.5);
											}
										},
							'click':function(){
										if(!this.hasClass('active')){
											instance.show_slide(index);
											instance.stop_loop();
										}
									}
						}
					});
					instance.buttons[index].setOpacity(0.5);
					button_wrapper.adopt(instance.buttons[index]);
				}
			});
			// if only 1 item don't run automate
			if(this.n_slides==0){
				var fx = new Fx.Style(this.slides[0],'opacity').start(0,1);
			}else{
				this.automate();
			}
			
		}
	},
	
	show_slide: function(i){
		this.fade_out(this.current_slide_num);
		this.fade_in(i);
	},
	
	fade_in: function(i){
		var fx = new Fx.Style(this.slides[i],'opacity').start(0,1);
		this.current_slide_num = i;
		this.buttons[i].setOpacity(1);
		this.buttons[i].addClass('active');
	},
	
	fade_out: function(i){
		var fx = new Fx.Style(this.slides[i],'opacity').start(1,0);
		this.buttons[i].setOpacity(0.5);
		this.buttons[i].removeClass('active');
	},
	
	cycle: function() {
		this.show_slide(window.__carousel_i_slides__);
		if(window.__carousel_i_slides__ >= this.n_slides) {
			window.__carousel_i_slides__ = 0;
		}else{
			window.__carousel_i_slides__++;
		}
	},
	
	automate: function(){
		this.fade_in(0);
		window.__carousel_i_slides__++;
		this.automated = this.cycle.periodical(this.loop_time,this);
	},
	
	stop_loop: function() {
		$clear(this.automated);
	}
});