Ext.namespace('Ext.ux');

Ext.ux.ImageSlideshow = Ext.extend(Ext.Container, {
   
  start: 0,
  duration: 1,
  easing: 'easeNone',
  pause: 6000,
  
  // private
  
  
  
  initComponent : function(){
  
    Ext.ux.ImageSlideshow.superclass.initComponent.call(this);
        
    this.tpl = new Ext.Template('<img src="./images/our_clients/{url}">');
    this.tpl.compile();
    
	
    if(this.ds) {
        this.store = this.ds;
        delete this.ds;
    } else {
        this.store = new Ext.data.JsonStore({
        autoLoad: this.autoLoad,
        baseParams: this.params,
        url: this.url,
        root: 'data',
        fields: [
          {name: 'url', type: 'string'}
        ]
      });
    }
    this.store = Ext.StoreMgr.lookup(this.store);
    this.store.on('load', this.loop, this);
  },
    
  // private
  onRender: function(ct, position) {
  
    this.el = ct.createChild({
			id: this.id,
			cls: this.baseCls
		}, position);
		
		this.el.setWidth(this.width);
		this.el.setHeight(this.height);
  },
    
  load: function() {
    this.store.load();
  },
  //private
  loop: function() {
    if(this.store.getCount()>0) {
      var r = this.store.getAt(this.start++);
      
      this.el.fadeOut({
        duration: this.duration,
        easing: this.easing,
        scope: this,
        useDisplay: true,
        callback: function() {
          this.tpl.overwrite(this.el.dom, r.data);
          this.el.fadeIn({
            duration: this.duration,
            easing: this.easing,
            scope: this,
            callback: function() {
              if( this.start == this.store.getCount() ) {
                this.start = 0;
              }
              setTimeout( this.loop.createDelegate(this), this.pause );
            }      
          });             
        }
      });
    }   
  }   
});
 
Ext.reg('image-slideshow', Ext.ux.ImageSlideshow);
Ext.onReady(function(){

var store = new Ext.data.SimpleStore({
  fields: [
    {name: 'url'}
  ]
});
    		
var store2 = new Ext.data.SimpleStore({
  fields: [
    {name: 'url'}
  ]
});			
			
var myData = [
  ['./img1.jpg'],
  ['./img2.jpg'],
  ['./img3.jpg'],
  ['./img4.jpg'],
  ['./img5.jpg'],
  ['./img6.jpg'],
  ['./img7.jpg'],
  ['./img8.jpg'],
  ['./img9.jpg'],
  ['./img10.jpg'],
  ['./img11.jpg'],
  ['./img12.jpg'],
  ['./img13.jpg'],
  ['./img14.jpg'],
  ['./img15.jpg']
 ];

var myData2 = [
  ['./shape1.jpg'],
  ['./shape2.jpg'],
  ['./shape3.jpg'],
  ['./shape4.jpg'],
  ['./shape5.jpg'],
  ['./shape6.jpg'],
  ['./shape7.jpg'],
  ['./shape8.jpg']
 ];
					 
var slideshow = new Ext.ux.ImageSlideshow({
   renderTo: 'img_rotator',
   ds: store,
   width: 254,
   height: 150,
   pause: 4000
});
store.loadData(myData);


var slideshow2 = new Ext.ux.ImageSlideshow({
   renderTo: 'img_rotator2',
   ds: store2,
   width: 254,
   height: 200
});
store2.loadData(myData2);

});