From e97c2c4eb4ba21b78159dee53135ace21bd3d462 Mon Sep 17 00:00:00 2001
From: Jouni Koivuviita <jouni.koivuviita@itmill.com>
Date: Fri, 9 Apr 2010 06:11:44 +0000
Subject: [PATCH] New rough start for demo/package-index page.

svn changeset:12403/svn branch:6.3
---
 WebContent/index.html | 158 +++++++++++++++++++-----------------------
 1 file changed, 73 insertions(+), 85 deletions(-)

diff --git a/WebContent/index.html b/WebContent/index.html
index 0a09d48bc8..d654530cac 100644
--- a/WebContent/index.html
+++ b/WebContent/index.html
@@ -15,7 +15,6 @@
 			<div id="version">
 				<strong>Version @version@</strong>
 				<a href="release-notes.html" class="release-notes" title="Read the release notes for this Vaadin version">Release Notes &raquo;</a>
-				<span class="version-check">(<a href="http://www.itmill.com/downloads/itmill-toolkit.htm?checkVersion" title="Check if you have the latest Vaadin version (requires Internet connection)">check for latest version</a>)</span>
 			</div>
 		</div> <!-- /header -->
 	
@@ -53,102 +52,46 @@
 					<span class="mask"></span>
 				</div>
 				<h2>Sampler</h2>
-				<p>The Sampler contains examples of all Vaadin core components and their features with example source code available for copy-pasting.</p>
+				<p>The Sampler contains examples of all Vaadin <strong>core components</strong> and their <strong>features</strong> with example <strong>source code available</strong> for copying.</p>
 				<strong class="start">Start Sampler &raquo;</strong>
-				<strong class="new"><em>Notable In This Release</em> &bull;&nbsp;Drag'n'drop &bull;&nbsp;Keyboard Shortcuts &bull;&nbsp;AbsoluteLayout &bull;&nbsp;GWT 2.0</strong>
+				<!--<strong class="new"><em>Notable In This Release</em> &bull;&nbsp;Drag'n'drop &bull;&nbsp;Keyboard&nbsp;Shortcuts &bull;&nbsp;AbsoluteLayout &bull;&nbsp;GWT 2.0</strong>-->
 				</a>
 			</div>
 		</div> <!-- /upfront -->
 		
 		<div id="content">
