var introEffectsSpeed = 600;
var gridItems = null;
var elements = [];
var introStopped = false;
var menuItems = [6, 17, 13, 24, 20];

var stepsMap = {
    left: {
        left: '-=194'
    },
    right: {
        left: '+=194'
    },
    up: {
        top: '-=102'
    },
    down: {
        top: '+=102'
    }
};

function wrap(f){
    return function(){
        var d = Deferred();
        if(!introStopped)
        {
            f(d);
        }
        else
        {
            setTimeout(function(){
                d.call();
            }, 0);
        }
        return d;
    }
}

function moveElement(d){
    if(!introStopped && elements.length > 0)
    {
        var directions = elements[0].data('directions');
        if(directions.length == 0)
        {
            elements[0].css('z-index', '100');
            elements = elements.slice(1);
            d.call();
        }
        else
        {
            elements[0]
                .css('z-index', '105')
                .data('directions', directions.slice(1))
                .animate(stepsMap[directions[0]], introEffectsSpeed, function(){
                    moveElement(d);
                });
        }
    }
    else
    {
        d.call();
    }
}

$(function(){
    Deferred.define();
    $('div.header').hide();
    $('div.footer').hide();
    gridItems = $('div.big-list ul > li');
    var parent = $('div.out');
    for(i = 0; i < 3; i++)
    {
        $('div.intro-img-' + i).appendTo(parent);
    }
    $('p.scipintro > a').click(function(event){
        event.preventDefault();
        introStopped = true;
        gridItems.stop(true, true);
        $(this).hide();
        for(i = 1; i <= 3; i++)
        {
            $('div.intro-img-' + i).remove();
        }
        $('div.footer').show();
        $('div.header').show();
        for(i = 0; i < menuItems.length; i++)
        {
            var item = gridItems.eq(menuItems[i]);
            var pos = item.attr('rel').split(';');
            if(pos.length == 2)
            {
                item.css({
                    top: pos[0] + 'px',
                    left: pos[1] + 'px'
                })
            }
        }
        gridItems.show();
        $('div.big-list').show();
    });
    var prevElement = $('div.intro-img-1');
    next(wrap(function(d){
        prevElement.fadeIn(introEffectsSpeed, function(){
            d.call();
        });
    }))
    .next(wrap(function(d){
        prevElement.fadeOut(introEffectsSpeed, function(){
            d.call();
        });
    }))
    .next(wrap(function(d){
        prevElement.remove();
        prevElement = $('div.intro-img-2');
        prevElement.fadeIn(introEffectsSpeed, function(){
            d.call();
        });
    }))
    .next(wrap(function(d){
        prevElement.fadeOut(introEffectsSpeed, function(){
            d.call();
        });
    }))
    .next(wrap(function(d){
        prevElement.remove();
        prevElement = $('div.intro-img-3');
        prevElement.fadeIn(introEffectsSpeed, function(){
            d.call();
        });
    }))
    .next(wrap(function(d){
        prevElement.fadeOut(introEffectsSpeed, function(){
            d.call();
        });
    }))
    .next(function(){
        $('div.big-list').show();
        prevElement.remove();
        prevElement = null;
        return parallel([
            wrap(function(d){
                $('div.header').fadeIn(introEffectsSpeed, function(){
                    d.call(this);
                });
            }),
            wrap(function(d){
                $('div.footer').fadeIn(introEffectsSpeed, function(){
                    d.call(this);
                });
            }),
            wrap(function(d){
                gridItems
                    .eq(24)
                    .css('z-index', 100)
                    .data('directions', ['right', 'down', 'down'])
                    .fadeIn(introEffectsSpeed, function(){
                        d.call($(this));
                    });
            }),
            wrap(function(d){
                gridItems
                    .eq(13)
                    .css('z-index', 100)
                    .data('directions', ['right'])
                    .fadeIn(introEffectsSpeed, function(){
                        d.call($(this));
                    });
            }),
            wrap(function(d){
                gridItems
                    .eq(17)
                    .css('z-index', 100)
                    .data('directions', ['right', 'down'])
                    .fadeIn(introEffectsSpeed, function(){
                        d.call($(this));
                    });
            }),
            wrap(function(d){
                gridItems
                    .eq(6)
                    .css('z-index', 100)
                    .data('directions', ['right', 'up'])
                    .fadeIn(introEffectsSpeed, function(){
                        d.call($(this));
                    });
            }),
            wrap(function(d){
                gridItems
                    .eq(20)
                    .css('z-index', 100)
                    .data('directions', ['down', 'down', 'left', 'left', 'left', 'left'])
                    .fadeIn(introEffectsSpeed, function(){
                        d.call($(this));
                    });
            })
        ]);
    })
    .next(function(args){
        var d = Deferred();
        elements = args.slice(2);
        moveElement(d);
        return d;
    })
    .next(wrap(function(d){
        moveElement(d);
    }))
    .next(wrap(function(d){
        moveElement(d);
    }))
    .next(wrap(function(d){
        moveElement(d);
    }))
    .next(wrap(function(d){
        moveElement(d);
    }))
    .next(wrap(function(d){
        gridItems
            .eq(26)
            .fadeIn(introEffectsSpeed, function(){
                d.call();
            });
    }))
    .next(wrap(function(d){
        $('p.scipintro > a').hide();
        gridItems.fadeIn(introEffectsSpeed);
    }));
});