Astro Classes

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/AcquireLib.js

@@ -0,0 +1,110 @@
+(function ()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	/** @type {System.utils.IKey} */
+	var IKey                              = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                           = __import( "System.utils.DataKey" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion} */
+	var Dand                              = __import( "Dandelion" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                        = __import( "Components.MessageBox" );
+
+	
+	var acquirelib = function(insertSnippet, snippetWrap, createContext, override)
+	{
+		var temp, i, j
+		
+		, handler = function ()
+		{
+			// Input fields
+			var input_text = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"));
+			
+			if (this._stage)
+			{
+				input_text.value = this._text;
+			}
+			
+			// Popup MessageBox
+			new MessageBox(
+				"Acquire library" + ( this._stage ? " (Edit)" : "" )
+				, Dand.wrape([ Dand.wrapc( "v_instruction flsf", "Module" ) , input_text ])
+				, "OK", "Cancel"
+				, visualizer.bind({ text:input_text, stage: this._stage })
+			).show();
+		}
+		
+		, visualizer = function (submitted, override)
+		{
+			var src = override ? override.value : this.text.value
+			, stage = this.stage;
+			
+			if (submitted && src)
+			{
+				// Shared clause
+				
+				if (!stage)
+				{
+					if (!src) return;
+					
+					
+					// Visualize component
+					temp = Dand.wrap(
+						'span'
+						, null
+						, "flsf"
+						, "AcquireLib: " + src
+						, [
+							new DataKey( "value", src )
+							, new IKey(
+								"style", "background-color: #444; color: white; padding: 0.2em 0.5em;"
+							)
+						]
+					);
+					insertSnippet(j = snippetWrap("AcquireLib", temp, false, 'span'), Boolean(override));
+				}
+				else
+				{
+					IDOMElement(stage).setAttribute( new DataKey("value", src) );
+					
+					stage.removeChild(stage.firstChild);
+					stage.appendChild(Dand.textNode("AcquireLib: " + src));
+					
+					// set temp back to stage
+					temp = stage;
+				}
+				
+				i = {_text: src, _stage: temp};
+				
+				// Set context menu
+				createContext(i, j, handler);
+			}
+		}
+		;
+		
+		if (override)
+		{
+			visualizer(true, override);
+			override = false;
+		}
+		else
+		{
+			return handler;
+		}
+		return true;
+	};
+	
+	var compile = function (stage)
+	{
+		var element = IDOMElement(stage);
+		
+		return "[acquirelib]" + element.getDAttribute("value") + "[/acquirelib]";
+	};
+
+	__static_method( acquirelib, "compile", compile );
+
+	ns[ NS_EXPORT ]( EX_CLASS, "AcquireLib", acquirelib );
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Code.js

@@ -0,0 +1,191 @@
+(function ()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	/** @type {System.utils.IKey} */
+	var IKey                              = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                           = __import( "System.utils.DataKey" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion} */
+	var Dand                              = __import( "Dandelion" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                        = __import( "Components.MessageBox" );
+
+	var escapeStr = ns[ NS_INVOKE ]( "escapeStr" );
+	
+	var code = function ( insertSnippet, snippetWrap, createContext, override )
+	{
+		var temp, i, j
+		, codeLangs = IKey.quickDef(
+			  "Plain text" , "plain"
+			, "AS3"        , "as3"
+			, "bash"       , "bash"
+			, "C#"         , "c#"
+			, "C/C++"      , "c"
+			, "CSS"        , "css"
+			, "php"        , "php"
+			, "Python"     , "python"
+			, "Perl"       , "perl"
+			, "Ruby"       , "ruby"
+			, "Html/Xml"   , "html"
+			, "Java"       , "java"
+			, "JavaScript" , "js"
+			, "SQL"        , "sql"
+		)
+		
+		// Private methods
+		, compileListItems = function ()
+		{
+			var arr = [];
+			for ( i in codeLangs )
+			{
+				arr[ arr.length ] = Dand.wrapne(
+					"option"
+					, codeLangs[i].keyName
+					, new IKey( "value", codeLangs[i].keyValue )
+				);
+			}
+			return arr;
+		}
+		
+		// Snippet Class structure: handler & visualizer
+		, handler = function ()
+		{
+			// Input fields
+			var v_snippetInput = Dand.wrap( "textarea", null, "v_snippet_input" )
+			, v_codelang = Dand.wrap( "select", null, "v_select flsf", compileListItems() );
+			
+			if ( this._stage )
+			{
+				if ( this._lang )
+				{
+					for ( i = 0; i < codeLangs.length; i ++ )
+					{
+						if ( codeLangs[i].keyValue == this._lang )
+						{
+							v_codelang.selectedIndex = i;
+						}
+					}
+				}
+				
+				v_snippetInput.value = this._content || "";
+			}
+			else
+			{
+				// Remember the last choice
+				if ( typeof( this.pSnippeCodeChoice ) == "number" )
+					v_codelang.selectedIndex = this.pSnippeCodeChoice;
+			}
+			
+			// Popup MessageBox
+			new MessageBox(
+				( this._stage ? "Edit" : "Insert" ) + " code snippet"
+				, Dand.wrapc(
+					"v_trimmer"
+					, [
+						Dand.wrapc( "v_instruction", v_codelang )
+						, v_snippetInput
+					]
+				)
+				, "OK", "Cancel"
+				// Switcher
+				, visualizer.bind({ code:v_snippetInput, lang: v_codelang, stage: this._stage })
+			).show();
+		}
+	
+		
+		, visualizer = function ( submitted, override )
+		{
+			var lang, code
+			, stage = this.stage;
+			
+			if ( override )
+			{
+				lang = override.lang;
+				code = override.value;
+			}
+			else
+			{
+				lang = this.lang[this.pSnippeCodeChoice = this.lang.selectedIndex].value;
+				code = this.code.value;
+			}
+			
+			
+			if ( submitted && code )
+			{
+				if (!stage)
+				{
+					// Visualize component
+					temp =  Dand.wrapc(
+						"v_box"
+						, [
+							Dand.wrapne( "pre", code )
+							, Dand.wrapc( "v_description", "Script language: " + lang )
+						]
+						, [
+							new DataKey( "value", code )
+							, new DataKey( "lang", lang )
+						]
+					);
+					insertSnippet( j = snippetWrap( "Code", temp ), Boolean( override ) );
+				}
+				else
+				{
+					IDOMElement( stage ).setAttribute(
+						[
+							new DataKey( "value", code )
+							, new DataKey( "lang", lang )
+						]
+					);
+					
+					temp = stage.firstChild;
+					temp.removeChild( temp.firstChild );
+					stage.firstChild.appendChild( Dand.textNode( code ) );
+					
+					temp = stage.lastChild;
+					temp.removeChild( temp.firstChild );
+					temp.appendChild( Dand.textNode( "Script language: " + lang ) );
+					
+					temp = stage;
+					
+				}
+				
+				i = { _lang: lang, _content: code, _stage: temp };
+				
+				// Set context menu
+				createContext( i, j, handler );
+			}
+		}
+		;
+		
+		if ( override )
+		{
+			visualizer( true, override );
+			override = false;
+		}
+		else
+		{
+			return handler;
+		}
+		return true;
+	};
+	
+	var compile = function ( stage )
+	{
+		// [code lang=\"" + lang + "\"]" + code + "[/code]"
+		var element = IDOMElement( stage )
+		, lang = element.getDAttribute( "lang" );
+		
+		return "[code"
+			+ (lang ? (" lang=\"" + lang + "\"") : "") + "]"
+			+ escapeStr( element.getDAttribute( "value" ) )
+			+ "[/code]"
+			;
+	};
+
+	__static_method( code, "compile", compile );
+
+	ns[ NS_EXPORT ]( EX_CLASS, "Code", code );
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Html.js

@@ -0,0 +1,107 @@
+(function ()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	/** @type {System.utils.IKey} */
+	var IKey                              = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                           = __import( "System.utils.DataKey" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion} */
+	var Dand                              = __import( "Dandelion" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                        = __import( "Components.MessageBox" );
+
+	var escapeStr = ns[ NS_INVOKE ]( "escapeStr" );
+
+	var html = function (insertSnippet, snippetWrap, createContext, override)
+	{
+		var temp, i, j
+		
+		, handler = function ()
+		{
+			// Input fields
+			var v_snippetInput = Dand.wrap( "textarea", null, "v_snippet_input" );
+			
+			if ( this._stage )
+			{
+				v_snippetInput.value = this._code;
+			}
+			
+			// Popup MessageBox
+			new MessageBox(
+				"Insert Html snippet"
+				, v_snippetInput
+				, "OK", "Cancel"
+				, visualizer.bind({ code: v_snippetInput, stage: this._stage })
+			).show();
+		}
+		
+		, visualizer = function (submitted, override)
+		{
+			
+			var code, stage = this.stage;
+			
+			code = override ? override.value : this.code.value;
+			
+			if (submitted && code)
+			{
+				if (!stage)
+				{
+					// Visualize component
+					temp =  Dand.wrapc(
+						"v_box"
+						, [
+							Dand.wrapne( "pre", code )
+							, Dand.wrapc( "v_description", "Raw Html Codes" )
+						]
+						, [
+							new DataKey( "value", code )
+							, new IKey( "style", "max-height: 150px;" )
+						]
+					);
+					insertSnippet(j = snippetWrap("Html", temp), Boolean(override));
+				}
+				else
+				{
+					IDOMElement( stage ).setAttribute(new DataKey( "value", code ));
+					
+					temp = stage.firstChild;
+					temp.removeChild(temp.firstChild);
+					stage.firstChild.appendChild(Dand.textNode( code ));
+					
+					temp = stage;
+					
+				}
+				
+				i = { _code: code, _stage: temp };
+				
+				// Set context menu
+				createContext( i, j, handler );
+			}
+		};
+		
+		if ( override )
+		{
+			visualizer( true, override );
+			override = false;
+		}
+		else
+		{
+			return handler;
+		}
+		return true;
+	
+	};
+	
+	var compile = function (stage)
+	{
+		// [html][/html]
+		return "[html]" + escapeStr( IDOMElement(stage).getDAttribute("value") ) + "[/html]";
+	};
+
+	__static_method( html, "compile", compile );
+
+	ns[ NS_EXPORT ]( EX_CLASS, "Html", html );
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Image.js

@@ -0,0 +1,157 @@
+(function ()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	/** @type {System.utils.IKey} */
+	var IKey                              = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                           = __import( "System.utils.DataKey" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion} */
+	var Dand                              = __import( "Dandelion" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                        = __import( "Components.MessageBox" );
+
+	var image = function( insertSnippet, snippetWrap, createContext, override )
+	{
+		var temp, i, j
+		
+		, handler = function ()
+		{
+			// Input fields
+			var input_url = Dand.wrap(
+				"input", null, "v_snippet_input_single", null, new IKey( "type", "text" )
+			)
+			, input_a = Dand.wrap(
+				"input", null, "v_snippet_input_single", null, new IKey( "type", "text" )
+			);
+			
+			if (this._stage)
+			{
+				input_url.value = this._url;
+				input_a.value = this._href;
+			}
+			
+			// Popup MessageBox
+			new MessageBox(
+				( this._stage ? "Edit" : "Insert" ) + " image snippet",
+				Dand.wrape([
+						Dand.wrapc( "v_instruction flsf", "Link to the image:" )
+						, input_url
+						, Dand.wrapc( "v_instruction flsf", "Ancohr link(optional):" )
+						, input_a
+					]
+				)
+				, "OK", "Cancel"
+				, visualizer.bind({ url:input_url, href:input_a, stage: this._stage })
+			).show();
+		}
+		
+		, visualizer = function ( submitted, override )
+		{
+			var src, href
+			, stage = this.stage;
+			
+			if ( override )
+			{
+				src = override.value;
+				href = override.href;
+			}
+			else
+			{
+				src = this.url.value;
+				href = this.href.value;
+			}
+			
+			if ( submitted && src )
+			{
+				
+				// Shared clause
+				i = Dand.textNode(href ? ("link to: " + href): "No link");
+				
+				if ( !stage )
+				{
+					if ( !src ) return;
+					
+									
+					// Visualize component
+					temp =  Dand.wrapc(
+						"v_box"
+						, [
+							Dand.wrapna(
+								"img"
+								, [
+									new IKey("src", src)
+									, new IKey("style", "max-width: 100%")
+								]
+							)
+							// caption
+							, Dand.wrapc( "v_description", i )
+						]
+						, [
+							new DataKey("value", src)
+							, new DataKey("href", href)
+						]
+					);
+					insertSnippet( j = snippetWrap( "Image", temp ), Boolean( override ) );
+				}
+				else
+				{
+					IDOMElement( stage ).setAttribute
+					([
+						new DataKey( "value", src )
+						, new DataKey( "href", href )
+					]);
+					
+					stage.firstChild.setAttribute("src", src);
+					
+					temp = stage.lastChild;
+					temp.removeChild(temp.firstChild);
+					temp.appendChild(i);
+					
+					// set temp back to stage
+					temp = stage;
+				}
+				
+				i = { _url: src, _href: href, _stage: temp };
+				
+				// Set context menu
+				createContext( i, j, handler );
+			}
+		}
+		;
+		
+		if ( override )
+		{
+			visualizer( true, override );
+			override = false;
+		}
+		else
+		{
+			return handler;
+		}
+		return true;
+	};
+	
+	var compile = function ( stage )
+	{
+		// [img href=\"" + this.href.value + "\"]" + this.url.value + "[/img]
+		var element = IDOMElement( stage )
+		, href = element.getDAttribute( "href" );
+		
+		return "[img"
+			+ ( href ? (" href=\"" + href + "\"") : "" )
+			+ "]"
+			+ element.getDAttribute( "value" ) + "[/img]"
+			;
+	};
+
+	// Alias
+	var alias = "img";
+
+	__static_method( image, "compile", compile );
+	__const( image, "alias", alias );
+
+	ns[ NS_EXPORT ]( EX_CLASS, "Image", image );
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Link.js

@@ -0,0 +1,131 @@
+(function ()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	/** @type {System.utils.IKey} */
+	var IKey                              = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                           = __import( "System.utils.DataKey" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion} */
+	var Dand                              = __import( "Dandelion" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                        = __import( "Components.MessageBox" );
+	
+	var link = function(insertSnippet, snippetWrap, createContext, override)
+	{
+		var temp, i, j
+		
+		, handler = function ()
+		{
+			// Input fields
+			var input_text = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"))
+			, input_a = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"));
+			
+			if (this._stage)
+			{
+				input_text.value = this._text;
+				input_a.value = this._href;
+			}
+			
+			// Popup MessageBox
+			new MessageBox(
+				(this._stage ? "Edit" : "Insert") + " link",
+				Dand.wrape([
+						Dand.wrapc("v_instruction flsf", "Text")
+						, input_text
+						, Dand.wrapc("v_instruction flsf", "Link to:")
+						, input_a
+					]
+				)
+			, "OK", "Cancel", visualizer.bind({text:input_text, href:input_a, stage: this._stage})).show();
+		}
+		
+		, visualizer = function (submitted, override)
+		{
+			var src, href
+			, stage = this.stage;
+			
+			if (override)
+			{
+				src = override.value;
+				href = override.href;
+			}
+			else
+			{
+				src = this.text.value;
+				href = this.href.value;
+			}
+			
+			if (submitted && src && href)
+			{
+				
+				// Shared clause
+				
+				if (!stage)
+				{
+					if (!src) return;
+					
+					
+					// Visualize component
+					temp =  
+						Dand.wrapne('span', src
+							, [
+								new DataKey("value", src)
+								, new DataKey("href", href)
+							]
+						);
+					insertSnippet(j = snippetWrap("Link", temp, false, 'span'), Boolean(override));
+				}
+				else
+				{
+					IDOMElement(stage).setAttribute
+					(
+						[
+							new DataKey("value", src)
+							, new DataKey("href", href)
+						]
+					);
+					
+					stage.removeChild(stage.firstChild);
+					stage.appendChild(Dand.textNode(src));
+					
+					// set temp back to stage
+					temp = stage;
+				}
+				
+				i = {_text: src, _href: href, _stage: temp};
+				
+				// Set context menu
+				createContext(i, j, handler);
+			}
+		}
+		;
+		
+		if (override)
+		{
+			visualizer(true, override);
+			override = false;
+		}
+		else
+		{
+			return handler;
+		}
+		return true;
+	};
+	
+	var compile = function (stage)
+	{
+		// [link href=\"" + this.href.value + "\"]" + text + "[/link]
+		var element = IDOMElement(stage)
+		, href = element.getDAttribute("href");
+		
+		return "[link" + (href ? (" href=\"" + href + "\"") : "") + "]" + element.getDAttribute("value") + "[/link]";
+	};
+
+
+	__static_method( link, "compile", compile );
+
+	ns[ NS_EXPORT ]( EX_CLASS, "Link", link );
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/SiteFile.js

@@ -0,0 +1,174 @@
+(function ()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	/** @type {System.utils.IKey} */
+	var IKey                              = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                           = __import( "System.utils.DataKey" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion} */
+	var Dand                              = __import( "Dandelion" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                        = __import( "Components.MessageBox" );
+	/** @type {Astro.Blog.Config} */
+	var Config                            = __import( "Astro.Blog.Config" );
+	/** @type {System.utils.Perf} */
+	var Perf                              = __import( "System.utils.Perf" );
+	/** @type {Astro.utils.Date} */
+	var XDate                             = __import( "Astro.utils.Date" );
+
+
+	var escapeStr = ns[ NS_INVOKE ]( "escapeStr" );
+
+	var getData = __import( "System.Net.getData" );
+
+	/** @type {_AstConf_.SiteFile} */
+	var config = null;
+
+	var sitefile = function ( insertSnippet, snippetWrap, createContext, override )
+	{
+		config = Config.get( "SiteFile" );
+		if( !config ) throw new Error( "config is not defined" );
+
+		var temp, i, j
+
+		, handler = function ()
+		{
+			// Input fields
+			var v_snippetInput = Dand.wrap("input", null, "v_snippet_input_single", null, new IKey("type", "text"));
+
+			// Popup MessageBox
+			new MessageBox("Insert site file", v_snippetInput, "OK", "Cancel", visualizer.bind({code: v_snippetInput})).show();
+		}
+
+		, __applyData = function (e)
+		{
+			var finfo = JSON.parse(e).file, s, m, l
+				, content = this.stage.firstChild
+				, desc = this.stage.lastChild
+				, _hash = this.hash;
+
+			switch ( finfo.type )
+			{
+				case "image":
+
+					this.stage.removeChild(content);
+					// Default size is large
+					var _image = Dand.wrapna("img", new IKey("src", config.path.image.large + _hash + ".jpg"))
+						, _stage = IDOMElement(this.stage)
+						, keys = [ new IKey( "type", "radio" ), new IKey( "name", "size_grp" + Perf.uuid ) ]
+						, sid
+						, selectionChanged = function ()
+						{
+							_stage.setAttribute(new DataKey("size", this.size));
+							//// Handles the size selection
+							switch(this.size)
+							{
+								case "small":
+									_image.setAttribute("src", config.path.image.small + _hash + ".jpg");
+									break;
+								case "medium":
+									_image.setAttribute("src", config.path.image.medium + _hash + ".jpg");
+									break;
+								case "large":
+									_image.setAttribute("src", config.path.image.large + _hash + ".jpg");
+									break;
+							}
+						};
+
+					this.stage.insertBefore(_image, desc);
+
+					desc.removeChild(desc.firstChild);
+					desc.appendChild(
+						Dand.wrape([
+							Dand.textNode("Size: ")
+							, s = Dand.wrapna("input", keys.concat( new IKey("id", sid = "size_" + Perf.uuid) ))
+							, Dand.wrapne("label", "small", new IKey("for", sid))
+							, m = Dand.wrapna("input", keys.concat( new IKey("id", sid = "size_" + Perf.uuid) ))
+							, Dand.wrapne("label", "medium", new IKey("for", sid))
+							, l = Dand.wrapna("input", keys.concat( new IKey("checked", "1"), new IKey("id", sid = "size_" + Perf.uuid) ))
+							, Dand.wrapne("label", "large (default)", new IKey("for", sid))
+					   ])
+					);
+
+					// ad handlers to handles size change event
+					IDOMElement(s).addEventListener("Change", selectionChanged.bind({size: "small"}));
+					IDOMElement(m).addEventListener("Change", selectionChanged.bind({size: "medium"}));
+					IDOMElement(l).addEventListener("Change", selectionChanged.bind({size: "large"}));
+					break;
+				case "audio":
+					// TODO
+					break;
+				default:
+					content.firstChild.nodeValue = "Regular file: " + finfo.name;
+					content.style.paddingBottom = "2em";
+					content.appendChild( Dand.wrap( "br" ) );
+					content.appendChild( Dand.textNode( "Date: " + XDate.pretty( new Date( finfo.date_created ), true ) ) );
+			}
+
+		}
+
+		, loadFailed = function (e) { }
+
+		, visualizer = function (submitted, override)
+		{
+
+			var hash = override ? override.value : this.code.value
+				, _obj = {file: hash};
+
+			if ( submitted && hash )
+			{
+				// Visualize component
+
+				temp =  Dand.wrapc("v_box"
+					, [
+						Dand.wrape("Getting information from Server ...")
+						, Dand.wrapc("v_description", "Site file (hash): " + hash)
+					]
+					, [
+						new DataKey("value", hash)
+						, new DataKey("size", "large")
+						, new IKey("style", "max-height: 150px;")
+					]
+				);
+
+				// Get data from site library
+				getData( config.path.info + hash, __applyData.bind({stage: temp, hash: hash}), loadFailed );
+
+				insertSnippet(j = snippetWrap("SiteFile", temp), Boolean(override));
+
+				// Set context menu
+				createContext(null, j);
+			}
+		};
+
+		if (override)
+		{
+			visualizer(true, override);
+			override = false;
+		}
+		else
+		{
+			return handler;
+		}
+		return true;
+
+	};
+
+	var compile = function ( stage )
+	{
+		stage = IDOMElement( stage );
+		// [html][/html]
+		return "[sitefile"
+			+ " size=\"" + stage.getDAttribute( "size" ) + "\"" +  "]"
+			+ escapeStr( stage.getDAttribute( "value" ) )
+			+ "[/sitefile]";
+	};
+
+	__static_method( sitefile, "compile", compile );
+
+	ns[ NS_EXPORT ]( EX_CLASS, "SiteFile", sitefile );
+
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Sound.js

@@ -0,0 +1,146 @@
+(function ()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	/** @type {System.utils.IKey} */
+	var IKey                              = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                           = __import( "System.utils.DataKey" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion} */
+	var Dand                              = __import( "Dandelion" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                        = __import( "Components.MessageBox" );
+
+	var compileProp = ns[ NS_INVOKE ]( "compileProp" );
+
+	var sound = function (insertSnippet, snippetWrap, createContext, override)
+	{
+		var temp, i, j
+		, defaultArt = "http://file.astropenguin.net/blog/layout-images/disc_s.png"
+		, handler = function ()
+		{
+			// Input fields
+			var input_url = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"))
+			, input_albumArt = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"))
+			, input_lrc = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"))
+			;
+			
+			if (this._stage)
+			{
+				input_url.value = this._url;
+				input_albumArt.value = this._albumArt;
+				input_lrc.value = this._lrc;
+			}
+			
+			new MessageBox(
+				(this._stage ? "Edit" : "Insert") + " sound snippet"
+				, Dand.wrape([
+						Dand.wrapc("v_instruction flsf", "Link to sound:")
+						, input_url
+						
+						, Dand.wrapc("v_instruction flsf", "Link to album art(optional):")
+						, input_albumArt
+						
+						, Dand.wrapc("v_instruction flsf", "Link to lrc(optional):")
+						, input_lrc
+					]
+				)
+			, "OK", "Cancel", visualizer.bind({url:input_url, albumArt:input_albumArt, lrc:input_lrc, stage: this._stage})).show();
+		}
+	
+		, visualizer = function (submitted)
+		{
+			
+			var src, albumArt , lrc
+			, stage = this.stage;
+			
+			if (override)
+			{
+				src = override.url;
+				albumArt = override.albumArt;
+				lrc = override.lrc;
+			}
+			else
+			{
+				src = this.url.value;
+				albumArt = this.albumArt.value;
+				lrc = this.lrc.value;
+			}
+			
+			if (submitted && src)
+			{
+				
+				if (!stage)
+				{
+					// Visualize component
+					temp =  Dand.wrapc('v_box'
+					, [
+						Dand.wrape(null, new IKey
+							(
+								"style", "height: 75px; background-size: auto 75px; background-repeat: no-repeat;"
+								+ "background-image: url(" + (albumArt ? albumArt : defaultArt) + ")"
+							)
+						)
+						, Dand.wrapc('v_description', "Sound snippet")
+					  ]
+					, [
+						new DataKey("value", "")
+						, new DataKey("url", src)
+						, new DataKey("albumArt", albumArt)
+						, new DataKey("lrc", lrc)
+					  ]
+					);
+					insertSnippet(j = snippetWrap("Sound", temp), Boolean(override));
+				}
+				else
+				{
+					// Edit properties
+					stage.firstChild.style.backgroundImage = "url(" + (albumArt ? albumArt : defaultArt) + ")" ;
+					
+					IDOMElement(stage).setAttribute
+					(
+						[
+							new DataKey("url", src)
+							, new DataKey("albumArt", albumArt)
+							, new DataKey("lrc", lrc)
+						]
+					);
+					
+				}
+				
+				i = {_url: src, _albumArt: albumArt, _lrc: lrc, _stage: temp};
+				
+				// Set context menu
+				createContext(i, j, handler);
+			}
+		}
+		;
+		
+		if (override)
+		{
+			visualizer(true, override);
+			override = false;
+		}
+		else
+		{
+			return handler;
+		}
+		return true;
+	};
+	
+	var compile = function (stage)
+	{
+		// [sound url=""  albumArt="" lrc="" ][/sound]");
+		var element = IDOMElement(stage)
+		, props = ["url", "albumArt", "lrc"];
+		
+		return "[sound" + compileProp( element, props ) + "][/sound]";
+	};
+
+
+	__static_method( sound, "compile", compile );
+
+	ns[ NS_EXPORT ]( EX_CLASS, "Sound", sound );
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Spoiler.js

@@ -0,0 +1,154 @@
+(function ()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	/** @type {System.utils.IKey} */
+	var IKey                              = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                           = __import( "System.utils.DataKey" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion} */
+	var Dand                              = __import( "Dandelion" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                        = __import( "Components.MessageBox" );
+
+	var compileProp = ns[ NS_INVOKE ]( "compileProp" );
+
+	var spoiler = function(insertSnippet, snippetWrap, createContext, override)
+	{
+		var temp, i, j
+		
+		, handler = function ()
+		{
+			// Input fields
+			var v_snippetInput = Dand.wrap('textarea', null, "v_snippet_input")
+			, input_title = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"))
+			, input_expanded = Dand.wrapna('input', new IKey("type", "checkbox"))
+			
+			if (this._stage)
+			{
+				v_snippetInput.value = this._content;
+				input_title.value = this._title;
+				input_expanded.checked = (this._expanded == "on");
+			}
+			
+			// Popup MessageBox
+			new MessageBox("Insert spoiler content"
+				, Dand.wrape([
+						Dand.wrapc("v_instruction flsf", "Title")
+						, input_title
+						
+						, Dand.wrapc("v_instruction flsf", "Content")
+						, v_snippetInput
+						
+						, Dand.wrape([ input_expanded, Dand.textNode( "Expanded" ) ])
+					]
+				)
+			, "OK", "Cancel", visualizer.bind({title: input_title, content:v_snippetInput, expanded: input_expanded, stage: this._stage})).show();
+		}
+		
+		, visualizer = function (submitted, override)
+		{
+			var content, title, expanded
+			, stage = this.stage;
+			
+			if (override)
+			{
+				content = override.value;
+				title = override.title;
+				expanded = override.expanded ? "on" : "";
+			}
+			else
+			{
+				content = this.content.value;
+				title = this.title.value;
+				expanded = this.expanded.checked ? "on" : "";
+			}
+			
+			if (submitted && content)
+			{
+				// Shared Clause
+				i = Dand.textNode(title || "Spoiler");
+				if (!stage)
+				{
+					if (!content) return;
+					
+					// Visualize component
+					temp =  Dand.wrapc('v_box',
+						[
+							// caption
+							Dand.wrapc('v_caption', i)
+							, Dand.textNode(content)
+						],
+						[
+							new DataKey("value", content)
+							, new DataKey("title", title)
+							, new DataKey("expanded", expanded)
+						]
+					);
+					insertSnippet(j = snippetWrap("Spoiler", temp), Boolean(override));
+				}
+				else
+				{
+					IDOMElement(stage).setAttribute
+					(
+						[
+							new DataKey("value", content)
+							, new DataKey("title", title)
+							, new DataKey("expanded", expanded)
+						]
+					);
+					
+					temp = stage.firstChild;
+					temp.removeChild(temp.firstChild);
+					temp.appendChild(i);
+					
+					stage.removeChild(stage.lastChild);
+					stage.appendChild(Dand.textNode(content));
+					
+					// set temp back to stage
+					temp = stage;
+				}
+				
+				i = {
+					_title: title
+					, _content: content
+					, _expanded: expanded || "off"
+					, _stage: temp
+				};
+				
+				// Set context menu
+				createContext(i, j, handler);
+			}
+		}
+		;
+		
+		if (override)
+		{
+			visualizer(true, override);
+			override = false;
+		}
+		else
+		{
+			return handler;
+		}
+		return true;
+	};
+	
+	var compile = function ( stage )
+	{
+		var element = IDOMElement( stage )
+		, props = ["title", "expanded"];
+		
+		return "[spoiler"
+			+ compileProp( element, props )
+			+  "]"
+			+ element.getDAttribute( "value" )
+			+ "[/spoiler]";
+	};
+
+	__static_method( spoiler, "compile", compile );
+
+	ns[ NS_EXPORT ]( EX_CLASS, "Spoiler", spoiler );
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Swf.js

@@ -0,0 +1,214 @@
+(function ()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	/** @type {System.utils.IKey} */
+	var IKey                              = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                           = __import( "System.utils.DataKey" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion} */
+	var Dand                              = __import( "Dandelion" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                        = __import( "Components.MessageBox" );
+
+	var compileProp = ns[ NS_INVOKE ]( "compileProp" );
+
+	var swf = function (insertSnippet, snippetWrap, createContext, override)
+	{
+		var
+		temp, i, j
+		
+		// Pending
+		, defaultArt = ""
+		
+		, handler = function ()
+		{
+			// Input fields
+			var input_w = Dand.wrapna('input', new IKey("type", "number"))
+			, input_h = Dand.wrapna('input', new IKey("type", "number"))
+			, input_title = Dand.wrap('input', null, "v_snippet_input_single", null, [new IKey("type", "text"), new IKey("placeHolder", "optional")] )
+			, input_desc = Dand.wrap('input', null, "v_snippet_input_single", null, [new IKey("type", "text"), new IKey("placeHolder", "optional")] )
+			, input_api = Dand.wrapna('input', new IKey("type", "checkbox"))
+			, input_preview = Dand.wrap('input', null, "v_snippet_input_single", null, [new IKey("type", "text"), new IKey("placeHolder", "optional")] )
+			, input_src = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"))
+			, stage = this._stage;
+			
+			
+			if (stage)
+			{
+				input_src.value = this._src;
+				input_w.value = this._width;
+				input_h.value = this._height;
+				input_title.value = this._title;
+				input_desc.value = this._desc;
+				input_preview.value = this._preview;
+				input_api.checked = (this._extAPI == "on");
+			}
+			
+			new MessageBox(
+				"Insert swf object",
+				Dand.wrape([
+						Dand.wrape([Dand.textNode("Dimensions: "), input_w, Dand.textNode("\u00D7"), input_h, Dand.textNode("px")])
+						
+						, Dand.wrapc("v_instruction flsf", "Title:")
+						, input_title
+						
+						, Dand.wrapc("v_instruction flsf", "Description:")
+						, input_desc
+						
+						, Dand.wrapc("v_instruction flsf", "Preview image:")
+						, input_preview
+						
+						, Dand.wrapc("v_instruction flsf", "Link to swf:")
+						, input_src
+						
+						, Dand.wrape([ input_api, Dand.textNode("Use external API") ] )
+					]
+				)
+			, "OK", "Cancel", visualizer.bind({src:input_src, width:input_w, height:input_h, title: input_title, desc: input_desc, extAPI: input_api, preview: input_preview, stage: this._stage})).show();
+		}
+	
+		, visualizer = function (submitted, override)
+		{
+			var src, width, height, title, desc, preview, extAPI
+			, stage = this.stage;
+			
+			if (override)
+			{
+				src = override.value;
+				width = override.width;
+				height = override.height;
+				title = override.title;
+				desc = override.desc;
+				preview = override.preview;
+				extAPI = override.useExtAPI;
+			}
+			else
+			{
+				src = this.src.value;
+				width = this.width.value;
+				height = this.height.value;
+				title = this.title.value;
+				desc = this.desc.value;
+				preview = this.preview.value;
+				extAPI = this.extAPI.checked ? "on" : "";
+			}
+			
+			if (submitted && width && height && src)
+			{
+				
+				if (!stage)
+				{
+					// Visualize component
+					
+					temp =  Dand.wrapc('v_box'
+					, Dand.wrapc('v_description'
+							, [
+								Dand.wrap('span', null, 'fls', title)
+								, Dand.textNode("	")
+								, Dand.wrap('span', null, 'v_caption_desc flsf', desc)
+							  ]
+							, new IKey('style', 'font-size: 2em')
+						)
+					, [
+						new DataKey("value", src)
+						, new DataKey("width", width)
+						, new DataKey("height", height)
+						, new DataKey("title", title)
+						, new DataKey("desc", desc)
+						, new DataKey("preview", preview)
+						, new DataKey("useExtAPI", extAPI)
+						
+						, new IKey
+						(
+							"style"
+							, "background-position: center; background-repeat: no-repeat; "
+							+ "width: " + width +"px; height: " + height + "px; "
+							+ "background-image: url(" + (preview ? preview : defaultArt) + ")"
+						)
+					  ]
+					);
+					insertSnippet(j = snippetWrap("Swf", temp), Boolean(override));
+				}
+				else
+				{
+					IDOMElement(stage).setAttribute
+					(
+						[
+							new DataKey("value", src)
+							, new DataKey("width", width)
+							, new DataKey("height", height)
+							, new DataKey("title", title)
+							, new DataKey("desc", desc)
+							, new DataKey("preview", preview)
+							, new DataKey("useExtAPI", extAPI)
+						]
+					);
+					
+					stage.style.width = width + "px";
+					stage.style.height = height + "px";
+					stage.style.backgroundImage = "url(" + (preview ? preview : defaultArt) + ")";
+					
+					// Title
+					temp = stage.firstChild.firstChild;
+					temp.removeChild(temp.firstChild);
+					temp.appendChild(Dand.textNode(title));
+					
+					// Desc
+					temp = stage.firstChild.lastChild;
+					temp.removeChild(temp.firstChild);
+					temp.appendChild(Dand.textNode(desc));
+					
+					temp = stage;
+				}
+				
+				
+				i = {
+					_src: src
+					, _width: width
+					, _height: height
+					, _title: title
+					, _desc: desc
+					, _preview: preview
+					, _extAPI: extAPI || "off"
+					, _stage: temp
+				};
+				
+				// Set context menu
+				createContext(i, j, handler);
+			}
+		}
+		;
+		
+		if (override)
+		{
+			visualizer(true, override);
+			override = false;
+		}
+		else
+		{
+			return handler;
+		}
+		return true;
+	};
+	
+	var compile = function (stage)
+	{
+		// [swf width="" height="" title="" desc="" preview="" useExtAPI="" ]src[/swf];
+		var element = IDOMElement(stage)
+		, props = ["width", "height", "title", "desc", "preview", "useExtAPI"];
+		
+		return "[swf"
+			+ compileProp( element, props )
+			+ "]"
+			+ element.getDAttribute("value")
+			+ "[/swf]"
+			;
+	};
+
+	__static_method( swf, "compile", compile );
+
+	ns[ NS_EXPORT ]( EX_CLASS, "Swf", swf );
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/Video.js

@@ -0,0 +1,137 @@
+(function ()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	/** @type {System.utils.IKey} */
+	var IKey                              = __import( "System.utils.IKey" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                           = __import( "System.utils.DataKey" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                       = __import( "Dandelion.IDOMElement" );
+	/** @type {Dandelion} */
+	var Dand                              = __import( "Dandelion" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                        = __import( "Components.MessageBox" );
+
+	var video = function (insertSnippet, snippetWrap, createContext, override)
+	{
+		var temp, i, j
+		
+		, getVimeoThumbnail = function (vtag)
+		{
+			getData("http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/" + vtag.getAttribute("data-value"), setThumbnail.bind(vtag), noThumb.bind(vtag));
+		}
+	
+		, noThumb = function ()
+		{
+			
+		}
+		
+		, setThumbnail = function (str)
+		{
+			this.style.background = "black url(" + JSON.parse(str)["thumbnail_url"] + ") center center no-repeat";
+			
+		}
+		
+		, handler = function ()
+		{
+			// Input fields
+			var input_url = Dand.wrap('input', null, "v_snippet_input_single", null, new IKey("type", "text"));
+			
+			// Popup MessageBox
+			new MessageBox("Insert video snippet"
+				, Dand.wrape([ Dand.wrapc("v_instruction flsf", "Paste a vimeo/Youtube link below:"), input_url ])
+				, "OK", "Cancel", visualizer.bind(input_url)
+			).show();
+		}
+	
+		, visualizer = function (submitted, override)
+		{
+			var t, v;
+			
+			if (override)
+			{
+				v = override.value;
+				i = override.type;
+			}
+			else
+			{
+				t = this.value;
+				// Match youtube links
+				v = t.match(/\/\/(www\.)?youtube\.com\/watch\?.*?v=([^\&\?\/\#]+)/) || t.match(/\/\/(www\.)?youtube\.com\/embed\/([^\&\?\/]+)/)
+						|| t.match(/\/\/(www\.)?youtube\.com\/v\/([^\&\?\/]+)/) || t.match(/\/\/(www\.)?youtu\.be\/([^\&\?\/]+)/);
+				if (v)
+				{
+					i = "youtube";
+					v = v[2];
+				}
+				else
+				{
+					// match vimeo links
+					v = t.match(/\/\/(www\.)?vimeo.com\/(\d+)($|\/)/);
+					if (v)
+					{
+						i = "vimeo";
+						v = v[2];
+					}
+					else
+					{
+						// None matched, do nothing
+						return;
+					}
+				}
+			}
+			
+			if (submitted)
+			{
+				
+				// Visualize component
+				temp =  Dand.wrapc('v_box', Dand.wrapc('v_description', "Video(url): " + t)
+				, [
+					new DataKey("value", v)
+					, new DataKey("type", i)
+					, new IKey("style"
+						, "width: 640px; height: 390px;"
+						+ ( (i[0] == "v") ? "" : ("background: black url(http://img.youtube.com/vi/" + v + "/hqdefault.jpg) no-repeat center center;") )
+					)
+				  ]
+				);
+				
+				if (i[0] == "v")
+				{
+					getVimeoThumbnail(temp);
+				}
+				
+				insertSnippet(j = snippetWrap("Video", temp), Boolean(override));
+				
+				// Set context menu
+				createContext(null, j);
+			}
+		}
+		;
+		
+		if (override)
+		{
+			visualizer(true, override);
+			override = false;
+		}
+		else
+		{
+			return handler;
+		}
+		return true;
+	};
+	
+	var compile = function (stage)
+	{
+		// [video type=\"youtube\"]" + v[2] + "[/video]
+		var element = IDOMElement(stage)
+		, type = element.getDAttribute("type");
+		
+		return "[video type=\"" + type + "\"]" + element.getDAttribute("value") + "[/video]";
+	};
+
+	__static_method( video, "compile", compile );
+
+	ns[ NS_EXPORT ]( EX_CLASS, "Video", video );
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/_this.js

@@ -0,0 +1,25 @@
+(function()
+{
+	var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
+
+	var escapeStr = function ( str )
+	{
+		return str.replace( /\[/g, "[" ).replace( /\]/g, "]" );
+	};
+
+	var compileProp = function ( _iDOM, keys )
+	{
+		var i, j = "", k;
+		for (i in keys)
+		{
+			if( ( k = _iDOM.getDAttribute(keys[i]) ) )
+			{
+				j += " " + keys[i] + "=\"" + k + "\"";
+			}
+		}
+		return j;
+	};
+
+	ns[ NS_EXPORT ]( EX_FUNC, "escapeStr", escapeStr );
+	ns[ NS_EXPORT ]( EX_FUNC, "compileProp", compileProp );
+})();

botanjs/src/Astro/Blog/AstroEdit/Visualizer/_this.css

@@ -0,0 +1,101 @@
+.v_snippet_input {
+	width: 600px;
+	height: 350px;
+}
+
+.v_boundary {
+	cursor: default;
+	padding: 0.2em;
+}
+
+.v_box {
+	min-height: 3em;
+	overflow: hidden;
+	position: relative;
+}
+
+.v_caption, .v_description {
+	background: rgba(0, 0, 0, 0.8);
+	padding: 0.2em;
+	color: white;
+	
+	width: 100%;
+	
+	font-family: sans-serif;
+	font-size: 1em;
+}
+
+.v_caption {
+	position: relative;
+}
+
+.v_description {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+}
+
+.v_caption_desc {
+	font-size: 60%;
+}
+
+.v_boundary:hover {
+	background-color: rgba(0, 0, 0, 0.2);
+}
+
+.v_snippet_input_single {
+	width: 600px;
+	margin-bottom: 0.5em;
+}
+
+.v_instruction {
+	padding: 0.2em 0;
+}
+
+.v_trimmer {
+	overflow: hidden;
+}
+
+.v_select {
+	width: 100%;
+	background-color: #222;
+	font-size: 1em;
+	color: white;
+	
+	background-image: none;
+	border: none;
+	box-shadow: none;
+	-webkit-appearance: none;
+}
+
+div[data-type="token"] {
+	background-color: #111;
+	color: #EEE;
+
+	padding: 0.25em 0.5em;
+	margin-right: 100%;
+
+	min-width: 8em;
+
+	display: inline-block;
+
+	position: relative;
+}
+
+div[data-type="token"]:hover {
+	background-color: #444;
+}
+
+div[data-type="token"]:after {
+	content: "Loading";
+	position: absolute;
+
+	color: rgba( 255, 255, 255, 0.2 );
+
+	right: 0;
+	bottom: 0;
+}
+
+div[data-type="token"]:hover:after {
+	color: rgba( 255, 255, 255, 0.5 );
+}

botanjs/src/Astro/Blog/AstroEdit/Visualizer/_this.js

@@ -0,0 +1,496 @@
+(function(){
+	var ns = __namespace( "Astro.Blog.AstroEdit" );
+
+	/** @type {Dandelion} */
+	var Dand                                    = __import( "Dandelion" );
+	/** @type {Dandelion.IDOMElement} */
+	var IDOMElement                             = __import( "Dandelion.IDOMElement" );
+	/** @type {System.Debug} */
+	var debug                                   = __import( "System.Debug" );
+	/** @type {System.utils} */
+	var utils                                   = __import( "System.utils" );
+	/** @type {System.utils.Perf} */
+	var Perf                                    = __import( "System.utils.Perf" );
+	/** @type {System.utils.DataKey} */
+	var DataKey                                 = __import( "System.utils.DataKey" );
+	/** @type {System.utils.EventKey} */
+	var EventKey                                = __import( "System.utils.EventKey" );
+	/** @type {System.utils.IKey} */
+	var IKey                                    = __import( "System.utils.IKey" );
+	/** @type {System.Net.ClassLoader} */
+	var Loader                                  = __import( "System.Net.ClassLoader" );
+	/** @type {Components.MessageBox} */
+	var MessageBox                              = __import( "Components.MessageBox" );
+	/** @type {Components.Mouse.ContextMenu} */
+	var ContextMenu                             = __import( "Components.Mouse.ContextMenu" );
+	/** @type {Astro.Blog.Config} */
+	var Config                                  = __import( "Astro.Blog.Config" );
+
+	var snippetList = IKey.quickDef(
+		  "Code"       , "background: white; color: cornflowerblue;"
+		, "Image"      , "background: #ff0084;"
+		, "Sound"      , "background: YellowGreen;"
+		, "Video"      , "background: Crimson;"
+		, "Spoiler"    , "background: cornflowerblue;"
+		, "Swf"        , "background: #333;"
+		, "Link"       , "background: blue;"
+		, "AcquireLib" , "background: black;"
+		, "Html"       , "background: coral;"
+		, "SiteFile"   , "background: royalblue;"
+	);
+
+	var snippetNs = "Astro.Blog.AstroEdit.Visualizer.Snippet.";
+	//// Document Visualizer visualize snippets, used in AstroEdit and comments
+	var Visualizer = function ( e_document, snippetControls, service_uri )
+	{
+		var Article = ns[ NS_INVOKE ]( "Article" );
+		var loadedModule = {};
+
+		//// Constants
+		var article;
+		// "[^]" does not work in IE
+		var stackMatch = /\[([a-z][0-9a-z]*?)([\s\S]*?)\]([\s\S]*?)\[\/\1\]/ig;
+		var typeMatch = /([a-z][0-9a-z]*)\=\"([^"]+)\"/ig;
+
+		var snippetTokenQueue = {};
+		
+		if ( e_document instanceof Article )
+		{
+			article = e_document;
+			// Allow Html snippet
+		}
+		else if ( e_document instanceof CeDocument )
+		{
+			article = e_document;
+		}
+		else return;
+
+		////// Variables
+		var contentDiv = Dand.wrap()
+		var selRange;
+		var snippetExists = false;
+		var lastOffset = 0;
+		var raw;
+
+		/////  private methods
+		var snippetWrap = function( snippetType, element, editable, _with )
+		{
+			var snippet = Dand.wrap(
+				_with || "div"
+				, Perf.uuid
+				, "comp v_boundary"
+				, element
+				, [
+					new IKey( "contentEditable", editable ? "true" : "false" )
+					, new DataKey( "type", snippetType )
+				]
+			);
+
+			return snippet;
+		};
+
+		var appendLinebreak = function ()
+		{
+			this.parentNode.insertBefore(Dand.wrap("br"), this.nextSibling);
+		}
+
+		var insertLinebreak = function ()
+		{
+			this.parentNode.insertBefore(Dand.wrap("br"), this);
+		};
+
+		var snippetDelete = function ()
+		{
+			this.parentNode.removeChild(this);
+		};
+
+		var snippetBBCode = function()
+		{
+			var snippet = IDOMElement( this );
+			var type = snippet.getDAttribute( "type" ).toLowerCase();
+			/** @type {Astro.Blog.AstroEdit.Visualizer.Snippet.Model} */
+			var module = loadedModule[ type ];
+			var title = "An error occurred";
+			var message = "No such module";
+
+			if( module )
+			{
+				title = "BBCode for Snippet: " + type;
+				message = module.compile( this.firstChild );
+			}
+
+			new MessageBox( title, Dand.wrapne( "pre", message ) ).show();
+		};
+
+		var createSnippetMenu = function ( snippetProp, snippet, editHandler, snippetActions )
+		{
+			var contextItems = [
+				editHandler && new EventKey( "Edit", editHandler.bind( snippetProp ) )
+				, new EventKey( "Insert a linebreak", insertLinebreak.bind( snippet ) )
+				, new EventKey( "Append a linebreak", appendLinebreak.bind( snippet ) )
+				, new EventKey( "Delete", snippetDelete.bind( snippet ) )
+				, new EventKey( "View BBCode", snippetBBCode.bind( snippet ) )
+			];
+
+			e_document.updateContent();
+			
+			if ( snippetActions instanceof Array )
+			{
+				contextItems = snippetActions.concat( contextItems );
+			}
+			
+			return new ContextMenu( snippet, contextItems, "RMB" );
+		};
+
+		var _savSelection = function ()
+		{
+			contentDiv.focus();
+			if ( window.getSelection )
+			{
+				var sel = window.getSelection();
+				if ( sel.getRangeAt && sel.rangeCount )
+				{
+					selRange = sel.getRangeAt(0);
+				}
+			}
+			else if ( document.selection && document.selection.createRange )
+			{
+				selRange = document.selection.createRange();
+			}
+			else
+			{
+				selRange = null;
+			}
+		};
+
+		var _resSelection = function ()
+		{
+			if ( selRange )
+			{
+				if ( window.getSelection )
+				{
+					var sel = window.getSelection();
+					sel.removeAllRanges();
+					sel.addRange( selRange );
+				}
+				else if ( document.selection && selRange.select )
+				{
+					selRange.select();
+				}
+			}
+		};
+		
+		var lastLine = Dand.wrap( "br", "v_linebreak" );
+		
+		var ensureLastLinebreak = function ()
+		{
+			if( !Dand.id( "v_linebreak" ) )
+			{
+				insertSnippet( lastLine, true );
+			}
+			else
+			{
+				insertSnippet( contentDiv.removeChild( lastLine ), true );
+			}
+		};
+
+		var insertAtCaret = function( element )
+		{
+			var sel, range;
+			
+			sel = window.getSelection();
+			if ( sel.getRangeAt && sel.rangeCount )
+			{
+				range = sel.getRangeAt(0);
+				range.deleteContents();
+				range.insertNode( element );
+				range.setStartAfter( element );
+				range.setEndAfter( element );
+				range.collapse( false );
+				sel.removeAllRanges();
+				sel.addRange( range );
+			}
+			
+			e_document.updateContent();
+			ensureLastLinebreak();
+		};
+
+		var insertSnippet = function( element, override )
+		{
+			if ( override )
+			{
+				contentDiv.appendChild( element );
+				return;
+			}
+			
+			contentDiv.focus();
+			_resSelection();
+			insertAtCaret( element );
+		};
+
+		var replaceToken = function( element )
+		{
+			contentDiv.insertBefore( element, this.token );
+			contentDiv.removeChild( this.token );
+		};
+
+		var parseKeys = function ( match, name, value )
+		{
+			this[ name ] = value;
+		};
+
+		var snippetQueue = function( type, alias )
+		{
+			var q = snippetTokenQueue[ type ] || [];
+
+			if( alias )
+			{
+				if( !( alias instanceof Array ) ) alias = [ alias ];
+
+				for( var i in alias )
+				{
+					q = snippetTokenQueue[ alias[i] ] || [];
+					if( q.length ) return q;
+				}
+			}
+
+			return ( snippetTokenQueue[ type ] = q );
+		};
+		
+		var parseSnippet = function( match, type, properties, _value, offset )
+		{
+			var temp, i, j;
+			// Texts goes first
+			if ( lastOffset != offset )
+			{
+				// innerText does not work in firefox:(
+				temp = Dand.wrape( raw.substr( lastOffset, offset - lastOffset ) );
+				// innerHTML will escape html entities, now replace linebreaks to br
+				temp.innerHTML = temp.innerHTML.replace(/[\r\n]/g, "<br>");
+				IDOMElement( contentDiv ).lootChildren( temp );
+			}
+
+			lastOffset = offset + match.length;
+
+			// Snippet Args
+			temp = { value: _value };
+			// to ekeys
+			properties.replace( typeMatch, parseKeys.bind( temp ) );
+
+			// Now deal with snippet
+			/** @type {Astro.Blog.AstroEdit.Visualizer.Snippet.Model} */
+			var _module = loadedModule[ type ];
+			if ( _module )
+			{
+				// Visualize snippet
+				new ( _module )( insertSnippet, snippetWrap, createSnippetMenu, temp );
+			}
+			else
+			{
+				// no such module, or module is not loaded yet
+				debug.Info( "[Visualizer] Queueing: " + type );
+				var token = snippetWrap( "token", type, false );
+				token.setAttribute( "class", token.getAttribute( "class" ) + " flsf" );
+				snippetQueue( type ).push([ token, temp ]);
+
+				insertSnippet( token, true );
+			}
+		};
+
+		var linebreakNodes = ["P", "DIV"];
+		var linebreakNode = function( name )
+		{
+			if( -1 < linebreakNodes.indexOf( name.toUpperCase() )  ) return "\n";
+			return "";
+		};
+
+		var ensureGoodness = function ()
+		{
+			_savSelection();
+			ensureLastLinebreak();
+		};
+		
+		var stepContent = function ( element, level )
+		{
+			var j , snippetType
+			, elements = element.childNodes
+			, output = "";
+
+			for (var i = 0, l = elements.length; i < l; i ++)
+			{
+				j = elements[i];
+				
+				// do nothing on lastline
+				if (j == lastLine) continue;
+				
+				if (j.nodeType == 1)
+				{
+					snippetType = IDOMElement( j ).getDAttribute( "type" );
+					if( snippetType && loadedModule[ snippetType = snippetType.toLowerCase() ] )
+					{
+						output += loadedModule[ snippetType ].compile( j.firstChild );
+					}
+					else if ( j.firstChild )
+					{
+						// Text
+						output += linebreakNode( j.nodeName ) + stepContent(j, ++level);
+					}
+					else
+					{
+						// Handle special <div><br></div> => one line break
+						if(l == 1 && j.nodeName.toUpperCase() == "BR") continue;
+
+						// Line breaks
+						output += "\n";
+					}
+				}
+				// Text
+				else if (j.nodeType == 3)
+				{
+					output += j.nodeValue;
+				}
+			}
+			
+			return output;
+		};
+
+		///// Initializations
+		var snippetReady = function ( e )
+		{
+			// Initialize modules
+			var mod_name = e.substr( e.lastIndexOf(".") + 1, e.length ).toLowerCase()
+			/** @type {Astro.Blog.AstroEdit.Visualizer.Snippet.Model} */
+			var _module = __import( e );
+			var alias = _module.alias;
+
+			// Implement module if valid and available
+			if ( _module && _module.compile )
+			{
+				loadedModule[ mod_name ] = _module;
+				debug.Info( "[Visualizer] Module loaded: " + mod_name );
+				// Set alias
+				if ( alias )
+				{
+					alias = ( alias instanceof Array ) ? alias : [ alias ];
+
+					for ( var k in alias )
+					{
+						loadedModule[ alias[k] ] = _module;
+						debug.Info( "[Visualizer] Alias: " + mod_name + " => " + alias );
+					}
+				}
+
+				// Append module"s control
+				temp = Dand.wrapne(
+					"span"
+					, mod_name
+					, new IKey(
+						"style"
+						, utils.objSearch(
+							snippetList
+							/** @param {System.utils.IKey} a */
+							, function( a ) { return a.keyName.toLowerCase() == mod_name }
+							, "keyValue"
+						)
+					)
+				);
+
+				snippetControls.appendChild( temp );
+				snippetControls.appendChild( Dand.textNode( "\t" ) );
+				temp.onclick = new ( _module )( insertSnippet, snippetWrap, createSnippetMenu );
+
+				var queue = snippetQueue( mod_name, _module.alias );
+				for( var i in queue )
+				{
+					var token = queue[i];
+					new ( _module )( replaceToken.bind({ token: token[0] }), snippetWrap, createSnippetMenu, token[1] );
+					delete queue[i];
+				}
+			}
+			else
+			{
+				if ( _module )
+				{
+					delete loadedModule[ mod_name ];
+					debug.Info( "[Visualizer] Module discarded: invalid module \"" + mod_name + "\"" );
+				}
+				else
+				{
+					debug.Info( "[Visualizer] Module \"" + mod_name + "\" does not exists" );
+				}
+			}
+		};
+
+		this.setContentDiv = function( element )
+		{
+			contentDiv = element;
+			// listeners that return values cannot use addEventListener
+			contentDiv.onkeypress = function(e)
+			{
+				if (e.which == 13)
+				{
+					insertAtCaret( Dand.wrap( "br" ) );
+					_savSelection();
+					return false;
+				}
+				return true;
+			};
+			
+			temp = IDOMElement( contentDiv );
+			temp.addEventListener( "Input", ensureGoodness );
+			temp.addEventListener( "KeyUp", ensureGoodness );
+			temp.addEventListener( "Click", ensureGoodness );
+
+			contentDiv.focus();
+			ensureGoodness();
+
+			try {
+				document.execCommand( "insertBrOnReturn", false, "true" );
+			} catch(e) {
+				debug.Info( "Not firefox" );
+			}
+		};
+
+		this.saveRaw = function ()
+		{
+			return stepContent( contentDiv, 0 );
+		};
+
+		this.visualizeData = function ( data )
+		{
+			if ( !data ) return;
+			
+			lastOffset = 0;
+			// clear content
+			contentDiv.innerHTML = "";
+
+			( raw = data ).replace( stackMatch, parseSnippet );
+			if ( lastOffset != raw.length )
+			{
+				// innerText does not work in firefox:(
+				temp = Dand.wrape( raw.substr( lastOffset, raw.length - lastOffset ) );
+				// innerHTML will escape html entities, now replace linebreaks to br
+				temp.innerHTML = temp.innerHTML.replace( /[\r\n]/g, "<br>" );
+				IDOMElement( contentDiv ).lootChildren( temp );
+			}
+			temp = null;
+			raw = null;
+		};
+
+		this.saveSelection = _savSelection;
+		this.restoreSelection = _resSelection;
+
+		article.invoke(this);
+
+		var modules = [];
+		for( var i in snippetList )
+		{
+			modules[ modules.length ] = snippetNs + snippetList[i].keyName;
+		}
+
+		var ldr = new Loader( service_uri, "r" );
+		ldr.load( modules, snippetReady );
+	};
+
+	ns[ NS_EXPORT ]( EX_CLASS, "Visualizer", Visualizer );
+})();