it/itf/static/js/itf/construct.js

app.construct = {
/*
Structure:
  wrapper
    headerPanel
      homeBox
      searchBox
    mainPanel
      leftPanel
        cityPicker
        calendarBox
        currentEventsList
      middlePanel
        middleTopPanel
          newsfeedBox
          aboutBox
          itfBox
        middleMiddlePanel
          erangBox
          scriptArchiveBox
          bestPracticesBox
        middleBottomPanel
          biblioBox
          offersNeedsBox
          surveysBox
      rightPanel
        loginBox
        previewBox        
    footerPanel
*/


  'wrapper': function() {
    var id = 'wrapper';
  // Constructs overall wrapper for the page, and should be appended to $(body)
    return app.$ui[id] = new Ox.SplitPanel({
      id: id,
      orientation: 'vertical',
      elements: [
        {
          element: app.construct.headerPanel(),
          size: 40
        },
        {
          element: app.construct.mainPanel(), 
        },
        {
          element: app.construct.footerPanel(),
          size: 40
        }
      ]
    });
  },

/*
BEGIN headerPanel
*/
  'headerPanel': function() {
    var id = 'headerPanel';
    var p = app.$ui[id] = new Ox.SplitPanel({
      orientation: 'horizontal',
      id: id,
      elements: [
        {
          element: app.construct.homeBox(),
        },
        {
          element: app.construct.searchBox(),
          size: 128

        }
      ]
    });
    return p;    
  },

  'homeBox': function() {
    var id = 'homeBox';
    var c = app.$ui.homeBox = new Ox.Element({
      id: id
    });
    c.html("This is the header - maybe load from a template?");
    return c;
  },

  'searchBox': function() {
    var id = 'searchBox';
    var i = app.$ui.searchBox = new Ox.Input({
      'id': id,
      'placeholder': 'Search'  
    });
    i.bindEvent("submit", function(val) {
      Ox.print("Should be doing a search");
    });
    i.css({
      'marginRight': '15px',
      'marginTop': '6px'
    });
    return i;
  },

/*
END headerPanel
*/

/*
BEGIN mainPanel
*/

  'mainPanel': function() {
    var id = 'mainPanel';
    var p = app.$ui[id] = new Ox.SplitPanel({
      id: id,
      orientation: 'horizontal',
      elements: [
        {
          element: app.construct.leftPanel(),
          size: 256,
          resizable: true,
          resize: [0, 128, 256, 384]
        },
        {
          element: app.construct.middlePanel()
//          resizable: true
        },
        {
          element: app.construct.rightPanel(),
          size: 256,
          resizable: true,
          resize: [0, 128, 256, 384]
        }
      ]
    });
    return p;
  },

  /*
  BEGIN leftPanel
  */
  'leftPanel': function() {
    var id = 'leftPanel';
    var p = app.$ui[id] = new Ox.SplitPanel({
      id: id,
      orientation: 'vertical',
      elements: [
        {
          element: app.construct.cityPicker(),
          size: 40
        },
        {
          element: app.construct.calendarBox()
        },
        {
          element: app.construct.currentEventsList(),
          size: 300
        }
      ]      
    });
    return p;
  },

  'cityPicker': function() {
    var id = 'cityPicker';
    var i = app.$ui[id] = new Ox.Input({
      id: id,
      placeholder: 'Chose Your City',
      autocomplete: ['Mumbai', 'Gurgaon', 'Agra', 'Delhi', 'Bangalore', 'Calcutta', 'Hyderabad'],
      autocompleteSelect: true,
      autocompleteSelectHighlight: true,
      autocompleteSelectSubmit: true,
      autocompleteReplaceCorrect: true
    });
    i.bindEvent("submit", function(event, data) {
      Ox.print(data);
//      alert(data.value);
    });
    return i;
  },

  'calendarBox': function() {
    var id = 'calendarBox';
    var c = app.$ui[id] = new Ox.Element({
      id: id
    });
    c.html("somehow, the bookmyshow calendar goes here.");
    return c;
  },

  'currentEventsList': function() {
    var id = 'currentEventsList';
    var c = app.$ui[id] = new Ox.Element({
      id: id
    });
    c.html("List of current events");
    return c;
  },
  /*
  END leftPanel
  */

  /*
  BEGIN middlePanel
  */
  'middlePanel': function() {
    var id = 'middlePanel';
    var p = app.$ui[id] = new Ox.SplitPanel({
      orientation: 'vertical',
      id: id,
      elements: [
        {
          element: app.construct.middleTopPanel(),
          size: 128,
          resizable: true,
          resize: [0, 64, 128, 196, 256],
//          collapsible: true
        },
        {
          element: app.construct.middleMiddlePanel(),
//          collapsible: true
        },
        {
          element: app.construct.middleBottomPanel(),
          size: 128,
          resizable: true,
          resize: [0, 64, 128, 196, 256],
//          collapsible: true
        }
      ]
    });
    return p;
  },

    /*
    BEGIN middleTopPanel
    */
  'middleTopPanel': function() {
    var id = 'middleTopPanel';
    var p = app.$ui[id] = new Ox.SplitPanel({
      id: id,
      orientation: 'horizontal',
      elements: [
        {
          element: app.construct.newsfeedBox(),
          size: 256,
          resizable: true,
          resize: [0,128,196,256,384,512]
        },
        {
          element: app.construct.aboutBox()
        },
        {
          element: app.construct.itfBox(),
          size: 256,
          resizable: true,
          resize: [0,128,196,256,384,512]
        }
      ]        
    });
    return p;
  },

  'newsfeedBox': function() {
    var id = 'newsfeedBox';
    var c = app.$ui[id] = new Ox.Element({
      id: id,
      title: 'ITF NewsFeed'
    });
    for (var i=0; i<25; i++) {
      var content = new Ox.Element().html('newsfeed content goes here');
      c.append(content);
    }
    return c;
  },

  'aboutBox': function() {
    var id = 'aboutBox';
    var c = app.$ui[id] = new Ox.Element({
      id: id,
      title: 'About'
    });
    c.html("about goes here");
    return c;        
  },

  'itfBox': function() {
    var id = 'itfBox';
    var c = app.$ui[id] = new Ox.Element({
      id: id
    });
    c.html("about itf goes here");
    return c;
  },
    /*
    END middleTopPanel
    */       

    /* 
    BEGIN middleMiddlePanel
    */

  'middleMiddlePanel': function() {
    var id = 'middleMiddlePanel';
    var p = app.$ui[id] = new Ox.SplitPanel({
      id: id,
      orientation: 'horizontal',
      elements: [
        {
          element: app.construct.erangBox(),
          size: 256,
          resizable: true,
          resize: [0,128,196,256,384,512]
        },
        {
          element: app.construct.scriptArchiveBox()
        },
        {
          element: app.construct.bestPracticesBox(),
          size: 256,
          resizable: true,
          resize: [0,128,196,256,384,512]
        }
      ]
    });
    return p;
  },

  'erangBox': function() {
    var id = 'erangBox';
    var c = app.$ui[id] = new Ox.Element({
      id: id
    });
    c.html("erang goes here");
    return c;
  },

  'scriptArchiveBox': function() {
    var id = 'scriptbankBox';
    var c = app.$ui[id] = new Ox.ItfBox({
      'id': id,
      'title': 'Script Bank',
      'module': 'scriptbank',
      'model': 'Script',
      'info': 'Script Archives are great, etc.'
    });
//    c.html("script archive goes here");
    return c;
  },

  'bestPracticesBox': function() {
    var id = 'bestpracticesBox';
    var title = "Best Practices";
    var module = "bestpractices";
    var model = "BestPractice";
    var info = "Some best practices lorem ipsum";
    var c = app.$ui[id] = new Ox.ItfBox({
      'id': id,
      'title': 'Best Practices',
      'module': 'bestpractices',
      'model': 'BestPractice',
      'info': 'Some best practices lorem ipsum'
/*
      'preview': function(data, callback) {
        var selectedId = data.ids[0];
        app.api.preview({
          'model': model,
          'module': module,
          'data': {'id': selectedId}
        }, callback);
      }
*/
    });
//    c.html("best practices goes here");
    return c;
  },

    /*
    END middleMiddlePanel
    */

    /*
    BEGIN middleBottomPanel    
    */
  'middleBottomPanel': function() {
    var id = 'middleBottomPanel';
    var p = app.$ui[id] = new Ox.SplitPanel({
      id: id,
      orientation: 'horizontal',
      elements: [
        {
          element: app.construct.biblioBox(),
          size: 256,
          resizable: true,
          resize: [0,128,196,256,384,512]
        },
        {
          element: app.construct.offersNeedsBox()
        },
        {
          element: app.construct.surveysBox(),
          size: 256,
          resizable: true,
          resize: [0,128,196,256,384,512]
        }
      ]
    });
    return p;
  },    
  
  'biblioBox': function() {
    var id = 'biblioBox';
    var c = app.$ui[id] = new Ox.Element({
      id: id
    });
    c.html("biblioBox here");
    return c;
  },

  'offersNeedsBox': function() {
    var id = 'offersNeedsBox';
    var c = app.$ui[id] = new Ox.Element({
      id: id
    });
    c.html("offers and needs here");
    return c;
  },

  'surveysBox': function() {
    var id = 'surveysBox';
    var c = app.$ui[id] = new Ox.Element({
      id: id
    });
    c.html("surveys go here");
    return c;
  },

    /*
    END middleBottomPanel
    */

  /*
  END middlePanel
  */

  /*
  BEGIN rightPanel
  */

  'rightPanel': function() {
    var id = 'rightPanel';
    var p = app.$ui[id] = new Ox.SplitPanel({
      id: id,
      orientation: 'vertical',
      elements: [
        {
          element: app.construct.loginBox(),
          size: 256
        },
        {
          element: app.construct.previewBox()
        }
      ]
    });
    return p;
  },

  'loginBox': function() {
    var id = 'loginBox';
    var c = app.$ui[id] = new Ox.Element({
      id: id
    });

/*
    var registerForm = (function() {  
      var u = ui.accountDialogOptions('register');
      var btns = u.buttons;
      var content = u.content;
      var title = u.title;
  //    debugger;
      var e = new Ox.Element().html(title).append(content);
      var btnsWrapper = new Ox.Element().css({'textAlign': 'center', 'marginTop': '4px'});
      var regBtn = btns[1][1].appendTo(btnsWrapper);
      var loginBtn = new Ox.Button({
        id: 'loginBtn',
        title: 'Login'
        }).bindEvent("click", function() {
  //      app.$ui.accountDialog = new Ox.Element();
        var l = ui.accountDialogOptions("login");
        var loginContent = l.content;
        var loginSubmitBtn = l.buttons[1][1];
        var loginTitle = l.title;
        var d = new Ox.Dialog({
          id: 'loginDialog',
          content: loginContent,
          buttons: [
            new Ox.Button({
              id: 'cancel',
              title: 'Cancel',
            }).bindEvent("click", function() { d.close(); }),
            loginSubmitBtn          
          ],
          title: loginTitle
        });
        d.open();
      });
      loginBtn.appendTo(btnsWrapper);
      btnsWrapper.appendTo(e);
      return e;    
    })();
    

    registerForm.appendTo(c);
*/
/*
    var $registerTitle = new Ox.Element().html("Register:").appendTo(c);
    var registerForm = c.$form = new Ox.Form({
      id: "registerForm",
      items: $registerFormItems,
      submit: function(data, callback) {
        alert(JSON.stringify(data));
        app.api.register(data, function(result) {
          alert(JSON.stringify(result));
        });
        
      }
*/
//    c.html("login goes here");
    return c;
  },

  'previewBox': function() {
    var id = 'previewBox';
    var c = app.$ui[id] = new Ox.ItfPreview({
      id: id
    });
    c.$content.html("previews here");
    return c;
  },

  /*
  END rightPanel
  */

/*
END mainPanel
*/

/*
BEGIN footerPanel
*/
  'footerPanel': function() {
    var id = 'footerPanel';
    var c = app.$ui[id] = new Ox.Element({
      id: id
    });
    c.html("footer goes here");
    return c;
  }
/*
END footerPanel
*/
}