sillySlider jquery plugin

http://www.affiniagroup.com/wps/portal/affiniagroup/ flash to html5 port

HTML

<script type="text/javascript" href="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<div id="widget" class="silly-uninitialised">
    <div class="group">
        <div class="thumb" data-init-pos="10% 0%" data-pos="10% 70%" data-img="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhUKIKx0P27fLIz-zweb6s5PEurG475XOmJ5bBXf5XOvIJh9galA"></div>
        <div class="thumb" data-init-pos="85% 65%" data-pos="12% 20%" data-img="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQZaUA_tZ_oOVkQprM1GpMM3EE1BAmH1du7Woo8N-YeOwWJc9y4"></div>      
        <div class="thumb" data-init-pos="10% 75%" data-pos="80% 75%" data-img="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT47GYPbrSY5_U6k-L-BRsFpS77b0VyBrdloJWorUIkh4tcvYBCFQ"></div>
        <div class="thumb" data-init-pos="0% 25%"  data-title="cars are nice!" data-pos="50% 50%" data-img="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSwvvPJvT9P0LRxos9CXaAVxNAW6aHf3DEawYkSIcLgAHKReyhl8Q"></div>
    </div>
    
    <div class="group">
        <div class="thumb" data-init-pos="80% 25%" data-pos="0% 80%" data-img="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvDRdg1_akBV4CE8ewI03JiVBL5OSEP3kb6hbrXU6hdB9fH14j"></div>
        <div class="thumb" data-init-pos="10% 50%" data-pos="70% 0%" data-img="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGFw--ol7oUgY7S0N7DyKefrsTwi0LCUI6qLMAedCj1hT_nfOoiA"></div>        
        <div class="thumb" data-init-pos="0% 5%" data-pos="70% 80%"  data-img="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTXz9QAP4clxi0xS1L5bU2yjlVDz0W8ZIJj6ijH_n7WZJ_wCXblvw"></div>
        <div class="thumb" data-init-pos="35% 60%" data-pos="30% 30%" data-img="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQGiFBh9DjkNDie00RSYnc-PjjVGnsUpNe6f3jdt0vzhLx0yIDFOg" data-title="we like trucks"></div> 
    </div>        
</div>

CSS

#widget{
    width : 800px;
    height : 600px;
}

.silly-main {
    position : relative;
}
/*enable hardware acceleration for this slider*/
.silly-main , .silly-main *{
    -webkit-transform : translateZ(0);
    -moz-transform : translateZ(0);
    -o-transform : translateZ(0);
    -ms-transform : translateZ(0);
    transform : translateZ(0);
}

.silly-uninitialised{
    visibility : hidden;
}

.group{
    position : absolute;
    width : 500px;
    height : 350px;
    top : 0;
    left : 0;
}

.group.silly-active {
    z-index : 10;
}

.group.silly-active .thumb {
   -webkit-filter : none;
   -moz-filter : none;
   -o-filter : none;
   -ms-filter : none;
   filter : none;
}

.thumb {
    position : absolute;
    opacity : 0;
    -webkit-filter : grayscale(100%);
    -moz-filter : grayscale(100%);
    -o-filter : grayscale(100%);
    -ms-filter : grayscale(100%);    
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(100%);
    
    -webkit-transition : -webkit-filter 0.5s ease;
    -moz-transition : -moz-filter 0.5s ease;
    -o-transition : -o-filter 0.5s ease;
    -ms-transition : -ms-filter 0.5s ease;
    transition : filter 0.5s ease;
    
}

.thumb img {
    width : 100%;
    height : auto;
}

.silly-title {
    opacity : 0;
    /* the bg image supplied is the equivalent of the following expression : 
    background : rgba(51, 51, 51, .8);
    */
    background-image:...

JavaScript

/*
* @name : jquery.sillySlider
* @desc :a slider port from flash to html5 (original : http://www.affiniagroup.com/wps/portal/affiniagroup/)
* @author : bogdan gradinariu
*/
(function(global, $){
    
    // reverse plugin :))
    $.fn.reverse = [].reverse;
    
    function SillySlider($el, o){
        this.$el = $el;
        this.groups = this.$el.find('.group');
        this.current = 0;
        this.timer = null;
        this.o = o;
        this.$title = $('<div />', {'class' : 'silly-title'}).appendTo(this.$el);
    }
    
    $.extend(SillySlider.prototype, {
        
        init : function(o){
            if(o)
                this.o = o;
            
            var self = this;
            
           this.$el.find('.thumb')
               .each(function(i, el){
                    var $el = $(el),
                        pos = $.trim($el.data('initPos')).split(/\s+/g),
                        attr = {
                            left : pos[0],
                            top : pos[1],
                     //       opacity : self.o.opacity,
                            width : self.o.initialWidth
                        },
                        src = $el.data('img');
                    
                    $el
                        .css(attr)
                        .empty()
                        .append('<img src="'+ src +'" />', {alt : ''});
               })
               .reverse()
               .each(function(i, el){
                   setTimeout(function(){
                       $(el).fadeTo(self.o.initFadeInDuration, self.o.opacity);
                       console.log(i, el);
                   }, i * self.o.initFadeInDelay);
               });
            
            
            this.$el
                .addClass('silly-main')
                .removeClass('silly-uninitialised');
            
            if(this.o.autoplay)
                setTimeout(function(){
                    self.start();
                },...