FELIX-975 : Add jquery as standard javascript library to all plugins, make us of jquery for manipulating the dom to get cross-browser compatibility. Fix bundle and components plugins for IE

git-svn-id: https://svn.apache.org/repos/asf/felix/trunk@750492 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/webconsole/src/main/java/org/apache/felix/webconsole/AbstractWebConsolePlugin.java b/webconsole/src/main/java/org/apache/felix/webconsole/AbstractWebConsolePlugin.java
index 135e8af..edc1858 100644
--- a/webconsole/src/main/java/org/apache/felix/webconsole/AbstractWebConsolePlugin.java
+++ b/webconsole/src/main/java/org/apache/felix/webconsole/AbstractWebConsolePlugin.java
@@ -51,6 +51,8 @@
         + "<meta http-equiv=\"Content-Type\" content=\"text/html; utf-8\">"
         + "<link rel=\"icon\" href=\"{6}/res/imgs/favicon.ico\">"
         + "<title>{0} - {2}</title>"
+        + "<script src=\"{5}/res/ui/jquery-1.3.2.min.js\" language=\"JavaScript\"></script>"
+        + "<script src=\"{5}/res/ui/jquery.tablesorter-2.0.3.min.js\" language=\"JavaScript\"></script>"
         + "<script src=\"{5}/res/ui/admin.js\" language=\"JavaScript\"></script>"
         + "<script src=\"{5}/res/ui/ui.js\" language=\"JavaScript\"></script>"
         + "<script language=\"JavaScript\">"
diff --git a/webconsole/src/main/java/org/apache/felix/webconsole/internal/compendium/ComponentsServlet.java b/webconsole/src/main/java/org/apache/felix/webconsole/internal/compendium/ComponentsServlet.java
index cc8dac3..02507b4 100644
--- a/webconsole/src/main/java/org/apache/felix/webconsole/internal/compendium/ComponentsServlet.java
+++ b/webconsole/src/main/java/org/apache/felix/webconsole/internal/compendium/ComponentsServlet.java
@@ -127,8 +127,6 @@
         final PrintWriter pw = response.getWriter();
 
         final String appRoot = ( String ) request.getAttribute( OsgiManager.ATTR_APP_ROOT );
-        Util.script(pw, appRoot, "jquery-1.3.2.min.js");
-        Util.script(pw, appRoot, "jquery.tablesorter-2.0.3.min.js");
 
         Util.startScript( pw );
         pw.println( "var imgRoot = '" + appRoot + "/res/imgs';");
diff --git a/webconsole/src/main/java/org/apache/felix/webconsole/internal/core/BundlesServlet.java b/webconsole/src/main/java/org/apache/felix/webconsole/internal/core/BundlesServlet.java
index 6c69b23..8fc50ad 100644
--- a/webconsole/src/main/java/org/apache/felix/webconsole/internal/core/BundlesServlet.java
+++ b/webconsole/src/main/java/org/apache/felix/webconsole/internal/core/BundlesServlet.java
@@ -276,8 +276,6 @@
         final PrintWriter pw = response.getWriter();
 
         final String appRoot = ( String ) request.getAttribute( OsgiManager.ATTR_APP_ROOT );
-        Util.script(pw, appRoot, "jquery-1.3.2.min.js");
-        Util.script(pw, appRoot, "jquery.tablesorter-2.0.3.min.js");
         Util.script(pw, appRoot, "bundles.js");
 
         Util.startScript( pw );
diff --git a/webconsole/src/main/java/org/apache/felix/webconsole/internal/misc/EventAdminServlet.java b/webconsole/src/main/java/org/apache/felix/webconsole/internal/misc/EventAdminServlet.java
index 5e83e1d..3c7b3ae 100644
--- a/webconsole/src/main/java/org/apache/felix/webconsole/internal/misc/EventAdminServlet.java
+++ b/webconsole/src/main/java/org/apache/felix/webconsole/internal/misc/EventAdminServlet.java
@@ -234,8 +234,6 @@
         final PrintWriter pw = response.getWriter();
 
         final String appRoot = ( String ) request.getAttribute( OsgiManager.ATTR_APP_ROOT );
-        Util.script(pw, appRoot, "jquery-1.3.2.min.js");
-        Util.script(pw, appRoot, "jquery.tablesorter-2.0.3.min.js");
         Util.script(pw, appRoot, "events.js");
 
         Util.startScript( pw );
diff --git a/webconsole/src/main/resources/res/ui/bundles.js b/webconsole/src/main/resources/res/ui/bundles.js
index 41ee4ee..7a274df 100644
--- a/webconsole/src/main/resources/res/ui/bundles.js
+++ b/webconsole/src/main/resources/res/ui/bundles.js
@@ -62,19 +62,17 @@
 	
 	var input = createElement( "input", null, {
             type: 'image',
+            style: {"margin-left": "10px"},
             title: opLabel,
             alt: opLabel,
-            src: imgRoot + '/bundle_' + img + '.png',
-            onClick: 'changeDataEntryState(' + id + ', "' + op + '");'
+            src: imgRoot + '/bundle_' + img + '.png'
         });
