virgil/commit

CHANGE simplify layout

diff --git a/web/html/virgil.html b/web/html/virgil.html
index 7b34dec..a9a652d 100644
--- a/web/html/virgil.html
+++ b/web/html/virgil.html
@@ -9,7 +9,7 @@
     <link href="css/bootstrap.css" rel="stylesheet">
     <style type="text/css">
       body {
-        padding-top: 20px;
+        padding-top: 60px;
         padding-bottom: 40px;
       }
 
@@ -36,14 +36,6 @@
         padding: 14px 24px;
       }
 
-      /* Supporting marketing content */
-      .marketing {
-        margin: 60px 0;
-      }
-      .marketing p + h4 {
-        margin-top: 28px;
-      }
-
 	/* search form */
 	#search {
 		font-size: 30px;
@@ -57,21 +49,13 @@
 
     <div class="container-narrow">
 
-      <div class="masthead">
-        <ul class="nav nav-pills pull-right">
-          <li class="active"><a href="#">Home</a></li>
-          <li><a href="#">About</a></li>
-          <li><a href="#">Contact</a></li>
-        </ul>
-        <h3 class="muted">Virgil</h3>
-      </div>
-
-      <hr>
-
       <div class="jumbotron">
-        <h1>Adverse event mining made easy</h1>
-        <p class="lead">Virgil is a step-by-step wizard to compute disproportionality measurements for drug-reaction pairs.
-		Start by entering a drug name.
+        <h1>Virgil</h1>
+		<h3>Pharmacovigilance made easy!</h3>
+        <p class="lead">Virgil is a step-by-step wizard to compute disproportionality measurements for adverse events of drugs.
+			It uses the open data from the <a href="http://www.fda.gov/Drugs/GuidanceComplianceRegulatoryInformation/Surveillance/AdverseDrugEffects/default.htm">FDA Adverse Event Reporting System</a> (FAERS). 
+		</p>
+		<p>Start by entering a drug name.
 		</p>
 		<form action="html/wizard.html" class="form-search">
 			<input type="text" id="search" class="input-xlarge search-query" name="drug">
@@ -81,34 +65,8 @@
 
       <hr>
 
-      <!--div class="row-fluid marketing">
-        <div class="span6">
-          <h4>Subheading</h4>
-          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
-
-          <h4>Subheading</h4>
-          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
-
-          <h4>Subheading</h4>
-          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-        </div>
-
-        <div class="span6">
-          <h4>Subheading</h4>
-          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
-
-          <h4>Subheading</h4>
-          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
-
-          <h4>Subheading</h4>
-          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-        </div>
-      </div-->
-
-      <hr>
-
-      <!--div class="footer">
-        <p>&copy; Company 2013</p>
+      <div class="footer">
+        <p>&copy; <a href="http://www.data2semantics.org/">Data2Semantics 2013</p>
       </div-->
 
     </div> <!-- /container -->
diff --git a/web/html/wizard.html b/web/html/wizard.html
index f3c95f5..94ebf1c 100644
--- a/web/html/wizard.html
+++ b/web/html/wizard.html
@@ -23,6 +23,9 @@
 		.labelbox .badge {
 			float: right;
 		}
+		.sidebar {
+			margin-top: 10px;
+		}
 	</style>
 
   </head>
@@ -47,7 +50,7 @@
 		<div id="wizard" class="wizard">
 			<ul class="steps">
 				<!--li data-target="#reports" class="active"><span class="badge badge-info">1</span>Reports<span class="chevron"></span></li-->
-				<li data-target="#drugs" class="active"><span class="badge">1</span>Drug names<span class="chevron"></span></li>
+				<li data-target="#drugs" class="active"><span class="badge">1</span>Drug mentions<span class="chevron"></span></li>
 				<li data-target="#reactions"><span class="badge">2</span>Reactions<span class="chevron"></span></li>
 				<li data-target="#measurements"><span class="badge">3</span>Measurements<span class="chevron"></span></li>
 			</ul>
@@ -63,91 +66,70 @@
 			</div-->	
 			
 			<div class="step-pane active" id="drugs">
-				<h3>Drug names</h3>
+				<h4>Select drug mentions</h4>
+			
+				<div class="row">
+			
+					<div class="span3 sidebar">
+						<ul id="drug-selection" class="nav nav-tabs nav-stacked">
+							<li><a href="#mentions">Drug names</a></li>
+							<li><a href="#brands">Brand names</a></li>
+							<li><a href="#synonyms">Synonyms</a></li>
+							<li><a href="#spelling">Spelling</a></li>
+						</ul>	
+					</div>
 
-				<div class="accordion" id="accordion">
-					
-					<div class="accordion-group">
-				    	<div class="accordion-heading">
-							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#mentions">
-				        		<h4>Select drug mentions</h4>
-				      		</a>
-				    	</div>
-						<div id="mentions" class="accordion-body collapse in">
-				      		<div class="accordion-inner">
-								<div class="btn-group">
-									<button class="btn" data-toggle="select" data-toggle-name="mention-labels">select all</button>
-									<button class="btn" data-toggle="unselect" data-toggle-name="mention-labels">unselect all</button>
-								</div>
-				        		<div class="labelbox" name="mention-labels"></div>
-				      		</div>
-				    	</div>
-				  	</div>
+					<div class="span9">
 
