mft3k

commit 2848976807e847679b86bec7ee5df5676bf7f9ff
parent 11f896aff73b09e14cfffdbe5ba432bf1e4702c5
Author: Ryan Wolf <rwolf@borderstylo.com>
Date:   Mon, 28 Jun 2010 14:46:10 -0700

mitchell's speech bubbles

Diffstat:
M
chrome/content/binding.xml
 | 
68
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
M
chrome/skin/stylesheets/stylesheet.css
 | 
28
++++++++++++++++++++++++++++

2 files changed, 95 insertions(+), 1 deletion(-)
diff --git a/chrome/content/binding.xml b/chrome/content/binding.xml
@@ -2,6 +2,10 @@
 <xbl:bindings xmlns:xbl="http://www.mozilla.org/xbl"
     xmlns="http://www.w3.org/1999/xhtml">
   <xbl:binding id="seats" inheritstyle="false">
+<?xml version="1.0"?>
+<xbl:bindings xmlns:xbl="http://www.mozilla.org/xbl"
+    xmlns="http://www.w3.org/1999/xhtml">
+  <xbl:binding id="seats" inheritstyle="false">
     <xbl:resources>
       <xbl:stylesheet src="chrome://mft3k/skin/stylesheets/stylesheet.css" />
     </xbl:resources>
@@ -13,9 +17,71 @@
         </div>
         <div id="seats">
           <div id="empty" />
-          <div id="occupied" usemap="#hecklers" />
+          <div id="occupied" onclick="javascript:heckle_site();" />
         </div>
       </body>
     </xbl:content>
+    <xbl:implementation>
+      <xbl:constructor><![CDATA[
+        /*
+          This constructor adds the speech bubbles, it has nothing directly to
+          do with the stack hack
+        */
+        var tom = 215 ;
+        var joel = 145 ;
+        var crow = 80 ;
+        hecklers = {
+          text: [
+            [ crow, "They must've spent tens of dollars on this." ],
+            [ joel, "I think the prop department juuust ran out of money." ],
+            [ tom, "I bet this was made in Canada." ],
+            [ joel, "I'll bet this site uses -moz-bindings" ],
+            [ joel, "Yeah." ],
+            [ crow, "I know I'll never be quite the same." ],
+            [ joel, "This XBL is history." ],
+            [ crow, "We're history." ],
+            [ crow, "Hey! Is this From Here to Eternity?" ],
+            [ tom, "No, it just seems like an eternity." ],
+            [ tom, "It is sort of hypnotic, isn't it?" ],
+            [ crow, "Hip? Not. Ick!" ]
+          ],
+          bubble: null,
+          fin: null,
+          timeout: null
+        } ;
+        hecklers.index = Math.floor(Math.random() * hecklers.text.length),
+
+        heckle_site = function (heckler_node) {
+          var doc = heckler_node.ownerDocument ;
+          var text = hecklers.text[hecklers.index] ;
+          var remove = function () {
+            if (hecklers.bubble) {
+              heckler_node.removeChild(hecklers.bubble) ;
+              heckler_node.removeChild(hecklers.fin) ;
+              hecklers.bubble = null ;
+              hecklers.fin = null ;
+            }
+          } ;
+
+          hecklers.index = (hecklers.index + 1) % hecklers.text.length ;
+          remove() ;
+
+          hecklers.bubble = doc.createElement('div') ;
+          hecklers.fin = doc.createElement('div') ;
+          hecklers.bubble.id = "speechbubble" ;
+          hecklers.bubble.innerHTML = text[1] ;
+          hecklers.bubble.style.right = text[0] + "px" ;
+          hecklers.fin.id = "speechbubblefin" ;
+          hecklers.fin.style.right = (text[0] + 10) + "px" ;
+          heckler_node.appendChild(hecklers.bubble) ;
+          heckler_node.appendChild(hecklers.fin) ;
+          if (hecklers.timeout) {
+            window.clearTimeout(hecklers.timeout) ;
+            hecklers.timeout = null ;
+          }
+          hecklers.timeout = window.setTimeout(remove, 10000) ;
+        } ;
+      ]]></xbl:constructor>
+    </xbl:implementation>
   </xbl:binding>
 </xbl:bindings>
diff --git a/chrome/skin/stylesheets/stylesheet.css b/chrome/skin/stylesheets/stylesheet.css
@@ -36,3 +36,31 @@
   height: 90px;
   background: url("chrome://mft3k/skin/images/occupied.png");
 }
+
+/* speech bubbles for extra fun */
+#speechbubble {
+  position: absolute ;
+  bottom: 90px ;
+  right: 50px ;
+  width: 100px ;
+  background-color: white ;
+  border: 2px solid black ;
+  -moz-border-radius: 7px ;
+  padding: 2px ;
+  font-size: x-small ;
+  overflow: hidden ;
+  vertical-align: middle ;
+  text-align: center ;
+}
+
+#speechbubblefin {
+  position: absolute ;
+  bottom: 78px ;
+  right: -40px ;
+  width: 10px ;
+  height: 10px ;
+  background-color: white ;
+  border: 2px solid black ;
+  border-top: 2px solid white ;
+  -moz-border-radius-bottomleft: 10px ;
+}