Vps.EyeCandy.List.Plugins.Carousel = Ext.extend(Vps.EyeCandy.List.Plugins.Abstract, {
    nextSelector: 'a.carouselNext',
    previousSelector: 'a.carouselPrevious',
    numberShown: 5,
    //animationConfig: { concurrent: true, duration: 0.25 },

    _moveActive: false,
    init: function() {
        Ext.applyIf(this, {
            animationConfig: { concurrent: true, duration: 0.25 }
        });
    },
    render: function() {
        this.list.el.parent().query(this.nextSelector).each(function(el) {
            Ext.fly(el).on('click', function(ev) {
                ev.stopEvent();
                this.onMoveNext();
            }, this);
        }, this);
        this.list.el.parent().query(this.previousSelector).each(function(el) {
            Ext.fly(el).on('click', function(ev) {
                ev.stopEvent();
                this.onMovePrevious();
            }, this);
        }, this);
        for(var i=this.numberShown; i<this.list.getItems().length; ++i) {
            this.list.getItem(i).el.hide();
        }

        if (this.list.items <= this.numberShown) {
            this.list.el.parent().query(this.previousSelector).hide();
            this.list.el.parent().query(this.nextSelector).hide();
        }
    },

    onMoveNext: function() {
        if (this._moveActive) return;
        this._moveActive = true;

        // fade out first one
        var cfg = Ext.applyIf({
            useDisplay: false
        }, this.animationConfig);
        this.list.getItem(0).el.fadeOut(cfg);

        // fade in new one
        this.list.getItem(this.numberShown).el.fadeIn(cfg);

        var firstElWidth = this.list.getItem(0).getWidthIncludingMargin();

        var cfg = Ext.applyIf({
            callback: function() {

                // push moved left element to back
                this.list.getItem(0).el.insertAfter(this.list.getLastItem().el); //move element
                this.list.items.push(this.list.items.shift()); //adapt array

                //adapt listIndex property
                var idx = 0;
                this.list.items.each(function(i) {
                    i.listIndex = idx++;
                }, this);

                // left von wrapper wieder setzen
                this.list.el.move('right', firstElWidth, false);

                this._moveActive = false;
            },
            scope: this
        }, this.animationConfig);
        this.list.el.move('left', firstElWidth, cfg);
    },

    onMovePrevious: function()
    {
        if (this._moveActive) return;
        this._moveActive = true;

        // rechts rausgeschobenes element vorn dran
        this.list.getLastItem().el.insertBefore(this.list.getItem(0).el);
        this.list.items.unshift(this.list.items.pop());

        //adapt listIndex property
        var idx = 0;
        this.list.items.each(function(i) {
            i.listIndex = idx++;
        }, this);

        // left von wrapper setzen
        this.list.el.move('left', this.list.getItem(0).getWidthIncludingMargin(), false);

        // fade in first
        var cfg = Ext.applyIf({
            useDisplay: false
        }, this.animationConfig);
        this.list.getItem(0).el.fadeIn(cfg);

        // fade out last
        this.list.getItem(this.numberShown).el.fadeOut(cfg);
        var cfg = Ext.applyIf({
            callback: function() {
                this._moveActive = false;
            },
            scope: this
        });
        this.list.el.move('right', this.list.getItem(0).getWidthIncludingMargin(), cfg);
    }

});

@@ -88,163 +88,172 @@
    n
-extSelector: 'a.carouselNext',%0A    previousSelector: 'a.carouselPrevious',%0A    numberShown: 5,%0A    //animationConfig: %7B concurrent: true, duration: 0.25 %7D,
+umberShown: 5,%0A    //animationConfig: %7B concurrent: true, duration: 0.25 %7D,%0A    moveElementSelector: false, //if false list.el, else list.child(moveElementSelector)
 %0A%0A  
@@ -411,32 +411,81 @@
     
-%7D,%0A
     
-render: function(
+this.moveElement = this.list.el;%0A        if (this.moveElementSelector
 ) %7B%0A
@@ -496,97 +496,325 @@
     
+   
+ 
 this.
-list.el.parent().query(this.nextSelector).each(function(el) %7B%0A            Ext.fly(el
+moveElement = this.moveElement.child(this.moveElementSelector);%0A        %7D%0A    %7D,%0A    render: function() %7B%0A        if (this.list.items.length %3E this.numberShown) %7B%0A            this.list.el.createChild(%7B%0A                tag: 'a',%0A                cls: 'carouselPrevious',%0A                href: '#'%0A            %7D
 ).on
@@ -897,20 +897,24 @@
 s.onMove
-Next
+Previous
 ();%0A    
@@ -938,35 +938,21 @@
 %0A       
- %7D, this);%0A
      
-   
 this.lis
@@ -960,65 +960,110 @@
 .el.
-parent().query(this.previ
+createChild(%7B%0A                tag: 'a',%0A                cls: 'car
 ous
-S
 el
-ector).each(function(el) %7B
+Next',%0A                href: '#'
 %0A   
@@ -1075,18 +1075,9 @@
     
-Ext.fly(el
+%7D
 ).on
@@ -1156,32 +1156,28 @@
  this.onMove
-Previous
+Next
 ();%0A        
@@ -1194,34 +1194,21 @@
 s);%0A
-   
+%0A
      
-%7D, this);%0A
        
- 
 for(
@@ -1273,32 +1273,36 @@
 ) %7B%0A            
+    
 this.list.getIte
@@ -1329,199 +1329,13 @@
     
-%7D%0A%0A        if (this.list.items %3C= this.numberShown) %7B%0A            this.list.el.parent().query(this.previousSelector).hide();%0A            this.list.el.parent().query(this.nextSelector).hide();
+    %7D
 %0A   
@@ -2334,39 +2334,43 @@
            this.
-list.el
+moveElement
 .move('right', f
@@ -2511,39 +2511,43 @@
 );%0A        this.
-list.el
+moveElement
 .move('left', fi
@@ -3059,31 +3059,35 @@
        this.
-list.el
+moveElement
 .move('left'
@@ -3571,23 +3571,27 @@
    this.
-list.el
+moveElement
 .move('r

build link elements in javascript