boxData =
{
  groupBoxes :
  {
    "groupBoxLeft" :
    {
      id        : "groupBoxLeft",
      name      : "GroupBox Left",
      boxes : [
        "box0",
        "box1",
        "box2",
        "box3"
      ]
    },
    
    "groupBoxRight" :
    {
      id        : "groupBoxRight",
      name      : "GroupBox Right",
      boxes : [
        "box4",
        "box5",
        "box6",
        "box7"
      ]
    }
  },

  boxes :
  {
    box0 :
    {
      id   : "box0",
      name : "box0",
      
      width : "300px",
      height : "120px",
      
      minWidth : "10px",
      maxWidth : "350px",
      minHeight : "10px",
      maxHeight : "700px",
      
      draggable : true,
      
      resizable : true,
      resizeHandles : 1
    },
    
    box1 :
    {
      id   : "box1",
      name : "box1",
      
      width : "300px",
      height : "100px",
      
      minWidth : "10px",
      maxWidth : "350px",
      minHeight : "10px",
      maxHeight : "700px",
      
      draggable : true,
      
      resizable : false,
      resizeHandles : 1
    },
    
    box2 :
    {
      id   : "box2",
      name : "box2",
      
      width : "300px",
      height : "100px",
      
      minWidth : "10px",
      maxWidth : "350px",
      minHeight : "10px",
      maxHeight : "700px",
      
      draggable : false,
      
      resizable : false,
      resizeHandles : 0
    },
    
    box3 :
    {
      id   : "box3",
      name : "box3",
      
      width : "300px",
      height : "100px",
      
      minWidth : "10px",
      maxWidth : "350px",
      minHeight : "10px",
      maxHeight : "700px",
      
      draggable : true,
      
      resizable : true,
      resizeHandles : 3
    },
    
    box4 :
    {
      id   : "box4",
      name : "box4",
      
      width : "300px",
      height : "100px",
      
      minWidth : "10px",
      maxWidth : "350px",
      minHeight : "10px",
      maxHeight : "700px",
      
      draggable : true,
      
      resizable : true,
      resizeHandles : 1
    },
    
    box5 :
    {
      id   : "box5",
      name : "box5",
      
      width : "250px",
      height : "200px",
      
      minWidth : "10px",
      maxWidth : "500px",
      minHeight : "10px",
      maxHeight : "700px",
      
      draggable : true,
      
      resizable : true,
      resizeHandles : 2
    },
    
    box6 :
    {
      id   : "box6",
      name : "box6",
      
      width : "300px",
      height : "100px",
      
      minWidth : "10px",
      maxWidth : "350px",
      minHeight : "10px",
      maxHeight : "700px",
      
      draggable : false,
      
      resizable : false,
      resizeHandles : 0
    },
    
    box7 :
    {
      id   : "box7",
      name : "box7",
      
      width : "300px",
      height : "140px",
      
      minWidth : "10px",
      maxWidth : "350px",
      minHeight : "10px",
      maxHeight : "700px",
      
      draggable : true,
      
      resizable : true,
      resizeHandles : 2
    }
  }
}