Ext.namespace('Ext.ux');
Ext.ux.BannerInteractive = function(config){
	this.bannerid = 'topbanner';
	this.bannercls = 'banner';
	this.triggercls = 'trigger';
	this.fadeduration = .5;
	this.interval = 5;

	config = config || {};
	Ext.apply(this, config);

	this.elsBanner = {};
	this.elsTrigger = {};
	this.elcount = 0

	this.task = {
		run: function(){
			this.next();
		},
		interval: this.interval*1000,
		scope: this
	}
	this.runner = new Ext.util.TaskRunner();

	this.create = function(){
		this.elsBanner = Ext.get(this.bannerid).select('ul.'+this.bannercls+' li').elements;
		this.elcount = this.elsBanner.length;
		this.elsBanner.forEach(function(el){
			el = Ext.get(el);
			el.setStyle('z-index', '-1');
			el.setVisible(false, false);
		});
		var el = Ext.get(this.elsBanner[0]);
		el.setStyle('z-index', '1');
		el.setVisible(true, false);
		el.addClass('active');

		this.elsTrigger = Ext.select('#'+this.bannerid+' ul.'+this.triggercls+' li').elements;
		for(var i in this.elsTrigger){
			if(Ext.isFunction(this.elsTrigger[i])){
				continue;
			}
			Ext.fly(this.elsTrigger[i]).on('click', function(e, t){
				this.setItemActive(t, false);
			}, this);
		}

		el = Ext.get(this.elsTrigger[0]);
		el.addClass('active');

		this.timeoutid = this.startTask.defer(this.interval*1000, this);
	}

	this.startTask = function(){
		this.stopTask();
		this.runner.start(this.task);
		//Ext.TaskMgr.start(this.task);
	}
	this.stopTask = function(){
		clearTimeout(this.timeoutid);
		this.runner.stopAll();
		//Ext.TaskMgr.stop(this.task);
	}

	this.setItemActive = function(el, fade){
		this.stopTask();
		this.timeoutid = this.startTask.defer(this.interval*1000*2+this.fadeduration*1000, this);

		var els = Ext.select('#'+this.bannerid+' ul.'+this.triggercls+' li').elements;
		els.forEach(function(el){
			Ext.fly(el).removeClass('active');
		});
		Ext.fly(el).addClass('active');

		var i = this.getPosition(Ext.get(el));

		if(fade){
			this.fadeImage(Ext.get(this.elsBanner[i]));
		} else {
			this.noFadeImage(Ext.get(this.elsBanner[i]));
		}
	}

	this.next = function(){
		var el = Ext.select('#'+this.bannerid+' ul.'+this.triggercls+' li.active').elements[0];
		var next = this.getPosition(Ext.get(el)) + 1;
		if(next == this.elcount){
			next = 0;
		}

		this.elsTrigger.forEach(function(el){
			Ext.fly(el).removeClass('active');
		});
		Ext.fly(this.elsTrigger[next]).addClass('active');
		this.fadeImage(Ext.get(this.elsBanner[next]));
	}

	this.fadeImage = function (bannernew){
		var bannerold = Ext.get(Ext.select('#'+this.bannerid+' ul.'+this.bannercls+' li.active').elements[0]);
		if(bannerold != bannernew){
			bannerold.removeClass('active');
			bannernew.addClass('active');
			bannernew.setStyle('z-index', '2');
			bannernew.fadeIn({
				duration: this.fadeduration,
				callback: function(){
					this.bannerold.setStyle('z-index', '-1');
					this.bannerold.setVisible(false, false);
					this.bannernew.setStyle('z-index', '1');
					this.bannernew.setVisible(true, false);
				},
				scope: {
					bannerold: bannerold,
					bannernew: bannernew
				}
			});
		}
	}

	this.noFadeImage = function (bannernew){
		var bannerold = Ext.get(Ext.select('#'+this.bannerid+' ul.'+this.bannercls+' li.active').elements[0]);
		if(bannerold != bannernew){
			bannerold.removeClass('active');
			bannernew.addClass('active');
			bannernew.setStyle('z-index', '2');
			bannerold.setStyle('z-index', '-1');
			bannerold.setVisible(false, false);
			bannernew.setStyle('z-index', '1');
			bannernew.setVisible(true, false);
		}
	}

	this.getPosition = function(el){
		var i = 0;
		try {
			var prev = el.prev();
			while(prev){
				i++;
				prev = Ext.fly(prev).prev();
			}
		} catch(e) {
			this.stopTask();
			this.startTask();
		}

		return i;
	}


	this.create();
}