Index: html/parade.html
===================================================================
--- html/parade.html	(revision 8930)
+++ html/parade.html	(working copy)
@@ -8,46 +8,46 @@
         <link type="text/css" rel="stylesheet" href="../infusion/src/webapp/framework/fss/css/fss-transitions.css" />
         <link type="text/css" rel="stylesheet" href="../infusion/src/webapp/components/inlineEdit/css/InlineEdit.css" />
         <link type="text/css" rel="stylesheet" href="../css/parade.css" />
-        <script type="text/javascript" src="../infusion/src/webapp/lib/jquery/core/js/jquery.js">
+        <script src="../infusion/src/webapp/lib/jquery/core/js/jquery.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/lib/jquery/ui/js/ui.core.js">
+        <script src="../infusion/src/webapp/lib/jquery/ui/js/ui.core.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/lib/jquery/plugins/delegate/js/jquery.delegate.js">
+        <script src="../infusion/src/webapp/lib/jquery/plugins/delegate/js/jquery.delegate.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/jquery.keyboard-a11y.js">
+        <script src="../infusion/src/webapp/framework/core/js/jquery.keyboard-a11y.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/lib/json/js/json2.js">
+        <script src="../infusion/src/webapp/lib/json/js/json2.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/Fluid.js">
+        <script src="../infusion/src/webapp/framework/core/js/Fluid.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/FluidDOMUtilities.js">
+        <script src="../infusion/src/webapp/framework/core/js/FluidDOMUtilities.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/DataBinding.js">
+        <script src="../infusion/src/webapp/framework/core/js/DataBinding.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/framework/renderer/js/fluidParser.js">
+        <script src="../infusion/src/webapp/framework/renderer/js/fluidParser.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/framework/renderer/js/fluidRenderer.js">
+        <script src="../infusion/src/webapp/framework/renderer/js/fluidRenderer.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/components/inlineEdit/js/InlineEdit.js">
+        <script src="../infusion/src/webapp/components/inlineEdit/js/InlineEdit.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/components/inlineEdit/js/InlineEditIntegrations.js">
+        <script src="../infusion/src/webapp/components/inlineEdit/js/InlineEditIntegrations.js">
         </script>
-        <script type="text/javascript" src="../infusion/src/webapp/components/undo/js/Undo.js">
+        <script src="../infusion/src/webapp/components/undo/js/Undo.js">
         </script>
-        <script type="text/javascript" src="../js/parade.js">
+        <script src="../js/parade.js">
         </script>
     </head>
     <body>
         <div class="fl-container-950 fl-centered fl-parade-container-page">
             <div class="fl-container-flex fl-fix footer">
-                <blockquote class="simpleEdit1">
+                <blockquote class="filter1">
                     First string to filter is: <strong class="flc-inlineEdit-text">Bug Parade Engage 0.1</strong>
                     and then...
                 </blockquote>
-                <blockquote class="simpleEdit2">
+                <blockquote class="filter2">
                     Second string to filter is: <strong class="flc-inlineEdit-text">Bug Parade Infusion 1.1.2</strong>
                     and then...
-                    <button onclick="go();">
+                    <button class="goButton">
                         go
                     </button>
                 </blockquote>
@@ -75,65 +75,9 @@
                 </p>
             </div>
         </div>
-        <script type="text/javascript">
-            var demo = demo ||
-            {};
-            (function($, fluid){
-            
-                /**
-                 * Initialize all rich text inline edit components present on the inline-edit
-                 * demo.
-                 */
-                var inlineRichTextEditSetup = function(){
-                
-                    /**
-                     * Simple inline edits example.
-                     */
-                    demo.project1 = fluid.inlineEdit(".simpleEdit1", {
-                        componentDecorators: {
-                            type: "fluid.undoDecorator"
-                        }
-                    });
-                    demo.project2 = fluid.inlineEdit(".simpleEdit2", {
-                        componentDecorators: {
-                            type: "fluid.undoDecorator"
-                        }
-                    });
-                };
-                
-                demo.initInlineEdit = function(){
-                    inlineRichTextEditSetup();
-                };
-            })(jQuery, fluid_1_2);
-            
-            demo.initInlineEdit();
-            
-            // parade component.
-            var parade = fluid.paradeComponent(fluid.wrap(".fl-parade-container"), {
-                listeners: {
-                    /**
-                     * listener test function.
-                     */
-                    afterRender: function(){
-                        alert("component rendered");
-                    }
-                }
-            })
-            
-            /**
-             * listener test function.
-             */
-            parade.events.afterRender.addListener(function(){
-                alert("component rendered");
-            })
-            
-            function go(){
-                // clean data model and render.
-                parade.clean();
-                
-                // go for data and render the component.
-                parade.render([demo.project1.model.value, demo.project2.model.value]);
-            }
-        </script>
+		<!-- Initializing the Parade component. -->
+        <script>
+            fluid.paradeComponent(".fl-parade-container");
+		</script>
     </body>
