penguin/AstroJS

botanjs/src/Astro/Build/Layout/MainFrame.js

raw · 3586 bytes

(function(){
	var ns = __namespace( "Astro.Build.Layout.MainFrame" );

	var Dand                                           = __import( "Dandelion" );
	/** @type {Astro.Bootstrap} */
	var Bootstrap                                      = __import( "Astro.Bootstrap" );
	/** @type {Dandelion.IDOMElement} */
	var IDOMElement                                    = __import( "Dandelion.IDOMElement" );
	/** @type {Astro.Mechanism.CharacterCloud} */
	var CharacterCloud                                 = __import( "Astro.Mechanism.CharacterCloud" );
	/** @type {Astro.Mechanism.Parallax} */
	var Parallax                                       = __import( "Astro.Mechanism.Parallax" );
	/** @type {Dandelion.Window} */
	var wsupp                                         = __import( "Dandelion.Window" );

	// __import( "Dandelion.CSSReset" ); CSS_RESERVATION
	// __import( "Dandelion.CSSAnimations" ); CSS_RESERVATION

	var init = function ()
	{
		var padder = Dand.id( "padder" );
		var wrapper = Dand.id( "wrapper" );
		var footer = Dand.tag( "footer" );

		var fheight = 0;
		if( footer.length )
		{
			footer = footer[0];
			fheight = ( footer.scrollHeight || footer.offsetHeight );
			padder.style.height = fheight + "px";
			wrapper.style.marginBottom = "-" + padder.style.height;
		}

		block_deco.style.bottom = ( fheight - 72 ) + "px";
		initBackgroundParallax();
	};

	var initBackgroundParallax = function ()
	{
		var bg = Dand.id("main_background")
		// far from observer
		, slide_1 = { lowerLimit: 70, upperLimit: 100 }
		// bottom cloud, concentrated
		, slide_2a = { lowerLimit: 0, upperLimit: 200 }
		, slide_2b = { lowerLimit: 0, upperLimit: 200 }
		, slide_2c = { lowerLimit: 0, upperLimit: 200 }

		, slide_3 = { lowerLimit: 20, upperLimit: 100 }
		, slide_4 = { lowerLimit: 70, upperLimit: 100 }

		, cloudRange_1 = { lowerLimit: 0, upperLimit: 100, leftLimit: -10, rightLimit: 110 }
		, cloudRange_2a = { lowerLimit: 0, upperLimit: 200, leftLimit: -10, rightLimit: 110 }
		, cloudRange_2b = { lowerLimit: 0, upperLimit: 300, leftLimit: -10, rightLimit: 110 }
		, cloudRange_2c = { lowerLimit: 0, upperLimit: 400, leftLimit: -10, rightLimit: 110 }
		, cloudRange_3 = { lowerLimit: 0, upperLimit: 300, leftLimit: -10, rightLimit: 110 }
		, cloudRange_4 = { lowerLimit: 80, upperLimit: 100, leftLimit: -10, rightLimit: 110 }

		, cCloudSymbol = ["\u25C6", "\u25C7", "\u25C8"]
		, cCloudSymbol2 = ["\u25C6", "\u25C7"]

		, colors = ["909396", "0C121B", "3A68B2", "48494A"]
		, i = new Date().getDay()

		, cCloud_1 = CharacterCloud.create( cCloudSymbol2, null, 20, cloudRange_1 )
		, cCloud_2a = CharacterCloud.create( cCloudSymbol, null, 20, cloudRange_2a )
		, cCloud_2b = CharacterCloud.create( cCloudSymbol, null, 30, cloudRange_2b, 10 )
		, cCloud_2c = CharacterCloud.create( cCloudSymbol, null, 80, cloudRange_2c, 5 )
		, cCloud_3 = CharacterCloud.create( cCloudSymbol2, null, 20, cloudRange_3 )
		, cCloud_4 = CharacterCloud.create( cCloudSymbol2, null, 20, cloudRange_4 );
		
		bg.appendChild( Parallax.cssSlide( cCloud_1, 0, slide_1 ) );
		bg.appendChild( Parallax.cssSlide( cCloud_2a, 1, slide_2a ) );
		bg.appendChild( Parallax.cssSlide( cCloud_2b, 1, slide_2b ) );
		bg.appendChild( Parallax.cssSlide( cCloud_2c, 1, slide_2c ) );
		bg.appendChild( Parallax.cssSlide( cCloud_3, 2, slide_3 ) );
		bg.appendChild( Parallax.cssSlide( cCloud_4, 3, slide_4 ) );

		IDOMElement( bg ).foreach( 1, function(e)
		{
			e.style.color = "#" + colors[i ++];
			if (colors.length < i) i = 0;
		});

		Parallax.attach( window, wsupp, 0.3 );
	};

	Bootstrap.regInit( init );
})();