Ext.define('W.topcate',{
	constructor : function(conf){
		var me = this;
		Ext.apply(me,{
			colorCls : 'blue',
			data : [{name:'top1'}]
		});
		Ext.apply(me,conf);
		me.contEl = Ext.get(me.cont);
	},
	els : {},
	items : [],
	render : function() {
		var me = this,
			els = me.els,
			dh = Ext.core.DomHelper,rand;
		if(me.data.length == 0) return;
		
		els.title = dh.append(me.cont, {tag: 'div', cls: 'title', html : me.title},true);
		els.cont = dh.append(me.cont, {tag: 'div', cls: 'body'},true);
		els.descdata = dh.append(els.cont, {tag: 'div', cls: 'desc-data',html:'html'},true);
		
		rand = Math.floor(Math.random() * me.data.length);
		Ext.each(me.data,function(it,i){
			var el = me.items[i] = dh.append(els.cont, {tag: 'div', cls: 'aitem',
				ind : i,
				cn : [{tag:'a',html:it.name},{tag:'div'}]
			},true);
			el.on('mouseenter',function(){
				me.change(el);
			});
			if(i == rand){
				me.change(el);
			}
		});
	},
	change : function(el){
		var els = this.els;
			db = this.data[el.getAttribute('ind')],
			dh = Ext.core.DomHelper;
        
		els.descdata.update(db.content);
		
		Ext.each(this.items,function(it){
			it.removeCls('active');
		});
		el.addCls('active');
	}
});