ScriptUI Responsive with 4 buttons

[Vincenzo Imbimbo]

Hello guys, i’m creating a ScriptUI with 4 buttons, and they are in a row orientation, what i want is to them change from “row” to “column” if the window gets resized, right now i have a piece of code that is working, but it changes all the buttons at once, i want them to change position one at a time.

I mean, the button 4 will go down first, leaving buttons 1, 2 and 3 in the top and in a row, like this:
123
4

If the window get smaller then the button 3 will go down having in the top 1 & 2 and the bottom 3 & 4, like this:
12
34

And if it gets even smaller then it will be like this:
1
2
3
4

Right now i have it from this:
1234
To this:
1
2
3
4

This is my actual code:

{
function myScript(thisObj){
      function myScript_buildUI(thisObj){
          var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "Power Loop", undefined, {resizeable: true, closeButton:true});
          var project = app.project;
          var comp = project.activeItem;
          res = "group{orientation:'row',\
          groupOne: Group{orientation:'row',\
          },\
          groupTwo: Group{orientation:'row',\
          },\
          groupThree: Group{orientation:'row',\
          },\
          groupFour: Group{orientation:'row',\
          },\
          }";
          myPanel.grp = myPanel.add(res);
          myPanel.onResizing = myPanel.onResize = function() {
          myPanel.grp.orientation = (myPanel.size.width > myPanel.size.height) ? 'row' : 'column';
          myPanel.layout.layout(true);
          };

var buttonSize = [30,30];
var buttonOne = myPanel.grp.groupOne.add('button');
var buttonTwo = myPanel.grp.groupTwo.add('button');
 var buttonThree = myPanel.grp.groupThree.add('button');
var buttonFour = myPanel.grp.groupFour.add('button');
buttonOne.text = "1";
buttonTwo.text = "2";
buttonThree.text = "3";
buttonFour.text = "4";
 buttonOne.size = buttonSize;
 buttonTwo.size = buttonSize;
 buttonThree.size = buttonSize;
 buttonFour.size = buttonSize;

myPanel.layout.layout(true);
          return myPanel;
      }
  var myScriptPal = myScript_buildUI(thisObj);
  if(myScriptPal != null && myScriptPal instanceof Window){
      myScriptPal.center();
      myScriptPal.show();
      }
  }
 myScript(this);
}