var app = new Ox.App({
  apiURL: '/api/',
  init: 'hello',
  config: 'site.json' //FIXME: shouldn't need this, get data with 'hello' or 'init'.
});

app.launch(function(data) {
  Ox.print(data);

  app.$body = $('body');
  app.$document = $(document);
  app.$window = $(window);
/*
  app.user = data.user;
  app.config = data.config;
*/

/*
  //FIXME: should this be a nested structure as their representation on the page?
  app.constructors = ['wrapper', 'headerPanel', 'mainPanel', 'leftPanel', 'cityPicker', 'calendarBox', 'currentEventsList', 'middlePanel', 'middleTopPanel', 'newsfeedBox', 'aboutBox', 'itfBox', 'middleBottomPanel', 'erangBox', 'scriptArchiveBox', 'bestPracticesBox', 'biblioBox', 'offersNeedsBox', 'surveysBox', 'rightPanel', 'searchBox', 'loginBox', 'featureBox', 'footerPanel']
*/

  app.$ui = {};
/*
  Ox.each(app.constructors, function(i, v) {
    app.$ui[v] = app.construct[v]();
  });
*/
  var wrapper = app.construct.wrapper();
  app.$body.css({'opacity': 0});
  wrapper.appendTo(app.$body);
  app.$body.animate({
    'opacity': 1
  }, 2000);


/*
  //FIXME: make sure to add a loading icon
  Ox.Request.requests() && app.$ui.loadingIcon.start();
  Ox.Event.bind('', 'requestStart', function() {
      Ox.print('requestStart')
      app.$ui.loadingIcon.start();
  });
  Ox.Event.bind('', 'requestStop', function() {
      Ox.print('requestStop')
      app.$ui.loadingIcon.stop();
  });
*/

//  $(body).append(app.$ui.wrapper);
    
});


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
        featureBox        
    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.Container({
      id: id
    });
    c.$content.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");
    });
    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'
    });
    i.submit(function(val) {
      Ox.Print("should handle submit of city name");
    });
    return i;
  },

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

  'currentEventsList': function() {
    var id = 'currentEventsList';
    var c = app.$ui[id] = new Ox.Container({
      id: id
    });
    c.$content.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
        },
        {
          element: app.construct.aboutBox()
        },
        {
          element: app.construct.itfBox(),
          size: 256
        }
      ]        
    });
    return p;
  },

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

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

  'itfBox': function() {
    var id = 'itfBox';
    var c = app.$ui[id] = new Ox.Container({
      id: id
    });
    c.$content.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
        },
        {
          element: app.construct.scriptArchiveBox()
        },
        {
          element: app.construct.bestPracticesBox(),
          size: 256
        }
      ]
    });
    return p;
  },

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

  'scriptArchiveBox': function() {
    var id = 'scriptArchiveBox';
    var c = app.$ui[id] = new Ox.Container({
      id: id
    });
    c.$content.html("script archive goes here");
    return c;
  },

  'bestPracticesBox': function() {
    var id = 'bestPracticesBox';
    var c = app.$ui[id] = new Ox.Container({
      id: id
    });
    c.$content.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
        },
        {
          element: app.construct.offersNeedsBox()
        },
        {
          element: app.construct.surveysBox(),
          size: 256
        }
      ]
    });
    return p;
  },    
  
  'biblioBox': function() {
    var id = 'biblioBox';
    var c = app.$ui[id] = new Ox.Container({
      id: id
    });
    c.$content.html("biblioBox here");
    return c;
  },

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

  'surveysBox': function() {
    var id = 'surveysBox';
    var c = app.$ui[id] = new Ox.Container({
      id: id
    });
    c.$content.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.featureBox()
        }
      ]
    });
    return p;
  },

  'loginBox': function() {
    var id = 'loginBox';
    var c = app.$ui[id] = new Ox.Container({
      id: id
    });
    c.$content.html("login goes here");
    return c;
  },

  'featureBox': function() {
    var id = 'featureBox';
    var c = app.$ui[id] = new Ox.Container({
      id: id
    });
    c.$content.html("featured profile here");
    return c;
  },

  /*
  END rightPanel
  */

/*
END mainPanel
*/

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



/*
Ox.Box - generic box element, with a bar, some help, possibility for a short menu, and should some-how be able to contain items / elements.

*/

Ox.ItfBox = function(options, self) {
  var self = self || {};
  var that = new Ox.Container(options, self)
    .defaults({
      'title': ''  
    })
    .options(options);
  var title = self.options.title; 
  var $titlebar = new Ox.Bar({
          orientation: 'horizontal',
          size: 16
      })
//      .dblclick(dblclickTitlebar)
      .appendTo(that),

/*
  $switch = new Ox.Button({
          id: options.id + 'Switch',
          style: 'symbol',
          title: title,
          type: 'image',
      })
//      .click(toggleCollapsed)
      .appendTo($titlebar),
*/
  $title = new Ox.Element()
      .addClass('OxTitle')
      .html(title/*.toUpperCase()*/)
      .appendTo($titlebar);

//  $buttons = new Ox.
  return that;   
}