Contact form, brackground image and such

botanjs/src/Astro/Blog/Element/Header.css

@@ -54,10 +54,66 @@ header {
 	-webkit-box-shadow: inset 0 0 10px 0 black;
 	box-shadow: inset 0 0 10px 0 black;
 
-	color: white;
+    background-image: url(http://file.astropenguin.net/blog/layout-images/home.png);
-	background: lightslategray;
+    background-position: 50% 0;
 	position: absolute;
 	overflow: hidden;
+
+    text-align: center;
+}
+
+.begin-wrapper:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+
+    background-image: url(http://file.astropenguin.net/blog/layout-images/home.png);
+    background-position: 50% 0;
+    background-repeat: no-repeat;
+    opacity: 0.2;
+}
+
+.contact-wrapper {
+    text-align: center;
+    position: relative;
+}
+
+.contact-wrapper > * {
+    display: inline-block;
+    vertical-align: middle;
+    text-align: left;
+}
+
+.contact-block {
+    width: 40%;
+}
+
+.contact-form input, .contact-form textarea {
+    width: 100%;
+    text-align: left;
+}
+.contact-form > * {
+    margin-bottom: 0.5em;
+}
+
+.contact-form > input[type="submit"] {
+    width: auto;
+}
+
+.c-sep {
+    display: inline-block;
+    width: 1px;
+    margin: 0 2em;
+}
+.c-sep:after {
+    content: "";
+    position: absolute;
+    height: 100%;
+    border-left: 1px solid black;
+    top: 0;
 }
 
 .collapse_panel {

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

@@ -3,6 +3,8 @@
 
 	/** @type {System.Cycle} */
 	var Cycle                                         = __import( "System.Cycle" );
+	/** @type {System.Cycle.Trigger} */
+	var Trigger                                       = __import( "System.Cycle.Trigger" );
 	/** @type {System.utils.IKey} */
 	var IKey                                          = __import( "System.utils.IKey" );
 	/** @type {Dandelion} */
@@ -26,6 +28,9 @@
 	// __import( "Dandelion.CSSAnimations" ); CSS_RESERVATION
 	// __import( "Astro.Blog.Element.Layer" ); CSS_RESERVATION
 
+	/** @function {System.Net.getData} */
+	var getData = __import( "System.Net.getData" );
+
 	var main;
 	var header;
 	var main_h;
@@ -59,7 +64,6 @@
 
 		content_wrapper.appendChild( padder );
 
-
 		IDOMObject( window ).addEventListener( "Resize", responsify );
 
 		initTopButton();
@@ -84,7 +88,7 @@
 			= "purple";
 
 		contact = Dand.id( "menu_cont", true );
-		contact.addEventListener( "Click", expandContact );
+		contact.addEventListener( "Click", loadContactForm );
 
 		Dand.id( "menu", true ).foreach(
 			1, function( e )
@@ -98,6 +102,24 @@
 		);
 	};
 
+	var loadContactForm = function( e )
+	{
+		getData( "/ajax/get-snippet/ContactForm", function( data )
+		{
+			var data = JSON.parse( data );
+			var wrapper = IDOMElement( contact_page ).first( 1 );
+			if ( wrapper )
+			{
+				wrapper.innerHTML = data["mesg"];
+				Cycle.next( function()
+				{
+					expandContact( e );
+					wrapper.style.marginTop = .5 * ( 400 - wrapper.clientHeight ) + "px";
+				} );
+			}
+		} );
+	};
+
 	var navControl = function ()
 	{
 		// Page control
@@ -146,7 +168,7 @@
 	var expandContact = function ()
 	{
 		// disable click event on the button
-		contact.removeEventListener( "Click", expandContact );
+		contact.removeEventListener( "Click", loadContactForm );
 		// enable click event for collapse
 		collapse_panel.onclick = doCollapse;
 
@@ -170,8 +192,12 @@
 	{
 		// disable click event for collapse
 		collapse_panel.onclick = null;
-		// enable click event on the button
+
-		contact.addEventListener( "Click", expandContact );
+		Trigger.height( contact_page, 0, function()
+		{
+			// enable click event on the button
+			contact.addEventListener( "Click", loadContactForm );
+		} );
 		
 		// Reverting states
 		contact_page.style.height