diff --git a/xCAT-web-exp/contents.js b/xCAT-web-exp/contents.js
new file mode 100644
index 000000000..0f0a4cf69
--- /dev/null
+++ b/xCAT-web-exp/contents.js
@@ -0,0 +1,4 @@
+$(document).ready(function(){
+ $("#alltabs > ul").tabs({spinner: ''});
+ $("#nodetabs > ul").tabs({spinner: ''});
+});
diff --git a/xCAT-web-exp/eventlog.html b/xCAT-web-exp/eventlog.html
new file mode 100644
index 000000000..17a8d7509
--- /dev/null
+++ b/xCAT-web-exp/eventlog.html
@@ -0,0 +1,11 @@
+
+
+
+
+
diff --git a/xCAT-web-exp/index.html b/xCAT-web-exp/index.html
index 530e9270a..2ac293b27 100644
--- a/xCAT-web-exp/index.html
+++ b/xCAT-web-exp/index.html
@@ -2,177 +2,51 @@
xCAT WebUI
-
-
+
+
-
+
+
+
- Noderange:
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/xCAT-web-exp/inventory.html b/xCAT-web-exp/inventory.html
new file mode 100644
index 000000000..7af638beb
--- /dev/null
+++ b/xCAT-web-exp/inventory.html
@@ -0,0 +1,11 @@
+
+
+
+
+
diff --git a/xCAT-web-exp/noderangetree.js b/xCAT-web-exp/noderangetree.js
new file mode 100644
index 000000000..65c0826ec
--- /dev/null
+++ b/xCAT-web-exp/noderangetree.js
@@ -0,0 +1,30 @@
+var noderange="";
+function updatenoderange() {
+ myselection=nrtree.selected_arr;
+ noderange="";
+ for (node in myselection) {
+ noderange+=myselection[node][0].id;
+ }
+ noderange=noderange.substring(1);
+}
+
+$(document).ready(function() {
+
+ nrtree = new tree_component(); // -Tree begin
+ nrtree.init($("#nrtree"),{
+ rules: {
+ multiple: "Ctrl"
+ },
+ ui: {
+ animation: 250
+ },
+ callback : {
+ onchange : updatenoderange
+ },
+ data : {
+ type : "json",
+ async : "true",
+ url: "noderangesource.php"
+ }
+ }); //Tree finish
+});
diff --git a/xCAT-web-exp/tables.html b/xCAT-web-exp/tables.html
new file mode 100644
index 000000000..f95a8a8f1
--- /dev/null
+++ b/xCAT-web-exp/tables.html
@@ -0,0 +1 @@
+This would be some sort of table oriented pane I suppose...
diff --git a/xCAT-web-exp/vitals.html b/xCAT-web-exp/vitals.html
new file mode 100644
index 000000000..e5e2bd20f
--- /dev/null
+++ b/xCAT-web-exp/vitals.html
@@ -0,0 +1,11 @@
+
+
+
+
+
diff --git a/xCAT-web-exp/xcatauth.js b/xCAT-web-exp/xcatauth.js
new file mode 100644
index 000000000..ea95e5f25
--- /dev/null
+++ b/xCAT-web-exp/xcatauth.js
@@ -0,0 +1,86 @@
+/* xCAT WebUI authentication handling functions/setup */
+/* IBM(c) 2007 EPL license http://www.eclipse.org/legal/epl-v10.html */
+function openlogdialog (data, textstatus) { //open the log in dialog if not logged in
+ if (data.authenticated == "no") {
+ logdialog.dialog("open");
+ }
+}
+
+function onlogin (data, textstatus) {
+ $("#password").val(""); //clear the password field regardless of what happens
+ if (data.authenticated == "yes") {
+ $("#logstatus").text("Logged in successfully");
+ nrtree.refresh(); // Fix tree potentiall broken through attempts to operate without auth
+ logdialog.dialog("close");
+ } else {
+ $("#logstatus").text("Authentication failure");
+ $("#logstatus").css("color","#ff0000");
+ }
+}
+
+function logout () {
+ $.post("log.php",{logout:1})
+ $("#logstatus").html("");
+ logdialog.dialog("open");
+}
+
+function authenticate() {
+ $("#logstatus").css("color","#000000");
+ $("#logstatus").html('Authenticating...
');
+ var passwd=$("#password").val();
+ $.post("log.php",{
+ username: $("#username").val(),
+ password: passwd
+ },onlogin,"json");
+}
+
+$(document).ready(function() {
+ logdialog=$("#logdialog").dialog({
+ modal: true,
+ closeOnEscape: false,
+ closebutton: false,
+ overlay: {
+ backgroundColor: "#000",
+ opacity: 1
+
+ },
+ height: 200,
+ width: 350,
+ autoOpen: false,
+ buttons: {
+ "Log In": authenticate
+ },
+ open: function(type, dialog) {
+ if (document.location.protocol == "http:") {
+ $("#logstatus").html("Unencrypted Session!");
+ $("#logstatus").css("color","#ff0000");
+ }
+ if ($("#username").val() == "") {
+ $("#username").focus();
+ } else {
+ $("#password").focus();
+ }
+ },
+ });
+
+ $("#username").keydown(function(event) { //When 'enter' is hit while in username, advance to password
+ if (event.keyCode==13) {
+ $("#password").focus();
+ }
+ });
+ $("#password").keydown(function(event) { //Submit authentication if enter is pressed in password field
+ if (event.keyCode==13) {
+ authenticate();
+ }
+ });
+
+ $("#login").click(function(event) { //Also authenticate when 'log in' button is activated
+ authenticate();
+ });
+
+ $("#logout").click(function(event) { //Bind the button with logout id to our logout function
+ logout();
+ });
+
+ $.post("log.php",{},openlogdialog,"json"); //Determine if authentication dialog is currently needed on load
+});
diff --git a/xCAT-web-exp/xcatwebui.css b/xCAT-web-exp/xcatwebui.css
new file mode 100644
index 000000000..5b2432b53
--- /dev/null
+++ b/xCAT-web-exp/xcatwebui.css
@@ -0,0 +1,68 @@
+span.logstatus {
+ margin-left: 5.5em;
+}
+label {
+ text-align: right;
+ width: 5em;
+ float: left;
+ margin-right: 0.5em;
+ display: block;
+}
+div#header {
+ border-bottom: 1px solid #d3d3d3;
+ vertical-align: middle;
+ top:0;
+ left:0;
+ width:100%;
+ height:1.8em;
+ z-index:2;
+}
+
+#nodetabs {
+ float: left;
+}
+#nodearea {
+ float: left;
+ right: 0;
+}
+#nodepane: {
+ float: left;
+ clear: left;
+}
+#nrtree {
+ float: left;
+ clear: left;
+ border-right: 1px solid #d3d3d3;
+ border-top: 1px solid #d3d3d3;
+ height:100%;
+ width:9.5em;
+}
+#logout {
+ position:absolute;
+ top:0;
+ right:0;
+ margin-left:1em;
+ text-align: center;
+ vertical-align: top;
+}
+.xcatbutton button {
+ margin: .5em .5em .5em 8px;
+ color: #555555;
+ background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
+ font-size: 0.7em;
+ border: 1px solid #d3d3d3;
+ cursor: pointer;
+ padding: .2em .6em .3em .6em;
+ line-height: 1.4em;
+}
+.xcatbutton button:hover {
+ color: #212121;
+ background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
+ border: 1px solid #999999;
+}
+.xcatbutton button:active {
+ color: #222222;
+ background: #ffffff url(images/ffffff_40x100_textures_02_glass_65.png) 0 50% repeat-x;
+ border: 1px solid #dddddd;
+}
+