From 77cea8f36476e4195fac38bd57fecd70d642b24d Mon Sep 17 00:00:00 2001
From: Richard Worth <rdworth@gmail.com>
Date: Sat, 20 Sep 2008 17:42:04 +0000
Subject: set svn:eol-style to native

---
 demos/functional/templates/ui.autocomplete.html   |  62 ++++++-------
 demos/functional/templates/ui.colorpicker.html    |  80 ++++++++--------
 demos/functional/templates/ui.datepicker.dbd.html |  78 ++++++++--------
 demos/functional/templates/ui.datepicker.dlg.html |  10 +-
 demos/functional/templates/ui.datepicker.inl.html |  26 +++---
 demos/functional/templates/ui.datepicker.sel.html | 108 +++++++++++-----------
 demos/functional/templates/ui.datepicker.two.html |  12 +--
 demos/functional/templates/ui.magnifier.html      | 102 ++++++++++----------
 demos/functional/templates/ui.progressbar.html    |  68 +++++++-------
 demos/functional/templates/ui.spinner.html        |  70 +++++++-------
 10 files changed, 308 insertions(+), 308 deletions(-)

(limited to 'demos/functional')

diff --git a/demos/functional/templates/ui.autocomplete.html b/demos/functional/templates/ui.autocomplete.html
index 4811693f9..646dd3784 100644
--- a/demos/functional/templates/ui.autocomplete.html
+++ b/demos/functional/templates/ui.autocomplete.html
@@ -1,32 +1,32 @@
-<script type="text/javascript">
-
-	var autocomplete_data = '["aero", "airplane", "book","movie","music","sports","skating","swim"]';
-
-	var model = {
-		
-		renderAt: '#containerDemo',
-
-		title: 'Autocomplete Demos',
-		
-		demos: [
-
-			{
-				title: 'Simple autocomplete',
-				desc: 'With few lines of code you could build a autocomplete. You can try more options on the fly! ',
-				html: '<input id="autocomplete" type="text" /> (Try type <em>a</em>, <em>m</em> or <em>s</em>)',
-				destroy: '$("#autocomplete").autocomplete("destroy");',
-				options: [
-					{ desc: 'Attach a autocomplete', source: '$("#autocomplete").autocomplete({data:'+autocomplete_data+'});' }
-				]
-			}
-
-		]
-	};
-
-	$(function(){
-
-		uiRenderDemo(model);
-
-	});
-
+<script type="text/javascript">
+
+	var autocomplete_data = '["aero", "airplane", "book","movie","music","sports","skating","swim"]';
+
+	var model = {
+		
+		renderAt: '#containerDemo',
+
+		title: 'Autocomplete Demos',
+		
+		demos: [
+
+			{
+				title: 'Simple autocomplete',
+				desc: 'With few lines of code you could build a autocomplete. You can try more options on the fly! ',
+				html: '<input id="autocomplete" type="text" /> (Try type <em>a</em>, <em>m</em> or <em>s</em>)',
+				destroy: '$("#autocomplete").autocomplete("destroy");',
+				options: [
+					{ desc: 'Attach a autocomplete', source: '$("#autocomplete").autocomplete({data:'+autocomplete_data+'});' }
+				]
+			}
+
+		]
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
 </script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.colorpicker.html b/demos/functional/templates/ui.colorpicker.html
index 81f5f66b2..844b6266f 100644
--- a/demos/functional/templates/ui.colorpicker.html
+++ b/demos/functional/templates/ui.colorpicker.html
@@ -1,41 +1,41 @@
-<script type="text/javascript">
-
-	var model = {
-		
-		renderAt: '#containerDemo',
-
-		title: 'Colorpicker Demos',
-		
-		demos: [
-
-			{
-				title: 'Inline colorpicker',
-				desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',
-				html: '<div id="colorpicker" />',
-				destroy: '$("#colorpicker").colorpicker("destroy");',
-				options: [
-					{ desc: 'Make a colorpicker', source: '$("#colorpicker").colorpicker({flat:true});' }
-				]
-			},
-
-			{
-				title: 'Triggered colorpicker',
-				desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',
-				html: '<input id="colorpicker2" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>',
-				destroy: '$("#colorpicker2").colorpicker("destroy");',
-				options: [
-					{ desc: 'Make a colorpicker', source: '$("#colorpicker2").colorpicker( {submit: function(e,ui) {		$("#colorpicker2").val(ui.hex);} });' },
-					{ desc: 'Fade in/out a colorpicker', source: '$("#colorpicker2").colorpicker( {show: function (e,ui) { $(this).data("colorpicker").picker.fadeIn(500);return false; }, hide: function (e,ui) { $(this).data("colorpicker").picker.fadeOut(500);return false; }, change: function(e,ui) { $("#colorpicker2").val(ui.hex); } });' }
-				]
-			}
-
-		]
-	};
-
-	$(function(){
-
-		uiRenderDemo(model);
-
-	});
-
+<script type="text/javascript">
+
+	var model = {
+		
+		renderAt: '#containerDemo',
+
+		title: 'Colorpicker Demos',
+		
+		demos: [
+
+			{
+				title: 'Inline colorpicker',
+				desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',
+				html: '<div id="colorpicker" />',
+				destroy: '$("#colorpicker").colorpicker("destroy");',
+				options: [
+					{ desc: 'Make a colorpicker', source: '$("#colorpicker").colorpicker({flat:true});' }
+				]
+			},
+
+			{
+				title: 'Triggered colorpicker',
+				desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',
+				html: '<input id="colorpicker2" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>',
+				destroy: '$("#colorpicker2").colorpicker("destroy");',
+				options: [
+					{ desc: 'Make a colorpicker', source: '$("#colorpicker2").colorpicker( {submit: function(e,ui) {		$("#colorpicker2").val(ui.hex);} });' },
+					{ desc: 'Fade in/out a colorpicker', source: '$("#colorpicker2").colorpicker( {show: function (e,ui) { $(this).data("colorpicker").picker.fadeIn(500);return false; }, hide: function (e,ui) { $(this).data("colorpicker").picker.fadeOut(500);return false; }, change: function(e,ui) { $("#colorpicker2").val(ui.hex); } });' }
+				]
+			}
+
+		]
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
 </script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.datepicker.dbd.html b/demos/functional/templates/ui.datepicker.dbd.html
index 6b2573461..e686b3d25 100644
--- a/demos/functional/templates/ui.datepicker.dbd.html
+++ b/demos/functional/templates/ui.datepicker.dbd.html
@@ -1,40 +1,40 @@
-<input type="text" size="10" value="" id="dayByDay"/>
-<style type="text/css">
-.ar_day { color: white !important; background: #eee url(templates/images/ar.gif) no-repeat center !important; }
-.au_day { color: blue !important; background: #eee url(templates/images/au.gif) no-repeat center !important; }
-.br_day { color: green !important; background: #eee url(templates/images/br.gif) no-repeat center !important; }
-.cn_day { color: red !important; background: #eee url(templates/images/cn.gif) no-repeat center !important; }
-.id_day { color: white !important; background: #eee url(templates/images/id.gif) no-repeat center !important; }
-.ie_day { color: white !important; background: #eee url(templates/images/ie.gif) no-repeat center !important; }
-.ke_day { color: red !important; background: #eee url(templates/images/ke.gif) no-repeat center !important; }
-.lb_day { color: white !important; background: #eee url(templates/images/lb.gif) no-repeat center !important; }
-.nz_day { color: blue !important; background: #eee url(templates/images/nz.gif) no-repeat center !important; }
-.se_day { color: blue !important; background: #eee url(templates/images/se.gif) no-repeat center !important; }
-.us_day { color: white !important; background: #eee url(templates/images/us.gif) no-repeat center !important; }
-.za_day { color: green !important; background: #eee url(templates/images/za.gif) no-repeat center !important; }
-</style>
-<script type="text/javascript">
-var natDays = [[1, 26, "au"], [2, 6, "nz"], [3, 17, "ie"], [4, 27, "za"], [5, 25, "ar"], [6, 6, "se"], 
-    [7, 4, "us"], [8, 17, "id"], [9, 7, "br"], [10, 1, "cn"], [11, 22, "lb"], [12, 12, "ke"]]; 
- 
-function nationalDays(date) { 
-    for (i = 0; i < natDays.length; i++) { 
-        if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) { 
-            return [false, natDays[i][2] + "_day"]; 
-        } 
-    } 
-    return [true, ""]; 
-}
-
-function highlightToday(date, inst) { 
-    var today = new Date(); 
-    today = new Date(today.getFullYear(), today.getMonth(), today.getDate()); 
-    return $.datepicker.dateStatus(date, inst) + 
-        (today.getTime() == date.getTime() ? " (today)" : ""); 
-} 
-
-function showDayOfYear(date) {
-	var lastYearEnd = new Date(date.getFullYear() - 1, 12 - 1, 31, 0, 0, 0, 0);
-	return [true, "", "Day " + ((date.getTime() - lastYearEnd.getTime()) / 86400000) + " of  the year"];
-}
+<input type="text" size="10" value="" id="dayByDay"/>
+<style type="text/css">
+.ar_day { color: white !important; background: #eee url(templates/images/ar.gif) no-repeat center !important; }
+.au_day { color: blue !important; background: #eee url(templates/images/au.gif) no-repeat center !important; }
+.br_day { color: green !important; background: #eee url(templates/images/br.gif) no-repeat center !important; }
+.cn_day { color: red !important; background: #eee url(templates/images/cn.gif) no-repeat center !important; }
+.id_day { color: white !important; background: #eee url(templates/images/id.gif) no-repeat center !important; }
+.ie_day { color: white !important; background: #eee url(templates/images/ie.gif) no-repeat center !important; }
+.ke_day { color: red !important; background: #eee url(templates/images/ke.gif) no-repeat center !important; }
+.lb_day { color: white !important; background: #eee url(templates/images/lb.gif) no-repeat center !important; }
+.nz_day { color: blue !important; background: #eee url(templates/images/nz.gif) no-repeat center !important; }
+.se_day { color: blue !important; background: #eee url(templates/images/se.gif) no-repeat center !important; }
+.us_day { color: white !important; background: #eee url(templates/images/us.gif) no-repeat center !important; }
+.za_day { color: green !important; background: #eee url(templates/images/za.gif) no-repeat center !important; }
+</style>
+<script type="text/javascript">
+var natDays = [[1, 26, "au"], [2, 6, "nz"], [3, 17, "ie"], [4, 27, "za"], [5, 25, "ar"], [6, 6, "se"], 
+    [7, 4, "us"], [8, 17, "id"], [9, 7, "br"], [10, 1, "cn"], [11, 22, "lb"], [12, 12, "ke"]]; 
+ 
+function nationalDays(date) { 
+    for (i = 0; i < natDays.length; i++) { 
+        if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) { 
+            return [false, natDays[i][2] + "_day"]; 
+        } 
+    } 
+    return [true, ""]; 
+}
+
+function highlightToday(date, inst) { 
+    var today = new Date(); 
+    today = new Date(today.getFullYear(), today.getMonth(), today.getDate()); 
+    return $.datepicker.dateStatus(date, inst) + 
+        (today.getTime() == date.getTime() ? " (today)" : ""); 
+} 
+
+function showDayOfYear(date) {
+	var lastYearEnd = new Date(date.getFullYear() - 1, 12 - 1, 31, 0, 0, 0, 0);
+	return [true, "", "Day " + ((date.getTime() - lastYearEnd.getTime()) / 86400000) + " of  the year"];
+}
 </script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.datepicker.dlg.html b/demos/functional/templates/ui.datepicker.dlg.html
index 4d5eaaa7f..fe82c181b 100644
--- a/demos/functional/templates/ui.datepicker.dlg.html
+++ b/demos/functional/templates/ui.datepicker.dlg.html
@@ -1,6 +1,6 @@
-<input type="text" size="10" value="" id="dialog" readonly="readonly"/> <button id="dialogButton" type="button">Open dialog</button>
-<script type="text/javascript">
-function setDateFromDialog(date) { 
-    $("#dialog").val(date); 
-}
+<input type="text" size="10" value="" id="dialog" readonly="readonly"/> <button id="dialogButton" type="button">Open dialog</button>
+<script type="text/javascript">
+function setDateFromDialog(date) { 
+    $("#dialog").val(date); 
+}
 </script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.datepicker.inl.html b/demos/functional/templates/ui.datepicker.inl.html
index 9543a98eb..925ef0718 100644
--- a/demos/functional/templates/ui.datepicker.inl.html
+++ b/demos/functional/templates/ui.datepicker.inl.html
@@ -1,14 +1,14 @@
-<input type="text" id="altInline" size="10"/>
-<div id="inline"></div>
-<p style="clear: both;"><!-- See day-by-day example for highlighting days code --></p>
-<script type="text/javascript">
-function setInlineDate() {
-	try {
-		var date = $.datepicker.parseDate("mm/dd/yy", $("#altInline").val());
-		$("#inline").datepicker("setDate", date);
-	}
-	catch (e) {
-		// Ignore
-	}
-}
+<input type="text" id="altInline" size="10"/>
+<div id="inline"></div>
+<p style="clear: both;"><!-- See day-by-day example for highlighting days code --></p>
+<script type="text/javascript">
+function setInlineDate() {
+	try {
+		var date = $.datepicker.parseDate("mm/dd/yy", $("#altInline").val());
+		$("#inline").datepicker("setDate", date);
+	}
+	catch (e) {
+		// Ignore
+	}
+}
 </script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.datepicker.sel.html b/demos/functional/templates/ui.datepicker.sel.html
index 3f8185af2..a05b48438 100644
--- a/demos/functional/templates/ui.datepicker.sel.html
+++ b/demos/functional/templates/ui.datepicker.sel.html
@@ -1,54 +1,54 @@
-<select id="selectMonth"><option value="01">Jan</option><option value="02">Feb</option>
-	<option value="03">Mar</option><option value="04">Apr</option>
-	<option value="05">May</option><option value="06">Jun</option>
-	<option value="07">Jul</option><option value="08">Aug</option>
-	<option value="09">Sep</option><option value="10">Oct</option>
-	<option value="11">Nov</option><option value="12">Dec</option></select>
-<select id="selectDay"><option value="01">1</option><option value="02">2</option>
-	<option value="03">3</option><option value="04">4</option>
-	<option value="05">5</option><option value="06">6</option>
-	<option value="07">7</option><option value="08">8</option>
-	<option value="09">9</option><option value="10">10</option>
-	<option value="11">11</option><option value="12">12</option>
-	<option value="13">13</option><option value="14">14</option>
-	<option value="15">15</option><option value="16">16</option>
-	<option value="17">17</option><option value="18">18</option>
-	<option value="19">19</option><option value="20">20</option>
-	<option value="21">21</option><option value="22">22</option>
-	<option value="23">23</option><option value="24">24</option>
-	<option value="25">25</option><option value="26">26</option>
-	<option value="27">27</option><option value="28">28</option>
-	<option value="29">29</option><option value="30">30</option>
-	<option value="31">31</option></select>
-<select id="selectYear"><option value="2001">2001</option><option value="2002">2002</option>
-	<option value="2003">2003</option><option value="2004">2004</option>
-	<option value="2005">2005</option><option value="2006">2006</option>
-	<option value="2007">2007</option><option value="2008">2008</option>
-	<option value="2009">2009</option><option value="2010">2010</option></select>
-<input type="hidden" size="10" id="linkedDates" disabled="disabled"/></p>
-<script type="text/javascript">
-// Prepare to show a date picker linked to three select controls
-function readLinked() {
-	$("#linkedDates").val($("#selectMonth").val() + "/" +
-		$("#selectDay").val() + "/" + $("#selectYear").val());
-	return {};
-}
-
-// Update three select controls to match a date picker selection
-function updateLinked(date) {
-	$("#selectMonth").val(date.substring(0, 2));
-	$("#selectDay").val(date.substring(3, 5));
-	$("#selectYear").val(date.substring(6, 10));
-}
-
-// Prevent selection of invalid dates through the select controls
-function checkLinkedDays() {
-	var daysInMonth = 32 - new Date($("#selectYear").val(),
-		$("#selectMonth").val() - 1, 32).getDate();
-	$("#selectDay option").attr("disabled", "");
-	$("#selectDay option:gt(" + (daysInMonth - 1) +")").attr("disabled", "disabled");
-	if ($("#selectDay").val() > daysInMonth) {
-		$("#selectDay").val(daysInMonth);
-	}
-}
-</script>
+<select id="selectMonth"><option value="01">Jan</option><option value="02">Feb</option>
+	<option value="03">Mar</option><option value="04">Apr</option>
+	<option value="05">May</option><option value="06">Jun</option>
+	<option value="07">Jul</option><option value="08">Aug</option>
+	<option value="09">Sep</option><option value="10">Oct</option>
+	<option value="11">Nov</option><option value="12">Dec</option></select>
+<select id="selectDay"><option value="01">1</option><option value="02">2</option>
+	<option value="03">3</option><option value="04">4</option>
+	<option value="05">5</option><option value="06">6</option>
+	<option value="07">7</option><option value="08">8</option>
+	<option value="09">9</option><option value="10">10</option>
+	<option value="11">11</option><option value="12">12</option>
+	<option value="13">13</option><option value="14">14</option>
+	<option value="15">15</option><option value="16">16</option>
+	<option value="17">17</option><option value="18">18</option>
+	<option value="19">19</option><option value="20">20</option>
+	<option value="21">21</option><option value="22">22</option>
+	<option value="23">23</option><option value="24">24</option>
+	<option value="25">25</option><option value="26">26</option>
+	<option value="27">27</option><option value="28">28</option>
+	<option value="29">29</option><option value="30">30</option>
+	<option value="31">31</option></select>
+<select id="selectYear"><option value="2001">2001</option><option value="2002">2002</option>
+	<option value="2003">2003</option><option value="2004">2004</option>
+	<option value="2005">2005</option><option value="2006">2006</option>
+	<option value="2007">2007</option><option value="2008">2008</option>
+	<option value="2009">2009</option><option value="2010">2010</option></select>
+<input type="hidden" size="10" id="linkedDates" disabled="disabled"/></p>
+<script type="text/javascript">
+// Prepare to show a date picker linked to three select controls
+function readLinked() {
+	$("#linkedDates").val($("#selectMonth").val() + "/" +
+		$("#selectDay").val() + "/" + $("#selectYear").val());
+	return {};
+}
+
+// Update three select controls to match a date picker selection
+function updateLinked(date) {
+	$("#selectMonth").val(date.substring(0, 2));
+	$("#selectDay").val(date.substring(3, 5));
+	$("#selectYear").val(date.substring(6, 10));
+}
+
+// Prevent selection of invalid dates through the select controls
+function checkLinkedDays() {
+	var daysInMonth = 32 - new Date($("#selectYear").val(),
+		$("#selectMonth").val() - 1, 32).getDate();
+	$("#selectDay option").attr("disabled", "");
+	$("#selectDay option:gt(" + (daysInMonth - 1) +")").attr("disabled", "disabled");
+	if ($("#selectDay").val() > daysInMonth) {
+		$("#selectDay").val(daysInMonth);
+	}
+}
+</script>
diff --git a/demos/functional/templates/ui.datepicker.two.html b/demos/functional/templates/ui.datepicker.two.html
index 639aa0518..62e927859 100644
--- a/demos/functional/templates/ui.datepicker.two.html
+++ b/demos/functional/templates/ui.datepicker.two.html
@@ -1,7 +1,7 @@
-<input type="text" size="10" value="" id="startDate"/> to <input type="text" size="10" value="" id="endDate"/>
-<script type="text/javascript">
-function customRange(input) {
-	return {minDate: (input.id == "endDate" ? $("#startDate").datepicker("getDate") : null),
-		maxDate: (input.id == "startDate" ? $("#endDate").datepicker("getDate") : null)};
-}
+<input type="text" size="10" value="" id="startDate"/> to <input type="text" size="10" value="" id="endDate"/>
+<script type="text/javascript">
+function customRange(input) {
+	return {minDate: (input.id == "endDate" ? $("#startDate").datepicker("getDate") : null),
+		maxDate: (input.id == "startDate" ? $("#endDate").datepicker("getDate") : null)};
+}
 </script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.magnifier.html b/demos/functional/templates/ui.magnifier.html
index fd701ae3b..fddef3d6b 100644
--- a/demos/functional/templates/ui.magnifier.html
+++ b/demos/functional/templates/ui.magnifier.html
@@ -1,52 +1,52 @@
-<script type="text/javascript">
-
-	var model = {
-		
-		renderAt: '#containerDemo',
-
-		title: 'Magnifier Demos',
-		
-		demos: [
-
-			{
-				title: 'Simple Magnifier',
-				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
-				html: '<div id="magnifier"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',
-				destroy: '$("#magnifier").magnifier("destroy");',
-				options: [
-					{ desc: 'Attach a magnifier', source: '$("#magnifier").magnifier();' },
-					{ desc: 'Small magnification', source: '$("#magnifier").magnifier({magnification:1.5});' },
-					{ desc: 'Disable the magnifier', source: '$("#magnifier").magnifier("disable");' }
-				]
-			},
-
-			{
-				title: 'Opacity Magnifier',
-				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
-				html: '<div id="magnifier2"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',
-				destroy: '$("#magnifier2").magnifier("destroy");',
-				options: [
-					{ desc: 'Opacity option', source: '$("#magnifier2").magnifier({opacity:{min:0.4,max:1.0}});' }
-				]
-			},
-
-			{
-				title: 'Overlap Magnifier',
-				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
-				html: '<div style="height:16px;">&nbsp;</div><div id="magnifier3"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div><div style="height:84px;">&nbsp;</div>',
-				destroy: '$("#magnifier3").magnifier("destroy");',
-				options: [
-					{ desc: 'Overlap option', source: '$("#magnifier3").magnifier({overlap:true});' }
-				]
-			}
-
-		]
-	};
-
-	$(function(){
-
-		uiRenderDemo(model);
-
-	});
-
+<script type="text/javascript">
+
+	var model = {
+		
+		renderAt: '#containerDemo',
+
+		title: 'Magnifier Demos',
+		
+		demos: [
+
+			{
+				title: 'Simple Magnifier',
+				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
+				html: '<div id="magnifier"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',
+				destroy: '$("#magnifier").magnifier("destroy");',
+				options: [
+					{ desc: 'Attach a magnifier', source: '$("#magnifier").magnifier();' },
+					{ desc: 'Small magnification', source: '$("#magnifier").magnifier({magnification:1.5});' },
+					{ desc: 'Disable the magnifier', source: '$("#magnifier").magnifier("disable");' }
+				]
+			},
+
+			{
+				title: 'Opacity Magnifier',
+				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
+				html: '<div id="magnifier2"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',
+				destroy: '$("#magnifier2").magnifier("destroy");',
+				options: [
+					{ desc: 'Opacity option', source: '$("#magnifier2").magnifier({opacity:{min:0.4,max:1.0}});' }
+				]
+			},
+
+			{
+				title: 'Overlap Magnifier',
+				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
+				html: '<div style="height:16px;">&nbsp;</div><div id="magnifier3"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div><div style="height:84px;">&nbsp;</div>',
+				destroy: '$("#magnifier3").magnifier("destroy");',
+				options: [
+					{ desc: 'Overlap option', source: '$("#magnifier3").magnifier({overlap:true});' }
+				]
+			}
+
+		]
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
 </script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.progressbar.html b/demos/functional/templates/ui.progressbar.html
index cb99c33a9..6c33203e6 100644
--- a/demos/functional/templates/ui.progressbar.html
+++ b/demos/functional/templates/ui.progressbar.html
@@ -1,35 +1,35 @@
-<script type="text/javascript">
-
-	var model = {
-		
-		renderAt: '#containerDemo',
-
-		title: 'Progressbar Demos',
-		
-		demos: [
-
-			{
-				title: 'Simple Progressbar',
-				desc: 'With few lines of code you could build a progressbar. You can try more options on the fly!',
-				html: '<div id="progressbar"></div>',
-				destroy: '$("#progressbar").progressbar("destroy");',
-				options: [
-					{ desc: 'Start a progressbar', source: '$("#progressbar").progressbar({interval:2000}); $("#progressbar").progressbar("start");' },
-					{ desc: 'With different increment', source: '$("#progressbar").progressbar({interval:2000, increment:100}).progressbar("start");' },
-					{ desc: 'Set progress to 50%', source: '$("#progressbar").progressbar().progressbar("progress", 50);' },
-					{ desc: 'Callback when finish', source: '$("#progressbar").progressbar({interval: 1000, stop:function(){alert("Finished");}}).progressbar("start");' },
-					{ desc: 'Enable the progressbar', source: '$("#progressbar").progressbar().progressbar("enable");' },
-					{ desc: 'Disable the progressbar', source: '$("#progressbar").progressbar().progressbar("disable");' }
-				]
-			}
-
-		]
-	};
-
-	$(function(){
-
-		uiRenderDemo(model);
-
-	});
-
+<script type="text/javascript">
+
+	var model = {
+		
+		renderAt: '#containerDemo',
+
+		title: 'Progressbar Demos',
+		
+		demos: [
+
+			{
+				title: 'Simple Progressbar',
+				desc: 'With few lines of code you could build a progressbar. You can try more options on the fly!',
+				html: '<div id="progressbar"></div>',
+				destroy: '$("#progressbar").progressbar("destroy");',
+				options: [
+					{ desc: 'Start a progressbar', source: '$("#progressbar").progressbar({interval:2000}); $("#progressbar").progressbar("start");' },
+					{ desc: 'With different increment', source: '$("#progressbar").progressbar({interval:2000, increment:100}).progressbar("start");' },
+					{ desc: 'Set progress to 50%', source: '$("#progressbar").progressbar().progressbar("progress", 50);' },
+					{ desc: 'Callback when finish', source: '$("#progressbar").progressbar({interval: 1000, stop:function(){alert("Finished");}}).progressbar("start");' },
+					{ desc: 'Enable the progressbar', source: '$("#progressbar").progressbar().progressbar("enable");' },
+					{ desc: 'Disable the progressbar', source: '$("#progressbar").progressbar().progressbar("disable");' }
+				]
+			}
+
+		]
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
 </script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.spinner.html b/demos/functional/templates/ui.spinner.html
index acfc1bb80..3db5f288b 100644
--- a/demos/functional/templates/ui.spinner.html
+++ b/demos/functional/templates/ui.spinner.html
@@ -1,36 +1,36 @@
-<script type="text/javascript">
-
-	var model = {
-		
-		renderAt: '#containerDemo',
-
-		title: 'Spinner Demos',
-		
-		demos: [
-
-			{
-				title: 'Simple spinner',
-				desc: 'With few lines of code you could build a spinner. You can try more options on the fly!',
-				html: '<input id="spinner" type="text" />',
-				destroy: '$("#spinner").spinner("destroy");',
-				options: [
-					{ desc: 'Make a spinner', source: '$("#spinner").spinner();' },
-					{ desc: 'A spinner with min and max value', source: '$("#spinner").spinner({min:-100, max:150});' },
-					{ desc: 'Big stepping', source: '$("#spinner").spinner({stepping:100});' },
-					{ desc: 'Currency option', source: '$("#spinner").spinner({currency:"$"});' },
-					{ desc: 'Disable incremental option', source: '$("#spinner").spinner({incremental:false});' },
-					{ desc: 'Disable the spinner', source: '$("#spinner").spinner().spinner("disable");' },
-					{ desc: 'Enable the spinner', source: '$("#spinner").spinner().spinner("enable");' }
-				]
-			}
-
-		]
-	};
-
-	$(function(){
-
-		uiRenderDemo(model);
-
-	});
-
+<script type="text/javascript">
+
+	var model = {
+		
+		renderAt: '#containerDemo',
+
+		title: 'Spinner Demos',
+		
+		demos: [
+
+			{
+				title: 'Simple spinner',
+				desc: 'With few lines of code you could build a spinner. You can try more options on the fly!',
+				html: '<input id="spinner" type="text" />',
+				destroy: '$("#spinner").spinner("destroy");',
+				options: [
+					{ desc: 'Make a spinner', source: '$("#spinner").spinner();' },
+					{ desc: 'A spinner with min and max value', source: '$("#spinner").spinner({min:-100, max:150});' },
+					{ desc: 'Big stepping', source: '$("#spinner").spinner({stepping:100});' },
+					{ desc: 'Currency option', source: '$("#spinner").spinner({currency:"$"});' },
+					{ desc: 'Disable incremental option', source: '$("#spinner").spinner({incremental:false});' },
+					{ desc: 'Disable the spinner', source: '$("#spinner").spinner().spinner("disable");' },
+					{ desc: 'Enable the spinner', source: '$("#spinner").spinner().spinner("enable");' }
+				]
+			}
+
+		]
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
 </script>
\ No newline at end of file
-- 
cgit v1.2.3