From 047416beb500a741b8f4ac1afc12777cb7d80f5d Mon Sep 17 00:00:00 2001
From: Drew Neil <andrew.jr.neil@gmail.com>
Date: Sun, 22 May 2011 18:46:50 +0300
Subject: [PATCH] Set up image/info panels + toolbar in a card layout.

---
 public/app/views/InfoBar.js  | 37 ++++++++++++++++++++++++++++++++++++
 public/app/views/viewport.js | 10 +++++-----
 public/index.html            |  1 +
 3 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 public/app/views/InfoBar.js

diff --git a/public/app/views/InfoBar.js b/public/app/views/InfoBar.js
new file mode 100644
index 0000000..acebc28
--- /dev/null
+++ b/public/app/views/InfoBar.js
@@ -0,0 +1,37 @@
+App.views.InfoBar = Ext.extend(Ext.Panel, {
+    initComponent: function(){
+        var infoBarPanel = this;
+
+        Ext.apply(this, {
+
+            layout: 'card',
+
+			dockedItems: [
+				{
+					xtype: 'toolbar',
+					title: this.title
+				}
+			],
+            items: [
+                {
+                    cls: 'canvas ' + this.slug,
+                },
+                {
+					tpl: [
+						"<h2>{title}</h2>",
+						"<p>by {artist}</p>",
+						"<dl>",
+						"  <dt>medium:</dt><dd>{medium}</dd>",
+						"  <dt>dimensions:</dt><dd>{dimensions}</dd>",
+						"</dl>"
+					],
+					show: function() { this.update(infoBarPanel); }
+                }
+            ]
+        });
+
+        App.views.HtmlPage.superclass.initComponent.call(this);
+    }
+});
+
+Ext.reg('infobar', App.views.InfoBar);
diff --git a/public/app/views/viewport.js b/public/app/views/viewport.js
index cdc64e7..406be2d 100644
--- a/public/app/views/viewport.js
+++ b/public/app/views/viewport.js
@@ -7,7 +7,7 @@ App.views.Viewport = Ext.extend(Ext.Carousel, {
             defaults: { styleHtmlContent: true },
             items: [
                 {
-                    xtype: 'infoswipe',
+                    xtype: 'infobar',
                     slug: 'asteroid',
                     title: 'Untitled asteroid',
                     artist: 'Dale Adcock',
@@ -16,7 +16,7 @@ App.views.Viewport = Ext.extend(Ext.Carousel, {
                 },
 
                 {
-                    xtype: 'infoswipe',
+                    xtype: 'infobar',
                     slug: 'template',
                     title: 'Template',
                     artist: 'Dale Adcock',
@@ -25,7 +25,7 @@ App.views.Viewport = Ext.extend(Ext.Carousel, {
                 },
 
                 {
-                    xtype: 'infoswipe',
+                    xtype: 'infobar',
                     slug: 'standing',
                     title: 'Standing',
                     artist: 'Dale Adcock',
@@ -34,7 +34,7 @@ App.views.Viewport = Ext.extend(Ext.Carousel, {
                 },
 
                 {
-                    xtype: 'infoswipe',
+                    xtype: 'infobar',
                     slug: 'sitting',
                     title: 'Sitting',
                     artist: 'Dale Adcock',
@@ -43,7 +43,7 @@ App.views.Viewport = Ext.extend(Ext.Carousel, {
                 },
 
                 {
-                    xtype: 'infoswipe',
+                    xtype: 'infobar',
                     slug: 'erect',
                     title: 'Erect',
                     artist: 'Dale Adcock',
diff --git a/public/index.html b/public/index.html
index 5459bdb..1589edc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,6 +11,7 @@
   <script src="app/views/HtmlPage.js" type="text/javascript"></script>
   <script src="app/views/InfoPanel.js" type="text/javascript"></script>
   <script src="app/views/InfoSwipe.js" type="text/javascript"></script>
+  <script src="app/views/InfoBar.js" type="text/javascript"></script>
   <script src="app/views/viewport.js" type="text/javascript"></script>
 
 </head>