Ext.onReady(function() {
			var w = {
				panel: false,
				subpanel: false,
				btnbar: false,
				btns: false,
				btnPrev: false,
				btnPlay: false,
				btnNext: false,
				slides: false,
				ci: 0,
				interval: 10000,
				player: false,
				running: false,
				'show': function(n) {
					this.slides[n].fadeIn();
					this.btns[n].addClass('slide-btn-active');
					this.btns[n].removeClass('slide-btn');
					if (n!=this.ci) {
						var p = this.ci;
						this.slides[p].fadeOut();
						this.btns[p].addClass('slide-btn');
						this.btns[p].removeClass('slide-btn-active');
					}
					this.ci = n;
				},
				nextSlide: function() {
					n = this.ci;
					m = this.slides.length -1;
					n++;
					if (n>m) n=0;
					this.show(n);
				},
				prevSlide: function() {
					n = this.ci;
					m = this.slides.length - 1;
					n--;
					if (n<0) n=m;
					this.show(n);
				},
				doPlay: function(mode) {
					if (!this.player) this.player = new Ext.util.TaskRunner(this.interval);
					if (mode!=this.running) {
						if (mode) {
							this.player.start(this.task);
							this.btnPlay.addClass('pause-btn');
							this.btnPlay.removeClass('play-btn');
						}
						else {
							this.player.stop(this.task);
							this.btnPlay.addClass('play-btn');
							this.btnPlay.removeClass('pause-btn');
						}
						this.running = mode;
					}
				},
				init: function(container_id) {
					var me = this;
					var panel = this.panel = Ext.get(container_id);
					var panelw = panel.getWidth(true), panelh = panel.getHeight(true);
					var sp_id = container_id+'-slides', bb_id = container_id+'-btnbar';
					var subpanel = this.subpanel = panel.insertFirst({'id':sp_id,'tag':'div','position':'relative'});
					subpanel.setWidth(panelw);
					subpanel.setHeight(panelh - 25);
					// panelw = left(24 as padding)+((sep(2),button(?))*n)+prevbtn(24)+playbtn(24)+nextbtn(25)
					// panelw-(left(24)+prevbtn(24)+playbtn(24)+nextbtn(25)) =
					var slides = this.slides = new Array();
					var btns = this.btns = new Array();
					var btnbar = this.btnbar = panel.createChild({'id':bb_id,'tag':'div','class':'button-bar'});
					Ext.each(panel.query('div.slide'),function(s,n,ss) {
						var nslides = ss.length;
						slide = Ext.get(s);
						slides[n] = slide;
						slide.appendTo(this.subpanel);
						btnbar.createChild({'class':'sep'});
						var btn = btnbar.createChild({'tag':'a','href':'#stl-masthead','id':slide.id+'-btn','class':'slide-btn'});
						btn.insertHtml('afterBegin',slide.dom.title);
						btns[n] = btn;
						btn.n = n;
						btn.w = this;
						btn.on('click',function() {this.w.doPlay(false);this.w.show(this.n);},btn);
					},this);
					this.btnPrev = btnbar.createChild({id:container_id+"-prev-btn",tag:'a','href':'#stl-masthead','class':'prev-btn'});
					this.btnPrev.on('click',function() {this.doPlay(false);this.prevSlide();},this);
					this.btnPlay = btnbar.createChild({id:container_id+"-play-btn",tag:'a','href':'#stl-masthead','class':'play-btn'});
					this.btnPlay.on('click',function() {this.doPlay(!this.running);},this);
					this.btnNext = btnbar.createChild({id:container_id+"-next-btn",tag:'a','href':'#stl-masthead','class':'next-btn'});
					this.btnNext.on('click',function() {this.doPlay(false);this.nextSlide();},this);
					this.show(0);
					this.task = {interval:this.interval,run:function(){me.nextSlide();}};
					this.doPlay(true);
				}
			};
			document.w = w;
			w.init('ss-01');
			});