Updated code

extension.xml

@@ -6,11 +6,11 @@
   </ModulePrefs>
   <Content type="html">
     <![CDATA[
-      <link rel="stylesheet" href="//%DOMAIN%/stylesheets/reset.css" type="text/css" media="print">
-      <link rel="stylesheet" href="//%DOMAIN%/stylesheets/base.css" type="text/css" media="print">
+      <link rel="stylesheet" href="//tolxdorff.appspot.com/a/hangout-base-app/stylesheets/reset.css" type="text/css" media="screen">
+      <link rel="stylesheet" href="//tolxdorff.appspot.com/a/hangout-base-app/stylesheets/base.css" type="text/css" media="screen">
       <script src="//talkgadget.google.com/hangouts/api/hangout.js?v=1.0"></script>
-      <script src="//%DOMAIN%/javascripts/application.js"></script>
-      <script src="//%DOMAIN%/javascripts/sample.js"></script>
+      <script src="//tolxdorff.appspot.com/a/hangout-base-app/javascripts/application.js"></script>
+      <script src="//tolxdorff.appspot.com/a/hangout-base-app/javascripts/sample.js"></script>
     ]]>
   </Content>
 </Module>

javascripts/application.js

@@ -18,15 +18,6 @@
 */
 (function(exports){
 
-	/*
-	 * Application type enumeration
-	 * @global
-	*/
-	var ApplicationTypes = {
-		EXTENSION : 0,
-		APPLICATION : 1
-	};
-
 	/*
 	 * @eventBound
 	 * boolean to assure events are not bound more then once
@@ -72,18 +63,11 @@
 	*/
 	function HangoutApplication()
 	{
+		this._appContainer = null;
 	};
 
 	HangoutApplication.prototype._construct = function(context)
 	{
-		/**
-		 * Application type
-		 * Use one of the following:
-		 * * ApplicationTypes.APPLICATION
-		 * * ApplicationTypes.EXTENSION
-		*/
-		this.applicationtype = ApplicationTypes.APPLICATION;
-
 		/*
 		 * Initialize event bindint
 		*/
@@ -117,10 +101,22 @@
 			*/
 			this.bindEventMap(gapi, eventMap);
 
+			/**
+			 * Create Application Container
+			*/
+			this._appContainer = document.createElement("div");
+			this._appContainer.setAttribute("id", "application");
+			document.body.appendChild(this._appContainer);
+
 			/*
 			 * execute the main initilize method
 			*/
-			this.initialize();
+			try{
+				this.initialize();
+			}
+			catch(e){
+				console.log("Caught Exception: ", e);
+			}
 		}
 	};
 
@@ -146,54 +142,64 @@
 	{
 	}
 
+	HangoutApplication.prototype.getAppContainer = function()
+	{
+		return this._appContainer;
+	}
+
+	HangoutApplication.prototype.addAppHeader = function(title, icon)
+	{
+
+	}
+
 	HangoutApplication.prototype.getEnabledParticipants = function()
 	{
-		return gap.hangout.getEnabledParticipants();
+		return gapi.hangout.getEnabledParticipants();
 	}
 
 	HangoutApplication.prototype.getHangoutUrl = function()
 	{
-		return gap.hangout.getHangoutUrl();
+		return gapi.hangout.getHangoutUrl();
 	}
 
 	HangoutApplication.prototype.getHangoutId = function()
 	{
-		return gap.hangout.getHangoutId();
+		return gapi.hangout.getHangoutId();
 	}
 
 	HangoutApplication.prototype.getLocale = function()
 	{
-		return gap.hangout.getLocale();
+		return gapi.hangout.getLocale();
 	}
 
 	HangoutApplication.prototype.getParticipantById = function(id)
 	{
-		return gap.hangout.getParticipantById(id);
+		return gapi.hangout.getParticipantById(id);
 	}
 
 	HangoutApplication.prototype.getParticipantId = function()
 	{
-		return gap.hangout.getParticipantId();
+		return gapi.hangout.getParticipantId();
 	}
 
 	HangoutApplication.prototype.getParticipants = function()
 	{
-		return gap.hangout.getParticipantById();
+		return gapi.hangout.getParticipants();
 	}
 
 	HangoutApplication.prototype.hideApp = function()
 	{
-		return gap.hangout.hideApp();
+		return gapi.hangout.hideApp();
 	}
 
 	HangoutApplication.prototype.isApiReady = function()
 	{
-		return gap.hangout.isApiReady();
+		return gapi.hangout.isApiReady();
 	}
 
 	HangoutApplication.prototype.isAppVisible = function()
 	{
-		return gap.hangout.isApiReady();
+		return gapi.hangout.isApiReady();
 	}
 
 	/**

javascripts/sample.js

@@ -29,28 +29,35 @@
 	//inherit
 	Application.prototype = new global["HangoutApplication"]();
 
+	Application.prototype.setHeader = function(title, icon)
+	{
+		if(!document.getElementById("header"))
+		{
+			var header = document.createElement("div");
+			var titlec = document.createElement("span");
+			header.setAttribute("id", "header");
+			if(icon){
+				var header_icon = document.createElement("img");
+				header_icon.setAttribute("id", "header_icon");
+				header_icon.setAttribute("src", icon);
+				header_icon.setAttribute("width", "16");
+				header_icon.setAttribute("height", "16");
+				header.appendChild(header_icon);
+			}
+			titlec.setAttribute("id", "title");
+			header.appendChild(titlec);
+			this.getAppContainer().appendChild(header);
+		}
+		document.getElementById("title").innerHTML = title;
+	}
+
 	/*
 	 * Initialize
 	 * Fired by parent context
 	*/
 	Application.prototype.initialize = function()
 	{
-		/*
-		 * Test
-		*/
-		try{
-			console.log("this.getEnabledParticipants()", this.getEnabledParticipants());
-			console.log("this.getHangoutUrl()", this.getHangoutUrl());
-			console.log("this.getHangoutId()", this.getHangoutId());
-			console.log("this.getLocale()", this.getLocale());
-			console.log("this.getParticipantId()", this.getParticipantId());
-			console.log("this.getParticipants()", this.getParticipants());
-			console.log("this.isApiReady()", this.isApiReady());
-			console.log("this.isAppVisible()", this.isAppVisible());
-		}catch(e)
-		{
-			console.log(e);
-		}
+		this.addAppHeader("Sample Application", "//tolxdorff.appspot.com/a/lowerthird/i/16x16_logo.png");
 	};
 
 	Application.prototype.onMicrophoneMute = function(event)

stylesheets/base.css

@@ -0,0 +1,32 @@
+body
+{
+    color: #222;
+    font: normal 13px arial,sans-serif;
+    line-height: 18px;
+}
+
+#application{
+    background: white;
+    border: 0px solid #D9D9D9;
+    width: 100%;
+}
+
+#header{
+    background: #F3F3F3;
+    font-size: 11px;
+    line-height: 24px;
+    font-weight: bold;
+    border-bottom: 1px solid #D9D9D9;
+    padding: 0 10px;
+}
+
+#header span{
+
+}
+
+#header img{
+	position: relative;
+	top: 4px;
+	margin-right: 10px;
+}
+