/*
/!*
 * Which slide is currently out
 *!/
var currentOut = null;


$(document).ready(function(){
    var target = '.stepHolder';

    // Hover on grey arrows in the roadmap
    $(target).hover(function(){
        var step = $(this).attr('data-step');
        $('.'+step).children('.stepArrow').children('.over').stop().animate({opacity:1},100);
    },
    function(){
        var step = $(this).attr('data-step');
        $('.'+step).children('.stepArrow').children('.over').stop().animate({opacity:0},300);
    });

    // on click setup
    $(target).click(function(){
        var step = $(this).attr('data-step');
        var nr = step.substring(4);
        var slider = '.slide'+nr;
        slide(slider);
    });

    // make menu fixed
    var sliderTarget = '#sliderMenu';
    var ph = '#placeholder';
    var measurePoint = $(sliderTarget).offset().top - 20;
    checkSliderNav(sliderTarget,ph,measurePoint);
    $(window).scroll(function(){
       checkSliderNav(sliderTarget,ph,measurePoint);
    });
});

/!**
 * Slides the image
 *!/
function slide(slider)
{
    checkViewport(slider);

    var speed = 600;
    var step = '.step'+slider.substring(6);
    var numBlocks = null;

    // get current position
    var lpx = $(slider).css('left');
    var l = parseInt(lpx);

    // define target-left
    if(l < 0 )
    {
        l = 0;
        $('.step'+slider.substring(6)+'.back').stop().animate({ opacity: 0},300);
        $(step).removeClass('active');
    }
    else{
        l = '-100%';
        $('.step'+slider.substring(6)+'.back').stop().animate({ opacity: 1},300);
        $(step).addClass('active');
    }

    // slide
    $(slider).stop().animate({ left: l },speed,function(){

        if( l > -1040)
        {
            switch(slider)
            {
                case '.slide1':
                    numBlocks = 4;
                    break;
                case '.slide2':
                    numBlocks = 6;
                    break;
                case '.slide3':
                    numBlocks = 8;
                    break;
            }
            dropBlocks(0,slider,numBlocks);
        }

    });

    switch(slider)
    {
        case '.slide1':
            numBlocks = 4;
            break;
        case '.slide2':
            numBlocks = 6;
            break;
        case '.slide3':
            numBlocks = 8;
            break;
    }
    dropBlocks(1,slider,numBlocks);

    if(currentOut != null && currentOut != slider)
    {
        var currentStep = '.step'+currentOut.substring(6);
        $(currentStep).removeClass('active');

        var sliderToHide = currentOut;

        $('.step'+currentOut.substring(6)+'.back').stop().animate({ opacity: 0},300);


        $(currentOut).stop().animate({ left: 0 },speed, function(){
            switch(sliderToHide)
            {
                case '.slide1':
                    numBlocks = 4;
                    break;
                case '.slide2':
                    numBlocks = 6;
                    break;
                case '.slide3':
                    numBlocks = 8;
                    break;
            }
            dropBlocks(0,sliderToHide,numBlocks);
        });
    }

    currentOut = slider;
}

/!**
 * Animates the blocks inside slide 1
 *!/
function dropBlocks(slideIn, slider, numBlocks)
{
    // show blocks
    var delay = 100;
    var speed = 400;
    var i = 1;
    var intV = null;
    var slideNr = slider.substring(6);
    
    if(slideIn == 1)
    {
        intV = setInterval(function(){
            $('#sl'+slideNr+'_block'+i).stop().animate({ top: 0 },speed);
            i++;
            if(i>numBlocks) clearInterval(intV);
        },delay);
    }
    // hide blocks
    else{
        delay = 0;
        speed = 100;
        i = 0;
        intV = setInterval(function(){
            $('#sl'+slideNr+'_block'+i).stop().animate({ top: '-320px' },speed);
            i++;
            if(i>numBlocks) clearInterval(intV);
        },delay);
    }
}

/!**
 * Check if we need to scroll the window to see the element in our viewport.
 *!/
function checkViewport(slider)
{
    var windowBottom = $(window).height() + $(document).scrollTop();
    var elementBottom = $(slider).height() + $(slider).offset().top;
    //var margin = ($(window).height() * 0.5) - ($(slider).height()/2);
    var margin = $(window).height() - 200 - $(slider).height();
    var speed = 600;

    if(windowBottom < (elementBottom+margin) || elementBottom < (windowBottom+margin)  )
    {
        var target = elementBottom-$(window).height()+margin;
        $('body').stop().animate({ scrollTop : target },speed);
    }
}

function checkSliderNav(sliderTarget,ph,measurePoint)
{
    if($(document).scrollTop() >= measurePoint)
    {
        ml = $(sliderTarget).width() / -2;

        $(sliderTarget).css({ position:'fixed', top:0, left: '50%', marginLeft: ml + 'px' });
        $(ph).css({ display: 'block' });
        $(sliderTarget).children('.shadow').stop().animate({ opacity: 1 },50);
    }
    else{
        $(sliderTarget).css({ position:'relative', top:0, left: 0, marginLeft:0 });
        $(ph).css({ display: 'none' });
        $(sliderTarget).children('.shadow').stop().animate({ opacity: 0 },50);
    }
}*/