sillySlider jquery plugin

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

by George-Leonard Chetreanu

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 have wheels!" 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;
}

.silly-uninitialised{
    visibility : hidden;
}

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

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

.thumb {
    position : absolute;
}

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

.silly-title {
    opacity : 0;
    /*for older browsers*/
    background : rgb(51, 51, 51);
    background : rgba(51, 51, 51, .8);
    text-align : left;
    font-size : 20px;
    color : #fff;
    position : absolute;
    text-transform : uppercase;
    padding-left : 10px;
    font-family : tahoma,verdana,arial;
    z-index : 11;
}

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, $){

    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 : ''});
            });
            
            this.$el
                .addClass('silly-main')
                .removeClass('silly-uninitialised');
            
            if(this.o.autoplay)
                this.start();
            
            return this;
        },
        
        next : function(){
            var self = this,
                oldGroup = this.groups.filter('.silly-active'),
                newGroup;
            
           
            
           
            
            if(oldGroup.length)
                {
                    this.current = (this.groups.index(oldGroup) + 1) % this.groups.length;
                    
                    oldGroup.find('.thumb').each(function(i, el){
                        var...