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(pageData) {
    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(pageData), 
        },
        {
          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(pageData) {
    var id = 'mainPanel';
//    var p = app.$ui[id] = new ItfPage(pageData);

    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(pageData),
          size: 1000,
          resizable: true
        },
        {
          element: app.construct.rightPanel(),
        }
      ]
    });

    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: 20
        },
        {
          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,
      width: 250,
      labelWidth: 0
    });
    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(pageData) {
    var id = 'middlePanel';
    var p = new Ox.ItfPage(pageData);
/*
    var p = app.$ui[id] = new Ox.SplitPanel({
      orientation: 'vertical',
      id: id,
      elements: [
        {
          element: app.construct.middleTopPanel(),
          size: 196,
          resizable: true,
          resize: [0, 64, 128, 196, 256],
//          collapsible: true
        },
        {
          element: app.construct.middleMiddlePanel(),
//          collapsible: true
        },
        {
          element: app.construct.middleBottomPanel(),
          size: 196,
          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: 32
        },
        {
          element: app.construct.previewBox()
        }
      ]
    });
    return p;
  },

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


    var btnsWrapper = c.$btns = new Ox.Element().css({'textAlign': 'center', 'marginTop': '4px'});

    var info = c.$info = new Ox.Element("span").appendTo(btnsWrapper);

    var loginBtn = c.$loginBtn = new Ox.Button({
      'id': 'loginBtn',
      'title': 'Login',
      'size': 'large'
    }).bindEvent("click", function() {
      ui.accountDialog("login").open();
    }).appendTo(btnsWrapper);

    var registerBtn = c.$registerBtn = new Ox.Button({
      'id': 'registerBtn',
      'title': 'Register',
      'size': 'large'
    }).bindEvent("click", function() {
      ui.accountDialog("register").open();
    }).appendTo(btnsWrapper);

    var logoutBtn = c.$logoutBtn = new Ox.Button({
      'id': 'logoutBtn',
      'title': 'Logout',
      'size': 'large'
    }).bindEvent("click", function() {
      app.api.logout({}, function(data) {
        ui.accountLogoutDialog().open();
      });
    }).appendTo(btnsWrapper).hide();


    btnsWrapper.appendTo(c);
    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
*/
}