var OM_mooJSTeaser = new Class({
	Implements: [Options, Events],
	options: {
		holder: null,
		controls: null,
		slides: null,
		auto: true,
		delay: 5,
		start: 1,
		fadeInControls: !Browser.Engine.trident,
		transition: Fx.Transitions.Quad.easeInOut,
		duration: 500,
		cssClass: 'teaser-corner'
	},
	initialize: function(options){
		this.setOptions(options);
		this.holder = this.options.holder;
		this.controls = this.options.controls;
		this.slides = this.options.slides;
		this.current = (this.options.start-1);
		this.delay = (this.options.delay*1000);
		this.turnCount = 1;
		window.addEvent('domready', this.domReady.bind(this));
	},
	domReady: function(){
		this.holder = $(this.holder);
		this.wrapper = this.holder.getFirst('div');
		if($defined(this.holder) && $defined(this.wrapper)){
			this.createCorners();
			this.slides = $$('.'+this.slides);
			this.originalSlides = this.slides;
			this.l = this.slides.length;
			if(this.l>0){
				this.createControls();
				this.scrollHandler = new Fx.Scroll(this.wrapper, {
					link: 'chain',
					transition: this.options.transition,
					duration: this.options.duration
				});
				if(this.l>1){
					this.int = this.doSlideIn.bind(this).periodical(this.delay);
				};
				this.setContainerSize();
			};
		};
	},
	setContainerSize: function(){
		this.wrapper.getFirst('div').setStyle('width', this.turnCount*((this.slides.length * 698))+'px');
	},
	createCorners: function(){
		this.topLeft = new Element('span', { 'class': this.options.cssClass + ' tl', 'html': '&nbsp;' });
		this.topRight = new Element('span', { 'class': this.options.cssClass + ' tr', 'html': '&nbsp;' });
		this.bottomRight = new Element('span', { 'class': this.options.cssClass + ' br', 'html': '&nbsp;' });
		this.bottomLeft = new Element('span', { 'class': this.options.cssClass + ' bl', 'html': '&nbsp;' });
		$(this.holder).adopt([this.topLeft,this.topRight,this.bottomRight,this.bottomLeft]);
	},
	createControls: function(){
		var initialVisibility = (this.options.fadeInControls) ? 'hidden' : 'visible';
		var ctrlUL = new Element('ul', { 'id': this.controls, 'styles': { 'visibility': initialVisibility, 'opacity': 0 } });
		this.holder.adopt(ctrlUL);
		this.controls = ctrlUL;
		for(var i=0;i<this.slides.length;i++){
			var ctrlLI = new Element('li');
				ctrlUL.adopt(ctrlLI);
			var ctrlA = new Element('a', {
				'href': '#',
				'rel': i+1,
				'text': i+1
			});
			ctrlLI.adopt(ctrlA);
		};
		if(this.options.fadeInControls){
			ctrlUL.fade('in');
		}else{
			ctrlUL.fade('show');
		};
		this.handleActiveControl(this.current);
		if(this.l>1){
			this.bindControlEvents();
		};
	},
	bindControlEvents: function(){
		var me = this;
		this.controls.getElements('a').addEvent('click', function(event){
			event.stop();
			me.doSlideIn(this.get('rel')-1);
			me.resetDelay();
		});
	},
	doSlideIn: function(i){
		this.current++;
		if($defined(i)) this.current = i;
		if(this.current>=this.slides.length){
			this.cloneItemList();
			this.turnCount++;
		};
		this.scrollHandler.toElement(this.slides[this.current]);
		this.handleActiveControl(this.current);
	},
	resetDelay: function(){
		this.int = $clear(this.int);
		this.int = this.doSlideIn.bind(this).periodical(this.delay);
	},
	handleActiveControl: function(i){
		var li = this.controls.getElements('li')
		li.removeClass('active');
		li[i-(this.l*(this.turnCount-1))].addClass('active');
	},
	cloneItemList: function(){
		var newItemList = this.originalSlides.clone();
		this.wrapper.getFirst('div').adopt(newItemList);
		this.slides = $$('.'+this.options.slides);
		this.reInitControls();
		this.setContainerSize();
	},
	reInitControls: function(){
		var ctrls = this.controls.getElements('a');
		ctrls.each(function(item,index){
			item.set('rel', (parseInt(item.get('rel'))+this.l));
		},this);
	}
});