+	$(input).click(function() {changeDataEntryState(id, op)});
 		
     if (!enabled) {
-        input.setAttribute( "disabled", true );
+    	$(input).attr("disabled", true);
     }
-    var div = createElement("div");
-    div.setAttribute("style", "float:left; margin-left:10px;");
-    div.appendChild(input);
-    parent.appendChild( div );
+    parent.appendChild( input );
 }
 
 function entryInternal( /* Element */ parent, /* Object */ dataEntry ) {
@@ -84,14 +82,14 @@
     
     var inputElement = createElement("img", "rightButton", {
     	src: appRoot + "/res/imgs/arrow_right.png",
-    	border: "none",
+    	style: {border: "none"},
     	id: 'img' + id,
     	title: "Details",
     	alt: "Details",
     	width: 14,
-    	height: 14,
-        onClick: 'showDetails(' + id + ');'
+    	height: 14
     });
+    $(inputElement).click(function() {showDetails(id)});
     var titleElement;
     if ( drawDetails ) {
     	titleElement = text(name);
@@ -106,9 +104,13 @@
     parent.appendChild( td( null, null, [ inputElement, text(" "), titleElement ] ) );
     parent.appendChild( td( null, null, [ text( state ) ] ) );
     var actionsTd = td( null, null );
+    var div = createElement("div", null, {
+    	style: { "text-align" : "left"}
+    });
+    actionsTd.appendChild(div);
     
     for ( var a in dataEntry.actions ) {
-    	actionButton( actionsTd, id, dataEntry.actions[a] );
+    	actionButton( div, id, dataEntry.actions[a] );
     }
     parent.appendChild( actionsTd );
 }
@@ -140,10 +142,10 @@
 function hideDetails( id ) {
 	$("#img" + id).each(function() {
 		$("#pluginInlineDetails").remove();
-        this.setAttribute("src", appRoot + "/res/imgs/arrow_right.png");
-        this.setAttribute("onClick", "showDetails('" + id + "')");
-        this.setAttribute("title", "Details");
-        this.setAttribute("alt", "Details");
+		$(this).attr("src", appRoot + "/res/imgs/arrow_right.png");
+		$(this).attr("title", "Details");
+		$(this).attr("alt", "Details");
+		$(this).unbind('click').click(function() {showDetails(id)});
 	});
 }
 
@@ -153,17 +155,17 @@
 	$("#entry" + data.id + " > td").eq(1).append("<div id='pluginInlineDetails'/>");
 	$("#img" + data.id).each(function() {
 		if ( drawDetails ) {
-            this.setAttribute("src", appRoot + "/res/imgs/arrow_left.png");
+			$(this).attr("src", appRoot + "/res/imgs/arrow_left.png");
+			$(this).attr("title", "Back");
+			$(this).attr("alt", "Back");
     	    var ref = window.location.pathname;
     	    ref = ref.substring(0, ref.lastIndexOf('/'));
-            this.setAttribute("onClick", "window.location = '" + ref + "';");
-            this.setAttribute("title", "Back");
-            this.setAttribute("alt", "Back");
+			$(this).unbind('click').click(function() {window.location = ref;});
 		} else {
-            this.setAttribute("src", appRoot + "/res/imgs/arrow_down.png");
-            this.setAttribute("onClick", "hideDetails('" + data.id + "')");
-            this.setAttribute("title", "Hide Details");
-            this.setAttribute("alt", "Hide Details");
+			$(this).attr("src", appRoot + "/res/imgs/arrow_down.png");
+			$(this).attr("title", "Hide Details");
+			$(this).attr("alt", "Hide Details");
+			$(this).unbind('click').click(function() {hideDetails(data.id)});
 		}
 	});
 	$("#pluginInlineDetails").append("<table border='0'><tbody></tbody></table>");
diff --git a/webconsole/src/main/resources/res/ui/components.js b/webconsole/src/main/resources/res/ui/components.js
index 6631cd3..6728e04 100644
--- a/webconsole/src/main/resources/res/ui/components.js
+++ b/webconsole/src/main/resources/res/ui/components.js
@@ -69,16 +69,14 @@
             title: opLabel,
             alt: opLabel,
             src: imgRoot + '/component_' + img + '.png',
-            onClick: 'changeDataEntryState("' + arg + '", "' + op + '");'
+            style: {"margin-left": "10px"}
         });
+	$(input).click(function() {changeDataEntryState(arg, op)});
 		
     if (!enabled) {
-        input.setAttribute( "disabled", true );
+    	$(input).attr("disabled", true);
     }
