var AutoUi = new Class(
{
	
	options : {
		cotd : {
			placeholder : $empty
		}
	},
	
	/**
	 * Rotating features box
	 * 
	 * @param Element features
	 */
	features : function (features)
	{
		var items = features.getElements('div');
		
		var slideFunction = new function() 
		{
			var i = 0;	
			var slide = function()
			{
				// get item to slide out
				var current = items[i];  
				
				// change index
				if(i < (items.length - 1)) i++; 
				else i = 0;

				// set up our animation stylings for out and in motions
				var itemIn = new Fx.Morph(current, {
					     duration: 300, 
					     transition: Fx.Transitions.Quad.easeInOut, 
					     wait:false
				}).addEvent('complete', function(el) {
					el.setStyle('display','none');
					var itemOut = new Fx.Morph(items[i], {
					     duration: 250, 
					     transition: Fx.Transitions.Quad.easeInOut, 
					     wait:false
					}).addEvent('start', function(el){
						el.set('opacity',0).setStyle('display','block');
					}).start({
						'opacity':[0,1]
					});
					
				}).start({
					'opacity':[1,0]
				});
				
			
				
			};
			
			slide.periodical(18000, this); 
		}
	},
	
	cotd : function ( container )
	{
		this.options.cotd.placeholder = container.getElement('.az-cotd_image_img img');
		// add switch events		
		container.getElements('.az-cotd_image_thm li a').addEvent('click', this.switchCotdImage.bind(this));
		// make the first selected
		container.getElement('.az-cotd_image_thm li').addClass('current');
		this.container = container;		
	},
	
	switchCotdImage : function ( e )
	{
		e.stop();
		var target = $(e.target);
		var img = (target.get('tag') == "a" ? target.getElement('img') : target);
		this.container.getElements('.az-cotd_image_thm li').removeClass('current');
		this.options.cotd.placeholder.setProperty('src', img.getProperty('src'));
		img.getParent('li').addClass('current');
	}
	
});