$(document).ready(function () {
    var under = $('.app\\/home-under');
    var videos_ul = under.find('.videos ul');
    var videos = under.find('.videos li');
    var cur_page = 0;
    var total_pages = Math.ceil(videos.size()/3);
    
    videos.hover(
        function (e) {
            var outer = $(this).find('.title');
            var inner = $(this).find('.title h4');
            var o_w = outer.width();
            var i_w = inner.width();
            if (o_w - i_w < -2)
            {
                inner.animate({"margin-left":(o_w-i_w)+'px'}, (i_w-o_w)*17, 'linear');
            }
        },
        function (e) {
            $(this).find('.title h4').stop().css({"margin-left":"0px"});
        }
    );
    
    if (total_pages == 1)
    {
        return;
    }
    
    under.find('h3').after('<div class="navigate"><div class="prev-next">'+
            '<a href="#previous" class="prev disabled">Previous</a> '+
            '<a href="#next" class="next">Next</a> '+
        '</div></div>');
    var prev_button = under.find('a.prev');
    var next_button = under.find('a.next');
    
    under.find('.navigate .prev-next').after('<div class="pages"><ul></ul></div>');
    var jump_ul = under.find('.navigate .pages ul');
    for (var i = 0; i < total_pages; i++)
    {
        jump_ul.append('<li><a href="#page-'+(i+1)+'">Page '+(i+1)+'</a></li>');
    }
    var jumpers = jump_ul.find('a');
    
    var animating = false;
    function goto_page(page)
    {
        if (animating)
        {
            return;
        }
        var target_l = -1*page*615;
        animating = true;
        videos_ul.animate({"left":target_l}, 500, 'swing', function () {
            cur_page = page;
            animating = false;
            if (cur_page == 0)
            {
                prev_button.addClass('disabled');
            }
            else
            {
                prev_button.removeClass('disabled');
            }
            if (cur_page == total_pages - 1)
            {
                next_button.addClass('disabled');
            }
            else
            {
                next_button.removeClass('disabled');
            }
            jumpers.removeClass('active').eq(cur_page).addClass('active');
        });
    }
    
    prev_button.click(function (e) {
        e.preventDefault();
        if (cur_page == 0)
        {
            return;
        }
        goto_page(cur_page-1);
    });
    next_button.click(function (e) {
        e.preventDefault();
        if (cur_page == total_pages - 1)
        {
            return;
        }
        goto_page(cur_page+1);
    });
    
    jumpers.eq(cur_page).addClass('active');
    jumpers.click(function (e) {
        e.preventDefault();
        var which = jumpers.index($(this));
        goto_page(which);
    });
});