-    var div = createElement("div");
-    div.setAttribute("style", "float:left; margin-left:10px;");
-    div.appendChild(input);
-    parent.appendChild( div );
+    parent.appendChild( input );
 }
 
 function entryInternal( /* Element */ parent, /* Object */ dataEntry ) {
@@ -88,14 +86,14 @@
     
     var inputElement = createElement("img", "rightButton", {
     	src: appRoot + "/res/imgs/arrow_right.png",
-    	border: "none",
+        style: {"border": "none"},
     	id: 'img' + id,
     	title: "Details",
     	alt: "Details",
     	width: 14,
-    	height: 14,
-        onClick: 'showDetails(' + id + ');'
+    	height: 14
     });
+	$(inputElement).click(function() {showDetails(id)});
     var titleElement;
     if ( drawDetails ) {
     	titleElement = text(name);
@@ -110,9 +108,13 @@
     parent.appendChild( td( null, null, [ inputElement, text(" "), titleElement ] ) );
     parent.appendChild( td( null, null, [ text( state ) ] ) );
     var actionsTd = td( null, null );
+    var div = createElement("div", null, {
+    	style: { "text-align" : "left"}
+    });
+    actionsTd.appendChild(div);
     
     for ( var a in dataEntry.actions ) {
-    	actionButton( actionsTd, id, dataEntry.actions[a], dataEntry.pid );
+    	actionButton( div, id, dataEntry.actions[a], dataEntry.pid );
     }
     parent.appendChild( actionsTd );
 }
@@ -142,10 +144,10 @@
 function hideDetails( id ) {
 	$("#img" + id).each(function() {
 		$("#pluginInlineDetails").remove();
-        this.setAttribute("src", appRoot + "/res/imgs/arrow_right.png");
-        this.setAttribute("onClick", "showDetails('" + id + "')");
-        this.setAttribute("title", "Details");
-        this.setAttribute("alt", "Details");
+		$(this).attr("src", appRoot + "/res/imgs/arrow_right.png");
+        $(this).attr("title", "Details");
+        $(this).attr("alt", "Details");
+        $(this).unbind('click').click(function() {showDetails(id)});
 	});
 }
 
@@ -155,17 +157,17 @@
 	$("#entry" + data.id + " > td").eq(1).append("<div id='pluginInlineDetails'/>");
 	$("#img" + data.id).each(function() {
 		if ( drawDetails ) {
-            this.setAttribute("src", appRoot + "/res/imgs/arrow_left.png");
+			$(this).attr("src", appRoot + "/res/imgs/arrow_left.png");
+	        $(this).attr("title", "Back");
+	        $(this).attr("alt", "Back");
     	    var ref = window.location.pathname;
     	    ref = ref.substring(0, ref.lastIndexOf('/'));
-            this.setAttribute("onClick", "window.location = '" + ref + "';");
-            this.setAttribute("title", "Back");
-            this.setAttribute("alt", "Back");
+            $(this).unbind('click').click(function() {window.location = ref;});
 		} else {
-            this.setAttribute("src", appRoot + "/res/imgs/arrow_down.png");
-            this.setAttribute("onClick", "hideDetails('" + data.id + "')");
-            this.setAttribute("title", "Hide Details");
-            this.setAttribute("alt", "Hide Details");
+			$(this).attr("src", appRoot + "/res/imgs/arrow_down.png");
+	        $(this).attr("title", "Hide Details");
+	        $(this).attr("alt", "Hide Details");
+            $(this).unbind('click').click(function() {hideDetails(data.id)});
 		}
 	});
 	$("#pluginInlineDetails").append("<table border='0'><tbody></tbody></table>");
diff --git a/webconsole/src/main/resources/res/ui/events.js b/webconsole/src/main/resources/res/ui/events.js
index 62764c1..993a112 100644
--- a/webconsole/src/main/resources/res/ui/events.js
+++ b/webconsole/src/main/resources/res/ui/events.js
@@ -83,9 +83,9 @@
 	
 	    for( var p in dataEntry.properties ) {
 	    	var c1 = td(null, null, [text(p)]);
-	    	c1.setAttribute("style", "border:0px none;");
+	    	$(c1).css("border", "0px none");
 	    	var c2 = td(null, null, [text(dataEntry.properties[p])]);
-	    	c2.setAttribute("style", "border:0px none;");
+	    	$(c2).css("border", "0px none");
 	    	bodyE.appendChild(tr(null, null, [ c1, c2 ]));
 	    }
 	    propE = tableE;
diff --git a/webconsole/src/main/resources/res/ui/ui.js b/webconsole/src/main/resources/res/ui/ui.js
index b022b98..ae4d6a2 100644
--- a/webconsole/src/main/resources/res/ui/ui.js
+++ b/webconsole/src/main/resources/res/ui/ui.js
@@ -93,8 +93,7 @@
     
     if (cssClass)
     {
-        element.setAttribute( "class", cssClass ); // non-IE
-        element.setAttribute( "className", cssClass ); // IE
+    	$(element).addClass(cssClass);
     }
     
     if (attrs)
@@ -106,12 +105,12 @@
                 var styles = attrs[lab];
                 for (var styleName in styles)
                 {
-                    element.style[styleName] = styles[styleName];
+                	$(element).css(styleName, styles[styleName]);
                 }
             }
             else
             {
-                element.setAttribute( lab, attrs[lab] );
+            	$(element).attr( lab, attrs[lab] );
             }
         }
     }