Loader prototypeorigin/loader

9 files changed, 745 insertions, 15 deletions

diff --git a/bundles/org.eclipse.orion.client.core/web/orion/pluginregistry.js b/bundles/org.eclipse.orion.client.core/web/orion/pluginregistry.js
index 2b12471..ef75c81 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/pluginregistry.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/pluginregistry.js
@@ -924,6 +924,8 @@ define(["orion/Deferred", "orion/EventTarget", 'orion/splash', "orion/URL-shim"]
      * @borrows orion.serviceregistry.EventTarget#removeEventListener as #removeEventListener
      */
     function PluginRegistry(serviceRegistry, configuration) {
+    	
+    	                	
         configuration = configuration || {};
         var _storage = configuration.storage || localStorage;
         if (!_storage.getItem) {
@@ -993,7 +995,7 @@ define(["orion/Deferred", "orion/EventTarget", 'orion/splash', "orion/URL-shim"]
                 if ((!localStorage.useWorkers || !isWorker) && url.match(workerRegex)) {
                     url = url.replace(workerRegex, pluginHtml);
                     isWorker = isSharedWorker = false;
-                }
+                }               
 
                 channel.url = url;
                 channel._updateTimeout();
@@ -1021,10 +1023,23 @@ define(["orion/Deferred", "orion/EventTarget", 'orion/splash', "orion/URL-shim"]
                     	_channelHandler(channel, evt);
                     });
                 } else {
-                    var iframe = document.createElement("iframe"); //$NON-NLS-0$
+                	
+                	
+                var pluginStep = new step( 2, 'Plugins', 1, 80, _plugins.length );
+                	
+                	pageLoader.addStep( pluginStep );
+                	pageLoader.nextStep();
+                	
+//                	splash.showInitializationProgress();
+//                	
+//                	splash.pluginCount( _plugins.length );
+                	
+                   	var iframe = document.createElement("iframe"); //$NON-NLS-0$
                     iframe.name = url + "_" + channel._startTime;
                     iframe.src = url;
                     iframe.onload = function() {
+                    	
+                    	pageLoader.increment();
                         splash.progress("Loading " + url);
                         log("handshake"); //$NON-NLS-0$
                         channel._handshake = true;
@@ -1046,13 +1061,15 @@ define(["orion/Deferred", "orion/EventTarget", 'orion/splash', "orion/URL-shim"]
                             }
                             iframe = null;
                         }
-                    };
+                    }; 
                 }
                 channel.connected = function() {
                     log("connected"); //$NON-NLS-0$
                     this._connected = true;
                     this._updateTimeout();
-                    splash.progress("Loaded " + url);
+//                    splash.progress("Loaded " + url);
+                    pageLoader.increment();
+                    
                 };
                 channel.loading = function() {
                     log("loading"); //$NON-NLS-0$
@@ -1463,4 +1480,4 @@ define(["orion/Deferred", "orion/EventTarget", 'orion/splash', "orion/URL-shim"]
         Plugin: Plugin,
         PluginRegistry: PluginRegistry
     };
-});
\ No newline at end of file
+});
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/splash.js b/bundles/org.eclipse.orion.client.core/web/orion/splash.js
index e33bde2..3d81968 100644
--- a/bundles/org.eclipse.orion.client.core/web/orion/splash.js
+++ b/bundles/org.eclipse.orion.client.core/web/orion/splash.js
@@ -13,23 +13,106 @@
 define([
 	'orion/webui/littlelib'
 ], function(lib) {
+	
+	var _pluginCount = 0;
+	
+	var PROGRESS_BAR_LENGTH = 200;
+	
+	/* Let's say that the first 40px are reserved for initialization */
+	
+	var PROGRESS_INIT_LENGTH = 40;
+	
+	var PROGRESS_INIT_TIMEOUT = 200;
+	
+	
+	var interval; 
+	
+	function startInitializationProgress(){
+		interval = setInterval(function(){ showInitializationProgress() }, PROGRESS_INIT_TIMEOUT);
+	}
+	
+	function showInitializationProgress(){
+		
+		var initialMessage = document.getElementById( 'initializationStep' );
+		initialMessage.innerHTML = "Initializing workspace";
+		
+		var intialVisual = document.getElementById( 'initializationVisual');
+		intialVisual.className = "loadingImage";
+		
+		/* Let's show some progress every 100 milliseconds */
+		
+		var splashProgress = lib.node("loadingProgressBar");
+		
+		if (splashProgress && ( splashProgress.value < PROGRESS_INIT_LENGTH ) ) {	
+			
+			var increment = ( PROGRESS_INIT_LENGTH - splashProgress.value )/2;
+			
+			splashProgress.value = splashProgress.value + increment;
+		}	
+	}
+	
+	
+	function completeInitializationProgress(){
+		
+		clearInterval(interval);		
+	}
+	
+	
+	function pluginCount( count ){
+		
+		_pluginCount = count;
+		console.log( 'plugin count: ' + count );
+		
+	}
 
 	function progress(msg) {
-		var splashProgress = lib.node("splashProgress");
+		
+		
+	/*	var initialMessage = document.getElementById( 'initializationStep' );
+		initialMessage.innerHTML = "Initialized workspace";
+		
+		var intialVisual = document.getElementById( 'initializationVisual');
+		intialVisual.className = "successImage";
+		
+		var pluginsMessage = document.getElementById( 'pluginsStep' );
+		pluginsMessage.innerHTML = "Loading Plugins";
+		
+		pluginsMessage.className = "verbal";
+		
+		var pluginVisual = document.getElementById( 'pluginVisual');
+		pluginVisual.className = "loadingImage";
+		
+		completeInitializationProgress();
+		
+		var splashProgress = lib.node("loadingProgressBar");
 		if (splashProgress) {
-			splashProgress.innerHTML = msg;
-		}
+			
+//			splashProgress.value = splashProgress.value + ( splashProgress.max - splashProgress.value ) / 2;
+			
+			var increment = ( PROGRESS_BAR_LENGTH - PROGRESS_INIT_LENGTH )/_pluginCount;
+			
+			splashProgress.value = splashProgress.value + increment;
+		console.log( msg ); */
+		
+		
+		
+//		}	
+
+		console.log( 'progress' );
+		
 	}
 
 	function takeDown() {
-		var splash = lib.node("splash");
-		if (splash) {
-			splash.classList.remove("splashShown");
-		}
+//		var splash = lib.node("splash");
+//		if (splash) {
+//			splash.classList.remove("splashShown");
+//		}
 	}
 
 	return {
+		showInitializationProgress: showInitializationProgress,
 		progress: progress,
+		pluginCount: pluginCount,
 		takeDown: takeDown
 	};
 });
