source/js/TL.Timeline.js
function () {
		var self = this;

        this.message.removeFrom(this._el.container);
		this._el.container.innerHTML = "";

		// Create Layout
		if (this.options.timenav_position == "top") {
			this._el.timenav		= TL.Dom.create('div', 'tl-timenav', this._el.container);
			this._el.storyslider	= TL.Dom.create('div', 'tl-storyslider', this._el.container);
		} else {
			this._el.storyslider  	= TL.Dom.create('div', 'tl-storyslider', this._el.container);
			this._el.timenav		= TL.Dom.create('div', 'tl-timenav', this._el.container);
		}

		this._el.menubar			= TL.Dom.create('div', 'tl-menubar', this._el.container);


		// Initial Default Layout
		this.options.width        = this._el.container.offsetWidth;
		this.options.height       = this._el.container.offsetHeight;
		// this._el.storyslider.style.top  = "1px";

		// Set TimeNav Height
		this.options.timenav_height = this._calculateTimeNavHeight(this.options.timenav_height);

		// Create TimeNav
		this._timenav = new TL.TimeNav(this._el.timenav, this.config, this.options);
		this._timenav.on('loaded', this._onTimeNavLoaded, this);
		this._timenav.on('update_timenav_min', this._updateTimeNavHeightMin, this);
		this._timenav.options.height = this.options.timenav_height;
		this._timenav.init();

        // intial_zoom cannot be applied before the timenav has been created
        if (this.options.initial_zoom) {
            // at this point, this.options refers to the merged set of options
            this.setZoom(this.options.initial_zoom);
        }

		// Create StorySlider
		this._storyslider = new TL.StorySlider(this._el.storyslider, this.config, this.options);
		this._storyslider.on('loaded', this._onStorySliderLoaded, this);
		this._storyslider.init();

		// Create Menu Bar
		this._menubar = new TL.MenuBar(this._el.menubar, this._el.container, this.options);

		// LAYOUT
		if (this.options.layout == "portrait") {
			this.options.storyslider_height = (this.options.height - this.options.timenav_height - 1);
		} else {
			this.options.storyslider_height = (this.options.height - 1);
		}


		// Update Display
		this._updateDisplay(this._timenav.options.height, true, 2000);

	}
function () {
		var self = this;

        this.message.removeFrom(this._el.container);
		this._el.container.innerHTML = "";

		// Create Layout
		if (this.options.timenav_position == "top") {
			this._el.timenav		= TL.Dom.create('div', 'tl-timenav', this._el.container);
			this._el.storyslider	= TL.Dom.create('div', 'tl-storyslider', this._el.container);
		} else {
			this._el.storyslider  	= TL.Dom.create('div', 'tl-storyslider', this._el.container);
			this._el.timenav		= TL.Dom.create('div', 'tl-timenav', this._el.container);
		}

		this._el.menubar			= TL.Dom.create('div', 'tl-menubar', this._el.container);


		// Initial Default Layout
		this.options.width        = this._el.container.offsetWidth;
		this.options.height       = this._el.container.offsetHeight;
		// this._el.storyslider.style.top  = "1px";

		// Set TimeNav Height
		this.options.timenav_height = this._calculateTimeNavHeight(this.options.timenav_height);

		// Create TimeNav
		this._timenav = new TL.TimeNav(this._el.timenav, this.config, this.options);
		this._timenav.on('loaded', this._onTimeNavLoaded, this);
		this._timenav.on('update_timenav_min', this._updateTimeNavHeightMin, this);
		this._timenav.options.height = this.options.timenav_height;
		this._timenav.init();

        // intial_zoom cannot be applied before the timenav has been created
        if (this.options.initial_zoom) {
            // at this point, this.options refers to the merged set of options
            this.setZoom(this.options.initial_zoom);
        }

		// Create StorySlider
		this._storyslider = new TL.StorySlider(this._el.storyslider, this.config, this.options);
		this._storyslider.on('loaded', this._onStorySliderLoaded, this);
		this._storyslider.init();

		// Create Menu Bar
		this._menubar = new TL.MenuBar(this._el.menubar, this._el.container, this.options);

		// LAYOUT
		if (this.options.layout == "portrait") {
			this.options.storyslider_height = (this.options.height - this.options.timenav_height - 1);
		} else {
			this.options.storyslider_height = (this.options.height - 1);
		}


		// Update Display
		this._updateDisplay(this._timenav.options.height, true, 2000);

	}
function ( ) { var self = this ; this . message . removeFrom ( this . _el . container ) ; this . _el . container . innerHTML = "" ; // Create Layout if ( this . options . timenav_position == "top" ) { this . _el . timenav = TL . Dom . create ( 'div' , 'tl-timenav' , this . _el . container ) ; this . _el . storyslider = TL . Dom . create ( 'div' , 'tl-storyslider' , this . _el . container ) ; } else { this . _el . storyslider = TL . Dom . create ( 'div' , 'tl-storyslider' , this . _el . container ) ; this . _el . timenav = TL . Dom . create ( 'div' , 'tl-timenav' , this . _el . container ) ; } this . _el . menubar = TL . Dom . create ( 'div' , 'tl-menubar' , this . _el . container ) ; // Initial Default Layout this . options . width = this . _el . container . offsetWidth ; this . options . height = this . _el . container . offsetHeight ; // this._el.storyslider.style.top  = "1px"; // Set TimeNav Height this . options . timenav_height = this . _calculateTimeNavHeight ( this . options . timenav_height ) ; // Create TimeNav this . _timenav = new TL . TimeNav ( this . _el . timenav , this . config , this . options ) ; this . _timenav . on ( 'loaded' , this . _onTimeNavLoaded , this ) ; this . _timenav . on ( 'update_timenav_min' , this . _updateTimeNavHeightMin , this ) ; this . _timenav . options . height = this . options . timenav_height ; this . _timenav . init ( ) ; // intial_zoom cannot be applied before the timenav has been created if ( this . options . initial_zoom ) { // at this point, this.options refers to the merged set of options this . setZoom ( this . options . initial_zoom ) ; } // Create StorySlider this . _storyslider = new TL . StorySlider ( this . _el . storyslider , this . config , this . options ) ; this . _storyslider . on ( 'loaded' , this . _onStorySliderLoaded , this ) ; this . _storyslider . init ( ) ; // Create Menu Bar this . _menubar = new TL . MenuBar ( this . _el . menubar , this . _el . container , this . options ) ; // LAYOUT if ( this . options . layout == "portrait" ) { this . options . storyslider_height = ( this . options . height - this . options . timenav_height - 1 ) ; } else { this . options . storyslider_height = ( this . options . height - 1 ) ; } // Update Display this . _updateDisplay ( this . _timenav . options . height , true , 2000 ) ; }
Initialize the layout
Initialize the layout