/**
 * @module Player
 */
 
 
/**
 * I am the Interface module.
 *
 * I am the central place which inititalizes and coordinates all other interface-related modules.
 *
 * When this module is loaded, it loads also:
 * * {{#crossLink "Titlebar"}}Titlebar{{/crossLink}}
 * * {{#crossLink "Sidebar"}}Sidebar{{/crossLink}}
 * * {{#crossLink "ViewOverview"}}ViewOverview{{/crossLink}}
 * * {{#crossLink "ViewVideo"}}ViewVideo{{/crossLink}} (when there is a hypervideo present)
 * * {{#crossLink "ViewResources"}}ViewResources{{/crossLink}}
 * 
 * @class Interface
 * @static
 */
 
 
FrameTrail.defineModule('Interface', function(){
 
 
    FrameTrail.initModule('Titlebar');
      FrameTrail.initModule('Sidebar');
 
      FrameTrail.initModule('ViewOverview');
 
      if (FrameTrail.module('RouteNavigation').hypervideoID) {
          FrameTrail.initModule('ViewVideo');
      }
 
      FrameTrail.initModule('ViewResources');
 
      var mainContainer = $('<div id="MainContainer"></div>');
 
 
 
 
 
    /**
     * I call the create method of all my sub-modules, and set the window resize event listener.
     *
     * @method create
     * @param {Function} callback 
     */
    function create(callback) {
 
        FrameTrail.module('InterfaceModal').showStatusMessage('Loading Interface ...');
 
        // Check if window is in iFrame
        var iFrame;
        try {
            iFrame = (window.self !== window.top);
        } catch (e) {
            iFrame = true;
        }
        FrameTrail.changeState('embed', iFrame);
 
        FrameTrail.module('Titlebar').create();
        FrameTrail.module('Sidebar').create();
 
 
        $('body').append(mainContainer);
 
        
        FrameTrail.module('ViewOverview').create();
 
        if (FrameTrail.module('RouteNavigation').hypervideoID) {
            FrameTrail.module('ViewVideo').create();
        }
 
        FrameTrail.module('ViewResources').create();
 
        initWindowResizeHandler();
 
        callback.call();
        
        
    };
 
 
    /**
     * I set the event listener for the resize event of the window.
     *
     * This event triggers a change of the global state "viewSize", so all modules can react to this event.
     *
     * Also, after the .create() method of all interface modules has been called, I trigger once the resize event, to propagate a valid state "viewSize" throughout the app.
     *
     * @method initWindowResizeHandler
     */
    function initWindowResizeHandler() {
 
        var _window = $(window),
            resizeTimeout = false;
 
        _window.resize(function(){
 
             var width   = _window.width(),
                 height  = _window.height();
 
             $('#MainContainer').height( height - FrameTrail.module('Titlebar').height );
             FrameTrail.changeState('viewSize', [width, height]);
 
             if ( resizeTimeout !== false ) {
                 clearTimeout(resizeTimeout);
             }
 
             resizeTimeout = setTimeout(function() {
                 FrameTrail.changeState('viewSizeChanged');
             }, 200);
        
        });
 
        
        _window.resize();
        
 
 
    };
    
 
    /**
     * When the global state "sidebarOpen" changes, I react to it.
     *
     * Most importantly, I assure that the &lt;div id="MainContainer"&gt; is resized __before__ the {{#crossLink "ViewVideo/toggleSidebarOpen:method"}}ViewVideo.toggleSidebarOpen{{/crossLink}} is called.
     *
     * @method toggleSidebarOpen
     * @param {Boolean} opened
     */
    function toggleSidebarOpen(opened) {
 
        if (opened) {
            mainContainer.addClass('sidebarOpen');
        } else {
            mainContainer.removeClass('sidebarOpen');
        }
 
        var ViewVideo = FrameTrail.module('ViewVideo');
 
        if (ViewVideo) {
            ViewVideo.toggleSidebarOpen(opened);
        }
        
 
    };
 
 
    /**
     * I react to a change in the global state "editMode"
     * @method toggleEditMode
     * @param {String} editMode
     * @param {String} oldEditMode
     */
    function toggleEditMode(editMode, oldEditMode){
 
        if (editMode) {
 
            mainContainer.addClass('editActive');
 
        } else {
 
            mainContainer.removeClass('editActive');
 
        }
 
    };
 
 
   
 
    
       return {
 
           create: create,
 
           onChange: {
            sidebarOpen:    toggleSidebarOpen,
            editMode:       toggleEditMode
        }
 
       };
 
});