window.addEvent( "domready", function() { new ECLHome(); } );
window.addEvent( "load", function() { new ECLHomeLoad(); } );

var ECLHome = new Class
({
	initialize: function()
	{
					
	}
});

var ECLHomeLoad = new Class
({
	initialize: function()
	{
		var images = ['home.teaserimage.jpg', 'home.teaserimage2.jpg', 'home.teaserimage3.jpg','home.teaserimage4.jpg'];
		var c = new ImageCarousel( {source:"images/home/teaser/",element:$("homeTeaserTopR"), files:images, fileLister:null} );
		var nav = new ImageCarouselMenu( images.length );
		c.addEvent( "changeImage", nav.onChangeImage.bind(nav) );
		nav.addEvent( "requestImage", c.jumpToImage.bind(c) );
	}
});
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 = $(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 );
	}
});