-					<div class="accordion-group">
-				    	<div class="accordion-heading">
-							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#brands">
-				        		<h4>Select brand names</h4>
-				      		</a>
-				    	</div>
-						<div id="brands" class="accordion-body collapse">
-				      		<div class="accordion-inner">
-								<div class="btn-group">
-									<button class="btn" data-toggle="select" data-toggle-name="brand-labels">select all</button>
-									<button class="btn" data-toggle="unselect" data-toggle-name="brand-labels">unselect all</button>
-								</div>
-								<ul id="brand-list"></ul>
-				        		<div class="labelbox" name="brand-labels"></div>
-				      		</div>
-				    	</div>
-				  	</div>
-				
+ 						<h5>Drug names</h5>
+						<div id="mentions">
+							<div class="btn-group">
+								<button class="btn" data-toggle="select" data-toggle-name="mention-labels">select all</button>
+								<button class="btn" data-toggle="unselect" data-toggle-name="mention-labels">unselect all</button>
+							</div>
+							<div class="labelbox" name="mention-labels"></div>
+						</div>
+
+						<h5>Brand names</h5>
+						<div id="brands">
+							<div class="btn-group">
+								<button class="btn" data-toggle="select" data-toggle-name="brand-labels">select all</button>
+								<button class="btn" data-toggle="unselect" data-toggle-name="brand-labels">unselect all</button>
+							</div>
+							<ul id="brand-list"></ul>
+							<div class="labelbox" name="brand-labels"></div>
+						</div>
 				
-					<div class="accordion-group">
-				    	<div class="accordion-heading">
-							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#synonyms">
-				        		<h4>Select synonyms</h4>
-				      		</a>
-				    	</div>
-						<div id="synonyms" class="accordion-body collapse">
-				      		<div class="accordion-inner">
-								<div class="btn-group">
-									<button class="btn" data-toggle="select" data-toggle-name="synonym-labels">select all</button>
-									<button class="btn" data-toggle="unselect" data-toggle-name="synonym-labels">unselect all</button>
-								</div>
-				        		<div class="labelbox" name="synonym-labels"></div>
-				      		</div>
-				    	</div>
-				  	</div>
+			 			<h5>Drug synonyms</h5>
+						<div id="synonyms">
+							 <div class="btn-group">
+								<button class="btn" data-toggle="select" data-toggle-name="synonym-labels">select all</button>
+								<button class="btn" data-toggle="unselect" data-toggle-name="synonym-labels">unselect all</button>
+							</div>
+			        		<div class="labelbox" name="synonym-labels"></div>
+		      			</div>
+						
+						<h5>Spelling variations</h5>
+						<div id="spelling">
+							<div class="btn-group">
+								<button class="btn" data-toggle="select" data-toggle-name="spelling-labels">select all</button>
+								<button class="btn" data-toggle="unselect" data-toggle-name="spelling-labels">unselect all</button>
+							</div>
+			        		<div class="labelbox" name="spelling-labels"></div>
+			      		</div>
 				
-					<div class="accordion-group">
-				    	<div class="accordion-heading">
-							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#spelling">
-				        		<h4>Select spelling variations</h4>
-				      		</a>
-				    	</div>
-						<div id="spelling" class="accordion-body collapse">
-				      		<div class="accordion-inner">
-								<div class="btn-group">
-									<button class="btn" data-toggle="select" data-toggle-name="spelling-labels">select all</button>
-									<button class="btn" data-toggle="unselect" data-toggle-name="spelling-labels">unselect all</button>
-								</div>
-				        		<div class="labelbox" name="spelling-labels"></div>
-				      		</div>
-				    	</div>
-				  	</div>
-
+					</div>
+					
 				</div>
-				
 			</div>
 			
 			<div class="step-pane" id="reactions">
-				<h3>Reactions</h3>
+				<h4>Select reactions</h4>
 				<div class="labelbox"></div>
 			</div>
 			
 			<div class="step-pane" id="measurements">
-				<h3>Measurements</h3>
+				<h4>Select measurements</h4>
 				<table class="table">
 					<thead><tr><th>Reaction</th><th>PRR</th></tr></thead>
 					<tbody></tbody>
@@ -197,7 +179,7 @@
 					success: function(o) {
 						$(o).each(function(i, e) {
 							labelbox.append(
-								'<label class="checkbox"><input type="checkbox" value="'+e.name+'">'
+								'<label class="checkbox"><input type="checkbox" value="'+e.name+'" checked>'
 								+e.name+'<span class="badge">'+e.reports+'</span></label>');
 						});
 					}
@@ -262,38 +244,29 @@
 				});
 			});
 			
+			$("#drug-selection a").on("click", function() {
+				//$($(this).attr('href')).collapse('show');
+				
+			});
+			
 			var drug = getURLParameter("drug");
 			$("#drug").html(drug);
 			$('#mentions').updateDrugNames([drug]);
-
-			$('#brands').on('show', function() {
-				var brandlist = $('#brand-list');
-				
-				if(!$('#brands').find('.labelbox').html()) {
-					$.ajax(brandsURL, {
-						dataType:"json",
-						data:{q:drug},
-						success: function(o) {
-							$(o).each(function(i,e) {
-								brandlist.append('<li><a href="#">'+e+'</a></li>');
-							});
-							$('#brands').updateDrugNames(o);
-						}
+			$.ajax(brandsURL, {
+				dataType:"json",
+				data:{q:drug},
+				success: function(o) {
+					$(o).each(function(i,e) {
+						$('brand-list').append('<li><a href="#">'+e+'</a></li>');
 					});
-					
+					$('#brands').updateDrugNames(o);
 				}
 			});
-			
-			$('#synonyms').on('show', function() {
-				if(!$('#synonyms').find('.labelbox').html()) {
-					$.ajax(synonymsURL, {
-						dataType:"json",
-						data:{q:drug},
-						success: function(o) {
-							$('#synonyms').updateDrugNames(o);
-						}
-					});
-					
+			$.ajax(synonymsURL, {
+				dataType:"json",
+				data:{q:drug},
+				success: function(o) {
+					$('#synonyms').updateDrugNames(o);
 				}
 			});