$(document).ready(function() {
    $('#slider').slider({
        timeout: 3000,
        animationSpeed: 3000
    }); 
});

$.fn.slider = function(config) {
    this.config = config;
    this.controls = new Array();
    this.links = new Array();
    this.current = null;
    this.slideShowEnabled = true;
    
    
    this.slideShow = function() {
        if ( this.slideShowEnabled == false ) return;
        
        var owner = this;
        $(this).delay(owner.config.timeout).queue(function(){
            $(owner).dequeue();
            
            var curindex = 0;
            $(owner.controls).each(function(index) {
                if ( $(this).get(0) == $(owner.current).get(0) )
                    curindex = index;
            });
            curindex = curindex + 1;
            curindex = curindex == $(owner.controls).length ? 0 : curindex;
            owner.animate(curindex);
        });
        
    }    
    
    this.beforeAnimate = function() {
        
        $(this.current).css('left', '0px');
        
        var main = this;
        $(this.controls).each(function() {
            $(this).stop();
            $(this).css({
                position: 'relative',
                display: 'block',
                zIndex: 0
            });
        });
        $(this.controls).hide();
        $(this.current).show();
    }
    
    this.animate = function(index) {
        
        this.beforeAnimate();
        
        var cur = this.current;
        var el = $(this.controls).get(index);
        var owner = this;
        this.current = $(this.controls).get(index);

        $(this.links).removeClass('active');
        $($(this.links).get(index)).addClass('active');

        $(cur).css({
            display: 'block',
            position: 'absolute',
            zIndex: 0
        });
        
        var position = parseInt( $(cur).css('left').replace('px', '') ) + $(cur).width();
        var direction = parseInt( $(cur).css('left').replace('px', '') );

        $(el).css({
            display: 'block',
            position: 'absolute',
            zIndex: 100,
            left: position
        });
        
        $(cur).animate({
            left: parseInt( $(cur).css('left').replace('px', '') ) - $(cur).width()
        },owner.config.animationSpeed);
        
        $(el).animate({
            left: direction
        },owner.config.animationSpeed, function() {
            owner.slideShow()
        });
    };
    
    
    this.init = function() {
        this.config.timeout = !this.config.timeout ? 3000 : this.config.timeout;
        this.config.animationSpeed = !this.config.animationSpeed ? 1000 : this.config.animationSpeed;
        
        this.controls = $(this).find('div.slide_holder div');
        this.links = $(this).find('#reflinks li');
        
        $(this.controls).hide();
        $($(this.controls).first()).show();
        this.current = $(this.controls, ':visible').first();
        
        var main = this;
        
        $(this.links).each(function(index) {
            $(this).click(function() {
                if( $(this).attr('class') == 'active') return;
                main.slideShowEnabled = false;
                $(main).dequeue();
                main.animate(index);
            });
        });
        
        // fix overflow
        if( $(this).find('div.slide_holder').css('overflow') != 'hidden' )
            $(this).find('div.slide_holder').css('overflow', 'hidden');
    };
    
    this.init();
    this.slideShow();
}