diff --git a/bundles/org.eclipse.orion.client.ui/web/css/images.css b/bundles/org.eclipse.orion.client.ui/web/css/images.css
index beba945..56c2e25 100644
--- a/bundles/org.eclipse.orion.client.ui/web/css/images.css
+++ b/bundles/org.eclipse.orion.client.ui/web/css/images.css
@@ -12,6 +12,7 @@
    border: none;
 }
 
+
 .imageSprite {
    display: inline-block;
    vertical-align: middle;
diff --git a/bundles/org.eclipse.orion.client.ui/web/css/layout.css b/bundles/org.eclipse.orion.client.ui/web/css/layout.css
index 3be6032..6f42597 100644
--- a/bundles/org.eclipse.orion.client.ui/web/css/layout.css
+++ b/bundles/org.eclipse.orion.client.ui/web/css/layout.css
@@ -838,6 +838,7 @@ and (max-device-width : 1024px)  {
 }

 

 .userMenu {

+	

 }

 

 .splash {

@@ -854,6 +855,8 @@ and (max-device-width : 1024px)  {
 

 .splashShown {

 	display: flex;

+  	align-items: center;

+  	justify-content: center;

 }

 

 .splashProgress {

@@ -877,3 +880,105 @@ and (max-device-width : 1024px)  {
 	top:-6px;

 }

 

+

+

+.container{

+    display: flex;

+    align-items: center;

+    justify-content: center;

+    height:100%;

+    flex-direction: column;

+    font-family: sans-serif;

+    font-size: 14px;

+}

+

+

+

+.loader{

+    display: flex;

+    height:400px;

+    width:400px;

+

+    flex-direction: column;

+    align-items: center;

+}

+

+.about{

+    width:300px;

+    align-content: center;

+    justify-content: center;

+    max-width: 50%;

+    margin: 20px;

+    text-align: center;

+    padding: 10px;

+     color: #FFFFFF;

+     font-size:16px;

+  font-family: 'helvetica';

+  font-weight: bold;

+

+}

+

+.progressbar{

+    align-content: center;

+    width:200px;

+}

+

+.steps{

+   margin:20px; 

+    max-width: 200px;

+}

+

+.step{

+    display: flex;

+    flex-direction: row;

+    width:400px;

+    padding-top: 10px;

+    padding-bottom:10px;

+    margin-bottom: 20px;

+    height:24px;

+}

+

+.visual{

+    width:40px;

+    align-content: center;

+    justify-content: center;

+}

+

+.verbal{

+	margin-left:10px;

+	align-content: center;

+    justify-content: center;

+    color: #3BDEFF;

+    font-family: 'helvetica';

+    font-weight: bold;

+    margin-top: 3px; /* should not have to do this */

+}

+

+.verbalwaiting{

+	color:grey;

+}

+

+

+.loadingImage{

+	background: url(../images/loading_24.gif) no-repeat top left;

+   	vertical-align: middle;

+   	display: inline-block;

+   	border: none;	

+   	height:24px;

+   	width:24px;

+}

+

+.successImage{

+	background: url(../images/message_success_24.png) no-repeat top left;

+   	vertical-align: middle;

+   	display: inline-block;

+   	border: none;	

+   	height:24px;

+   	width:24px;

+}

+

+

+

+

+

+

diff --git a/bundles/org.eclipse.orion.client.ui/web/edit/edit.html b/bundles/org.eclipse.orion.client.ui/web/edit/edit.html
index b291492..163982f 100644
--- a/bundles/org.eclipse.orion.client.ui/web/edit/edit.html
+++ b/bundles/org.eclipse.orion.client.ui/web/edit/edit.html
@@ -7,6 +7,7 @@
 		<link rel="icon" href="../images/edit.png" type="image/png">
 		<title>Editor</title>
 		<link rel="stylesheet" type="text/css" href="edit.css" />
+		<script src="loader.js"></script>
 		<script src="../requirejs/require.js"></script>
 		<script type="text/javascript">
 			/*eslint-env browser, amd*/
@@ -20,6 +21,7 @@
 			});
 			require(["edit/edit"]);
 		</script>
+
 	</head>
 
 	<body id="orion-editor" spellcheck="false" class="orionPage">
@@ -50,15 +52,41 @@
 		</div>
 		<div id="contentassist" class="contentassist" role="listbox" tabindex="-1"></div>
 		<div id="splash" class="splash">
+			
 			<div class="splashProgress">
-				<span class="core-sprite-progress">
-				</span>
-				<span id="splashProgress" class="splashProgressLabel">Loading...</span>
+			<div id="container" class="container">
+	            <!-- div class="loader">
+	                <div class="about">Setting up workspace</div>
+	                <div class="progressbar">
+	                    <progress id="loadingProgressBar" max="120" value="0"></progress>
+	                </div>
+	                <div class="steps">
+	                    <div class="step">
+	                        <div class="visual"><div id="initializationVisual" class="loadingImage"></div></div>
+	                        <div class="verbal" id="initializationStep">Initializing Workspace</div>
+	                    </div>
+	                    <div class="step">
+	                        <div class="visual"><div id="pluginVisual"></div></div>
+	                        <div class="verbal verbalwaiting" id="pluginsStep">Load plug-ins</div>
+	                    </div>
+	                    <div class="step">
+	                        <div class="visual"><div id="personalizationVisual"></div></div>
+	                        <div class="verbal verbalwaiting" id="peronalizationStep">Personal settings </div>
+	                    </div>
+	                </div>
+	            </div>
+            </div -->
+			
 			</div>
 		</div>
 		<script type="text/javascript">
 			if (localStorage.showSplash) {
 				document.getElementById("splash").classList.add("splashShown");
+				
+				var pageLoader = new loader( 'container', 'Setting up workspace', 200 );
+				var initial = new step( 1, 'Workspace', 0, 40 );
+				pageLoader.addStep( initial );
+				pageLoader.nextStep();
 			}
 		</script>
 	</body>
diff --git a/bundles/org.eclipse.orion.client.ui/web/edit/loader.js b/bundles/org.eclipse.orion.client.ui/web/edit/loader.js
new file mode 100644
index 0000000..5695edd
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.ui/web/edit/loader.js
@@ -0,0 +1,248 @@
+/**
+ * Loader.
+ * @module loader
+ */
+
+/* sets up a loading panel with a title, progress bar and a set of steps */
+
+
+function step( order, description, type, barSpace, incrementCount ){
+ 
+    this.TYPE_FILLER = 0;
+    this.TYPE_DRIVEN = 1;
+    
+    this.type = type;
+    
+    this.incrementCount = incrementCount;
+    
+    this.order = order;
+    
+    /* reserve this much space on the progress bar 
+       for this step */
+    
+    this.barSpace = barSpace;
+    
+    this.description = description;
+    
+    this.WAITING = 0;
+    this.HAPPENING = 1;
+    this.COMPLETED = 2;
+    
+    this.state = this.WAITING;
+    
+    this.template = "";
+    this.domNode;
+    
+    this.increments = 0;
+}
+
+step.prototype.complete = function(){
+    this.domNode.className = 'successImage';  
+}
+
+step.prototype.spin = function(){
+    this.domNode.className = 'loadingImage';   
+}
+
+step.prototype.getStepNode = function(){
+    
+    var stepNode = document.createElement( 'div' );
+    stepNode.className = 'step';
+    stepNode.innerHTML =  '<div class="visual">' + 
+                                '<div id="step' + this.order + '"></div>' +
+                            '</div>' +
+                            '<div class="verbal">' + this.description + '</div>';
+    
+    this.domNode = stepNode.firstChild.firstChild;
+    
+    return stepNode;
+}
+
+step.prototype.transition = function(){
+    switch( this.state ){
+     
+        case this.WAITING:
+            this.state = this.HAPPENING;
+            /* add happening class */
+            break;
+            
+        case this.HAPPENING:
+            this.state = this.COMPLETED;
+            /* add completed class */
+            break;
+    }
+}
+
+function loader( domNode, subject, length ){
+
+    this.domNode = domNode;
+    
+    this.content;
+    
+    this.length = length;
+    
+    this.title = subject;
+    
+    this.steps = [];   
+    
+    this.PROGRESS_BAR_LENGTH = length;
+	
+	/* Let's say that the first 40px are reserved for initialization */
+	
+	this.PROGRESS_FIRST_SECTION_LENGTH = 40;
+	
+	this.FILLER_TIMEOUT = 200;
+    
+    this.progressbar = 'progressbar';
+    
+    this.template = '<div class="loader">' +
+                        '<div class="about">Setting up workspace</div>' +
+                        '<div class="progressbar">' +
+                            '<progress id ="' + this.progressbar + '" max="' + this.length + '" value="0"></progress>' +
+                        '</div>' +
+                        '<div id="steps" class="steps">' +
+                        '</div>' +
+                    '</div>';   
+    
+    this.initialize();
+    
+    this.interval;
+    
+    this.currentStep = 0;
+}
+
+/* want to fill time in a first section - to fake progress
+   while we wait for real progress indication to begin */
+
+loader.prototype.animateFirstSection = function(){
+    
+}
+	
+loader.prototype.showFillerProgress = function(){
+
+    var splashProgress = document.getElementById( this.progressbar );
+    
+    var cs = this.steps[ this.currentStep ];
+    
+    var barSpace = 0;
+    
+    for( var s = 1; s <= cs.order; s++ ){
+        barSpace = barSpace + this.steps[s].barSpace;
+    }
+
+    if( splashProgress  ) {	
+        var increment = ( barSpace - splashProgress.value )/5;
+        splashProgress.value = splashProgress.value + increment;
+        console.log( splashProgress.value );
+    }	
+}
+
+loader.prototype.startFillerProgress = function(){   
+    var myloader = this;
+    this.interval = setInterval( function(){ myloader.showFillerProgress() }, this.FILLER_TIMEOUT );
+}
+	
+loader.prototype.completeFillerProgress = function (){
+    clearInterval( this.interval );		
+}
+
+loader.prototype.nextStep = function(){
+            
+    var myStep;
+    
+    /* complete current step */
+    
+    if( this.currentStep > 0  ){
+        
+        myStep = this.steps[this.currentStep];
+    
+        switch( myStep.type ){
+
+            case myStep.TYPE_FILLER:
+                this.completeFillerProgress();
+                myStep.complete();
+                break;
+
+            case myStep.TYPE_DRIVEN:
+                myStep.complete();
+                break;
+        }
+    }
+    
+    /* initaliate next step */
+    
+    this.currentStep = this.currentStep + 1;
+    
+    myStep = this.steps[this.currentStep];
+    
+    switch( myStep.type ){
+
+            case myStep.TYPE_FILLER:
+                this.startFillerProgress();
+                myStep.spin();
+                break;
+
+            case myStep.TYPE_DRIVEN:
+                 myStep.spin();
+                break;
+    }
+}
+
+loader.prototype.initialize = function(){
+    this.content = document.getElementById( this.domNode );
+    this.content.innerHTML = this.template;
+    var splashProgress = document.getElementById( this.progressbar );
+    splashProgress.value = 0;
+    //    this.startInitializationProgress();
+}
+
+loader.prototype.emptySteps = function(){
+    var stepsNode = document.getElementById( 'steps' );
+    while( stepsNode.firstChild ){
+        stepsNode.removeChild( stepsNode.firstChild ) ;
+    }   
+}
+
+loader.prototype.drawSteps = function(){
+    
+    this.emptySteps();
+    
+    var stepsNode = document.getElementById( 'steps' );
+    
+    for( var step in this.steps ){
+        var nextStep = this.steps[step];
+        stepsNode.appendChild( nextStep.getStepNode() );
+    }
+}
+
+/* Newly provided steps need to begin at 1 */
+
+loader.prototype.addStep = function( step ){
+    this.steps[step.order] = step;
+    
+    if( !this.currentStep ){
+        this.curentStep = step;   
+    }
+    
+    this.drawSteps();
+}
+
+loader.prototype.setProgressLength = function( length ){
+    
+}
+
+loader.prototype.increment = function(){
+    var cs = this.steps[ this.currentStep ];
+    cs.increments = cs.increments + 1;
+    var splashProgress = document.getElementById( this.progressbar );
+    var increment = cs.barSpace / cs.incrementCount;		
+    splashProgress.value = splashProgress.value + increment;
+    
+    if( cs.increments === cs.incrementCount ){
+        this.nextStep();   
+    }
+}
+
+loader.prototype.setInitialProgressLength = function( length ){
+    
+}
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.ui/web/images/loading_24.gif b/bundles/org.eclipse.orion.client.ui/web/images/loading_24.gif
new file mode 100644
index 0000000..a5a69cf
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.ui/web/images/loading_24.gif
diff --git a/bundles/org.eclipse.orion.client.ui/web/images/message_success_24.png b/bundles/org.eclipse.orion.client.ui/web/images/message_success_24.png
new file mode 100644
index 0000000..a3faf5c
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.ui/web/images/message_success_24.png
diff --git a/loader.js b/loader.js
new file mode 100644
index 0000000..5695edd
--- /dev/null
+++ b/loader.js
@@ -0,0 +1,248 @@
+/**
+ * Loader.
+ * @module loader
+ */
+
+/* sets up a loading panel with a title, progress bar and a set of steps */
+
+
+function step( order, description, type, barSpace, incrementCount ){
+ 
+    this.TYPE_FILLER = 0;
+    this.TYPE_DRIVEN = 1;
+    
+    this.type = type;
+    
+    this.incrementCount = incrementCount;
+    
+    this.order = order;
+    
+    /* reserve this much space on the progress bar 
+       for this step */
+    
+    this.barSpace = barSpace;
+    
+    this.description = description;
+    
+    this.WAITING = 0;
+    this.HAPPENING = 1;
+    this.COMPLETED = 2;
+    
+    this.state = this.WAITING;
+    
+    this.template = "";
+    this.domNode;
+    
+    this.increments = 0;
+}
+
+step.prototype.complete = function(){
+    this.domNode.className = 'successImage';  
+}
+
+step.prototype.spin = function(){
+    this.domNode.className = 'loadingImage';   
+}
+
+step.prototype.getStepNode = function(){
+    
+    var stepNode = document.createElement( 'div' );
+    stepNode.className = 'step';
+    stepNode.innerHTML =  '<div class="visual">' + 
+                                '<div id="step' + this.order + '"></div>' +
+                            '</div>' +
+                            '<div class="verbal">' + this.description + '</div>';
+    
+    this.domNode = stepNode.firstChild.firstChild;
+    
+    return stepNode;
+}
+
+step.prototype.transition = function(){
+    switch( this.state ){
+     
+        case this.WAITING:
+            this.state = this.HAPPENING;
+            /* add happening class */
+            break;
+            
+        case this.HAPPENING:
+            this.state = this.COMPLETED;
+            /* add completed class */
+            break;
+    }
+}
+
+function loader( domNode, subject, length ){
+
+    this.domNode = domNode;
+    
+    this.content;
+    
+    this.length = length;
+    
+    this.title = subject;
+    
+    this.steps = [];   
+    
+    this.PROGRESS_BAR_LENGTH = length;
+	
+	/* Let's say that the first 40px are reserved for initialization */
+	
+	this.PROGRESS_FIRST_SECTION_LENGTH = 40;
+	
+	this.FILLER_TIMEOUT = 200;
+    
+    this.progressbar = 'progressbar';
+    
+    this.template = '<div class="loader">' +
+                        '<div class="about">Setting up workspace</div>' +
+                        '<div class="progressbar">' +
+                            '<progress id ="' + this.progressbar + '" max="' + this.length + '" value="0"></progress>' +
+                        '</div>' +
+                        '<div id="steps" class="steps">' +
+                        '</div>' +
+                    '</div>';   
+    
+    this.initialize();
+    
+    this.interval;
+    
+    this.currentStep = 0;
+}
+
+/* want to fill time in a first section - to fake progress
+   while we wait for real progress indication to begin */
+
+loader.prototype.animateFirstSection = function(){
+    
+}
+	
+loader.prototype.showFillerProgress = function(){
+
+    var splashProgress = document.getElementById( this.progressbar );
+    
+    var cs = this.steps[ this.currentStep ];
+    
+    var barSpace = 0;
+    
+    for( var s = 1; s <= cs.order; s++ ){
+        barSpace = barSpace + this.steps[s].barSpace;
+    }
+
+    if( splashProgress  ) {	
+        var increment = ( barSpace - splashProgress.value )/5;
+        splashProgress.value = splashProgress.value + increment;
+        console.log( splashProgress.value );
+    }	
+}
+
+loader.prototype.startFillerProgress = function(){   
+    var myloader = this;
+    this.interval = setInterval( function(){ myloader.showFillerProgress() }, this.FILLER_TIMEOUT );
+}
+	
+loader.prototype.completeFillerProgress = function (){
+    clearInterval( this.interval );		
+}
+
+loader.prototype.nextStep = function(){
+            
+    var myStep;
+    
+    /* complete current step */
+    
+    if( this.currentStep > 0  ){
+        
+        myStep = this.steps[this.currentStep];
+    
+        switch( myStep.type ){
+
+            case myStep.TYPE_FILLER:
+                this.completeFillerProgress();
+                myStep.complete();
+                break;
+
+            case myStep.TYPE_DRIVEN:
+                myStep.complete();
+                break;
+        }
+    }
+    
+    /* initaliate next step */
+    
+    this.currentStep = this.currentStep + 1;
+    
+    myStep = this.steps[this.currentStep];
+    
+    switch( myStep.type ){
+
+            case myStep.TYPE_FILLER:
+                this.startFillerProgress();
+                myStep.spin();
+                break;
+
+            case myStep.TYPE_DRIVEN:
+                 myStep.spin();
+                break;
+    }
+}
+
+loader.prototype.initialize = function(){
+    this.content = document.getElementById( this.domNode );
+    this.content.innerHTML = this.template;
+    var splashProgress = document.getElementById( this.progressbar );
+    splashProgress.value = 0;
+    //    this.startInitializationProgress();
+}
+
+loader.prototype.emptySteps = function(){
+    var stepsNode = document.getElementById( 'steps' );
+    while( stepsNode.firstChild ){
+        stepsNode.removeChild( stepsNode.firstChild ) ;
+    }   
+}
+
+loader.prototype.drawSteps = function(){
+    
+    this.emptySteps();
+    
+    var stepsNode = document.getElementById( 'steps' );
+    
+    for( var step in this.steps ){
+        var nextStep = this.steps[step];
+        stepsNode.appendChild( nextStep.getStepNode() );
+    }
+}
+
+/* Newly provided steps need to begin at 1 */
+
+loader.prototype.addStep = function( step ){
+    this.steps[step.order] = step;
+    
+    if( !this.currentStep ){
+        this.curentStep = step;   
+    }
+    
+    this.drawSteps();
+}
+
+loader.prototype.setProgressLength = function( length ){
+    
+}
+
+loader.prototype.increment = function(){
+    var cs = this.steps[ this.currentStep ];
+    cs.increments = cs.increments + 1;
+    var splashProgress = document.getElementById( this.progressbar );
+    var increment = cs.barSpace / cs.incrementCount;		
+    splashProgress.value = splashProgress.value + increment;
+    
+    if( cs.increments === cs.incrementCount ){
+        this.nextStep();   
+    }
+}
+
+loader.prototype.setInitialProgressLength = function( length ){
+    
+}
\ No newline at end of file