tweaks to first use intro

Author: Coder daemon

coder-base/static/apps/coder/js/index.js

@@ -66,13 +66,30 @@ $(document).ready( function() {
     });
 
     if ( typeof getParams['firstuse'] !== 'undefined' ) {
-        buildIntroduction();
+        setTimeout( function(){
+            buildIntroduction();
+        }, 400 );
+    } else {
+        $('#introduction').css('display','none');
     }
 });
 
 
 var buildIntroduction = function() {
-    $('#introduction').fadeIn();
+    $('#introduction').css({
+        'display': 'none',
+        'visibility': 'visible'
+    }).fadeIn( 'slow', function() {
+        setTimeout( function() {
+            $('#myapps_tip').css({'visibility':'visible'}).hide().fadeIn();
+        }, 1000);
+        setTimeout( function() {
+            $('#newapp_tip').css({'visibility':'visible'}).hide().fadeIn();
+        }, 2000);
+        setTimeout( function() {
+            $('#settings_tip').css({'visibility':'visible'}).hide().fadeIn();
+        }, 3000);
+    });
     $('.gotit').click( function() {
         $('#introduction').fadeOut(function() {
             $(this).hide();

coder-base/views/apps/coder/index.html

@@ -120,7 +120,7 @@ <h1>Settings</h1>
     <div class="cancel">Cancel</div>
 </div>
 
-<div id="introduction" style="display:none">
+<div id="introduction" style="visibility:hidden">
 
     <div class="intromessage">
         <h1>Getting Started</h1>
@@ -129,9 +129,9 @@ <h1>Getting Started</h1>
             <div class="gotit">Got It</div>            
         </div>
     </div>
-    <img src="/static/apps/coder/media/myapps_tip.png" id="myapps_tip" />
-    <img src="/static/apps/coder/media/settings_tip.png" id="settings_tip"/>
-    <img src="/static/apps/coder/media/newapp_tip.png" id="newapp_tip"/>
+    <img src="/static/apps/coder/media/myapps_tip.png" id="myapps_tip" style="visibility:hidden"/>
+    <img src="/static/apps/coder/media/settings_tip.png" id="settings_tip" style="visibility:hidden"/>
+    <img src="/static/apps/coder/media/newapp_tip.png" id="newapp_tip" style="visibility:hidden"/>
 
 </div>