window.addEvent('domready', function(){
    
    var portfolio = $$('.portfolio .slider')[0];
    portfolio.addEvent('click', function(e){
        var event = new Event(e);
        //event.stop();
    });
    
    var prevLink = portfolio.getElement('li:first-child');
    var prevA = prevLink.getFirst();
    var nextLink = portfolio.getElement('li:last-child');
    var nextA = nextLink.getFirst();
    var screenshotLi = portfolio.getElement('li.screenshot');
    var infoLi = portfolio.getElement('li.info');
    
    var images = screenshotLi.getElements('div.t');
    var sections = infoLi.getElements('section');
    
    var currentIndex = 0;
    var lastIndex = images.length - 1;
    var movingIndex = -1;
    
    var tickFunction = function(el, styles) {
        el.setStyles(styles);
    };
    
    var fadeFx = new Timeline({
        onStart: function() {
            fxing = true;
        },
        onComplete: function() {
            if (fxdirection == 'left') {
                if (currentIndex) {
                    movingIndex = currentIndex - 1;
                } else {
                    movingIndex = lastIndex;
                };
                
                portfolio.setStyle('left', -document.documentElement.clientWidth);
            } else {
                if (currentIndex == lastIndex) {
                    movingIndex = 0;
                } else {
                    movingIndex = currentIndex + 1;
                };
                
                portfolio.setStyle('left', document.documentElement.clientWidth);
            };
            
            if (!movingIndex) {
                // мы слева
                prevA.addClass('hide');
            } else {
                prevA.removeClass('hide');
                if (movingIndex + 1 == images.length) {
                    nextA.addClass('hide');
                } else {
                    nextA.removeClass('hide');
                }
            };
            
            images[currentIndex].hide();
            images[movingIndex].show();
            sections[currentIndex].hide();
            sections[movingIndex].show();
            
            generateRevealConfig();
            revealFx.setTimeline.apply(revealFx, revealConfig).restart().start();
        }
    });
    var revealFx = new Timeline({
        onStart: function() {
            
        },
        onComplete: function() {
            currentIndex = movingIndex;
            fxing = false;
        }
    });
    var fadeConfig = [{
        element: prevLink,
        tick: tickFunction,
        times: {
            0: {
                opacity: {
                    values: [1, 0],
                    transition: Transitions.linear,
                    duration: 150
                }
            }
        }
    }, {
        element: nextLink,
        tick: tickFunction,
        times: {
            0: {
                opacity: {
                    values: [1, 0],
                    transition: Transitions.linear,
                    duration: 150
                }
            }
        }
    }];
    var revealConfig = [{
        element: prevLink,
        tick: tickFunction,
        times: {
            500: {
                opacity: {
                    values: [0, 1],
                    transition: Transitions.linear,
                    duration: 150
                }
            }
        }
    }, {
        element: nextLink,
        tick: tickFunction,
        times: {
            500: {
                opacity: {
                    values: [0, 1],
                    transition: Transitions.linear,
                    duration: 150
                }
            }
        }
    }];
    var fxing = false;
    var fxdirection = '';
    
    var generateFadeConfig = function() {
        fadeConfig[2] = {
            element: portfolio,
            tick: tickFunction,
            times: {
                150: {
                    left: {
                        values: [0, (fxdirection == 'left') ? document.documentElement.clientWidth : -document.documentElement.clientWidth],
                        transition: Transitions.sineInOut,
                        duration: 200
                    }
                }
            }
        };
    };
    var generateRevealConfig = function() {
        revealConfig[2] = {
            element: portfolio,
            tick: tickFunction,
            times: {
                0: {
                    left: {
                        values: [portfolio.getStyle('left').toInt(), 0],
                        transition: Transitions.sineInOut,
                        duration: 200
                    }
                }
            }
        };
    };
    
    prevLink.addEvent('click', function(e){
        new Event(e).stop();
        if (fxing) return;
        if (prevA.hasClass('hide')) return;
        
        fxdirection = 'left';
        generateFadeConfig();
        fadeFx.setTimeline.apply(fadeFx, fadeConfig).restart().start();
    });
    nextLink.addEvent('click', function(e){
        new Event(e).stop();
        if (fxing) return;
        if (nextA.hasClass('hide')) return;
        
        fxdirection = 'right';
        generateFadeConfig();
        fadeFx.setTimeline.apply(fadeFx, fadeConfig).restart().start();
    });
    
});