$(document).ready(function(){
    var _links = $('ul.pages a');
    var _articlesBox = $('div.articles-box');
    var _step = 505;
    var _margin = 0;
    var _articleHeight = [];
    var _timerAutoSlide = false;
    
    $('div.articles-box div.article').each(function(i, el){
	_articleHeight[i] = $(el).outerHeight(true);
    }).hover(function(){
	if (_timerAutoSlide) clearTimeout(_timerAutoSlide);
    }, function() {
	_timerAutoSlide = setTimeout(function() {
	    autoSlide();
	}, 5000);
    });
    
    _articlesBox.animate({height:_articleHeight[0]}, {queue:false, duration:600});
    
    var slideAnimated = function(i) {
	_margin = _step*i;
	_articlesBox.animate({
	    marginLeft:-_margin,
	    height:_articleHeight[i]
	}, {queue:false, duration:600});
    }
    
    var autoSlide = function() {
	if (_links.filter('.active').parent().next().is('li')) {
	    _links.filter('.active').removeClass('active').parent().next().children('a').addClass('active');
	} else {
	    _links.filter('.active').removeClass('active');
	    _links.eq(0).addClass('active');
	}
	var _index = _links.index(_links.filter('.active'));
	slideAnimated(_index);
	_timerAutoSlide = setTimeout(function() {
	    autoSlide();
	}, 9000);
    }
    
    _timerAutoSlide = setTimeout(function() {
	autoSlide();
    }, 9000);
    
    _links.click(function(){
	var _index = _links.index($(this));
	slideAnimated(_index);
	_links.removeClass('active');
	$(this).addClass('active');
	return false;
    });
    
});