$(document).ready(function(){
    var _gallery = $('div.gallery');
    var _imgArea = $('ul.img-area li');
    var pageNum = function(){
        var _active = _imgArea.index(_imgArea.filter('.active'));
        $('span.this').html(_active+1);
    }
    
    $('span.all').html(_imgArea.length);
    pageNum();
    $('.link-next a').click(function(){
        if (_imgArea.filter('.active').next('li').length) {
            _imgArea.filter('.active').fadeOut(400, function(){
                $(this).removeClass('active').next().fadeIn(400).addClass('active');
                pageNum();
            })
        } else {
            _imgArea.filter('.active').fadeOut(400, function(){
                $(this).removeClass('active');
                _imgArea.eq(0).fadeIn(400).addClass('active');
                pageNum();
            })
        }
        return false;
    });
    
    $('.link-prev a').click(function(){
        if (_imgArea.filter('.active').prev('li').length) {
            _imgArea.filter('.active').fadeOut(400, function(){
                $(this).removeClass('active').prev().fadeIn(400).addClass('active');
                 pageNum();
            })
        } else {
            _imgArea.filter('.active').fadeOut(400, function(){
                $(this).removeClass('active');
                _imgArea.eq(_imgArea.length-1).fadeIn(400).addClass('active');
                 pageNum();
            })
        }
        return false;
    });
    
    $('a.last').click(function(){
        _imgArea.filter('.active').fadeOut(400, function(){
            $(this).removeClass('active');
            _imgArea.eq(_imgArea.length-1).fadeIn(400).addClass('active');
            pageNum();
        })
        return false;
    });
    $('a.first').click(function(){
        _imgArea.filter('.active').fadeOut(400, function(){
            $(this).removeClass('active');
            _imgArea.eq(0).fadeIn(400).addClass('active');
             pageNum();
        })
        return false;
    });
});