Ext.namespace("Ext.ux.FeatureBox");

Ext.ux.FeatureBox = Ext.extend(Ext.Component, {
	slideID: 'featurebox-',
	navID: 'featurenav-',
	activeSlide: 0,
	initComponent: function(){
	
		Ext.applyIf(this,{
			interval: 3000,
			start: 1
		});
		
		Ext.ux.FeatureBox.superclass.initComponent.apply(this, arguments);
		
		
		this.slidesTpl = new Ext.XTemplate(
			'<tpl for=".">',
				'<li id="featurebox-{[xindex]}">',
					'<img src="{img}" />',
					'<div class="details">',
						'<h2>{title}</h2>',
						'<span class="description">{description}</span>',
					'</div>',
				'</li>',
			'</tpl>'
		);

		this.totalSlides = this.slides.length;
		
		this.task = {
			run: this.activateSlide.createDelegate(this, [this.start+1]),
	    	interval: this.interval
		};
	},
	onRender: function(ct){
		Ext.ux.FeatureBox.superclass.onRender.call(this, ct);
		var dh = Ext.DomHelper, nav = [], count;
		this.container = Ext.get(ct);
		
		dh.append(this.container, {
			tag: 'ul',
			cls: 'items',
			children: this.slidesTpl.apply(this.slides)
		});

		for(var i = 1; i <= this.totalSlides; i++){
			nav.push({
				tag: 'li',
				id: 'featurenav-'+i,
				children: {
					tag: 'a',
					href: '#'+i,
					html: i
				}
			});
		}
		this.navigationBar = dh.append(this.container, {
			tag: 'ul',
			cls: 'nav-feature',
			children: nav
		}, true);

		this.navigationBar.on('click', this.onNavClick, this, {delegate: 'li'});

		Ext.TaskMgr.start(this.task);
	},
	activateSlide: function(){
		if (this.activeSlide == 0){
			this.activeSlide = this.start;
			this.showSlide(this.activeSlide);
		}else{
			var num = this.activeSlide;
			var old = this.activeSlide;
			if(num == this.totalSlides){
				num = 1;
			}else{
				num++;
			}
			this.showSlide(num, old);
		}
	},
	showSlide: function(num, old){
		old = old || false;
		if(old){
			Ext.fly(this.slideID+old).fadeOut().removeClass('active');
			Ext.fly(this.navID+old).removeClass('active');
		}
		this.activeSlide = num;
		Ext.fly(this.slideID+num).fadeIn().addClass('active');
		Ext.fly(this.navID+num).addClass('active');
	},
	onNavClick: function(e, el){
		e.preventDefault();
		Ext.TaskMgr.stop(this.task);
		var num = el.id.split('-')[1];

		var old = this.activeSlide;
		Ext.fly(this.slideID+old).fadeOut().removeClass('active');
		Ext.fly(this.navID+old).removeClass('active');

		this.activeSlide = num;
		Ext.fly(this.slideID+num).fadeIn().addClass('active');
		Ext.fly(this.navID+num).addClass('active');

		function startAnimation(){
			Ext.TaskMgr.start(this.task);
		}
		var dt = new Ext.util.DelayedTask(startAnimation, this);
		dt.delay(10000);
	}
});