-</html>
+</html>
\ No newline at end of file
Index: js/parade.js
===================================================================
--- js/parade.js	(revision 8930)
+++ js/parade.js	(working copy)
@@ -1,11 +1,10 @@
 /*global jQuery*/
 /*global fluid_1_2*/
 
-fluid_1_2 = fluid_1_2 ||
-{};
+fluid_1_2 = fluid_1_2 || {};
 
-// parade component code.
-(function($, fluid){
+// Parade component code.
+(function ($, fluid) {
 
     /** 
      * Process a jira item element.
@@ -13,15 +12,15 @@
      * @param {Object} that component
      * @param {Object} item xml item element
      */
-    var processItem = function(that, item){
+    var processItem = function (that, item) {
         /**
          * Retrieve text from an xml txt element.
          *
          * @param {Object} tagName
          */
-        var valueForTextElement = function(tagName){
+        var valueForTextElement = function (tagName) {
             return $.trim(item.find(tagName).text());
-        }
+        };
         
         // Presentation bean. 
         var i = {};
@@ -35,7 +34,7 @@
         i.priorityId = item.find("priority").attr("id") / 1;
         i.project = "";
         
-        item.find("comments").find("comment").each(function(){
+        item.find("comments").find("comment").each(function () {
             var aux = fluid.wrap(this).text();
             if (aux.indexOf("Bug Parade ") > -1) {
                 aux = aux.split("Bug Parade ")[1];
@@ -44,7 +43,7 @@
         });
         
         i.component = "";
-        item.find("component").each(function(){
+        item.find("component").each(function () {
             // A Jira item (task) could be related to more than one component.
             // For each component we clone the new data item.
             var c = $.trim(fluid.wrap(this).text());
@@ -53,59 +52,38 @@
             i = fluid.copy(i);
         });
         
-        if ("" == i.component) {
-            that.model.items.push(i)
+        if ("" === i.component) {
+            that.model.items.push(i);
         }
     };
     
     /**
-     * Data bloc process. transform xml ajax data to beans.
-     * Here we get (issue by issue) information to render [Status, Jira, Review, Project & component/s].
+     * Data bloc process. Transform xml ajax data to beans. Here we get (issue by
+     * issue) information to render [Status, Jira, Review, Project & component/s].
      *
      * @param {Object} that the component itself.
      */
-    var processItems = function(that){
-        $("item", that.dataBloc).each(function(){
+    var processItems = function (that) {
+        $("item", that.dataBloc).each(function () {
             var item = fluid.wrap(this);
             processItem(that, item);
         });
     };
     
-    /**
-     * With the first ajax data bloc we can get essential information to fetch
-     * the whole jira information in blocs (20 items per bloc)
+	/**
+     * Compose the escaped query string to be sent (as jira ajax call).
      *
-     * @param {Object} that the component itself.
-     */
-    var processCountBloc = function(that){
-        var aux3 = $("channel issue", that.dataBloc);
-        that.model.start = aux3.attr("start");
-        that.model.end = aux3.attr("end");
-        that.model.total = aux3.attr("total");
-        that.model.blocs = Math.max(1, Math.floor((that.model.total - 1) / 20) + 1);
-        that.model.currentBloc = 0;
-        
-        fluid.setLogging(true);
-        fluid.log("parade: blocs 2 process = " + that.model.blocs);
-        
-        // Go for first data block.
-        if (that.model.blocs > 0) {
-            getBloc(that);
-        }
-    };
-    
-    /**
-     * Compose the escaped query string to send (as jira ajax call).
-     *
      * See component constructor.
      *
      * @param {Object} that the component itself.
      * @param {Object} theFirst index for the first element to be retrieved.
      * @param {Object} theCount bloc size.
      */
-    var getParamString = function(that, theFirst, theCount){
-		query1 = that.model.filter[0];
-		query2 = that.model.filter[1];
+    var getParamString = function (that, theFirst, theCount) {
+        var query1;
+        var query2;
+        query1 = that.model.filter[0];
+        query2 = that.model.filter[1];
         return "?up=" +
         encodeURIComponent(that.options.connectivity.jiraBaseUrl + query1 +
         that.options.connectivity.nextUrlBit +
@@ -114,102 +92,57 @@
         theFirst +
         that.options.connectivity.nextNextNextUrlBit +
         theCount);
-    }
-    
-    /**
-     * Do the first ajax request to process information headers.
-     *
-     * @param {Object} that the component itself.
-     */
-    var getCount = function(that){
-        var urlParam = getParamString(that, 0, 1);
-        $.get(that.options.connectivity.kettleParadeUrl + urlParam, function(data){
-            that.dataBloc = fluid.wrap(data.documentElement);
-            
-            // let ajax subsystems handle it's events.
-            processCountBloc(that);
-        });
     };
-    
-    /**
-     * Retrieve server data bloc.
+	
+	/**
+     * Compares items (to sort and render traversal list).
      *
-     * @param {Object} that the component itself.
-     */
-    var getBloc = function(that){
-        fluid.setLogging(true);
-        fluid.log("parade: processing bloc = " + that.model.currentBloc);
-        var low = that.model.currentBloc * 20;
-        var high = (that.model.currentBloc + 1) * 20;
-        var urlParam = getParamString(that, low, 20);
-        $.get(that.options.connectivity.kettleParadeUrl + urlParam, function(data){
-            that.dataBloc = fluid.wrap(data.documentElement);
-            processItems(that);
-            that.model.currentBloc++;
-            if (that.model.currentBloc < that.model.blocs) {
-                getBloc(that);
-            }
-            else {
-                // With the last data bloc at home, data can be sorted.
-                sortItems(that);
-            }
-        });
-    };
-    
-    /**
-     * Compares items (to sort the list to do the render in one list traversal).
-     *
      * @param {Object} a
      * @param {Object} b
      */
-    var sf = function sortfunction(a, b){
-        if (a.project < b.project) 
+    var sf = function sortfunction(a, b) {
+        if (a.project < b.project) {
             return -1;
-        if (a.project > b.project) 
+        }
+        if (a.project > b.project) {
             return 1;
+        }
         
-        if (a.component < b.component) 
+        if (a.component < b.component) {
             return -1;
-        if (a.component > b.component) 
+        }
+        if (a.component > b.component) {
             return 1;
+        }
         
         // 1 prio is the highest.
-        if (a.priorityId < b.priorityId) 
+        if (a.priorityId < b.priorityId) {
             return -1;
-        if (a.priorityId > b.priorityId) 
+        }
+        if (a.priorityId > b.priorityId) {
             return 1;
+        }
         
         // newer first.                            
-        if (a.keyId > b.keyId) 
+        if (a.keyId > b.keyId) {
             return -1;
-        if (a.keyId < b.keyId) 
+        }
+        if (a.keyId < b.keyId) {
             return 1;
+        }
         
         return 0;
     };
-    
-    /**
-     * Sort all the recovered items.
+	
+	/**
+     * Uses a kind of "render by example" in order to let the designer choose 
+     * the paragraph style and optimize the render. No html code emitted.
      *
-     * @param {Object} that the component itself.
-     */
-    var sortItems = function(that){
-        that.model.items.sort(sf);
-        fluid.setLogging(true);
-        fluid.log("parade: sort done!");
-        paradeRender(that);
-    };
-    
-    /**
-     * Uses a kind of "render by example".
-     * Let designer choose the paragraph style and optimize the render.
-     * Do no emit html code.
+     * Sorted data permits iterative render process.
      *
-     * Because the data to be rendered is sorted when can do a iterative render process.
-     *
      * @param {Object} that the component itself.
      */
-    var paradeRender = function(that){
+    var paradeRender = function (that) {
         that.model.toReview = "Needs Review: ";
         var lastProject = "-1";
         var lastComponent = "-1";
@@ -220,32 +153,31 @@
         var itemHeaderTemplate = that.locate("itemHeaderTemplate");
         var itemInfoTemplate = that.locate("itemInfoTemplate");
         
-        // render.
-        $.each(that.model.items, function(){
-            if (lastProject != this.project) {
+        // Render.
+        $.each(that.model.items, function () {
+            if (lastProject !== this.project) {
                 itemsDetailsDiv.append(itemHeaderTemplate.clone().text(this.project));
                 lastProject = this.project;
                 lastComponent = "-1";
                 lastPriorityId = -1;
             }
-            if (lastComponent != this.component) {
+            if (lastComponent !== this.component) {
                 itemsDetailsDiv.append(itemHeaderTemplate.clone().text(this.component));
                 lastComponent = this.component;
                 lastPriorityId = -1;
             }
-            if (lastPriorityId != this.priorityId) {
+            if (lastPriorityId !== this.priorityId) {
                 itemsDetailsDiv.append(itemHeaderTemplate.clone().text(this.priority));
                 lastPriorityId = this.priorityId;
             }
             var hint = "";
-            if ("Resolved" == this.status) {
+            if ("Resolved" === this.status) {
                 hint = ": **REVIEW**";
                 that.model.toReview += this.key + ", ";
             }
-            else 
-                if ("Closed" == this.status) {
-                    hint = ": **CLOSED**";
-                }
+            else if ("Closed" === this.status) {
+                hint = ": **CLOSED**";
+            }
             
             // Render jira details.
             itemsDetailsDiv.append(itemInfoTemplate.clone().text(this.key + hint));
@@ -259,14 +191,135 @@
         // Fire render event.
         that.events.afterRender.fire();
     };
+	
+	/**
+     * Sort all recovered items.
+     *
+     * @param {Object} that the component itself.
+     */
+    var sortItems = function (that) {
+        that.model.items.sort(sf);
+        fluid.setLogging(true);
+        fluid.log("parade: sort done!");
+        paradeRender(that);
+    };
+	
+	/**
+     * Retrieve server data bloc.
+     *
+     * @param {Object} that the component itself.
+     */
+    var getBloc = function (that) {
+        fluid.setLogging(true);
+        fluid.log("parade: processing bloc = " + that.model.currentBloc);
+        var low = that.model.currentBloc * 20;
+        var high = (that.model.currentBloc + 1) * 20;
+        var urlParam = getParamString(that, low, 20);
+		var urlSource;
+        // Check on connectivity mode.
+        if (that.options.connectivity.standaloneMode) {
+            urlSource = "/bug-parade/data/SearchRequest_" + low + "_" + high + ".xml";
+        } else {
+            urlSource = that.options.connectivity.kettleParadeUrl + urlParam;
+        }
+        $.get(urlSource, function (data) {
+            that.dataBloc = fluid.wrap(data.documentElement);
+            processItems(that);
+            that.model.currentBloc++;
+            if (that.model.currentBloc < that.model.blocs) {
+                getBloc(that);
+            }
+            else {
+                // With the last data bloc at home, data can be sorted.
+                sortItems(that);
+            }
+        });
+    };
+	
+    /**
+     * With the first ajax data bloc we can get essential information to fetch
+     * the whole jira information in blocs (20 items per bloc).
+     *
+     * @param {Object} that the component itself.
+     */
+    var processCountBloc = function (that) {
+        var aux3 = $("channel issue", that.dataBloc);
+        that.model.start = aux3.attr("start");
+        that.model.end = aux3.attr("end");
+        that.model.total = aux3.attr("total");
+        that.model.blocs = Math.max(1, Math.floor((that.model.total - 1) / 20) + 1);
+        that.model.currentBloc = 0;
+        
+        fluid.setLogging(true);
+        fluid.log("parade: blocs 2 process = " + that.model.blocs);
+        
+        // Go for first data block.
+        if (that.model.blocs > 0) {
+            getBloc(that);
+        }
+    };
     
     /**
+     * Do the first ajax request to process information headers.
+     *
+     * @param {Object} that the component itself.
+     */
+    var getCount = function (that) {
+        var urlParam = getParamString(that, 0, 1);
+		var urlSource;
+        // Check on connectivity mode.
+        if (that.options.connectivity.standaloneMode) {
+            urlSource = "/bug-parade/data/SearchRequest_0_1.xml";
+        } else {
+            urlSource = that.options.connectivity.kettleParadeUrl + urlParam;
+        }
+        $.get(urlSource, function (data) {
+            that.dataBloc = fluid.wrap(data.documentElement);
+            
+            // Let ajax subsystems handle it's events.
+            processCountBloc(that);
+        });
+    };
+	
+	/**
+	 * Parse optional url parameter.
+	 * 
+	 * @param {Object} name the parameter to be parsed.
+	 */
+	var getUrlParam = function (name) {
+        var regex;
+        var regexS;
+        var results;
+        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
+        regexS = "[\\?&]" + name + "=([^&#]*)";
+        regex = new RegExp(regexS);
+        results = regex.exec(window.location.href);
+		if (results === null) {
+			return "";
+		} else {
+			return results[1];
+		}
+	};
+	
+	/**
+     * Set connectivity mode (default: standaloneMode false).
+     *
+     * @param {Object} that the component itself.
+     */
+	var setConnectivityMode = function (that) {
+		var mode = getUrlParam("mode");
+        if (mode === "standalone") {          
+            that.options.connectivity.standaloneMode = true;
+        }
+    };
+    
+    /**
      * Component constructor.
      *
      * @param {Object} container an html div.
      * @param {Object} options component options.
      */
-    fluid.paradeComponent = function(container, options){
+    fluid.paradeComponent = function (container, options) {
         var that = fluid.initView("fluid.paradeComponent", container, options);
         
         /*
@@ -283,20 +336,23 @@
         /**
          * Retrieve and render data.
          */
-        that.render = function(filter){
-			// Prepare and store filter.
-            $.each(filter, function(i, n){
+        that.render = function (filter) {	
+			// Set connectivity mode.
+            setConnectivityMode(that);
+			
+            // Prepare and store filter.
+            $.each(filter, function (i, n) {
                 n = n.replace(/\s/gi, "+");
-				filter[i]=n;
+                filter[i] = n;
             });
             this.model.filter = filter;
             getCount(that);
-        }
+        };
         
         /**
          * Clean render and stored items.
          */
-        that.clean = function(){
+        that.clean = function () {
             this.locate("itemsSummary").text("");
             this.locate("itemsDetails").text("");
             
@@ -305,8 +361,40 @@
             this.model.toReview = "";
             // Xml data (Ajax jira call response data).
             this.dataBloc = {};
-        }
-        
+        };
+		
+		/**
+		 * Set filter components.
+		 */
+		var filter1 = fluid.inlineEdit(".filter1", {
+            componentDecorators: {
+                type: "fluid.undoDecorator"
+            }
+        });
+        var filter2 = fluid.inlineEdit(".filter2", {
+            componentDecorators: {
+                type: "fluid.undoDecorator"
+            }
+        });
+		
+		/**
+		 * Clean data model and render filter components.
+		 */
+		that.initFilter = function (filter1, filter2) {			
+			// clean data model and render.
+            that.clean();
+              
+            // go for data and render the component.
+			that.render([filter1, filter2]);
+		};
+		
+		/**
+         * Bind click handler.
+         */
+        $(".goButton").click(function () {
+			that.initFilter(filter1.model.value, filter2.model.value);
+        });
+
         return that;
     };
     
@@ -328,8 +416,9 @@
             jiraBaseUrl: "http://issues.fluidproject.org/sr/jira.issueviews:searchrequest-xml/temp/SearchRequest.xml?query=%22",
             nextUrlBit: "%22+||+%22",
             nextNextUrlBit: "%22&description=true&body=true&pid=10020&pid=10001&sorter/field=pid&sorter/order=DESC&sorter/field=component&sorter/order=DESC&sorter/field=status&sorter/order=DESC&pager/start=",
-            nextNextNextUrlBit: "&tempMax="
+            nextNextNextUrlBit: "&tempMax=",
+			standaloneMode: false
         }
-    })
+    });
     
 })(jQuery, fluid_1_2);
