(function(){ var ns = __namespace( "Astro.Blog.Components" ); /** @type {System.Cycle} */ var Cycle = __import( "System.Cycle" ); /** @type {System.utils.EventKey} */ var EventKey = __import( "System.utils.EventKey" ); /** @type {Dandelion} */ var Dand = __import( "Dandelion" ); /** @type {Dandelion.IDOMElement} */ var IDOMElement = __import( "Dandelion.IDOMElement" ); var Bubble = function () { this.stage = null; this.bubble = null; //// default is somewhat purple this.bgColor = "#662D91"; this.blowInner = function () { var b_style = this.bubble.style , s_style = this.stage.style; b_style.margin = "10px 10px"; b_style.width = "150px"; b_style.height = "150px"; s_style.width = "170px"; s_style.height = "170px"; s_style.bottom = "20px"; s_style.right = "20px"; }; this.blowOuter = function () { var b_style = this.bubble.style , s_style = this.stage.style; b_style.margin = "100px 100px"; s_style.width = "200px"; s_style.height = "200px"; s_style.bottom = "10px"; s_style.right = "10px"; Cycle.delay( this.blowInner.bind(this), 250 ); }; this.Void = function () { this.stage.style.display = "none"; }; // Set Bindings this.init = this.init.bind(this); this.blurp = this.blurp.bind(this); this.pop = this.pop.bind(this); this.setColor = this.setColor.bind(this); }; var wrapc = function( aClass, elem ) { return Dand.wrapc( "comp " + aClass, elem ); }; Bubble.prototype.init = function () { this.stage = wrapc( "bubble" ); this.bubble = wrapc( "innerBubble" ); var b_style = this.bubble.style , s_style = this.stage.style; b_style.margin = "85px 85px"; b_style.width = "0px"; b_style.height = "0px"; b_style.background = this.bgColor; b_style.overflow = "hidden"; this.bubble.appendChild( this.message = wrapc( "bInner flsf" ) ); this.stage.appendChild(this.bubble); s_style.display = "none"; s_style.width = "10px"; s_style.height = "10px"; s_style.bottom = "85px"; s_style.right = "85px"; // onClick handle to prevent persistent bubble IDOMElement( this.stage ).addEventListener( new EventKey( "Click", this.blurp ) ); return this.stage; }; Bubble.prototype.setColor = function (color) { this.bubble.style.background = color; }; Bubble.prototype.blurp = function () { var b_style = this.bubble.style , s_style = this.stage.style; b_style.margin = "0 0"; b_style.width = "0px"; b_style.height = "0px"; b_style.overflow = "hidden"; s_style.position = "fixed"; s_style.width = "10px"; s_style.height = "10px"; s_style.bottom = "85px"; s_style.right = "85px"; Cycle.delay( this.Void.bind(this), 250 ); }; Bubble.prototype.pop = function (message) { this.message.innerHTML = message; this.stage.style.display = "block"; Cycle.delay( this.blowOuter.bind(this), 100 ); }; ns[ NS_EXPORT ]( EX_CLASS, "Bubble", Bubble ); })();