window.addEvent( "domready", function() {new SA_HomeLoad();} );
var SA_HomeLoad = new Class
({
	initialize: function()
	{
		var images = ['home1.jpg', 'home2.jpg', 'home3.jpg','home4.jpg', 'home5.jpg' ];
		var c = new ImageCarousel( {element:document.id("homeTeaserTopR"), files:images } );
		var nav = new ImageCarouselMenu( images.length );
		c.addEvent( "changeImage", nav.onChangeImage.bind(nav) );
		nav.addEvent( "requestImage", c.jumpToImage.bind(c) );
	}
});
var ImageCarousel = new Class
({
	Implements: [Options,Events],
	options: {
		source: 'images/homebanner/',
		fileLister: null,
		showDuration: 4000,
		fadeDuration: 2000,
		autoPlay: true,
		files: []
	},
	slide: [],
	number: [],

	initialize: function(options) {
		this.setOptions(options);
		this.options.element = document.id(this.options.element).grab(
			this.panel = new Element('div', { 'class': 'panel' })
		);
		this.dim = this.options.element.getSize();
		if ($defined(this.options.fileLister)) {
			new Request.JSON({
				url: this.options.source + this.options.fileLister,
				secure: false,
				onSuccess: function(file){
					this.setFiles(file);
					this.loadImage(0);
				}.bind(this)
			}).get();
		} else {
			this.setFiles(this.options.files);
			this.loadImage(0);
		}
		if (this.options.autoPlay) this.play();
	},

	play: function() {
		this.player = this.nextSlide.periodical(this.options.showDuration, this);
		return this;
	},

	stop: function() {
		$clear(this.player);
		return this;
	},

	setFiles: function(files) {
		this.options.files = files;
		this.options.files.each(function(f) {
			if ($defined(f)) {
				var slide = {
					file: f,
					element: new Element('div', {
						'class': 'slide',
						styles: {
							width: this.dim.x, height: this.dim.y,
							backgroundImage: 'url('+this.options.source+f+')',
							opacity: 0
						}
					})
				};
				this.options.element.grab(slide.element);
				slide.element.set('tween', {duration: this.options.fadeDuration})
				this.slide.push(slide);
			}
		}.bind(this));
		this.addNumbers();
		return this;
	},

	loadImage: function(i) {
		this.currentImage = i;
		this.slide.each(function(s, j) {
			this.number[j].removeClass('active');
			if (i == j) { // show this slide
				s.element.fade(1);
				this.number[j].addClass('active');
			} else { // else hide it
				s.element.fade(0);
			}
		}.bind(this));
		$clear( this.changeNoteInt );
		this.changeNoteInt = this.fireEvent.delay( this.options.showDuration / 5, this, ["changeImage", i] );
	},

	jumpToImage:function( i )
	{
		this.stop();
		this.loadImage( i );
		//this.play(); // uncomment if animation should persist after nav click
	},
	addNumbers: function() {
		this.slide.each(function(s, i) {
			var n;
			this.panel.grab(
				n = new Element('div', {
					'class': 'number',
					events: {
						click: function() {
							this.loadImage(i);
							this.stop().play();
						}.bind(this)
					}
				}).grab(new Element('span', { text: (i+1) }))
			);
			this.number.push(n);
		}.bind(this));
	},

	nextSlide: function() {
		var t = this.currentImage + 1;
		if (t > this.slide.length - 1) t = 0;
		this.loadImage(t);
		return this;
	}

});
ImageCarousel.extend({
	speed: {
		fast: {
			showDuration: 2000,
			fadeDuration: 400
		},
		normal: {
			showDuration: 3500,
			fadeDuration: 900
		},
		slow: {
			showDuration: 5000,
			fadeDuration: 1300
		}
	}
});



var ImageCarouselMenu = new Class
({
	Implements:[Events],
	element: null,
	elementList:null,
	imageCount:null,

	initialize: function( imageCount )
	{
		this.elementList = [];
		this.imageCount = imageCount;
		this.element = document.id("homeTeaserControl");
		this.buildUI();
		this.activateBehaviour();
	},
	activateBehaviour: function()
	{
		this.element.getElements( "li" ).each( function( btn ){
			btn.addEvent( "click", this.clickListener.bind( this ) );
		}.bind(this));
	},
	buildUI: function()
	{
		var list = this.element;
		for( var i=0; i<this.imageCount; i++)
		{
			var li = this.createLi( i + 1 );
			list.adopt( li );
			this.elementList.push( li );
		}
	},
	createLi: function( i )
	{
		return new Element("li").setProperties({"text" : i+".", "id":"carousel_" + i});
	},

	onChangeImage: function( i )
	{
		var li;
		for( var _li=0; _li<this.imageCount; _li++)
		{
			this.elementList[ _li ].removeClass("active");
		}

		li = this.elementList[ i ];

		if( li ) {
			li.addClass( "active" );
		}
	},
	clickListener: function( e )
	{
		var btn = document.id(e.target);
		for( var _li=0; _li<this.imageCount; _li++)
		{
			this.elementList[ _li ].removeClass("active");
		}
		btn.addClass("active");
		this.fireEvent( "requestImage", parseInt( btn.get("id").replace(/^carousel_/, "") ) - 1 );
	}
});