Ext.ux.SlideInCardLayout= Ext.extend(Ext.layout.CardLayout, {

    setActiveItem : function(item){
        item = this.container.getComponent(item);
        if(this.activeItem != item){
            if(this.activeItem){
                this.activeItem.hide();
            }
            this.activeItem = item;
            item.show();	
            this.layout();
            item.getEl().slideIn('t');
        }
    }
}); 
Ext.Container.LAYOUTS['slidein'] = Ext.ux.SlideInCardLayout;
Ext.ux.SlideOutCardLayout= Ext.extend(Ext.layout.CardLayout, {

    setActiveItem : function(item){
        item = this.container.getComponent(item);
        if(this.activeItem != item){
            if(this.activeItem){
	            this.activeItem.hide();
            }
            this.activeItem = item;
            item.show();
            this.layout();
			item.getEl().slideIn('b');
        }
    }
}); 
Ext.Container.LAYOUTS['slideout'] = Ext.ux.SlideOutCardLayout;
Ext.Rotator = Ext.extend(Ext.Panel, {
	task : null,
	emptyText : "",
	layout:'card',
	interval : 1000,
	activeItem: 0, 
	initComponent : function()
	{
		Ext.Rotator.superclass.initComponent.call(this);
		if(typeof this.tpl == "string")
		{
            this.tpl = new Ext.XTemplate(this.tpl);
        }
        //this.addEvents(
        this.all = new Ext.CompositeElementLite();
	},
	onRender : function(){
		if(!this.el){
            this.el = document.createElement('div');
        }
        Ext.Rotator.superclass.onRender.apply(this, arguments);
    },
    afterRender : function(){
        Ext.Rotator.superclass.afterRender.call(this);
        if(this.store){
            this.setStore(this.store, true);
        }
    	this.el.on({
                "mouseover": this.onMouseOver,
                "mouseout": this.onMouseOut,
                scope:this
            });
    },
	stop : function ()
	{
		if (this.task){Ext.TaskMgr.stop(this.task);this.task = null;}
	},
	start : function(o){
		var obj = this;
		var task = {run:function(){
			lay = obj.getLayout();
			_max = obj.items.length;
			if (_max ==0){obj.stop();return;}
			if (lay.activeItem==null)return;
			var i = parseInt(lay.activeItem.pos);
			if (i == (_max-1)) i = -1;
			if(!o)lay.setActiveItem(i+1);o = false;
	},interval: this.interval};
		Ext.TaskMgr.start(task);
		this.task = task;
	}
	,
    setStore : function(store, initial){
        if(!initial && this.store){
            this.store.un("beforeload", this.onBeforeLoad, this);
            this.store.un("datachanged", this.refresh, this);
            this.store.un("clear", this.refresh, this);
        }
        if(store){
            store = Ext.StoreMgr.lookup(store);
            store.on("beforeload", this.onBeforeLoad, this);
            store.on("datachanged", this.refresh, this);
            store.on("clear", this.refresh, this);
        }
        this.store = store;
        if(store){
            this.refresh();
        }
    },
	onBeforeLoad : function()
	{
        if(this.loadingText)
        {
            this.el.update('<div class="loading-indicator">'+this.loadingText+'</div>');
            this.all.clear();
        }
	},
	    prepareData : function(data){
        return data;
    },

    // private
    createItems : function(records, startIndex){
        var r = [];
        for(var i = 0, len = records.length; i < len; i++){
            _tdata = this.prepareData(records[i].data, startIndex+i, records[i]);
	        r[i] = { pos : i , html :this.tpl.applyTemplate(_tdata) };
			this.add (r[i]);
        }
    },
	refresh : function()
	{
        var records = this.store.getRange();
        if(records.length < 1){
            this.el.update(this.emptyText);
            this.all.clear();
            return;
        }
        this.createItems(records);
        //this.getLayout().setActiveItem(0);
        if(this.autoStart) this.start(true);
    },
    onDestroy : function(){
        alert();
        if(this.rendered){
            if(this.loadMask){
                this.loadMask.destroy();
            }
            var c = this.body;
            c.removeAllListeners();
            this.stop();
            c.update("");
        }
        Ext.rotator.superclass.onDestroy.call(this);
    },
        onMouseOver : function(e){this.stop();}
    ,
	    onMouseOut : function(e){this.start();}
	});
	Ext.reg('rotator', Ext.Panel);