var basic_box_offset; // basic_box_position + width of parent box which is 675px
var basic_box_position;
var container_id = '#top_box_content';
var container_width = 675;

var current = 0;
var total;
var timer = '';

$('document').ready(
    function() {
        basic_box_position = 15 // we're adding 25px of left margin //$('#top_box_content').offset().left;
        //basic_box_position += 25; // we are adding 25px thus parent padding
        basic_box_offset = basic_box_position + 675; // 675 is box width;
        //alert(basic_box_position);
        var content_boxes_array = $('#top_box_content').children();
        var content_boxes_counter = content_boxes_array.length;
        
        total = content_boxes_counter;
        current = content_boxes_counter-1;
        
		$('#dots').html('');
        
		for (var i = 0; i < content_boxes_counter; i++)
        {
            content_boxes_array[i].setAttribute('id', i);
            
            
            var anchor = $('<li><a href="#" class="'+i+'">'+i+'</a></li>');
            
            $('#dots').append(anchor);
        }
        
        var dots_width = content_boxes_counter * 19;
        
        $('#dots').css('width', dots_width);
                
        slideInRight();
        timer = setInterval('slideInRight()', 6000);
        
        $('#dots li a').click(
            function() 
            {
                
                //alert(''+$(this).hasClass('active')+'');
                
                if ( ! $(this).hasClass('active')) // if it is active slide, do nothing
                {                        
                    clearInterval(timer);
                    //alert('jebut');
                    
                    var id = $(this).attr('class');
                    
                    if (id > current)
                    {
                        slideInRight(id);
                    }
                    else
                    {
                        slideInLeft(id);
                    }
                    
                    timer = setInterval('slideInRight()', 6000);
                }
                
                return false;
            } 
        );
        
        $('#top_box_content').hover(
            function() {
                clearInterval(timer);
            }, function() {
                timer = setInterval('slideInRight()', 6000)
            }
        ); 
    }
);

function slideIn(direction)
{
    switch (direction) {
        case 'left' : slideInLeft();
            break;
        case 'right' : slideInRight();
            break;
        default: slideInRight();
    }
}

function slideInRight(id)
{
    var next = current;
    ++next;
    
    if (id)
    {
        next = id;
    }  
    else if (next == total)
    {
        next = 0;
    }
    //alert(next);
    
    //var next_box_offset = basic_;
    
    $('div#'+next).css({
        'left' : basic_box_offset,
        'display' : 'block'
    }).delay(200).animate({
        'left' : basic_box_position
    });
    
    $('div#'+current).animate({
        'left' : basic_box_position - 675
    });
    
    $('#dots li a.'+current).removeClass('active');
    $('#dots li a.'+next).addClass('active');
    
    
    current = next;
    
    //alert(current);
}

function slideInLeft(id)
{
    var next = current;
    ++next;
    
    if (id)
    {
        next = id;
    }  
    else if (next == total)
    {
        next = 0;
    }
    //alert(next);
    $('div#'+next).css({
        'left' : basic_box_position - 675,
        'display' : 'block'
    }).delay(200).animate({
        'left' : basic_box_position
    });
    
    $('div#'+current).animate({
        'left' : basic_box_offset
    });
    
    $('#dots li a.'+current).removeClass('active');
    $('#dots li a.'+next).addClass('active');
    
    current = next;
    
    //alert(current);
}