ImageSlider = {
    
    $container : 'div.image-slider',
    $images : 'div.image-slider div.image-slider-images div',
    $nav : 'div.image-slider div.image-slider-nav',
    pointer : 0,
    images_count : 0,
    timeout : 0,
    
    init : function() {
        
        var images = this.getImages();
        var nav = $(this.$nav);
        
        this.images_count = images.length;
        
        images.each(function() {
            
            $(this).parent().css('width', '+=' + 774); //FIXME: in chrome $(this).outerWidth() = 0
        });
        
        for(var i = 0; i < this.images_count; i++) {

            var item = $('<div />');
            
            item.click(jQuery.proxy(function() {
                    
                    ImageSlider.slideTo(this.i + 1);
                },
                {i:i}
            ));
            item.mouseover(function() {
                $(this).addClass('over');
            });
            item.mouseout(function() {
                $(this).removeClass('over');
            });
            
            nav.append(item);
        }
        
        $(this.$container).find('.image-slider-left').click(function() {
            
            ImageSlider.prev();
        });
        
        $(this.$container).find('.image-slider-right').click(function() {
            
            ImageSlider.next();
        });
        
        this.slideTo(1);
    },
    
    prev : function() {
        
        this.slideTo(this.pointer > 1
            ? this.pointer - 1
            : this.images_count
        );
    },
    
    next : function() {
        
        this.slideTo(this.pointer < this.images_count
            ? this.pointer + 1
            : 1
        );
    },
    
    slideTo : function(pnt) {
        
        if(pnt > 0 && pnt <= this.images_count) {
            
            var left = 0
            var imgs = this.getImages();
            
            for(var i = 0; i < pnt - 1; i++) {
                
                left -= $(imgs.get(i)).outerWidth();
            }
            
            $(this.$images).animate(
                {left: left}, 750, 'swing');
            
            $(this.$nav).find('div.active').removeClass('active');
            $(this.$nav).find('div:nth-child('+ pnt +')').addClass('active');
            
            if(this.timeout) {
                
                clearTimeout(this.timeout);
            }
            
            this.timeout = setTimeout( function() {ImageSlider.next();}, 10*1000 );
            this.pointer = pnt;
        }
    },
    
    getImages : function() {
        
        return $(this.$images).find('img');
    }
}