$(document).ready(function() {
    var css = ['first', 'second', 'third', 'fourth', 'fifth'],
        ranking_refresh_action,

        update_row = function(o, user, gender) {
            var gender_char = gender === 'm' ? 'o' : 'a',
                group       = gender === 'm' ? 'boys' : 'girls',
                $list       = $('#ranking ol.' + group),
                $li         = $list.children('li.' + css[o]),
                $link       = $li.children('a.user'),
                $dp         = $link.children('img.dp'),
                $caption    = $link.children('span.caption'),
                $user_name  = $link.children('span.user_name'),
                $score      = $link.children('span.score'),
                $points     = $score.children('span.points'),
                $status     = $link.children('span.status'),
                status_text;

            if (typeof user !== 'undefined') {

                if (Number(user.score) > 0 && $li.hasClass('hidden')) {
                    $li.removeClass('hidden');
                }

                // format() method is defined in common.js
                user.score = (Number(user.score)).format(0, ',', '.');

                if ($user_name.html() != user.user_name) {

                    $link.attr('href', 'perfil/'+user.user_name);

                    $dp
                    .attr('src', ATOPE.config.paths.content_url+user.display_picture)
                    .attr('alt', 'Foto de '+user.user_name);

                    $caption.html(user.user_name);

                    $user_name
                    .animate({color:'#fff'}, 'fast', function()
                    { $(this).html(user.user_name); })
                    .animate({color:'#640'}, 'slow');
                }

                $link.attr('class', 'user ' + gender + ' '+user.status);

                if ($points.html() != user.score) {

                    $score
                    .animate({color:'#fff'}, 'fast', function()
                    { $(this).children('span.points').html(user.score); })
                    .animate({color:'#960'}, 'slow');
                }

                status_text = (user.status == 'on') ? 'conectad' : 'no conectad';
                $status.html(status_text+gender_char);
            }
        },

        update_ranking = function(gender, arr) {

            for (var o=0; o<5; o++) {
                update_row(o, arr[o], gender);
            }

        },

        ranking_data = function() {

            $.getJSON('ajax/ranking', function(data, textStatus) {

                update_ranking('m', data.boys);
                update_ranking('f', data.girls);
            });
        };


    jQuery.easing.def = 'easeInOutQuad';
    $("#carousel ul.cycle")
    .before('<div id="carousel_nav">')
    .cycle({
        fx      : 'cover',
        speed   : 0,
        timeout : 3000,
        pause   : 1,
        pager   : '#carousel_nav'
    });

    $("#new_users ul.cycle")
    .before('<div id="new_users_nav">')
    .cycle({
        fx       : 'scrollLeft',
        speed    : 500,
        pause    : 1,
        pager    : '#new_users_nav'
    }).cycle('pause');

    ranking_refresh_action = setInterval(ranking_data, ATOPE.config.ranking.refresh_interval);
});