-			<div id="addons">
-				<h3>Vaadin Add-on Demos</h3>
-				<ul>
-					<li><a href="http://demo.vaadin.com/timeline" title="Open Timeline demo (online)"><img src="demo/img/addons/timeline.png" alt="" /><span><h4>Timeline</h4> Interactive lazy-loading graphs</span></a></li>
-					<li><a href="http://demo.vaadin.com/colorpicker" title="Open ColorPicker demo (online)"><img src="demo/img/addons/colorpicker.png" alt="" /><span><h4>ColorPicker</h4> Cross-browser color picking</span></a></li>
-					<li><a href="http://demo.vaadin.com/chameleontheme" title="Open Cameleon Theme demo (online)"><img src="demo/img/addons/chameleon.png" alt="" /><span><h4>Chameleon Theme</h4>Create your own theme in seconds</span></a></li>
-					<li><a href="http://demo.vaadin.com/jpacontainer" title="Open JPAContainer demo (online)"><img src="demo/img/addons/jpacontainer.png" alt="" /><span><h4> JPAContainer</h4></span></a></li>
-				</ul>
-			</div> <!-- /addons -->
-			
-			<div id="directory-teaser">
-				<a href="http://vaadin.com/directory">
-				<h4>Download these add-ons <em>and hundreds more...</em></h4>
-				<h3>Vaadin Add-on Directory</h3>
-				<p>The Directory collects add-ons for Vaadin in one central on-line repository. It makes them easy to browse, evaluate, download, integrate and buy.</p>
-				<p>Some of the add-ons are Open Source and free &ndash; some require a commercial per developer license.</p>
-				<p>You can also distribute your own add-ons 
-				in the Directory, free or commercial.</p>
-				<span>Go to the Directory at vaadin.com &raquo;</span>
-				</a>
-			</div>
-			
-			<div id="code-examples">
-			<h3>Code Examples</h3>
-				<p>Below are some examples of Vaadin UI code. The applications themselves are useless, but you can see how the actual code looks like by clicking the "sources" links.</p>
-				<ul class="link-list">
-					<li><a class="demoapp" href="HelloWorld/">Hello world</a> &nbsp; (<a href="docs/example-source/com/vaadin/demo/HelloWorld.java.html">sources</a>)</li>
-					<li><a class="demoapp" href="Calc/">Calculator</a> &nbsp; (<a href="docs/example-source/com/vaadin/demo/Calc.java.html">sources</a>)</li>
-					<li><a class="demoapp" href="VaadinTunesLayout/">VaadinTunes &ndash; advanced layout &amp; theme</a> &nbsp; (<a href="docs/example-source/com/vaadin/demo/VaadinTunesLayout.java.html">sources</a>)</li>
-					<li><a class="demoapp" href="Coverflow/">Coverflow &ndash; Flex integration</a> &nbsp; (<a href="docs/example-source/com/vaadin/demo/coverflow">sources</a>)</li>
-					<li><a class="demoapp" href="ReindeerTheme">Reindeer theme &ndash; see available styles</a></li>
-				</ul>
-			</div> <!-- /code-examples -->
-			
-			<div id="getting-started">
-				<h3>Getting Started</h3>
-				<div id="eclipse">
-					<a href="http://www.vaadin.com/eclipse">
-						<h4>Vaadin Eclipse Plugin</h4>
-						<p>The easiest way to start working with Vaadin is to use Eclipse IDE and download the Vaadin Eclipse plugin from our website.</p>
-						<span>How to install the Vaadin Eclipse Plugin &raquo;</span>
-					</a>
-				</div>
-				<div id="tutorial">
-					<h4>Tutorial - Address Book</h4>
-					<p class="tutorial">Read the step-by-step tutorial and learn how to build a simple contact management app.</p>
-					<ul>
-						<li><a href="http://www.vaadin.com/tutorial/">Step-by-step Tutorial &raquo;</a></li>
-						<li><a href="AddressBook/" class="demoapp">See Address Book application &raquo;</a></li>
-					</ul>
-				</div>		
-			</div> <!--/getting-started -->
-			
-			<div id="docs">
-				<h3>Documentation</h3>
-				<p class="documentation">Need help using Vaadin? Look no further. Everything you need to know is here.</p>
-				<ul class="link-list">
-					<li><a href="docs/book-of-vaadin.pdf">Book of Vaadin (manual) &raquo;</a></li>
-					<li><a href="docs/api/index.html">JavaDoc API &raquo;</a></li>
-					<li><a href="http://www.vaadin.com/forum">Discussion Forum &raquo;</a></li>
-				</ul>
-			</div> <!--  /docs -->
-		
-			<div id="support">
-				<div id="open-source">
-					<h4>Open Source Development</h4>
-					<p>Vaadin is developed as an Open Source software and its core is licensed under
-					   the liberal Apache 2.0 License. Commercial licenses that include support are also available.</p>
-		               <ul class="link-list">
-					   <li><a href="http://dev.vaadin.com" title="Open dev.vaadin.com">Developer Website &raquo;</a></li>
-					   <li><a href="license/licensing-guidelines.html">Licensing Guidelines &raquo;</a></li>
-					</ul>
-				</div>
-				<div id="pro">
-					<h4>Support &amp; Services</h4>
-					<p>The commercial products complement Vaadin and make it possible for you to get better results quicker &ndash; both from a development perspective as well as from a business perspective.</p>
-					<p>We are also glad to help you hands on or even do the work for you &ndash; which ever you prefer.</p>
-					<p>Read more about the <a href="http://www.vaadin.com/services/">Services</a> or the <a href="http://www.vaadin.com/support/">Support</a> alternatives.</p>
-				</div>
-			</div> <!-- /support -->
 		
