var current_index = 0;
var total_items = 0;
var delay = 5000;
var timeout_id = null;

$(document).ready(function() {
    var numbers = $('.portfolio-featured .panel .pages');
    var content = $('.portfolio-featured .panel .items');
    $('.portfolio-featured .pics a').each(function() {
        var link = $(this).attr('href');
        var title = $(this).attr('title');
        var costumer = $(this).find('img').attr('title');
        content.append('<div><h1><a href="'+link+'">'+title+'</a></h1><p><a href="'+link+'">Cliente: '+costumer+'</a></p></div>');
        numbers.append('<a href="#" class="item'+total_items+'" onclick="return change_item('+total_items+')">'+(total_items+1)+'</a> ');
        total_items += 1;
    });
    $('.portfolio-featured .pages a:first').addClass('active');
    timeout_id = setTimeout(change_to_next, delay);
});

function change_item(index) {
    $('.portfolio-featured .items').css('top', (-59 * (index)) + 'px');
    $('.portfolio-featured .pics').animate({left: (-940 * (index)) + 'px'}, 400);
    $('.portfolio-featured .pages a').removeClass('active');
    $('.portfolio-featured .pages a.item'+index).addClass('active');
    current_index = index;
    if(timeout_id != null)
        clearTimeout(timeout_id);
    timeout_id = setTimeout(change_to_next, delay);
    return false;
}

function change_to_next() {
    current_index += 1;
    if (current_index >= total_items)
        current_index = 0;
    change_item(current_index);
}