$(function(){
    var initialized = 0,
        flipper = {
        // initialize divs and call fillflipper
        init: function(){
            if (initialized++) {
                return
            }
            var
                START = 1,
                HEIGHT = 400,
                images = $('ol.images>li'),
                amount = images.length,
                maxheight = amount * HEIGHT,
                stage = $('#stage'),
                sections = stage.find('.section'),
                lists = sections.find('>div')

            //fill flipper with <b> (author) and <img>
            images.each(function(){
                lists
                    .append($(this).find('b').clone())
                    .append($(this).find('img').clone())
            })

            // actions
            sections.each(function(i){
                var section = $(this)
                var list = section.find('>div')
                var h = section.prev('h2')

                h
                .html(
                    list.find('img:eq('+ (START-1 + i) + ')').attr('alt')
                    + '<small>'
                    + '#'+(i+1) + ' '
                    + list.find('b:eq('+ (START-1 + i) + ')').html()
                    + '</small>'
                )
                .fadeTo(2000, 0.01)

                list
                .css({
                    height: HEIGHT,
                    top: -((START-1 + i) * HEIGHT)
                    }
                )
                .hover(
                    function () {
                        h.fadeTo(200, 0.9)
                    },
                    function () {
                        h.fadeTo(400, 0.01)
                    }
                )

                section.click(function(e) {
                    var x = e.pageY - stage.position().top;
                    if (!x) {
                        x = HEIGHT / 2
                    }
                    var dir = (x > HEIGHT / 2) ? '-' : '+'
                    var top = Math.floor(parseInt(list.css('top'), 10))

                    if (dir == '-' && top <= -(maxheight - HEIGHT)) {
                        list.stop(true, true).css('top', -(maxheight - HEIGHT))
                    }
                    else if (dir == '+' && top >= 0) {
                        list.stop(true, true).css('top', 0)
                    }
                    else {
                        list.animate({
                            top: dir + '=' + HEIGHT
                        }, 750, function() {
                            var i = Math.abs(
                                Math.floor(
                                    parseInt(list.css('top'), 10) / HEIGHT
                                )
                            )
                            var img = list.find('>img:eq('+i+')')
                            var author = img.prev('b')
                            h.html(img.attr('alt')
                                + '<small>'
                                + '#'+(i+1) + ' '
                                + author.html()
                                + '</small>')
                        })
                    }
                })
            })
        }
    }
    // show loading
    var images = $('#images'),
        all = images.size(),
        loaded = 0

    images.find('li').onImagesLoad({
        itemCallback: function(i) {
            loaded++
            if (loaded == all) {
                flipper.init()
            }
        }
    })

    // fallback after 7.5s if count loading fails
    setTimeout(flipper.init, 7500)

})