When lots of profiles, and panel has to expand, animation shows whitespace

[Noitidart]

When lots of profiles, and panel has to grow in height downwards so it can show all profiles/buttons, whitespace is shown.

This is due to the animation function of the menu AND the panel height growth starting at time 0. What happens is when the menu is expanding and reaches the top, so now menu height == panel height, THEN I should start the the panel animation to grow down.

But because I use ease transition function I have to split the bezier curve of the animation. I need to calculate from this split function the delay time, to when to start the panel height growth, this should pick up with the split bezier transition function.

Do reverse of the split bezier functions on collapse.

    //////////////////START FROM ISCRIPTDESIGN
    var splitBezier = function(array, perc) {
        array.unshift({x:0, y:0});
        var coll = [];
        while (array.length > 0) {
        for (var i = 0;i < array.length-1; i++) {
            coll.unshift(array[i]);
            array[i] = interpolate(array[i], array[i+1], perc);
        }
        coll.unshift(array.pop());
        }
        return {b1: [{x:coll[5].x, y:coll[5].y}, {x:coll[2].x, y:coll[2].y},{x:coll[0].x, y:coll[0].y}]
            , b2: [{x:coll[1].x - coll[0].x,y:coll[1].y-coll[0].y}, {x:coll[3].x - coll[0].x,y:coll[3].y-coll[0].y}, {x:coll[6].x - coll[0].x,y:coll[6].y-coll[0].y}]};
    }

    var interpolate = function (p0, p1, percent) {
        if (typeof percent === 'undefined') percent = 0.5;  
        return  {x: p0.x + (p1.x - p0.x) * percent
             , y: p0.y + (p1.y - p0.y) * percent};
    }
    //////////////////END FROM ISCRIPTDESIGN
    var coord = function (x,y) {
      if(!x) var x=0;
      if(!y) var y=0;
      return {x: x, y: y};
    }
    //var easeInOut = [new coord(.44,.05), new coord(.55,.95), new coord(1,1)];
    var easeInOut = [new coordhat (.88,.1), new coord(1.1,1.9), new coord(2,2)];
    var split50percent = splitBezier(easeInOut.slice(), .5);
    alert(split50percent.toSource())

[Noitidart]

Use GitHubGIST :: Noitidart / _js-snippet-PointOnCubicBezier.js to figure out the time the height of the stack will reach the height of PanelUI.height - (PUIFooter.height - stack.height). Then use GitHubGIST :: Noitidart / _js-snippet-CubicBezierSplit.js to create the cubic-bezier for PanelUI, and the duration should be final time minus the time calced in first part.