StoryId 778896:Centralizaed Javascript

Committed by: Jarrett Jordaan Reviewed by: Megan Watson

StoryId 778896:Centralizaed Javascript
Committed by: Jarrett Jordaan Reviewed by: Megan Watson
Jarrett Jordaan
1 parent fa2790b7
Showing 7 changed files with 320 additions and 145 deletions
setup/wizard/installer.php
setup/wizard/resources/wizard.css
setup/wizard/resources/wizard.js
setup/wizard/step_action.php
setup/wizard/steps/database.php
setup/wizard/templates/database.tpl
setup/wizard/templates/wizard.tpl
@@ -457,6 +457,12 @@ class Installer {
 				$class->setDataFromSession($className); // Set Session Information
 				$class->setDBConfig(); // Set any posted variables
 				$response = $class->installStep(); // Run install step
+				echo "$className==$response<br/>";
+				echo "<pre>";print_r($_SESSION['database']);echo "</pre>";
+//				echo $response;
+//				if($response == 'error') {
+//					return $this->landing();
+//				}
 	    	}
     	} else {
     		die("$className : Class Files Missing");
@@ -118,8 +118,8 @@ td {
 .indicator {
     background: url("graphics/indicator.png") no-repeat;
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
     padding-left: 20px;
 }
@@ -129,35 +129,35 @@ td {
 .active {
     background: url("graphics/active.png") no-repeat;
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
     padding-left: 20px;
 }
 .inactive {
     background: url("graphics/inactive.png") no-repeat;
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
     padding-left: 20px;
     color: #919191;
 }
 .tick {
     background: url("graphics/tick.png") no-repeat;
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
 }
 .cross {
     background: url("graphics/cross.png") no-repeat;
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
 }
 .cross_orange {
     background: url("graphics/cross_orange.png") no-repeat;
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
 }
 .green {
@@ -232,3 +232,19 @@ td {
 .right_top {
     height:45px;
 }
+
+table#dbconf tr td {
+	width:50%;
+}
+
+input#dname {
+	size:40px;
+}
+
+.options {
+	width:15%;
+}
+
+.adv_options {
+	padding: 5px 8px;
+}
 \ No newline at end of file
+// Class Wizard
+function wizard() {	
+}
+
+// Does a form check on every new page load
+wizard.prototype.doFormCheck = function() {
+	w.addReadOnly();	
+}
+
+// Disable DnD on element
+// Element has to have a readOnly status set to readonly
+wizard.prototype.disableDnd = function(el_id) {
+    el = document.getElementById(el_id);
+    el.removeAttribute('readOnly');
+}
+
+// Add readOnly access on all inputs of a form
+wizard.prototype.addReadOnly = function() {
+	inputs = document.getElementsByTagName('input');
+	for(i=0;i<inputs.length;i++) {
+		var input_id = inputs[i].id;
+		if(input_id != '') {
+//    		inputs[i].setAttribute('readOnly', 'readonly');
+//    		inputs[i].setAttribute('onfocus', "javascript:{w.disableDnd('"+ input_id +"')}");
+//    		inputs[i].focus();
+//    		w.focusElement(inputs[i]);
+		}
+	}
+}
+
+// Toggle Advance Database options
+wizard.prototype.showAO = function() {
+	var el = document.getElementsByClassName("adv_options");
+	if(el[0].style.display == 'none')
+	    el[0].style.display = 'block';
+	else
+	    el[0].style.display = 'none';
+}
+
+// Toggle display of an element
+wizard.prototype.toggleElement = function(el) {
+    if(el.style.display == 'none')
+        el.style.display = 'block';
+    else
+        el.style.display = 'none';
+}
+
+// Handle steps within database page
+ wizard.prototype.showStep = function(p, d) {
+	// Don't check if previous is clicked
+	if(d != 'p') {
+    	// Check for errors
+    	var ueq = 0;
+    	if(p == 2) {
+    		ueq = w.validateUsers('dmsname', 'dmspassword', 'dmspassword2');
+    	} else if(p == 3) {
+    		ueq = w.validateUsers('dmsusername', 'dmsuserpassword', 'dmsuserpassword2');
+    	}
+    	if(ueq != 0) {
+    		return w.display("error_"+ ueq + "_" + p) ;
+    	}
+	}
+	w.hideErrors(); // If theres no errors, hide the ones displaying
+	var el = document.getElementsByClassName("step"+p);
+	el[0].style.display = 'none';
+	if(d == "n") {
+		var j = p+1;
+	} else if(d == "p") {
+		var j = p-1;
+	}
+	var el = document.getElementsByClassName("step"+j);
+	el[0].style.display = 'block';
+	
+	return true;
+}
+
+// Validate Users
+ wizard.prototype.validateUsers = function(id1, id2, id3) {
+	var el1 = document.getElementById(id1);
+	var el2 = document.getElementById(id2);
+	var el3 = document.getElementById(id3);
+	var elVal1 = el1.value;
+	var elVal2 = el2.value;
+	var elVal3 = el3.value;
+	if(elVal1 == '') { // User name empty 
+		w.focusElement(el1);
+		return 1;
+	} else if(elVal2 == '') { // Empty Password
+		w.focusElement(el2);
+		return 2;
+	} else if(elVal3 == '') { // Empty Confirmation Password
+		w.focusElement(el3);
+		return 3;
+	} else if(elVal2 != elVal3) { // Passwords not equal
+		w.focusElement(el2);
+		return 4;
+	} else {
+		return 0;
+	}
+}
+
+// Display Errors
+wizard.prototype.display = function(elname, er) {
+	var el = document.getElementById(elname);
+	w.showElement(el);
+}
+
+// Hide Errors
+wizard.prototype.hideErrors = function() {
+	var errors = document.getElementsByClassName('error');
+	var i;
+	for(i=0;i<errors.length;i++) {
+		w.hideElement(errors[i]);
+	}
+	return true;
+}
+
+// Hide an element
+wizard.prototype.hideElement = function(el) {
+	if(el.style.display == 'block')
+		el.style.display = 'none';
+}
+
+// Show an element
+wizard.prototype.showElement = function(el) {
+	if(el.style.display == 'none')
+		el.style.display = 'block';
+}
+
+// Focus on element
+wizard.prototype.focusElement = function(el) {
+	el.focus();
+}
+
+// Catch form submit and validate
+wizard.prototype.onSubmitValidate = function() {
+	var response = w.showStep(3, 'n');
+	if(response == true) {
+		document.getElementById('sendAll').name = 'Next'; // Force the next step
+		document.getElementById('sendAll').value = 'next';
+		document.getElementById('dbsettings').submit();
+	}
+}
 \ No newline at end of file
@@ -333,7 +333,6 @@ class stepAction {
             	$this->loadValueToSession($this->stepName, $key, $value);
             }
         }
-
         $content = $step_tpl->fetch();
 		$tpl = new Template("templates/wizard.tpl");
 		$tpl->set('content', $content);
@@ -292,11 +292,11 @@ class database extends Step
 	*/
     public function doTest() {
     	if($this->match($this->dmspassword, $this->getPassword1()) != 0) {
-    		$this->error = array("19"=>"Passwords do not match: " . $this->dmspassword." ". $this->getPassword1());
+    		$this->error[] = "Passwords do not match: " . $this->dmspassword." ". $this->getPassword1();
     		return false;
     	}
     	if($this->match($this->dmsuserpassword, $this->getPassword2()) != 0) {
-    		$this->error = array("17"=>"Passwords do not match: " . $this->dmsuserpassword." ". $this->getPassword2());
+    		$this->error[] = "Passwords do not match: " . $this->dmsuserpassword." ". $this->getPassword2();
     		return false;
     	}
     	if($this->dport == '') 
@@ -304,7 +304,7 @@ class database extends Step
     	else 
     		$con = $this->dbhandler->DBUtil($this->dhost.":".$this->dport, $this->duname, $this->dpassword, $this->dname);
         if (!$con) {
-            $this->error = array("1"=>"Could not connect: " . $this->dbhandler->getErrors());
+            $this->error[] = "Could not connect: " . $this->dbhandler->getErrors();
             return false;
         } else {
             return true;
@@ -500,7 +500,9 @@ class database extends Step
     		$this->error[] = 'No database type selected';
     		return 'error';
     	}
-        $this->{$this->dtype}();
+        if(!$this->{$this->dtype}()) {
+        	return 'error';
+        }
     }
 	/**
@@ -515,7 +517,7 @@ class database extends Step
         $con = $this->connectMysql();
         if($con) {
             if(!$this->createDB($con)) {
-            	$this->error = array("20"=>"Could Create Database: " . $this->dbhandler->getErrors());
+            	$this->error[] = "Could not Create Database: " . $this->dbhandler->getErrors();
             	return false;
             }
             $this->closeMysql($con);
@@ -533,7 +535,7 @@ class database extends Step
     private function connectMysql() {
 		$con = $this->dbhandler->DBUtil($this->dhost, $this->duname, $this->dpassword, $this->dname);
         if (!$con) {
-            $this->error = array("2"=>"Could not connect: " . $this->dbhandler->getErrors());
+            $this->error[] = "Could not connect: " . $this->dbhandler->getErrors();
             return false;
         }
@@ -553,31 +555,32 @@ class database extends Step
 		if($this->usedb($con)) { // attempt to use the db
 		    if($this->dropdb($con)) { // attempt to drop the db
 		        if(!$this->create($con)) { // attempt to create the db
-					$this->error = array("15"=>"Could create database: " . $this->dbhandler->getErrors());
+					$this->error[] = "Could create database: " . $this->dbhandler->getErrors();
 					return false;// cannot overwrite database
 		        }
 		    } else {
-		    	$this->error = array("14"=>"Could not drop database: " . $this->dbhandler->getErrors());
+		    	$this->error[] = "Could not drop database: " . $this->dbhandler->getErrors();
 		    	return false;// cannot overwrite database
 		    }
 		} else {
 		    if(!$this->create($con)) { // attempt to create the db
-				$this->error = array("16"=>"Could create database: " . $this->dbhandler->getErrors());
+				$this->error[] = "Could not create database: " . $this->dbhandler->getErrors();
 				return false;// cannot overwrite database
 		    }
 		}
 		if(!$this->createDmsUser($con)) {
-			// TODO:Way to catch errors
+			
 		}
 		if(!$this->createSchema($con)) {
-			// TODO:Way to catch errors
+			$this->error[] = "Could not create schema ";
 		}
 		if(!$this->populateSchema($con)) {
-			// TODO:Way to catch errors
+			$this->error[] = "Could not populate schema ";
 		}
 		if(!$this->applyUpgrades($con)) {
-			// TODO:Way to catch errors
+			$this->error[] = "Could not apply updates ";
 		}
+		
 		return true;
     }
@@ -611,7 +614,7 @@ class database extends Step
 		if($this->dbhandler->useBD($this->dname)) {
             return true;
         } else {
-            $this->error = array("4"=>"Error using database: ".$this->dbhandler->getErrors()."");
+            $this->error[] = "Error using database: ".$this->dbhandler->getErrors();
             return false;
         }
     }
@@ -628,11 +631,11 @@ class database extends Step
         if($this->ddrop) {
             $sql = "DROP DATABASE {$this->dname};";
 			if(!$this->dbhandler->query($sql)) {
-                $this->error = array("5"=>"Cannot drop database: ".$this->dbhandler->getErrors()."");
+                $this->error[] = "Cannot drop database: ".$this->dbhandler->getErrors();
                 return false;
             }
         } else {
-            $this->error = array("6"=>"Cannot drop database: ".$this->dbhandler->getErrors()."");
+            $this->error[] = "Cannot drop database: ".$this->dbhandler->getErrors();
             return false;
         }
         return true;
@@ -649,14 +652,15 @@ class database extends Step
     private function createDmsUser($con) {
     	if($this->dmsname == '' || $this->dmspassword == '') {
         	$command = "{$this->dbbinary} -u{$this->duname} -p{$this->dpassword} {$this->dname} < sql/user.sql";
-        	return exec($command, $output);
+        	exec($command, $out, $ret);
+        	return $ret;
     	} else {
 			$user1 = "GRANT SELECT, INSERT, UPDATE, DELETE ON {$this->dname}.* TO {$this->dmsusername}@{$this->dhost} IDENTIFIED BY \"{$this->dmsuserpassword}\";";
 			$user2 = "GRANT ALL PRIVILEGES ON {$this->dname}.* TO {$this->dmsname}@{$this->dhost} IDENTIFIED BY \"{$this->dmspassword}\";";
 			if ($this->dbhandler->execute($user1) && $this->dbhandler->execute($user2)) {
             	return true;
         	} else {
-        		$this->error = array("18"=>"Could not create users in database: ".$this->dbhandler->getErrors()."");
+        		$this->error[] = "Could not create users in database: ".$this->dbhandler->getErrors();
         		return false;
         	}
 		}
@@ -673,7 +677,8 @@ class database extends Step
 	*/
     private function createSchema($con) {
         $command = "{$this->dbbinary} -u{$this->duname} -p{$this->dpassword} {$this->dname} < sql/structure.sql";
-        return exec($command, $output);
+    	exec($command, $out, $ret);
+    	return $ret;
     }
 	/**
@@ -686,7 +691,8 @@ class database extends Step
 	*/
     private function populateSchema($con) {
         $command = "{$this->dbbinary} -u{$this->duname} -p{$this->dpassword} {$this->dname} < sql/data.sql";
-        return exec($command, $output);
+    	exec($command, $out, $ret);
+    	return $ret;
     }
     private function applyUpgrades($con) {
@@ -708,7 +714,7 @@ class database extends Step
         try {
             $this->dbhandler->close();
         } catch (Exeption $e) {
-            $this->error = array("13"=>"Could not close: " . $e);
+            $this->error[] = "Could not close: " . $e;
         }
     }
@@ -724,5 +730,38 @@ class database extends Step
         return $this->error;
     }
+    
+	/**
+	* Test database connectivity
+	*
+	* @author KnowledgeTree Team
+	* @param none
+	* @access public
+	* @return boolean
+	*/
+    public function doAjaxTest($host, $uname, $dname) {
+    	echo 'asd';
+    	die;
+    	if($this->dport == '') 
+    		$con = $this->dbhandler->DBUtil($this->dhost, $this->duname, $this->dpassword, $this->dname);
+    	else 
+    		$con = $this->dbhandler->DBUtil($this->dhost.":".$this->dport, $this->duname, $this->dpassword, $this->dname);
+        if (!$con) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+    
+    public function setPostValues() {
+    	foreach ($_POST as $k=>$v) {
+    		echo "$k=>$v<br/>";
+    	}
+    }
+}
+
+if(isset($_POST['ajax'])) {
+	$db = new database();
+	$db->setPostValues();
 }
 ?>
 \ No newline at end of file
 <h1>Database Configuration</h1>
+<!--onclick="javascript:{ldelim}disableDnd('input_period');{rdelim}" readOnly="readonly"-->
 <div class="errors">
     <?php if(isset($errors)) {
@@ -8,82 +9,66 @@
     }?>
 </div>
-<form action="index.php?step_name=<?php echo $step_name; ?>" method="post">
-
+<form id="dbsettings" action="index.php?step_name=<?php echo $step_name; ?>" method="post" onsubmit="w.onSubmitValidate();return false;">
+<!--Hidden Fields-->
+<input type="hidden" id='ddrop' name="ddrop" <?php echo ($ddrop) ? 'CHECKED' : ''; ?>/>
+<input type="hidden" id="sendAll" name="" value="" />
 <!-- STEP 1 of the database configuration - server settings -->
 <div id="database" class="step1" style="display:block;">
-<div class="description">
-This step configures the connection to the database server and installs the database. The details for an administrative user on the database
-server are required in order to be able to configure and install the installation database.
-</div>
-
-	Select your database type:
-	<div class="dtype">
+	<div class="description">
+	This step configures the connection to the database server and installs the database. The details for an administrative <br/>
+	user on the database server are required in order to be able to configure and install the installation database.
+	</div>
+	<table class="dbconf">
+	    <tr><td>Your current database type is: </td>
 		<?php if($dtypes) {
 		        foreach($dtypes as $k=>$v) {
-		    ?>
-		        <input type="radio" name="dtype" value="<?php echo $v; ?>" <?php if(!$k)echo 'checked="checked"'; ?>/>&nbsp;&nbsp;<?php echo ucwords($v); ?>
-		        <br/>
+		    ?><td><input type="hidden" name="dtype" value="<?php echo $v; ?>" <?php if(!$k)echo 'checked="checked"'; ?>/>&nbsp;&nbsp;<?php echo ucwords($v); ?></td>
 		<?php }
 		}
 		?>
-	</div>
-<p>
-	<table>
-	    <tr>
-	        <td width="60%"><label for='dname'>Enter a name for the database: </label></td>
-	        <td><input type='text' value="<?php echo $dname?>" id='dname' name='dname' size='40' /></td>
-	    </tr>
-	    <tr>
-	        <td><label for='duname'>Enter the username for the Root or Administrative User: </label></td>
-	        <td><input type='text' value="<?php echo $duname?>" id='duname' name='duname' size='40' /></td>
-	    </tr>
-	    <tr>
-	        <td><label for='dpassword'>Enter the password for the user: </label></td>
-	        <td><input type='password' value="<?php echo $dpassword?>" id='dpassword' name='dpassword' size='40' /></td>
-	    </tr>
-	    <tr>
-	        <td><label for='ddrop'>Drop database if it exists:  </label></td>
-	        <td><input type="checkbox" id='ddrop' name="ddrop" <?php echo ($ddrop) ? 'CHECKED' : ''; ?>/></td>
+		</tr>
+		    <tr>
+		        <td><label for='dname'>Enter a name for the database: </label></td>
+		        <td><input type='text' value="<?php echo $dname?>" id='dname' name='dname' size='40'/></td>
+		    </tr>
+		    <tr>
+		        <td><label for='duname'>Enter the username for the Root or Administrative User: </label></td>
+		        <td><input type='text' value="<?php echo $duname?>" id='duname' name='duname' size='40' /></td>
+		    </tr>
+		    <tr>
+		        <td><label for='dpassword'>Enter the password for the user: </label></td>
+		        <td><input type='password' value="<?php echo $dpassword?>" id='dpassword' name='dpassword' size='40' /></td>
+		    </tr>
 	</table>
-	<br />
-</p>
-	<div id="options" class="onclick" onclick="showAO();">Advanced Options</div>
+	<div id="options" class="onclick" onclick="javascript:{w.showAO();}">Advanced Options</div>
 	<div id="database" class="adv_options" style="display:none;">
 	    <div class="description">
 	        These options are only necessary for some sites. If you're not sure what you should enter here, leave the default settings.
 	    </div>
-
-
 	    <p>
 	    <label for='dhost'>Host: </label><br />
-	    <span class="description">The address of the server where the database is located, if different to the current server.</span><br />
+	    <span class="description">The address of the server where the database is located, if different to the current server.</span><br/>
 	    <input type="text" value="<?php echo $dhost?>" id="dhost" name="dhost" size='60'/>
 	    </p>
 	    <p>
 	    <label for='dport'>Port: </label><br />
-	    <span class="description">The port on which your database server is listening, if it is a non-standard port please enter the number here.</span><br />
+	    <span class="description">The port on which your database server is listening, if it is a non-standard port please enter the number here.</span><br/>
 	    <input type="text" value="<?php echo $dport?>" id="dport" name="dport" size='10'/>
 	    </p>
 	    <p>
-	    <label for='dbbinary'>Binary: </label><br />
-	    <span class="description">The path to the database binary. If it is not on your system path then please enter it here.</span><br />
+	    <label for='dbbinary'>Socket: </label><br />
+	    <span class="description">The path to the database binary. If it is not on your system path then please enter it here.</span><br/>
 	    <input type="text" value="<?php echo $dbbinary?>" id="dbbinary" name="dbbinary" size='60'/>
 	    </p>
-
-	    <p>
-	    <label for='tprefix'>Table Prefix: </label><br />
-	    <span class="description">Used to differentiate between different applications sharing the same database. If more than one application will be sharing this database, enter a table prefix such as kt_ for your KnowledgeTree installation here.</span><br />
-	    <input type="text" value="<?php echo $tprefix?>" id="tprefix" name="tprefix" size='60'/>
-	    </p>
 	</div>
 	<div class="buttons">
 	    <input type="submit" name="Previous" value="previous" />
-	    <input type="button" name="Next" value="next" onclick="showStep(1, 'n');"/>
+	    <input type="button" name="Next" value="next" onclick="javascript:{w.showStep(1, 'n');}"/>
 	</div>
 </div>
@@ -92,25 +77,28 @@ server are required in order to be able to configure and install the installatio
 <div class="description">
 An administrative user is required for creating tables within the database.
 </div>
-
-	<table>
+	<table class="dbconf">
 	    <tr>
-	        <td width="60%"><label for='dmsname'>Enter the name of the Database Administrative User: </label></td>
+	        <td><label for='dmsname'>Enter the name of the Database Administrative User: </label></td>
 	        <td><input type='text' value="<?php echo $dmsname; ?>" id='dmsname' name='dmsname' size='40' /></td>
+	        <td id="error_1_2" class="error" style="display:none">Please Enter A Username</td>
 		</tr>
 	    <tr>
 	        <td><label for='dmspassword'>Enter a password: </label></td>
 	        <td><input type='password' value="<?php echo $dmspassword; ?>" id='dmspassword' name='dmspassword' size='40' /></td>
+	        <td id="error_2_2" class="error" style="display:none">Please Enter A Password</td>
 		</tr>
 	    <tr>
 	        <td><label for='dmspassword2'>Please confirm the password: </label></td>
 	        <td><input type='password' value="" id='dmspassword2' name='dmspassword2' size='40' /></td>
+	        <td id="error_3_2" class="error" style="display:none">Please Confirm Password</td>
+	        <td id="error_4_2" class="error" style="display:none">Passwords Do Not Match</td>
 		</tr>
 	</table>
 	<div class="buttons">
-	    <input type="button" name="Previous" value="previous" onclick="showStep(2, 'p');"/>
-	    <input type="button" name="Next" value="next" onclick="showStep(2, 'n');"/>
+	    <input type="button" name="Previous" value="previous" onclick="javascript:{w.showStep(2, 'p');}"/>
+	    <input type="button" name="Next" value="next" onclick="javascript:{w.showStep(2, 'n');}"/>
 	</div>
 </div>
@@ -120,46 +108,28 @@ An administrative user is required for creating tables within the database.
 An second user is required for normal database interaction, the reading and writing of data.
 </div>
-	<table>
+	<table class="dbconf">
 	    <tr>
-	        <td width="60%"><label for='dmsusername'>Enter a name for the User: </label></td>
+	        <td><label for='dmsusername'>Enter a name for the User: </label></td>
 	        <td><input type='text' value="<?php echo $dmsusername; ?>" id='dmsusername' name='dmsusername' size='40' /></td>
+	        <td id="error_1_3" class="error" style="display:none">Please Enter A Username</td>
 		</tr>
 	    <tr>
 	        <td><label for='dmsuserpassword'>Enter a password: </label></td>
 	        <td><input type='password' value="<?php echo $dmsuserpassword?>" id='dmsuserpassword' name='dmsuserpassword' size='40' /></td>
+	        <td id="error_2_3" class="error" style="display:none">Please Enter A Password</td>
 		</tr>
 	    <tr>
 	        <td><label for='dmsuserpassword2'>Please confirm the password: </label></td>
 	        <td><input type='password' value="" id='dmsuserpassword2' name='dmsuserpassword2' size='40' /></td>
+	        <td id="error_3_3" class="error" style="display:none">Please Confirm Password</td>
+	        <td id="error_4_3" class="error" style="display:none">Passwords Do Not Match</td>
 		</tr>
 	</table>
 		<div class="buttons">
-	    <input type="button" name="Previous" value="previous" onclick="showStep(3, 'p');"/>
-	    <input type="submit" name="Next" value="next"/>
+	    <input type="button" name="Previous" value="previous" onclick="javascript:{w.showStep(3, 'p');}"/>
+<!--	    <input type="button" name="Next" value="next" onclick="showStep(3, 'n');"/>-->
+		<input type="submit" name="Next" value="next" />
 	</div>
 </div>
-
-</form>
-<script type="text/javascript">
-// Toggle Advance Database options
-    function showAO() {
-        var el = document.getElementsByClassName("adv_options");
-        if(el[0].style.display == 'none')
-            el[0].style.display = 'block';
-        else
-            el[0].style.display = 'none';
-    }
-// Handle steps within database page
-    function showStep(p, d) {
-    	var el = document.getElementsByClassName("step"+p);
-    	el[0].style.display = 'none';
-    	if(d == "n") {
-    		var j = p+1;
-    	} else if(d == "p") {
-    		var j = p-1;
-    	}
-    	var el = document.getElementsByClassName("step"+j);
-    	el[0].style.display = 'block';
-    }
-</script>
 \ No newline at end of file
+</form>
 \ No newline at end of file
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
-<head>
-	<title>KnowledgeTree Installer</title>
-	<link rel="stylesheet" type="text/css" href="resources/wizard.css" />
-</head>
-
-<body>
-
-<div id="outer-wrapper">
-    <div id="header">
-        <div class="logo"></div>
-    </div>
-
-    <div id="wrapper">
-        <div id="container">
-            <div id="content">
-                <?php echo $content; ?>
-            </div>
-        </div>
-
-        <div id="sidebar">
-            <?php echo $left; ?>
-        </div>
-        <div class="clearing">&nbsp;</div>
-    </div>
-
-    <div id="footer">
-        <div class="powered-by"></div>
-    </div>
-</div>
-
-</body>
-</html>
 \ No newline at end of file
+	<head>
+		<title>KnowledgeTree Installer</title>
+		<link rel="stylesheet" type="text/css" href="resources/wizard.css" />
+		<script type="text/javascript" src="resources/wizard.js"></script>
+	</head>
+	<body onload="w.doFormCheck();">
+		<div id="outer-wrapper">
+		    <div id="header">
+		        <div class="logo"></div>
+		    </div>
+		
+		    <div id="wrapper">
+		        <div id="container">
+		            <div id="content">
+		                <?php echo $content; ?>
+		            </div>
+		        </div>
+		
+		        <div id="sidebar">
+		            <?php echo $left; ?>
+		        </div>
+		        <div class="clearing">&nbsp;</div>
+		    </div>
+		
+		    <div id="footer">
+		        <div class="powered-by"></div>
+		    </div>
+		</div>
+	</body>
+</html>
+<script>
+	var w = new wizard();
+	w.disableDnd();
+</script>
 \ No newline at end of file