+			<h3 class="reasons">More Reasons to Choose Vaadin</h3>
+			
+			<ul id="reasons">
+				<li id="programming-model">
+					<h4 title="Write Java">Programming Model</h4>
+					<h5>Server side Java Only</h5>
+					<p>Forget about the client and RPC, you're only working with the server-side code. This separates Vaadin from similar client oriented Java frameworks such as GWT.</p>
+				</li>
+				<li id="theming">
+					<h4 title="Themes">Flexible Theming</h4>
+				</li>
+				<li id="add-ons">
+					<h4 title="Add-ons">Extending, Packaging and Distributing</h4>
+				</li>
+				<li id="documentation">
+					<h4 title="Documentation">Best Documentation Around</h4>
+				</li>
+				<li id="jar">
+					<h4 title="Lightweight">Just One JAR</h4>
+				</li>
+				<li id="compatibility">
+					<h4 title="Compatibility">Compatible With What You Already Know</h4>
+				</li>
+			</ul>
 		</div> <!-- /content -->
 	
 	
 	<script type="text/javascript" src="demo/js/jquery.min.js"></script>
 	<script src="demo/js/fonts.js" type="text/javascript"></script>
 	<script type="text/javascript">
-		var slideSwitch = function() {
+		function slideSwitch() {
 		    var $active = $('#sampler-slideshow li.active');
 		
 		    if ( $active.length == 0 ) $active = $('#sampler-slideshow li:last-child');
@@ -166,6 +109,49 @@
 		        });
 		}
 		
+		function doTabs() {
+			var content = $("#reasons");
+			content.addClass("js");
+			
+			// Generate tab captions
+			var tabs = content.before('<div id="tabs"></div>').prev();
+			
+			$("#reasons li").each(function(i, li) {
+				li = $(li);
+				li.css({"position":"absolute"});
+				if(i>0){
+					li.hide();
+				}
+				var caption = li.find("h4");
+				var tab = tabs.append('<div class="tab">'+caption[0].title+'</div>').find(".tab:last-child");
+				if(i==0) {
+					jQuery.data(tabs[0], "selected", tab);
+					jQuery.data(content[0], "open", li);
+					tab.addClass("first");
+					tab.addClass("selected");
+				}
+				jQuery.data(tab[0], "content", li);
+				tab.click(function() {
+					if(jQuery.data(tabs[0], "selected")[0] == this)
+						return;
+						
+					// Hide previous
+					jQuery.data(tabs[0], "selected").removeClass("selected");
+					jQuery.data(content[0], "open").fadeOut("fast");
+					
+					var tab = $(this);
+					var tabContent = jQuery.data(this, "content");
+					// Show new
+					jQuery.data(tabs[0], "selected", tab);
+					tab.addClass("selected");
+					jQuery.data(content[0], "open", tabContent);
+					tabContent.css({"opacity":""});
+					tabContent.fadeIn("fast");
+				});
+			});
+			
+		}
+		
 		window.onload = function() {
 			try {
 				if(window.location.search && (window.location.search.indexOf('gwt.hosted') != -1 || window.location.search.indexOf('gwt.codesvr') != -1)) {
@@ -182,9 +168,11 @@
 			} catch(e) {}
 			
 			setInterval( "slideSwitch()", 2200 );
+			doTabs();
 		}
 		
-		Cufon.replace(["h2","h3","#sampler .start","#directory-teaser h4"], {fontFamily: "HelveticaRounded"});
+		Cufon.replace(["h2","h4","#sampler .start"], {fontFamily: "HelveticaRounded"});
+		Cufon.replace(["h3"], {fontFamily: "HelveticaLight"});
 	</script>
 	</body>
 </html>
-- 
2.39.5