[Pkg-javascript-commits] [libjs-jquery-tmpl] 01/05: import upstream vBeta1.0.0
Wolfgang Borgert
debacle at moszumanska.debian.org
Wed Nov 30 00:47:48 UTC 2016
This is an automated email from the git hooks/post-receive script.
debacle pushed a commit to branch master
in repository libjs-jquery-tmpl.
commit 2bbd49ac4655d739c93115afa4a94cf608a5666b
Author: W. Martin Borgert <debacle at debian.org>
Date: Tue Nov 29 22:08:47 2016 +0000
import upstream vBeta1.0.0
---
README.md | 17 +
demos/movies/PagesCore/movies.html | 361 ++++
demos/movies/PagesTmplPlus/movies1.html | 358 ++++
demos/movies/PagesTmplPlus/movies2.html | 348 ++++
demos/movies/PagesTmplPlus/movies3.html | 337 ++++
demos/movies/components/jquery-ui-1.8.1.custom.js | 1929 ++++++++++++++++++++
.../components/jquery-ui-1.8.1.custom.min.js | 96 +
demos/movies/components/jquery.pager.js | 132 ++
demos/movies/css/jquery-ui-1.8.1.custom.css | 408 +++++
demos/movies/css/movies.css | 283 +++
.../ui-bg_diagonals-thick_75_f3d8d8_40x40.png | Bin 0 -> 256 bytes
.../images/ui-bg_dots-small_65_a6a6a6_2x2.png | Bin 0 -> 83 bytes
demos/movies/images/ui-bg_flat_0_333333_40x100.png | Bin 0 -> 180 bytes
.../movies/images/ui-bg_flat_65_ffffff_40x100.png | Bin 0 -> 178 bytes
.../movies/images/ui-bg_flat_75_ffffff_40x100.png | Bin 0 -> 178 bytes
.../movies/images/ui-bg_glass_55_fbf8ee_1x400.png | Bin 0 -> 121 bytes
.../movies/images/ui-bg_glass_75_dadada_1x400.png | Bin 0 -> 111 bytes
.../ui-bg_highlight-hard_100_eeeeee_1x100.png | Bin 0 -> 94 bytes
.../ui-bg_highlight-hard_100_f6f6f6_1x100.png | Bin 0 -> 89 bytes
.../ui-bg_highlight-soft_15_cc0000_1x100.png | Bin 0 -> 108 bytes
demos/movies/images/ui-icons_004276_256x240.png | Bin 0 -> 4369 bytes
demos/movies/images/ui-icons_cc0000_256x240.png | Bin 0 -> 4369 bytes
demos/movies/images/ui-icons_ffffff_256x240.png | Bin 0 -> 4369 bytes
.../Interactive/resources/collapsed.png | Bin 0 -> 237 bytes
demos/samplesCore/Interactive/resources/empty.png | Bin 0 -> 142 bytes
.../samplesCore/Interactive/resources/expanded.png | Bin 0 -> 198 bytes
demos/samplesCore/Interactive/resources/folder.png | Bin 0 -> 472 bytes
demos/samplesCore/Interactive/resources/tabs.css | 75 +
.../samplesCore/Interactive/resources/treeView.css | 50 +
demos/samplesCore/Interactive/tabsTmpl.html | 77 +
demos/samplesCore/Interactive/tabsWrap.html | 94 +
.../Interactive/tabsWrapImperative.html | 74 +
demos/samplesCore/Interactive/tabsWrapNested.html | 116 ++
demos/samplesCore/Interactive/treeView.html | 123 ++
demos/samplesCore/basic.html | 133 ++
demos/samplesCore/composition.html | 91 +
demos/samplesCore/conditional.html | 36 +
demos/samplesCore/each.html | 79 +
demos/samplesCore/parameters.html | 98 +
demos/samplesTmplPlus/basic.html | 95 +
demos/samplesTmplPlus/composition.html | 91 +
demos/samplesTmplPlus/each.html | 80 +
demos/samplesTmplPlus/parameters.html | 98 +
jquery.tmpl.js | 489 +++++
jquery.tmpl.min.js | 1 +
jquery.tmplPlus.js | 98 +
jquery.tmplplus.min.js | 1 +
47 files changed, 6268 insertions(+)
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7b2fa89
--- /dev/null
+++ b/README.md
@@ -0,0 +1,17 @@
+# jQuery Templates plugin
+
+_Note: this plugin requires jquery version 1.4.2._
+
+jQuery templates contain markup with binding expressions. Templates are applied to data objects or arrays, and rendered into the HTML DOM
+
+Documentation for the _jQuery Templates_ plugin can be found on the jQuery documentation site:
+<a href="http://api.jquery.com/category/plugins/templates/">http://api.jquery.com/category/plugins/templates</a>
+
+See also <a href="http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jquery.html">http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jquery.html</a> for more background.
+
+<p>The beta1 version of jQuery Templates is available on CDN at:
+<ul>
+<li><a href="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js">http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js</a></li>
+<li><a href="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js</a></li>
+</ul></p>
+
diff --git a/demos/movies/PagesCore/movies.html b/demos/movies/PagesCore/movies.html
new file mode 100644
index 0000000..9421a0e
--- /dev/null
+++ b/demos/movies/PagesCore/movies.html
@@ -0,0 +1,361 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+This sample illustrates using templates for a more complete and
+realistic scenario.
+
+It uses the NetFlix OData JSONP services as a source of data.
+
+This version of the movies sample demo uses the
+ $( templateSelector ).tmpl( data ).appendTo( targetSelector )
+pattern, and does not use the tmplCmd plugin or the rendered event.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>jQuery + OData + Netflix Catalog API</title>
+ <link href="../css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
+ <link href="../css/movies.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="about">
+ This is a demo of updates to the jQuery templating feature, proposed by Microsoft.<br/>
+ The source can be viewed here: <a href="http://github.com/nje/jquery-tmpl/">NJE Templating Branch on GitHub</a>
+</div>
+<div id="pageBody">
+<h1>Netflix: Book a Movie...</h1>
+
+ <ul id="genres">
+ <li class="selected">Cartoons</li>
+ <li>Drama</li>
+ <li>Foreign</li>
+ <li>Action Classics</li>
+ <li>Horror</li>
+ <li>Sci-Fi Cult Classics</li>
+ </ul>
+
+ <div id="pager"><ul class="pages"><li class="pgEmpty">first</li><li class="pgEmpty">prev</li></ul></div>
+
+ <div id="movieList"></div>
+ <table id="bookingsList">
+ <tbody><tr class="cart"><td class="cart-false" colspan="4">
+ <span class="text">0 items in Cart...</span>
+ </td></tr></tbody>
+ </table>
+ <br/>
+</div>
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../components/jquery.pager.js" type="text/javascript"></script>
+<script src="../components/jquery-ui-1.8.1.custom.js" type="text/javascript"></script>
+
+<script id="movieTmpl" type="text/x-jquery-tmpl">
+ <div>
+ <div><img src="${BoxArt.LargeUrl}" /> </div>
+ <strong>${Name}</strong>
+ <p>{{html Synopsis}}</p>
+ <input type="button" title="Buy tickets for '${Name}'" value="Add to cart..." class="buyButton"/>
+ <br/>
+ </div>
+</script>
+
+<script id="cartTmpl" type="text/x-jquery-tmpl">
+ <td class="cart-${!!count}" colspan="4">
+ <span class="text">${count} items in Cart...</span>
+ {{if count}}
+ <span id="submit">Checkout</span>
+ <span id="cancel">Remove All</span>
+ {{if count>1}}
+ <span id="sort"><span id="sortBtn">Sort</span>:
+ <select>
+ <option value="0" {{if sortBy==="0"}}selected{{/if}}>Name A-Z</option>
+ <option value="1" {{if sortBy==="1"}}selected{{/if}}>Name Z-A</option>
+ <option value="2" {{if sortBy==="2"}}selected{{/if}}>Date</option>
+ </select>
+ </span>
+ {{/if}}
+ </select>
+ {{/if}}
+ </td>
+</script>
+
+<script id="bookingTitleTmpl" type="text/x-jquery-tmpl">
+ <tr class="bookingTitle${$item.mode}">
+ <td>${movie.Name}</td><td>${movieTheater}</td>
+ <td>${formatDate(date)}</td>
+ <td>
+ ${quantity}
+ <span class="ui-icon close"></span>
+ </td>
+ </tr>
+</script>
+
+<script id="bookingEditTmpl" type="text/x-jquery-tmpl">
+ {{tmpl($data, {mode: "Edit"}) "#bookingTitleTmpl"}}
+ <tr class="bookingEdit">
+ <td colspan="4">
+ <div class="fields">
+ <span>Movie Theater: </span><input class="theater" type="text" value="${movieTheater}" /><br/>
+ <span>Date: </span><input class="date" type="text" value="${formatDate(date)}" /><br/>
+ <span>Quantity: </span><input class="quantity" type="text" value="${quantity}" />
+ </div>
+ <div><img src="${movie.BoxArt.LargeUrl}" /></div>
+ </td>
+ </tr>
+</script>
+
+<script type="text/javascript">
+ var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
+ cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = {}, selectedBooking;
+
+ getMovies( pageIndex );
+
+ $( "#genres li" ).click( selectGenre );
+
+ $( ".cart" )
+ .delegate( "select", "change", sort )
+ .delegate( "#sortBtn", "click", sort )
+ .delegate( "#submit", "click", function() {
+ alert( cart.count + " bookings submitted for payment...");
+ removeBookings();
+ })
+ .delegate( "#cancel", "click", function() {
+ removeBookings();
+ })
+ .empty();
+
+ $( "#cartTmpl" )
+ .tmpl( cart )
+ .appendTo( ".cart", cart );
+
+ var cartTmplItem = $( ".cart td" ).tmplItem();
+
+ function selectGenre() {
+ $( "#genres li" ).removeClass( "selected" );
+ $( this ).addClass( "selected" );
+
+ pageIndex = 1;
+ genre = encodeURI( $(this).text() );
+ getMovies( pageIndex );
+ }
+
+ function sort() {
+ var compare = compareName, reverse = false, data = [];
+ cart.sortBy = $( "#sort select" ).val();
+ switch ( $( "#sort select" ).val() ) {
+ case "1":
+ reverse = true;
+ break;
+ case "2":
+ compare = compareDate;
+ break;
+ }
+
+ for ( var item in cart.bookings ) {
+ data.push( cart.bookings[item] );
+ }
+ data = data.sort( compare );
+
+ for ( var i = 0, l = data.length; i < l; i++ ) {
+ $( bookingTmplItems[data[i].movie.Id].nodes ).appendTo( "#bookingsList" );
+ }
+
+ function compareName( a, b ) {
+ return a == b ? 0 : (((a.movie.Name > b.movie.Name) !== reverse) ? 1 : -1);
+ }
+ function compareDate( a, b ) {
+ return a.date - b.date;
+ }
+ }
+
+ function getMovies( index ) {
+ var query = "http://odata.netflix.com/Catalog/Genres('" + genre + "')/Titles" +
+ "?$format=json" +
+ "&$inlinecount=allpages" + // get total number of records
+ "&$skip=" + (index-1) * pageSize + // skip to first record of page
+ "&$top=" + pageSize; // page size
+
+ pageIndex = index;
+
+ $( "#movieList" )
+ .fadeOut( "medium", function () {
+ $.ajax({
+ dataType: "jsonp",
+ url: query,
+ jsonp: "$callback",
+ success: showMovies
+ });
+ });
+ }
+
+ function showMovies( data ) {
+ pageCount = Math.ceil( data.d.__count/pageSize ),
+ movies = data.d.results;
+
+ $( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });
+
+ $( "#movieList" ).empty();
+
+ $( "#movieTmpl" )
+ // Render movies using the movieTemplate
+ .tmpl( movies )
+
+ // Display rendered movies in the movieList container
+ .appendTo( "#movieList" )
+
+ // Animate
+ .find( "div" ).fadeIn( 4000 ).end()
+
+ // Add click handler
+ .find( ".buyButton" ).click( function() {
+ buyTickets( $(this).tmplItem().data );
+ });
+
+ $( "#movieList" ).fadeIn( "medium" )
+ }
+
+ function buyTickets( movie ) {
+ // Add item to cart
+ var booking = cart.bookings[movie.Id];
+ if ( booking ) {
+ booking.quantity++;
+ } else {
+ cart.count++;
+ cartTmplItem.update();
+ booking = { movie: movie, date: new Date(), quantity: 1, movieTheater: "" };
+ }
+ selectBooking( booking );
+ }
+
+ function selectBooking( booking ) {
+ if ( selectedBooking ) {
+ if ( selectedBooking === booking ) {
+ updateBooking( bookingTmplItems[selectedBooking.movie.Id]);
+ return;
+ }
+ // Collapse previously selected booking, and switch to non-edit view
+ var oldSelected = selectedBooking;
+ $( "div", bookingTmplItems[oldSelected.movie.Id].nodes ).animate( { height: 0 }, 500, function() {
+ switchView( oldSelected );
+ });
+ }
+ selectedBooking = booking;
+ if ( !booking ) {
+ return;
+ }
+ if ( cart.bookings[booking.movie.Id] ) {
+ switchView( booking, true );
+ } else {
+ cart.bookings[booking.movie.Id] = booking;
+
+ var bookingNode = $( "#bookingEditTmpl" )
+
+ // Render the booking for the chosen movie using the bookingEditTemplate
+ .tmpl( booking, { animate: true } )
+
+ // Append the rendered booking to the bookings list
+ .appendTo( "#bookingsList" )
+
+ // Get the 2nd <tr> of the appended booking
+ .last()[0];
+
+ // Get the template item for the 2nd <tr>, which is the template item for the "bookingEditTmpl" template
+ var newItem = $.tmplItem( bookingNode );
+ bookingTmplItems[booking.movie.Id] = newItem;
+
+ // Attach handlers etc. on the rendered template.
+ bookingEditRendered( newItem );
+ }
+ }
+
+ function bookingEditRendered( item ) {
+ var data = item.data, nodes = item.nodes;
+
+ $( nodes[0] ).click( function() {
+ selectBooking();
+ });
+
+ $( ".close", nodes ).click( removeBooking );
+
+ $( ".date", nodes ).change( function() {
+ data.date = $(this).datepicker( "getDate" );
+ updateBooking( item );
+ })
+ .datepicker({ dateFormat: "DD, d MM, yy" });
+
+ $( ".quantity", nodes ).change( function() {
+ data.quantity = $(this).val();
+ updateBooking( item );
+ });
+
+ $( ".theater", nodes ).change( function() {
+ data.movieTheater = $(this).val();
+ updateBooking( item );
+ });
+
+ if ( item.animate ) {
+ $( "div", nodes ).css( "height", 0 ).animate( { height: 116 }, 500 );
+ }
+ }
+
+ function bookingRendered( item ) {
+ $( item.nodes ).click( function() {
+ selectBooking( item.data );
+ });
+ $( ".close", item.nodes ).click( removeBooking );
+ }
+
+ function switchView( booking, edit ) {
+ if ( !booking ) {
+ return;
+ }
+ var item = bookingTmplItems[booking.movie.Id],
+ tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).template();
+ if ( item.tmpl !== tmpl) {
+ item.tmpl = tmpl;
+ item.update();
+ (edit ? bookingEditRendered : bookingRendered)( item );
+ }
+ }
+
+ function updateBooking( item ) {
+ item.animate = false;
+ item.update();
+ (item.data === selectedBooking ? bookingEditRendered : bookingRendered)( item );
+ item.animate = true;
+ }
+
+ function removeBooking() {
+ var booking = $.tmplItem(this).data;
+ if ( booking === selectedBooking ) {
+ selectedBooking = null;
+ }
+ delete cart.bookings[booking.movie.Id];
+ cart.count--;
+ cartTmplItem.update();
+ $( bookingTmplItems[booking.movie.Id].nodes ).remove();
+ delete bookingTmplItems[booking.movie.Id];
+ return false;
+ }
+
+ function removeBookings() {
+ for ( var item in bookingTmplItems ) {
+ $( bookingTmplItems[item].nodes ).remove();
+ delete bookingTmplItems[item];
+ }
+ bookingTmplItems = {};
+ cart.count = 0;
+ cart.bookings = {};
+ selectedBooking = null;
+ cartTmplItem.update();
+ }
+
+ function formatDate( date ) {
+ return date.toLocaleDateString();
+ }
+
+ function removeContext( item ) {
+ $( item.nodes ).remove();
+ }
+</script>
+
+</body>
+</html>
diff --git a/demos/movies/PagesTmplPlus/movies1.html b/demos/movies/PagesTmplPlus/movies1.html
new file mode 100644
index 0000000..211feeb
--- /dev/null
+++ b/demos/movies/PagesTmplPlus/movies1.html
@@ -0,0 +1,358 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+This sample illustrates using templates for a more complete and
+realistic scenario.
+
+It uses the NetFlix OData JSONP services as a source of data.
+
+This version of the movies sample demo uses the
+ $( templateSelector ).tmpl( data ).appendTo( targetSelector )
+pattern, and also uses the tmplCmd plugin.
+It does not use the rendered event.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>jQuery + OData + Netflix Catalog API</title>
+ <link href="../css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
+ <link href="../css/movies.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="about">
+ This is a demo of updates to the jQuery templating feature, proposed by Microsoft.<br/>
+ The source can be viewed here: <a href="http://github.com/nje/jquery-tmpl/">NJE Templating Branch on GitHub</a>
+</div>
+<div id="pageBody">
+<h1>Netflix: Book a Movie...</h1>
+
+ <ul id="genres">
+ <li class="selected">Cartoons</li>
+ <li>Drama</li>
+ <li>Foreign</li>
+ <li>Action Classics</li>
+ <li>Horror</li>
+ <li>Sci-Fi Cult Classics</li>
+ </ul>
+
+ <div id="pager"><ul class="pages"><li class="pgEmpty">first</li><li class="pgEmpty">prev</li></ul></div>
+
+ <div id="movieList"></div>
+ <table id="bookingsList">
+ <tbody><tr class="cart"><td class="cart-false" colspan="4">
+ <span class="text">0 items in Cart...</span>
+ </td></tr></tbody>
+ </table>
+ <br/>
+</div>
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../../../jquery.tmplPlus.js" type="text/javascript"></script>
+<script src="../components/jquery.pager.js" type="text/javascript"></script>
+<script src="../components/jquery-ui-1.8.1.custom.js" type="text/javascript"></script>
+
+<script id="movieTmpl" type="text/x-jquery-tmpl">
+ <div>
+ <div><img src="${BoxArt.LargeUrl}" /> </div>
+ <strong>${Name}</strong>
+ <p>{{html Synopsis}}</p>
+ <input type="button" title="Buy tickets for '${Name}'" value="Add to cart..." class="buyButton"/>
+ <br/>
+ </div>
+</script>
+
+<script id="cartTmpl" type="text/x-jquery-tmpl">
+ <td class="cart-${!!count}" colspan="4">
+ <span class="text">${count} items in Cart...</span>
+ {{if count}}
+ <span id="submit">Checkout</span>
+ <span id="cancel">Remove All</span>
+ {{if count>1}}
+ <span id="sort"><span id="sortBtn">Sort</span>:
+ <select>
+ <option value="0" {{if sortBy==="0"}}selected{{/if}}>Name A-Z</option>
+ <option value="1" {{if sortBy==="1"}}selected{{/if}}>Name Z-A</option>
+ <option value="2" {{if sortBy==="2"}}selected{{/if}}>Date</option>
+ </select>
+ </span>
+ {{/if}}
+ </select>
+ {{/if}}
+ </td>
+</script>
+
+<script id="bookingTitleTmpl" type="text/x-jquery-tmpl">
+ <tr class="bookingTitle${$item.mode}">
+ <td>${movie.Name}</td><td>${movieTheater}</td>
+ <td>${formatDate(date)}</td>
+ <td>
+ ${quantity}
+ <span class="ui-icon close"></span>
+ </td>
+ </tr>
+</script>
+
+<script id="bookingEditTmpl" type="text/x-jquery-tmpl">
+ {{tmpl($data, {mode: "Edit"}) "#bookingTitleTmpl"}}
+ <tr class="bookingEdit">
+ <td colspan="4">
+ <div class="fields">
+ <span>Movie Theater: </span><input class="theater" type="text" value="${movieTheater}" /><br/>
+ <span>Date: </span><input class="date" type="text" value="${formatDate(date)}" /><br/>
+ <span>Quantity: </span><input class="quantity" type="text" value="${quantity}" />
+ </div>
+ <div><img src="${movie.BoxArt.LargeUrl}" /></div>
+ </td>
+ </tr>
+</script>
+
+<script type="text/javascript">
+ var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
+ cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;
+
+ getMovies( pageIndex );
+
+ $( "#genres li" ).click( selectGenre );
+
+ $( ".cart" )
+ .delegate( "select", "change", sort )
+ .delegate( "#sortBtn", "click", sort )
+ .delegate( "#submit", "click", function() {
+ alert( cart.count + " bookings submitted for payment...");
+ removeBookings();
+ })
+ .delegate( "#cancel", "click", function() {
+ removeBookings();
+ })
+ .empty();
+
+ $( "#cartTmpl" )
+ .tmpl( cart )
+ .appendTo( ".cart", cart );
+
+ var cartTmplItem = $( ".cart td" ).tmplItem();
+
+ function selectGenre() {
+ $( "#genres li" ).removeClass( "selected" );
+ $( this ).addClass( "selected" );
+
+ pageIndex = 1;
+ genre = encodeURI( $(this).text() );
+ getMovies( pageIndex );
+ }
+
+ function sort() {
+ var compare = compareName, reverse = false, data = [];
+ cart.sortBy = $( "#sort select" ).val();
+ switch ( $( "#sort select" ).val() ) {
+ case "1":
+ reverse = true;
+ break;
+ case "2":
+ compare = compareDate;
+ break;
+ }
+
+ for ( var item in cart.bookings ) {
+ data.push( cart.bookings[item] );
+ }
+ data = data.sort( compare );
+
+ bookingTmplItems = $.tmplCmd( "replace", data, bookingTmplItems );
+
+ function compareName( a, b ) {
+ return a == b ? 0 : (((a.movie.Name > b.movie.Name) !== reverse) ? 1 : -1);
+ }
+ function compareDate( a, b ) {
+ return a.date - b.date;
+ }
+ }
+
+ function getMovies( index ) {
+ var query = "http://odata.netflix.com/Catalog/Genres('" + genre + "')/Titles" +
+ "?$format=json" +
+ "&$inlinecount=allpages" + // get total number of records
+ "&$skip=" + (index-1) * pageSize + // skip to first record of page
+ "&$top=" + pageSize; // page size
+
+ pageIndex = index;
+
+ $( "#movieList" )
+ .fadeOut( "medium", function () {
+ $.ajax({
+ dataType: "jsonp",
+ url: query,
+ jsonp: "$callback",
+ success: showMovies
+ });
+ });
+ }
+
+ function showMovies( data ) {
+ pageCount = Math.ceil( data.d.__count/pageSize ),
+ movies = data.d.results;
+
+ $( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });
+
+ // show movies in template
+ $( "#movieList" ).empty();
+
+ $( "#movieTmpl" )
+ // Render movies using the movieTemplate
+ .tmpl( movies )
+
+ // Display rendered movies in the movieList container
+ .appendTo( "#movieList" )
+
+ // Animate
+ .find( "div" ).fadeIn( 4000 ).end()
+
+ // Add click handler
+ .find( ".buyButton" ).click( function() {
+ buyTickets( $(this).tmplItem().data );
+ });
+
+ $( "#movieList" ).fadeIn( "medium" )
+ }
+
+ function buyTickets( movie ) {
+ // Add item to cart
+ var booking = cart.bookings[movie.Id];
+ if ( booking ) {
+ booking.quantity++;
+ } else {
+ cart.count++;
+ cartTmplItem.update();
+ booking = { movie: movie, date: new Date(), quantity: 1, movieTheater: "" };
+ }
+ selectBooking( booking );
+ }
+
+ function selectBooking( booking ) {
+ if ( selectedBooking ) {
+ if ( selectedBooking === booking ) {
+ updateBooking( bookingItem( selectedBooking ));
+ return;
+ }
+ // Collapse previously selected booking, and switch to non-edit view
+ var oldSelected = selectedBooking;
+ $( "div", bookingItem( oldSelected ).nodes ).animate( { height: 0 }, 500, function() {
+ switchView( oldSelected );
+ });
+ }
+ selectedBooking = booking;
+ if ( !booking ) {
+ return;
+ }
+ if ( cart.bookings[booking.movie.Id] ) {
+ switchView( booking, true );
+ } else {
+ cart.bookings[booking.movie.Id] = booking;
+
+ var bookingNode = $( "#bookingEditTmpl" )
+
+ // Render the booking for the chosen movie using the bookingEditTemplate
+ .tmpl( booking, { animate: true } )
+
+ // Append the rendered booking to the bookings list
+ .appendTo( "#bookingsList" )
+
+ // Get the 2nd <tr> of the appended booking
+ .last()[0];
+
+ // Get the template item for the 2nd <tr>, which is the template item for the "bookingEditTmpl" template
+ var newItem = $.tmplItem( bookingNode );
+ bookingTmplItems.push( newItem );
+
+ // Attach handlers etc. on the rendered template.
+ bookingEditRendered( newItem );
+ }
+ }
+
+ function bookingEditRendered( item ) {
+ var data = item.data, nodes = item.nodes;
+
+ $( nodes[0] ).click( function() {
+ selectBooking();
+ });
+
+ $( ".close", nodes ).click( removeBooking );
+
+ $( ".date", nodes ).change( function() {
+ data.date = $(this).datepicker( "getDate" );
+ updateBooking( item );
+ })
+ .datepicker({ dateFormat: "DD, d MM, yy" });
+
+ $( ".quantity", nodes ).change( function() {
+ data.quantity = $(this).val();
+ updateBooking( item );
+ });
+
+ $( ".theater", nodes ).change( function() {
+ data.movieTheater = $(this).val();
+ updateBooking( item );
+ });
+
+ if ( item.animate ) {
+ $( "div", nodes ).css( "height", 0 ).animate( { height: 116 }, 500 );
+ }
+ }
+
+ function bookingRendered( item ) {
+ $( item.nodes ).click( function() {
+ selectBooking( item.data );
+ });
+ $( ".close", item.nodes ).click( removeBooking );
+ }
+
+ function switchView( booking, edit ) {
+ if ( !booking ) {
+ return;
+ }
+ var item = bookingItem( booking ),
+ tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).template();
+ if ( item.tmpl !== tmpl) {
+ item.tmpl = tmpl;
+ item.update();
+ (edit ? bookingEditRendered : bookingRendered)( item );
+ }
+ }
+
+ function updateBooking( item ) {
+ item.animate = false;
+ item.update();
+ (item.data === selectedBooking ? bookingEditRendered : bookingRendered)( item );
+ item.animate = true;
+ }
+
+ function removeBooking() {
+ var booking = $.tmplItem(this).data;
+ if ( booking === selectedBooking ) {
+ selectedBooking = null;
+ }
+ delete cart.bookings[booking.movie.Id];
+ cart.count--;
+ cartTmplItem.update();
+ $.tmplCmd( "remove", booking, bookingTmplItems );
+ return false;
+ }
+
+ function removeBookings() {
+ $.tmplCmd( "remove", bookingTmplItems );
+ bookingTmplItems = [];
+ cart.count = 0;
+ cart.bookings = {};
+ selectedBooking = null;
+ cartTmplItem.update();
+ }
+
+ function formatDate( date ) {
+ return date.toLocaleDateString();
+ }
+
+ function bookingItem( booking ) {
+ return $.tmplCmd( "find", booking, bookingTmplItems)[0];
+ }
+</script>
+
+</body>
+</html>
diff --git a/demos/movies/PagesTmplPlus/movies2.html b/demos/movies/PagesTmplPlus/movies2.html
new file mode 100644
index 0000000..ba948bd
--- /dev/null
+++ b/demos/movies/PagesTmplPlus/movies2.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+This sample illustrates using templates for a more complete and
+realistic scenario.
+
+It uses the NetFlix OData JSONP services as a source of data.
+
+This version of the movies sample demo uses the
+ $( templateSelector ).tmpl( data ).appendTo( targetSelector )
+pattern, and also uses the tmplCmd plugin and the rendered event.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>jQuery + OData + Netflix Catalog API</title>
+ <link href="../css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
+ <link href="../css/movies.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="about">
+ This is a demo of updates to the jQuery templating feature, proposed by Microsoft.<br/>
+ The source can be viewed here: <a href="http://github.com/nje/jquery-tmpl/">NJE Templating Branch on GitHub</a>
+</div>
+<div id="pageBody">
+<h1>Netflix: Book a Movie...</h1>
+
+ <ul id="genres">
+ <li class="selected">Cartoons</li>
+ <li>Drama</li>
+ <li>Foreign</li>
+ <li>Action Classics</li>
+ <li>Horror</li>
+ <li>Sci-Fi Cult Classics</li>
+ </ul>
+
+ <div id="pager"><ul class="pages"><li class="pgEmpty">first</li><li class="pgEmpty">prev</li></ul></div>
+
+ <div id="movieList"></div>
+ <table id="bookingsList">
+ <tbody><tr class="cart"><td class="cart-false" colspan="4">
+ <span class="text">0 items in Cart...</span>
+ </td></tr></tbody>
+ </table>
+ <br/>
+</div>
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../../../jquery.tmplPlus.js" type="text/javascript"></script>
+<script src="../components/jquery.pager.js" type="text/javascript"></script>
+<script src="../components/jquery-ui-1.8.1.custom.js" type="text/javascript"></script>
+
+<script id="movieTmpl" type="text/x-jquery-tmpl">
+ <div>
+ <div><img src="${BoxArt.LargeUrl}" /> </div>
+ <strong>${Name}</strong>
+ <p>{{html Synopsis}}</p>
+ <input type="button" title="Buy tickets for '${Name}'" value="Add to cart..." class="buyButton"/>
+ <br/>
+ </div>
+</script>
+
+<script id="cartTmpl" type="text/x-jquery-tmpl">
+ <td class="cart-${!!count}" colspan="4">
+ <span class="text">${count} items in Cart...</span>
+ {{if count}}
+ <span id="submit">Checkout</span>
+ <span id="cancel">Remove All</span>
+ {{if count>1}}
+ <span id="sort"><span id="sortBtn">Sort</span>:
+ <select>
+ <option value="0" {{if sortBy==="0"}}selected{{/if}}>Name A-Z</option>
+ <option value="1" {{if sortBy==="1"}}selected{{/if}}>Name Z-A</option>
+ <option value="2" {{if sortBy==="2"}}selected{{/if}}>Date</option>
+ </select>
+ </span>
+ {{/if}}
+ </select>
+ {{/if}}
+ </td>
+</script>
+
+<script id="bookingTitleTmpl" type="text/x-jquery-tmpl">
+ <tr class="bookingTitle${$item.mode}">
+ <td>${movie.Name}</td><td>${movieTheater}</td>
+ <td>${formatDate(date)}</td>
+ <td>
+ ${quantity}
+ <span class="ui-icon close"></span>
+ </td>
+ </tr>
+</script>
+
+<script id="bookingEditTmpl" type="text/x-jquery-tmpl">
+ {{tmpl($data, {mode: "Edit"}) "#bookingTitleTmpl"}}
+ <tr class="bookingEdit">
+ <td colspan="4">
+ <div class="fields">
+ <span>Movie Theater: </span><input class="theater" type="text" value="${movieTheater}" /><br/>
+ <span>Date: </span><input class="date" type="text" value="${formatDate(date)}" /><br/>
+ <span>Quantity: </span><input class="quantity" type="text" value="${quantity}" />
+ </div>
+ <div><img src="${movie.BoxArt.LargeUrl}" /></div>
+ </td>
+ </tr>
+</script>
+
+<script type="text/javascript">
+ var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
+ cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;
+
+ getMovies( pageIndex );
+
+ $( "#genres li" ).click( selectGenre );
+
+ $( ".cart" )
+ .delegate( "select", "change", sort )
+ .delegate( "#sortBtn", "click", sort )
+ .delegate( "#submit", "click", function() {
+ alert( cart.count + " bookings submitted for payment...");
+ removeBookings();
+ })
+ .delegate( "#cancel", "click", function() {
+ removeBookings();
+ })
+ .empty();
+ $( "#cartTmpl" )
+ .tmpl( cart )
+ .appendTo( ".cart", cart );
+
+ var cartTmplItem = $( ".cart td" ).tmplItem();
+
+ function selectGenre() {
+ $( "#genres li" ).removeClass( "selected" );
+ $( this ).addClass( "selected" );
+
+ pageIndex = 1;
+ genre = encodeURI( $(this).text() );
+ getMovies( pageIndex );
+ }
+
+ function sort() {
+ var compare = compareName, reverse = false, data = [];
+ cart.sortBy = $( "#sort select" ).val();
+ switch ( $( "#sort select" ).val() ) {
+ case "1":
+ reverse = true;
+ break;
+ case "2":
+ compare = compareDate;
+ break;
+ }
+
+ for ( var item in cart.bookings ) {
+ data.push( cart.bookings[item] );
+ }
+ data = data.sort( compare );
+
+ bookingTmplItems = $.tmplCmd( "replace", data, bookingTmplItems );
+
+ function compareName( a, b ) {
+ return a == b ? 0 : (((a.movie.Name > b.movie.Name) !== reverse) ? 1 : -1);
+ }
+ function compareDate( a, b ) {
+ return a.date - b.date;
+ }
+ }
+
+ function getMovies( index ) {
+ var query = "http://odata.netflix.com/Catalog/Genres('" + genre + "')/Titles" +
+ "?$format=json" +
+ "&$inlinecount=allpages" + // get total number of records
+ "&$skip=" + (index-1) * pageSize + // skip to first record of page
+ "&$top=" + pageSize; // page size
+
+ pageIndex = index;
+
+ $( "#movieList" )
+ .fadeOut( "medium", function () {
+ $.ajax({
+ dataType: "jsonp",
+ url: query,
+ jsonp: "$callback",
+ success: showMovies
+ });
+ });
+ }
+
+ function showMovies( data ) {
+ pageCount = Math.ceil( data.d.__count/pageSize ),
+ movies = data.d.results;
+
+ $( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });
+
+ // show movies in template
+ $( "#movieList" ).empty();
+
+ $( "#movieTmpl" )
+ // Render movies using the movieTemplate
+ .tmpl( movies, { rendered: onMovieRendered } )
+
+ // Display rendered movies in the movieList container
+ .appendTo( "#movieList" );
+
+ $( "#movieList" ).fadeIn( "medium" )
+ }
+
+ function buyTickets( movie ) {
+ // Add item to cart
+ var booking = cart.bookings[movie.Id];
+ if ( booking ) {
+ booking.quantity++;
+ } else {
+ cart.count++;
+ cartTmplItem.update();
+ booking = { movie: movie, date: new Date(), quantity: 1, movieTheater: "" };
+ }
+ selectBooking( booking );
+ }
+
+ function selectBooking( booking ) {
+ if ( selectedBooking ) {
+ if ( selectedBooking === booking ) {
+ updateBooking( bookingItem( selectedBooking ));
+ return;
+ }
+ // Collapse previously selected booking, and switch to non-edit view
+ var oldSelected = selectedBooking;
+ $( "div", bookingItem( oldSelected ).nodes ).animate( { height: 0 }, 500, function() {
+ switchView( oldSelected );
+ });
+ }
+ selectedBooking = booking;
+ if ( !booking ) {
+ return;
+ }
+ if ( cart.bookings[booking.movie.Id] ) {
+ switchView( booking, true );
+ } else {
+ cart.bookings[booking.movie.Id] = booking;
+
+ $( "#bookingEditTmpl" )
+
+ // Render the booking for the chosen movie using the bookingEditTemplate
+ .tmpl( booking, {
+ animate: true,
+ rendered: onBookingEditRendered,
+ addedTmplItems: bookingTmplItems
+ })
+
+ // Append the rendered booking to the bookings list
+ .appendTo( "#bookingsList" );
+ }
+ }
+
+ function switchView( booking, edit ) {
+ if ( !booking ) {
+ return;
+ }
+ var item = bookingItem( booking ),
+ rendered = edit ? onBookingEditRendered : onBookingRendered;
+ if ( item.rendered !== rendered) {
+ item.tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).template();
+ item.rendered = rendered;
+ item.update();
+ }
+ }
+
+ function onMovieRendered( item ) {
+ $( "div", item.nodes ).fadeIn( 4000 );
+ $( ".buyButton", item.nodes ).click( function() {
+ buyTickets( item.data );
+ });
+ }
+
+ function onBookingRendered( item ) {
+ $( item.nodes ).click( function() {
+ selectBooking( item.data );
+ });
+ $( ".close", item.nodes ).click( removeBooking );
+ }
+
+ function onBookingEditRendered( item ) {
+ var data = item.data, nodes = item.nodes;
+
+ $( nodes[0] ).click( function() {
+ selectBooking();
+ });
+
+ $( ".close", nodes ).click( removeBooking );
+
+ $( ".date", nodes ).change( function() {
+ data.date = $(this).datepicker( "getDate" );
+ updateBooking( item );
+ })
+ .datepicker({ dateFormat: "DD, d MM, yy" });
+
+ $( ".quantity", nodes ).change( function() {
+ data.quantity = $(this).val();
+ updateBooking( item );
+ });
+
+ $( ".theater", nodes ).change( function() {
+ data.movieTheater = $(this).val();
+ updateBooking( item );
+ });
+
+ if ( item.animate ) {
+ $( "div", nodes ).css( "height", 0 ).animate( { height: 116 }, 500 );
+ }
+ }
+
+ function updateBooking( item ) {
+ item.animate = false;
+ item.update();
+ item.animate = true;
+ }
+
+ function removeBooking() {
+ var booking = $.tmplItem(this).data;
+ if ( booking === selectedBooking ) {
+ selectedBooking = null;
+ }
+ delete cart.bookings[booking.movie.Id];
+ cart.count--;
+ cartTmplItem.update();
+ $.tmplCmd( "remove", booking, bookingTmplItems );
+ return false;
+ }
+
+ function removeBookings() {
+ $.tmplCmd( "remove", bookingTmplItems );
+ bookingTmplItems = [];
+ cart.count = 0;
+ cart.bookings = {};
+ selectedBooking = null;
+ cartTmplItem.update();
+ }
+
+ function formatDate( date ) {
+ return date.toLocaleDateString();
+ }
+
+ function bookingItem( booking ) {
+ return $.tmplCmd( "find", booking, bookingTmplItems)[0];
+ }
+</script>
+
+</body>
+</html>
diff --git a/demos/movies/PagesTmplPlus/movies3.html b/demos/movies/PagesTmplPlus/movies3.html
new file mode 100644
index 0000000..889e539
--- /dev/null
+++ b/demos/movies/PagesTmplPlus/movies3.html
@@ -0,0 +1,337 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+This sample illustrates using templates for a more complete and
+realistic scenario.
+
+It uses the NetFlix OData JSONP services as a source of data.
+
+This version of the movies sample demo uses the
+ $( targetSelector ).append( templateSelector, data )
+pattern, and also uses the tmplCmd plugin and the rendered event.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>jQuery + OData + Netflix Catalog API</title>
+ <link href="../css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
+ <link href="../css/movies.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="about">
+ This is a demo of updates to the jQuery templating feature, proposed by Microsoft.<br/>
+ The source can be viewed here: <a href="http://github.com/nje/jquery-tmpl/">NJE Templating Branch on GitHub</a>
+</div>
+<div id="pageBody">
+<h1>Netflix: Book a Movie...</h1>
+
+ <ul id="genres">
+ <li class="selected">Cartoons</li>
+ <li>Drama</li>
+ <li>Foreign</li>
+ <li>Action Classics</li>
+ <li>Horror</li>
+ <li>Sci-Fi Cult Classics</li>
+ </ul>
+
+ <div id="pager"><ul class="pages"><li class="pgEmpty">first</li><li class="pgEmpty">prev</li></ul></div>
+
+ <div id="movieList"></div>
+ <table id="bookingsList">
+ <tbody><tr class="cart"><td class="cart-false" colspan="4">
+ <span class="text">0 items in Cart...</span>
+ </td></tr></tbody>
+ </table>
+ <br/>
+</div>
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../../../jquery.tmplPlus.js" type="text/javascript"></script>
+<script src="../components/jquery.pager.js" type="text/javascript"></script>
+<script src="../components/jquery-ui-1.8.1.custom.js" type="text/javascript"></script>
+
+<script id="movieTmpl" type="text/x-jquery-tmpl">
+ <div>
+ <div><img src="${BoxArt.LargeUrl}" /> </div>
+ <strong>${Name}</strong>
+ <p>{{html Synopsis}}</p>
+ <input type="button" title="Buy tickets for '${Name}'" value="Add to cart..." class="buyButton"/>
+ <br/>
+ </div>
+</script>
+
+<script id="cartTmpl" type="text/x-jquery-tmpl">
+ <td class="cart-${!!count}" colspan="4">
+ <span class="text">${count} items in Cart...</span>
+ {{if count}}
+ <span id="submit">Checkout</span>
+ <span id="cancel">Remove All</span>
+ {{if count>1}}
+ <span id="sort"><span id="sortBtn">Sort</span>:
+ <select>
+ <option value="0" {{if sortBy==="0"}}selected{{/if}}>Name A-Z</option>
+ <option value="1" {{if sortBy==="1"}}selected{{/if}}>Name Z-A</option>
+ <option value="2" {{if sortBy==="2"}}selected{{/if}}>Date</option>
+ </select>
+ </span>
+ {{/if}}
+ </select>
+ {{/if}}
+ </td>
+</script>
+
+<script id="bookingTitleTmpl" type="text/x-jquery-tmpl">
+ <tr class="bookingTitle${$item.mode}">
+ <td>${movie.Name}</td><td>${movieTheater}</td>
+ <td>${formatDate(date)}</td>
+ <td>
+ ${quantity}
+ <span class="ui-icon close"></span>
+ </td>
+ </tr>
+</script>
+
+<script id="bookingEditTmpl" type="text/x-jquery-tmpl">
+ {{tmpl($data, {mode: "Edit"}) "#bookingTitleTmpl"}}
+ <tr class="bookingEdit">
+ <td colspan="4">
+ <div class="fields">
+ <span>Movie Theater: </span><input class="theater" type="text" value="${movieTheater}" /><br/>
+ <span>Date: </span><input class="date" type="text" value="${formatDate(date)}" /><br/>
+ <span>Quantity: </span><input class="quantity" type="text" value="${quantity}" />
+ </div>
+ <div><img src="${movie.BoxArt.LargeUrl}" /></div>
+ </td>
+ </tr>
+</script>
+
+<script type="text/javascript">
+ var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
+ cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;
+
+ getMovies( pageIndex );
+
+ $( "#genres li" ).click( selectGenre );
+
+ $( ".cart" )
+ .delegate( "select", "change", sort )
+ .delegate( "#sortBtn", "click", sort )
+ .delegate( "#submit", "click", function() {
+ alert( cart.count + " bookings submitted for payment...");
+ removeBookings();
+ })
+ .delegate( "#cancel", "click", function() {
+ removeBookings();
+ })
+ .empty()
+ .append( "#cartTmpl", cart );
+
+ var cartTmplItem = $( ".cart td" ).tmplItem();
+
+ function selectGenre() {
+ $( "#genres li" ).removeClass( "selected" );
+ $( this ).addClass( "selected" );
+
+ pageIndex = 1;
+ genre = encodeURI( $(this).text() );
+ getMovies( pageIndex );
+ }
+
+ function sort() {
+ var compare = compareName, reverse = false, data = [];
+ cart.sortBy = $( "#sort select" ).val();
+ switch ( $( "#sort select" ).val() ) {
+ case "1":
+ reverse = true;
+ break;
+ case "2":
+ compare = compareDate;
+ break;
+ }
+
+ for ( var item in cart.bookings ) {
+ data.push( cart.bookings[item] );
+ }
+ data = data.sort( compare );
+
+ bookingTmplItems = $.tmplCmd( "replace", data, bookingTmplItems );
+
+ function compareName( a, b ) {
+ return a == b ? 0 : (((a.movie.Name > b.movie.Name) !== reverse) ? 1 : -1);
+ }
+ function compareDate( a, b ) {
+ return a.date - b.date;
+ }
+ }
+
+ function getMovies( index ) {
+ var query = "http://odata.netflix.com/Catalog/Genres('" + genre + "')/Titles" +
+ "?$format=json" +
+ "&$inlinecount=allpages" + // get total number of records
+ "&$skip=" + (index-1) * pageSize + // skip to first record of page
+ "&$top=" + pageSize; // page size
+
+ pageIndex = index;
+
+ $( "#movieList" )
+ .fadeOut( "medium", function () {
+ $.ajax({
+ dataType: "jsonp",
+ url: query,
+ jsonp: "$callback",
+ success: showMovies
+ });
+ });
+ }
+
+ function showMovies( data ) {
+ pageCount = Math.ceil( data.d.__count/pageSize ),
+ movies = data.d.results;
+
+ $( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });
+
+ $( "#movieList" )
+ .empty()
+
+ // Render movies using the movieTemplate, and display rendered movies in the movieList container
+ .append( "#movieTmpl", movies, { rendered: onMovieRendered } )
+
+ .fadeIn( "medium" );
+ }
+
+ function buyTickets( movie ) {
+ // Add item to cart
+ var booking = cart.bookings[movie.Id];
+ if ( booking ) {
+ booking.quantity++;
+ } else {
+ cart.count++;
+ cartTmplItem.update();
+ booking = { movie: movie, date: new Date(), quantity: 1, movieTheater: "" };
+ }
+ selectBooking( booking );
+ }
+
+ function selectBooking( booking ) {
+ if ( selectedBooking ) {
+ if ( selectedBooking === booking ) {
+ updateBooking( bookingItem( selectedBooking ));
+ return;
+ }
+ // Collapse previously selected booking, and switch to non-edit view
+ var oldSelected = selectedBooking;
+ $( "div", bookingItem( oldSelected ).nodes ).animate( { height: 0 }, 500, function() {
+ switchView( oldSelected );
+ });
+ }
+ selectedBooking = booking;
+ if ( !booking ) {
+ return;
+ }
+ if ( cart.bookings[booking.movie.Id] ) {
+ switchView( booking, true );
+ } else {
+ cart.bookings[booking.movie.Id] = booking;
+
+ // Render the booking for the chosen movie using the bookingEditTemplate, and append the rendered booking to the bookings list
+ $( "#bookingsList" ).append( "#bookingEditTmpl", booking, {
+ animate: true,
+ rendered: onBookingEditRendered,
+ addedTmplItems: bookingTmplItems
+ });
+ }
+ }
+
+ function switchView( booking, edit ) {
+ if ( !booking ) {
+ return;
+ }
+ var item = bookingItem( booking ),
+ rendered = edit ? onBookingEditRendered : onBookingRendered;
+ if ( item.rendered !== rendered) {
+ item.tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).template();
+ item.rendered = rendered;
+ item.update();
+ }
+ }
+
+ function onMovieRendered( item ) {
+ $( "div", item.nodes ).fadeIn( 4000 );
+ $( ".buyButton", item.nodes ).click( function() {
+ buyTickets( item.data );
+ });
+ }
+
+ function onBookingRendered( item ) {
+ $( item.nodes ).click( function() {
+ selectBooking( item.data );
+ });
+ $( ".close", item.nodes ).click( removeBooking );
+ }
+
+ function onBookingEditRendered( item ) {
+ var data = item.data, nodes = item.nodes;
+
+ $( nodes[0] ).click( function() {
+ selectBooking();
+ });
+
+ $( ".close", nodes ).click( removeBooking );
+
+ $( ".date", nodes ).change( function() {
+ data.date = $(this).datepicker( "getDate" );
+ updateBooking( item );
+ })
+ .datepicker({ dateFormat: "DD, d MM, yy" });
+
+ $( ".quantity", nodes ).change( function() {
+ data.quantity = $(this).val();
+ updateBooking( item );
+ });
+
+ $( ".theater", nodes ).change( function() {
+ data.movieTheater = $(this).val();
+ updateBooking( item );
+ });
+
+ if ( item.animate ) {
+ $( "div", nodes ).css( "height", 0 ).animate( { height: 116 }, 500 );
+ }
+ }
+
+ function updateBooking( item ) {
+ item.animate = false;
+ item.update();
+ item.animate = true;
+ }
+
+ function removeBooking() {
+ var booking = $.tmplItem(this).data;
+ if ( booking === selectedBooking ) {
+ selectedBooking = null;
+ }
+ delete cart.bookings[booking.movie.Id];
+ cart.count--;
+ cartTmplItem.update();
+ $.tmplCmd( "remove", booking, bookingTmplItems );
+ return false;
+ }
+
+ function removeBookings() {
+ $.tmplCmd( "remove", bookingTmplItems );
+ bookingTmplItems = [];
+ cart.count = 0;
+ cart.bookings = {};
+ selectedBooking = null;
+ cartTmplItem.update();
+ }
+
+ function formatDate( date ) {
+ return date.toLocaleDateString();
+ }
+
+ function bookingItem( booking ) {
+ return $.tmplCmd( "find", booking, bookingTmplItems)[0];
+ }
+</script>
+
+</body>
+</html>
diff --git a/demos/movies/components/jquery-ui-1.8.1.custom.js b/demos/movies/components/jquery-ui-1.8.1.custom.js
new file mode 100644
index 0000000..981369e
--- /dev/null
+++ b/demos/movies/components/jquery-ui-1.8.1.custom.js
@@ -0,0 +1,1929 @@
+/*!
+ * jQuery UI 1.8.1
+ *
+ * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://docs.jquery.com/UI
+ */
+;jQuery.ui || (function($) {
+
+//Helper functions and ui object
+$.ui = {
+ version: "1.8.1",
+
+ // $.ui.plugin is deprecated. Use the proxy pattern instead.
+ plugin: {
+ add: function(module, option, set) {
+ var proto = $.ui[module].prototype;
+ for(var i in set) {
+ proto.plugins[i] = proto.plugins[i] || [];
+ proto.plugins[i].push([option, set[i]]);
+ }
+ },
+ call: function(instance, name, args) {
+ var set = instance.plugins[name];
+ if(!set || !instance.element[0].parentNode) { return; }
+
+ for (var i = 0; i < set.length; i++) {
+ if (instance.options[set[i][0]]) {
+ set[i][1].apply(instance.element, args);
+ }
+ }
+ }
+ },
+
+ contains: function(a, b) {
+ return document.compareDocumentPosition
+ ? a.compareDocumentPosition(b) & 16
+ : a !== b && a.contains(b);
+ },
+
+ hasScroll: function(el, a) {
+
+ //If overflow is hidden, the element might have extra content, but the user wants to hide it
+ if ($(el).css('overflow') == 'hidden') { return false; }
+
+ var scroll = (a && a == 'left') ? 'scrollLeft' : 'scrollTop',
+ has = false;
+
+ if (el[scroll] > 0) { return true; }
+
+ // TODO: determine which cases actually cause this to happen
+ // if the element doesn't have the scroll set, see if it's possible to
+ // set the scroll
+ el[scroll] = 1;
+ has = (el[scroll] > 0);
+ el[scroll] = 0;
+ return has;
+ },
+
+ isOverAxis: function(x, reference, size) {
+ //Determines when x coordinate is over "b" element axis
+ return (x > reference) && (x < (reference + size));
+ },
+
+ isOver: function(y, x, top, left, height, width) {
+ //Determines when x, y coordinates is over "b" element
+ return $.ui.isOverAxis(y, top, height) && $.ui.isOverAxis(x, left, width);
+ },
+
+ keyCode: {
+ ALT: 18,
+ BACKSPACE: 8,
+ CAPS_LOCK: 20,
+ COMMA: 188,
+ CONTROL: 17,
+ DELETE: 46,
+ DOWN: 40,
+ END: 35,
+ ENTER: 13,
+ ESCAPE: 27,
+ HOME: 36,
+ INSERT: 45,
+ LEFT: 37,
+ NUMPAD_ADD: 107,
+ NUMPAD_DECIMAL: 110,
+ NUMPAD_DIVIDE: 111,
+ NUMPAD_ENTER: 108,
+ NUMPAD_MULTIPLY: 106,
+ NUMPAD_SUBTRACT: 109,
+ PAGE_DOWN: 34,
+ PAGE_UP: 33,
+ PERIOD: 190,
+ RIGHT: 39,
+ SHIFT: 16,
+ SPACE: 32,
+ TAB: 9,
+ UP: 38
+ }
+};
+
+//jQuery plugins
+$.fn.extend({
+ _focus: $.fn.focus,
+ focus: function(delay, fn) {
+ return typeof delay === 'number'
+ ? this.each(function() {
+ var elem = this;
+ setTimeout(function() {
+ $(elem).focus();
+ (fn && fn.call(elem));
+ }, delay);
+ })
+ : this._focus.apply(this, arguments);
+ },
+
+ enableSelection: function() {
+ return this
+ .attr('unselectable', 'off')
+ .css('MozUserSelect', '');
+ },
+
+ disableSelection: function() {
+ return this
+ .attr('unselectable', 'on')
+ .css('MozUserSelect', 'none');
+ },
+
+ scrollParent: function() {
+ var scrollParent;
+ if(($.browser.msie && (/(static|relative)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) {
+ scrollParent = this.parents().filter(function() {
+ return (/(relative|absolute|fixed)/).test($.curCSS(this,'position',1)) && (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1));
+ }).eq(0);
+ } else {
+ scrollParent = this.parents().filter(function() {
+ return (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1));
+ }).eq(0);
+ }
+
+ return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent;
+ },
+
+ zIndex: function(zIndex) {
+ if (zIndex !== undefined) {
+ return this.css('zIndex', zIndex);
+ }
+
+ if (this.length) {
+ var elem = $(this[0]), position, value;
+ while (elem.length && elem[0] !== document) {
+ // Ignore z-index if position is set to a value where z-index is ignored by the browser
+ // This makes behavior of this function consistent across browsers
+ // WebKit always returns auto if the element is positioned
+ position = elem.css('position');
+ if (position == 'absolute' || position == 'relative' || position == 'fixed')
+ {
+ // IE returns 0 when zIndex is not specified
+ // other browsers return a string
+ // we ignore the case of nested elements with an explicit value of 0
+ // <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
+ value = parseInt(elem.css('zIndex'));
+ if (!isNaN(value) && value != 0) {
+ return value;
+ }
+ }
+ elem = elem.parent();
+ }
+ }
+
+ return 0;
+ }
+});
+
+
+//Additional selectors
+$.extend($.expr[':'], {
+ data: function(elem, i, match) {
+ return !!$.data(elem, match[3]);
+ },
+
+ focusable: function(element) {
+ var nodeName = element.nodeName.toLowerCase(),
+ tabIndex = $.attr(element, 'tabindex');
+ return (/input|select|textarea|button|object/.test(nodeName)
+ ? !element.disabled
+ : 'a' == nodeName || 'area' == nodeName
+ ? element.href || !isNaN(tabIndex)
+ : !isNaN(tabIndex))
+ // the element and all of its ancestors must be visible
+ // the browser may report that the area is hidden
+ && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
+ },
+
+ tabbable: function(element) {
+ var tabIndex = $.attr(element, 'tabindex');
+ return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is(':focusable');
+ }
+});
+
+})(jQuery);
+/*
+ * jQuery UI Datepicker 1.8.1
+ *
+ * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://docs.jquery.com/UI/Datepicker
+ *
+ * Depends:
+ * jquery.ui.core.js
+ */
+
+(function($) { // hide the namespace
+
+$.extend($.ui, { datepicker: { version: "1.8.1" } });
+
+var PROP_NAME = 'datepicker';
+var dpuuid = new Date().getTime();
+
+/* Date picker manager.
+ Use the singleton instance of this class, $.datepicker, to interact with the date picker.
+ Settings for (groups of) date pickers are maintained in an instance object,
+ allowing multiple different settings on the same page. */
+
+function Datepicker() {
+ this.debug = false; // Change this to true to start debugging
+ this._curInst = null; // The current instance in use
+ this._keyEvent = false; // If the last event was a key event
+ this._disabledInputs = []; // List of date picker inputs that have been disabled
+ this._datepickerShowing = false; // True if the popup picker is showing , false if not
+ this._inDialog = false; // True if showing within a "dialog", false if not
+ this._mainDivId = 'ui-datepicker-div'; // The ID of the main datepicker division
+ this._inlineClass = 'ui-datepicker-inline'; // The name of the inline marker class
+ this._appendClass = 'ui-datepicker-append'; // The name of the append marker class
+ this._triggerClass = 'ui-datepicker-trigger'; // The name of the trigger marker class
+ this._dialogClass = 'ui-datepicker-dialog'; // The name of the dialog marker class
+ this._disableClass = 'ui-datepicker-disabled'; // The name of the disabled covering marker class
+ this._unselectableClass = 'ui-datepicker-unselectable'; // The name of the unselectable cell marker class
+ this._currentClass = 'ui-datepicker-current-day'; // The name of the current day marker class
+ this._dayOverClass = 'ui-datepicker-days-cell-over'; // The name of the day hover marker class
+ this.regional = []; // Available regional settings, indexed by language code
+ this.regional[''] = { // Default regional settings
+ closeText: 'Done', // Display text for close link
+ prevText: 'Prev', // Display text for previous month link
+ nextText: 'Next', // Display text for next month link
+ currentText: 'Today', // Display text for current month link
+ monthNames: ['January','February','March','April','May','June',
+ 'July','August','September','October','November','December'], // Names of months for drop-down and formatting
+ monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting
+ dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], // For formatting
+ dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], // For formatting
+ dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'], // Column headings for days starting at Sunday
+ weekHeader: 'Wk', // Column header for week of the year
+ dateFormat: 'mm/dd/yy', // See format options on parseDate
+ firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
+ isRTL: false, // True if right-to-left language, false if left-to-right
+ showMonthAfterYear: false, // True if the year select precedes month, false for month then year
+ yearSuffix: '' // Additional text to append to the year in the month headers
+ };
+ this._defaults = { // Global defaults for all the date picker instances
+ showOn: 'focus', // 'focus' for popup on focus,
+ // 'button' for trigger button, or 'both' for either
+ showAnim: 'show', // Name of jQuery animation for popup
+ showOptions: {}, // Options for enhanced animations
+ defaultDate: null, // Used when field is blank: actual date,
+ // +/-number for offset from today, null for today
+ appendText: '', // Display text following the input box, e.g. showing the format
+ buttonText: '...', // Text for trigger button
+ buttonImage: '', // URL for trigger button image
+ buttonImageOnly: false, // True if the image appears alone, false if it appears on a button
+ hideIfNoPrevNext: false, // True to hide next/previous month links
+ // if not applicable, false to just disable them
+ navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links
+ gotoCurrent: false, // True if today link goes back to current selection instead
+ changeMonth: false, // True if month can be selected directly, false if only prev/next
+ changeYear: false, // True if year can be selected directly, false if only prev/next
+ yearRange: 'c-10:c+10', // Range of years to display in drop-down,
+ // either relative to today's year (-nn:+nn), relative to currently displayed year
+ // (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n)
+ showOtherMonths: false, // True to show dates in other months, false to leave blank
+ selectOtherMonths: false, // True to allow selection of dates in other months, false for unselectable
+ showWeek: false, // True to show week of the year, false to not show it
+ calculateWeek: this.iso8601Week, // How to calculate the week of the year,
+ // takes a Date and returns the number of the week for it
+ shortYearCutoff: '+10', // Short year values < this are in the current century,
+ // > this are in the previous century,
+ // string value starting with '+' for current year + value
+ minDate: null, // The earliest selectable date, or null for no limit
+ maxDate: null, // The latest selectable date, or null for no limit
+ duration: '_default', // Duration of display/closure
+ beforeShowDay: null, // Function that takes a date and returns an array with
+ // [0] = true if selectable, false if not, [1] = custom CSS class name(s) or '',
+ // [2] = cell title (optional), e.g. $.datepicker.noWeekends
+ beforeShow: null, // Function that takes an input field and
+ // returns a set of custom settings for the date picker
+ onSelect: null, // Define a callback function when a date is selected
+ onChangeMonthYear: null, // Define a callback function when the month or year is changed
+ onClose: null, // Define a callback function when the datepicker is closed
+ numberOfMonths: 1, // Number of months to show at a time
+ showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0)
+ stepMonths: 1, // Number of months to step back/forward
+ stepBigMonths: 12, // Number of months to step back/forward for the big links
+ altField: '', // Selector for an alternate field to store selected dates into
+ altFormat: '', // The date format to use for the alternate field
+ constrainInput: true, // The input is constrained by the current date format
+ showButtonPanel: false, // True to show button panel, false to not show it
+ autoSize: false // True to size the input for the date format, false to leave as is
+ };
+ $.extend(this._defaults, this.regional['']);
+ this.dpDiv = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"></div>');
+}
+
+$.extend(Datepicker.prototype, {
+ /* Class name added to elements to indicate already configured with a date picker. */
+ markerClassName: 'hasDatepicker',
+
+ /* Debug logging (if enabled). */
+ log: function () {
+ if (this.debug)
+ console.log.apply('', arguments);
+ },
+
+ // TODO rename to "widget" when switching to widget factory
+ _widgetDatepicker: function() {
+ return this.dpDiv;
+ },
+
+ /* Override the default settings for all instances of the date picker.
+ @param settings object - the new settings to use as defaults (anonymous object)
+ @return the manager object */
+ setDefaults: function(settings) {
+ extendRemove(this._defaults, settings || {});
+ return this;
+ },
+
+ /* Attach the date picker to a jQuery selection.
+ @param target element - the target input field or division or span
+ @param settings object - the new settings to use for this date picker instance (anonymous) */
+ _attachDatepicker: function(target, settings) {
+ // check for settings on the control itself - in namespace 'date:'
+ var inlineSettings = null;
+ for (var attrName in this._defaults) {
+ var attrValue = target.getAttribute('date:' + attrName);
+ if (attrValue) {
+ inlineSettings = inlineSettings || {};
+ try {
+ inlineSettings[attrName] = eval(attrValue);
+ } catch (err) {
+ inlineSettings[attrName] = attrValue;
+ }
+ }
+ }
+ var nodeName = target.nodeName.toLowerCase();
+ var inline = (nodeName == 'div' || nodeName == 'span');
+ if (!target.id)
+ target.id = 'dp' + (++this.uuid);
+ var inst = this._newInst($(target), inline);
+ inst.settings = $.extend({}, settings || {}, inlineSettings || {});
+ if (nodeName == 'input') {
+ this._connectDatepicker(target, inst);
+ } else if (inline) {
+ this._inlineDatepicker(target, inst);
+ }
+ },
+
+ /* Create a new instance object. */
+ _newInst: function(target, inline) {
+ var id = target[0].id.replace(/([^A-Za-z0-9_])/g, '\\\\$1'); // escape jQuery meta chars
+ return {id: id, input: target, // associated target
+ selectedDay: 0, selectedMonth: 0, selectedYear: 0, // current selection
+ drawMonth: 0, drawYear: 0, // month being drawn
+ inline: inline, // is datepicker inline or not
+ dpDiv: (!inline ? this.dpDiv : // presentation div
+ $('<div class="' + this._inlineClass + ' ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'))};
+ },
+
+ /* Attach the date picker to an input field. */
+ _connectDatepicker: function(target, inst) {
+ var input = $(target);
+ inst.append = $([]);
+ inst.trigger = $([]);
+ if (input.hasClass(this.markerClassName))
+ return;
+ this._attachments(input, inst);
+ input.addClass(this.markerClassName).keydown(this._doKeyDown).
+ keypress(this._doKeyPress).keyup(this._doKeyUp).
+ bind("setData.datepicker", function(event, key, value) {
+ inst.settings[key] = value;
+ }).bind("getData.datepicker", function(event, key) {
+ return this._get(inst, key);
+ });
+ this._autoSize(inst);
+ $.data(target, PROP_NAME, inst);
+ },
+
+ /* Make attachments based on settings. */
+ _attachments: function(input, inst) {
+ var appendText = this._get(inst, 'appendText');
+ var isRTL = this._get(inst, 'isRTL');
+ if (inst.append)
+ inst.append.remove();
+ if (appendText) {
+ inst.append = $('<span class="' + this._appendClass + '">' + appendText + '</span>');
+ input[isRTL ? 'before' : 'after'](inst.append);
+ }
+ input.unbind('focus', this._showDatepicker);
+ if (inst.trigger)
+ inst.trigger.remove();
+ var showOn = this._get(inst, 'showOn');
+ if (showOn == 'focus' || showOn == 'both') // pop-up date picker when in the marked field
+ input.focus(this._showDatepicker);
+ if (showOn == 'button' || showOn == 'both') { // pop-up date picker when button clicked
+ var buttonText = this._get(inst, 'buttonText');
+ var buttonImage = this._get(inst, 'buttonImage');
+ inst.trigger = $(this._get(inst, 'buttonImageOnly') ?
+ $('<img/>').addClass(this._triggerClass).
+ attr({ src: buttonImage, alt: buttonText, title: buttonText }) :
+ $('<button type="button"></button>').addClass(this._triggerClass).
+ html(buttonImage == '' ? buttonText : $('<img/>').attr(
+ { src:buttonImage, alt:buttonText, title:buttonText })));
+ input[isRTL ? 'before' : 'after'](inst.trigger);
+ inst.trigger.click(function() {
+ if ($.datepicker._datepickerShowing && $.datepicker._lastInput == input[0])
+ $.datepicker._hideDatepicker();
+ else
+ $.datepicker._showDatepicker(input[0]);
+ return false;
+ });
+ }
+ },
+
+ /* Apply the maximum length for the date format. */
+ _autoSize: function(inst) {
+ if (this._get(inst, 'autoSize') && !inst.inline) {
+ var date = new Date(2009, 12 - 1, 20); // Ensure double digits
+ var dateFormat = this._get(inst, 'dateFormat');
+ if (dateFormat.match(/[DM]/)) {
+ var findMax = function(names) {
+ var max = 0;
+ var maxI = 0;
+ for (var i = 0; i < names.length; i++) {
+ if (names[i].length > max) {
+ max = names[i].length;
+ maxI = i;
+ }
+ }
+ return maxI;
+ };
+ date.setMonth(findMax(this._get(inst, (dateFormat.match(/MM/) ?
+ 'monthNames' : 'monthNamesShort'))));
+ date.setDate(findMax(this._get(inst, (dateFormat.match(/DD/) ?
+ 'dayNames' : 'dayNamesShort'))) + 20 - date.getDay());
+ }
+ inst.input.attr('size', this._formatDate(inst, date).length);
+ }
+ },
+
+ /* Attach an inline date picker to a div. */
+ _inlineDatepicker: function(target, inst) {
+ var divSpan = $(target);
+ if (divSpan.hasClass(this.markerClassName))
+ return;
+ divSpan.addClass(this.markerClassName).append(inst.dpDiv).
+ bind("setData.datepicker", function(event, key, value){
+ inst.settings[key] = value;
+ }).bind("getData.datepicker", function(event, key){
+ return this._get(inst, key);
+ });
+ $.data(target, PROP_NAME, inst);
+ this._setDate(inst, this._getDefaultDate(inst), true);
+ this._updateDatepicker(inst);
+ this._updateAlternate(inst);
+ },
+
+ /* Pop-up the date picker in a "dialog" box.
+ @param input element - ignored
+ @param date string or Date - the initial date to display
+ @param onSelect function - the function to call when a date is selected
+ @param settings object - update the dialog date picker instance's settings (anonymous object)
+ @param pos int[2] - coordinates for the dialog's position within the screen or
+ event - with x/y coordinates or
+ leave empty for default (screen centre)
+ @return the manager object */
+ _dialogDatepicker: function(input, date, onSelect, settings, pos) {
+ var inst = this._dialogInst; // internal instance
+ if (!inst) {
+ var id = 'dp' + (++this.uuid);
+ this._dialogInput = $('<input type="text" id="' + id +
+ '" style="position: absolute; top: -100px; width: 0px; z-index: -10;"/>');
+ this._dialogInput.keydown(this._doKeyDown);
+ $('body').append(this._dialogInput);
+ inst = this._dialogInst = this._newInst(this._dialogInput, false);
+ inst.settings = {};
+ $.data(this._dialogInput[0], PROP_NAME, inst);
+ }
+ extendRemove(inst.settings, settings || {});
+ date = (date && date.constructor == Date ? this._formatDate(inst, date) : date);
+ this._dialogInput.val(date);
+
+ this._pos = (pos ? (pos.length ? pos : [pos.pageX, pos.pageY]) : null);
+ if (!this._pos) {
+ var browserWidth = document.documentElement.clientWidth;
+ var browserHeight = document.documentElement.clientHeight;
+ var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
+ var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+ this._pos = // should use actual width/height below
+ [(browserWidth / 2) - 100 + scrollX, (browserHeight / 2) - 150 + scrollY];
+ }
+
+ // move input on screen for focus, but hidden behind dialog
+ this._dialogInput.css('left', (this._pos[0] + 20) + 'px').css('top', this._pos[1] + 'px');
+ inst.settings.onSelect = onSelect;
+ this._inDialog = true;
+ this.dpDiv.addClass(this._dialogClass);
+ this._showDatepicker(this._dialogInput[0]);
+ if ($.blockUI)
+ $.blockUI(this.dpDiv);
+ $.data(this._dialogInput[0], PROP_NAME, inst);
+ return this;
+ },
+
+ /* Detach a datepicker from its control.
+ @param target element - the target input field or division or span */
+ _destroyDatepicker: function(target) {
+ var $target = $(target);
+ var inst = $.data(target, PROP_NAME);
+ if (!$target.hasClass(this.markerClassName)) {
+ return;
+ }
+ var nodeName = target.nodeName.toLowerCase();
+ $.removeData(target, PROP_NAME);
+ if (nodeName == 'input') {
+ inst.append.remove();
+ inst.trigger.remove();
+ $target.removeClass(this.markerClassName).
+ unbind('focus', this._showDatepicker).
+ unbind('keydown', this._doKeyDown).
+ unbind('keypress', this._doKeyPress).
+ unbind('keyup', this._doKeyUp);
+ } else if (nodeName == 'div' || nodeName == 'span')
+ $target.removeClass(this.markerClassName).empty();
+ },
+
+ /* Enable the date picker to a jQuery selection.
+ @param target element - the target input field or division or span */
+ _enableDatepicker: function(target) {
+ var $target = $(target);
+ var inst = $.data(target, PROP_NAME);
+ if (!$target.hasClass(this.markerClassName)) {
+ return;
+ }
+ var nodeName = target.nodeName.toLowerCase();
+ if (nodeName == 'input') {
+ target.disabled = false;
+ inst.trigger.filter('button').
+ each(function() { this.disabled = false; }).end().
+ filter('img').css({opacity: '1.0', cursor: ''});
+ }
+ else if (nodeName == 'div' || nodeName == 'span') {
+ var inline = $target.children('.' + this._inlineClass);
+ inline.children().removeClass('ui-state-disabled');
+ }
+ this._disabledInputs = $.map(this._disabledInputs,
+ function(value) { return (value == target ? null : value); }); // delete entry
+ },
+
+ /* Disable the date picker to a jQuery selection.
+ @param target element - the target input field or division or span */
+ _disableDatepicker: function(target) {
+ var $target = $(target);
+ var inst = $.data(target, PROP_NAME);
+ if (!$target.hasClass(this.markerClassName)) {
+ return;
+ }
+ var nodeName = target.nodeName.toLowerCase();
+ if (nodeName == 'input') {
+ target.disabled = true;
+ inst.trigger.filter('button').
+ each(function() { this.disabled = true; }).end().
+ filter('img').css({opacity: '0.5', cursor: 'default'});
+ }
+ else if (nodeName == 'div' || nodeName == 'span') {
+ var inline = $target.children('.' + this._inlineClass);
+ inline.children().addClass('ui-state-disabled');
+ }
+ this._disabledInputs = $.map(this._disabledInputs,
+ function(value) { return (value == target ? null : value); }); // delete entry
+ this._disabledInputs[this._disabledInputs.length] = target;
+ },
+
+ /* Is the first field in a jQuery collection disabled as a datepicker?
+ @param target element - the target input field or division or span
+ @return boolean - true if disabled, false if enabled */
+ _isDisabledDatepicker: function(target) {
+ if (!target) {
+ return false;
+ }
+ for (var i = 0; i < this._disabledInputs.length; i++) {
+ if (this._disabledInputs[i] == target)
+ return true;
+ }
+ return false;
+ },
+
+ /* Retrieve the instance data for the target control.
+ @param target element - the target input field or division or span
+ @return object - the associated instance data
+ @throws error if a jQuery problem getting data */
+ _getInst: function(target) {
+ try {
+ return $.data(target, PROP_NAME);
+ }
+ catch (err) {
+ throw 'Missing instance data for this datepicker';
+ }
+ },
+
+ /* Update or retrieve the settings for a date picker attached to an input field or division.
+ @param target element - the target input field or division or span
+ @param name object - the new settings to update or
+ string - the name of the setting to change or retrieve,
+ when retrieving also 'all' for all instance settings or
+ 'defaults' for all global defaults
+ @param value any - the new value for the setting
+ (omit if above is an object or to retrieve a value) */
+ _optionDatepicker: function(target, name, value) {
+ var inst = this._getInst(target);
+ if (arguments.length == 2 && typeof name == 'string') {
+ return (name == 'defaults' ? $.extend({}, $.datepicker._defaults) :
+ (inst ? (name == 'all' ? $.extend({}, inst.settings) :
+ this._get(inst, name)) : null));
+ }
+ var settings = name || {};
+ if (typeof name == 'string') {
+ settings = {};
+ settings[name] = value;
+ }
+ if (inst) {
+ if (this._curInst == inst) {
+ this._hideDatepicker();
+ }
+ var date = this._getDateDatepicker(target, true);
+ extendRemove(inst.settings, settings);
+ this._attachments($(target), inst);
+ this._autoSize(inst);
+ this._setDateDatepicker(target, date);
+ this._updateDatepicker(inst);
+ }
+ },
+
+ // change method deprecated
+ _changeDatepicker: function(target, name, value) {
+ this._optionDatepicker(target, name, value);
+ },
+
+ /* Redraw the date picker attached to an input field or division.
+ @param target element - the target input field or division or span */
+ _refreshDatepicker: function(target) {
+ var inst = this._getInst(target);
+ if (inst) {
+ this._updateDatepicker(inst);
+ }
+ },
+
+ /* Set the dates for a jQuery selection.
+ @param target element - the target input field or division or span
+ @param date Date - the new date */
+ _setDateDatepicker: function(target, date) {
+ var inst = this._getInst(target);
+ if (inst) {
+ this._setDate(inst, date);
+ this._updateDatepicker(inst);
+ this._updateAlternate(inst);
+ }
+ },
+
+ /* Get the date(s) for the first entry in a jQuery selection.
+ @param target element - the target input field or division or span
+ @param noDefault boolean - true if no default date is to be used
+ @return Date - the current date */
+ _getDateDatepicker: function(target, noDefault) {
+ var inst = this._getInst(target);
+ if (inst && !inst.inline)
+ this._setDateFromField(inst, noDefault);
+ return (inst ? this._getDate(inst) : null);
+ },
+
+ /* Handle keystrokes. */
+ _doKeyDown: function(event) {
+ var inst = $.datepicker._getInst(event.target);
+ var handled = true;
+ var isRTL = inst.dpDiv.is('.ui-datepicker-rtl');
+ inst._keyEvent = true;
+ if ($.datepicker._datepickerShowing)
+ switch (event.keyCode) {
+ case 9: $.datepicker._hideDatepicker();
+ handled = false;
+ break; // hide on tab out
+ case 13: var sel = $('td.' + $.datepicker._dayOverClass, inst.dpDiv).
+ add($('td.' + $.datepicker._currentClass, inst.dpDiv));
+ if (sel[0])
+ $.datepicker._selectDay(event.target, inst.selectedMonth, inst.selectedYear, sel[0]);
+ else
+ $.datepicker._hideDatepicker();
+ return false; // don't submit the form
+ break; // select the value on enter
+ case 27: $.datepicker._hideDatepicker();
+ break; // hide on escape
+ case 33: $.datepicker._adjustDate(event.target, (event.ctrlKey ?
+ -$.datepicker._get(inst, 'stepBigMonths') :
+ -$.datepicker._get(inst, 'stepMonths')), 'M');
+ break; // previous month/year on page up/+ ctrl
+ case 34: $.datepicker._adjustDate(event.target, (event.ctrlKey ?
+ +$.datepicker._get(inst, 'stepBigMonths') :
+ +$.datepicker._get(inst, 'stepMonths')), 'M');
+ break; // next month/year on page down/+ ctrl
+ case 35: if (event.ctrlKey || event.metaKey) $.datepicker._clearDate(event.target);
+ handled = event.ctrlKey || event.metaKey;
+ break; // clear on ctrl or command +end
+ case 36: if (event.ctrlKey || event.metaKey) $.datepicker._gotoToday(event.target);
+ handled = event.ctrlKey || event.metaKey;
+ break; // current on ctrl or command +home
+ case 37: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, (isRTL ? +1 : -1), 'D');
+ handled = event.ctrlKey || event.metaKey;
+ // -1 day on ctrl or command +left
+ if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, (event.ctrlKey ?
+ -$.datepicker._get(inst, 'stepBigMonths') :
+ -$.datepicker._get(inst, 'stepMonths')), 'M');
+ // next month/year on alt +left on Mac
+ break;
+ case 38: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, -7, 'D');
+ handled = event.ctrlKey || event.metaKey;
+ break; // -1 week on ctrl or command +up
+ case 39: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, (isRTL ? -1 : +1), 'D');
+ handled = event.ctrlKey || event.metaKey;
+ // +1 day on ctrl or command +right
+ if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, (event.ctrlKey ?
+ +$.datepicker._get(inst, 'stepBigMonths') :
+ +$.datepicker._get(inst, 'stepMonths')), 'M');
+ // next month/year on alt +right
+ break;
+ case 40: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, +7, 'D');
+ handled = event.ctrlKey || event.metaKey;
+ break; // +1 week on ctrl or command +down
+ default: handled = false;
+ }
+ else if (event.keyCode == 36 && event.ctrlKey) // display the date picker on ctrl+home
+ $.datepicker._showDatepicker(this);
+ else {
+ handled = false;
+ }
+ if (handled) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ },
+
+ /* Filter entered characters - based on date format. */
+ _doKeyPress: function(event) {
+ var inst = $.datepicker._getInst(event.target);
+ if ($.datepicker._get(inst, 'constrainInput')) {
+ var chars = $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat'));
+ var chr = String.fromCharCode(event.charCode == undefined ? event.keyCode : event.charCode);
+ return event.ctrlKey || (chr < ' ' || !chars || chars.indexOf(chr) > -1);
+ }
+ },
+
+ /* Synchronise manual entry and field/alternate field. */
+ _doKeyUp: function(event) {
+ var inst = $.datepicker._getInst(event.target);
+ if (inst.input.val() != inst.lastVal) {
+ try {
+ var date = $.datepicker.parseDate($.datepicker._get(inst, 'dateFormat'),
+ (inst.input ? inst.input.val() : null),
+ $.datepicker._getFormatConfig(inst));
+ if (date) { // only if valid
+ $.datepicker._setDateFromField(inst);
+ $.datepicker._updateAlternate(inst);
+ $.datepicker._updateDatepicker(inst);
+ }
+ }
+ catch (event) {
+ $.datepicker.log(event);
+ }
+ }
+ return true;
+ },
+
+ /* Pop-up the date picker for a given input field.
+ @param input element - the input field attached to the date picker or
+ event - if triggered by focus */
+ _showDatepicker: function(input) {
+ input = input.target || input;
+ if (input.nodeName.toLowerCase() != 'input') // find from button/image trigger
+ input = $('input', input.parentNode)[0];
+ if ($.datepicker._isDisabledDatepicker(input) || $.datepicker._lastInput == input) // already here
+ return;
+ var inst = $.datepicker._getInst(input);
+ if ($.datepicker._curInst && $.datepicker._curInst != inst) {
+ $.datepicker._curInst.dpDiv.stop(true, true);
+ }
+ var beforeShow = $.datepicker._get(inst, 'beforeShow');
+ extendRemove(inst.settings, (beforeShow ? beforeShow.apply(input, [input, inst]) : {}));
+ inst.lastVal = null;
+ $.datepicker._lastInput = input;
+ $.datepicker._setDateFromField(inst);
+ if ($.datepicker._inDialog) // hide cursor
+ input.value = '';
+ if (!$.datepicker._pos) { // position below input
+ $.datepicker._pos = $.datepicker._findPos(input);
+ $.datepicker._pos[1] += input.offsetHeight; // add the height
+ }
+ var isFixed = false;
+ $(input).parents().each(function() {
+ isFixed |= $(this).css('position') == 'fixed';
+ return !isFixed;
+ });
+ if (isFixed && $.browser.opera) { // correction for Opera when fixed and scrolled
+ $.datepicker._pos[0] -= document.documentElement.scrollLeft;
+ $.datepicker._pos[1] -= document.documentElement.scrollTop;
+ }
+ var offset = {left: $.datepicker._pos[0], top: $.datepicker._pos[1]};
+ $.datepicker._pos = null;
+ // determine sizing offscreen
+ inst.dpDiv.css({position: 'absolute', display: 'block', top: '-1000px'});
+ $.datepicker._updateDatepicker(inst);
+ // fix width for dynamic number of date pickers
+ // and adjust position before showing
+ offset = $.datepicker._checkOffset(inst, offset, isFixed);
+ inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ?
+ 'static' : (isFixed ? 'fixed' : 'absolute')), display: 'none',
+ left: offset.left + 'px', top: offset.top + 'px'});
+ if (!inst.inline) {
+ var showAnim = $.datepicker._get(inst, 'showAnim');
+ var duration = $.datepicker._get(inst, 'duration');
+ var postProcess = function() {
+ $.datepicker._datepickerShowing = true;
+ var borders = $.datepicker._getBorders(inst.dpDiv);
+ inst.dpDiv.find('iframe.ui-datepicker-cover'). // IE6- only
+ css({left: -borders[0], top: -borders[1],
+ width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()});
+ };
+ inst.dpDiv.zIndex($(input).zIndex()+1);
+ if ($.effects && $.effects[showAnim])
+ inst.dpDiv.show(showAnim, $.datepicker._get(inst, 'showOptions'), duration, postProcess);
+ else
+ inst.dpDiv[showAnim || 'show']((showAnim ? duration : null), postProcess);
+ if (!showAnim || !duration)
+ postProcess();
+ if (inst.input.is(':visible') && !inst.input.is(':disabled'))
+ inst.input.focus();
+ $.datepicker._curInst = inst;
+ }
+ },
+
+ /* Generate the date picker content. */
+ _updateDatepicker: function(inst) {
+ var self = this;
+ var borders = $.datepicker._getBorders(inst.dpDiv);
+ inst.dpDiv.empty().append(this._generateHTML(inst))
+ .find('iframe.ui-datepicker-cover') // IE6- only
+ .css({left: -borders[0], top: -borders[1],
+ width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
+ .end()
+ .find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a')
+ .bind('mouseout', function(){
+ $(this).removeClass('ui-state-hover');
+ if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-hover');
+ if(this.className.indexOf('ui-datepicker-next') != -1) $(this).removeClass('ui-datepicker-next-hover');
+ })
+ .bind('mouseover', function(){
+ if (!self._isDisabledDatepicker( inst.inline ? inst.dpDiv.parent()[0] : inst.input[0])) {
+ $(this).parents('.ui-datepicker-calendar').find('a').removeClass('ui-state-hover');
+ $(this).addClass('ui-state-hover');
+ if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).addClass('ui-datepicker-prev-hover');
+ if(this.className.indexOf('ui-datepicker-next') != -1) $(this).addClass('ui-datepicker-next-hover');
+ }
+ })
+ .end()
+ .find('.' + this._dayOverClass + ' a')
+ .trigger('mouseover')
+ .end();
+ var numMonths = this._getNumberOfMonths(inst);
+ var cols = numMonths[1];
+ var width = 17;
+ if (cols > 1)
+ inst.dpDiv.addClass('ui-datepicker-multi-' + cols).css('width', (width * cols) + 'em');
+ else
+ inst.dpDiv.removeClass('ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4').width('');
+ inst.dpDiv[(numMonths[0] != 1 || numMonths[1] != 1 ? 'add' : 'remove') +
+ 'Class']('ui-datepicker-multi');
+ inst.dpDiv[(this._get(inst, 'isRTL') ? 'add' : 'remove') +
+ 'Class']('ui-datepicker-rtl');
+ if (inst == $.datepicker._curInst && $.datepicker._datepickerShowing && inst.input &&
+ inst.input.is(':visible') && !inst.input.is(':disabled'))
+ inst.input.focus();
+ },
+
+ /* Retrieve the size of left and top borders for an element.
+ @param elem (jQuery object) the element of interest
+ @return (number[2]) the left and top borders */
+ _getBorders: function(elem) {
+ var convert = function(value) {
+ return {thin: 1, medium: 2, thick: 3}[value] || value;
+ };
+ return [parseFloat(convert(elem.css('border-left-width'))),
+ parseFloat(convert(elem.css('border-top-width')))];
+ },
+
+ /* Check positioning to remain on screen. */
+ _checkOffset: function(inst, offset, isFixed) {
+ var dpWidth = inst.dpDiv.outerWidth();
+ var dpHeight = inst.dpDiv.outerHeight();
+ var inputWidth = inst.input ? inst.input.outerWidth() : 0;
+ var inputHeight = inst.input ? inst.input.outerHeight() : 0;
+ var viewWidth = document.documentElement.clientWidth + $(document).scrollLeft();
+ var viewHeight = document.documentElement.clientHeight + $(document).scrollTop();
+
+ offset.left -= (this._get(inst, 'isRTL') ? (dpWidth - inputWidth) : 0);
+ offset.left -= (isFixed && offset.left == inst.input.offset().left) ? $(document).scrollLeft() : 0;
+ offset.top -= (isFixed && offset.top == (inst.input.offset().top + inputHeight)) ? $(document).scrollTop() : 0;
+
+ // now check if datepicker is showing outside window viewport - move to a better place if so.
+ offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
+ Math.abs(offset.left + dpWidth - viewWidth) : 0);
+ offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
+ Math.abs(dpHeight + inputHeight) : 0);
+
+ return offset;
+ },
+
+ /* Find an object's position on the screen. */
+ _findPos: function(obj) {
+ var inst = this._getInst(obj);
+ var isRTL = this._get(inst, 'isRTL');
+ while (obj && (obj.type == 'hidden' || obj.nodeType != 1)) {
+ obj = obj[isRTL ? 'previousSibling' : 'nextSibling'];
+ }
+ var position = $(obj).offset();
+ return [position.left, position.top];
+ },
+
+ /* Hide the date picker from view.
+ @param input element - the input field attached to the date picker */
+ _hideDatepicker: function(input) {
+ var inst = this._curInst;
+ if (!inst || (input && inst != $.data(input, PROP_NAME)))
+ return;
+ if (this._datepickerShowing) {
+ var showAnim = this._get(inst, 'showAnim');
+ var duration = this._get(inst, 'duration');
+ var postProcess = function() {
+ $.datepicker._tidyDialog(inst);
+ this._curInst = null;
+ };
+ if ($.effects && $.effects[showAnim])
+ inst.dpDiv.hide(showAnim, $.datepicker._get(inst, 'showOptions'), duration, postProcess);
+ else
+ inst.dpDiv[(showAnim == 'slideDown' ? 'slideUp' :
+ (showAnim == 'fadeIn' ? 'fadeOut' : 'hide'))]((showAnim ? duration : null), postProcess);
+ if (!showAnim)
+ postProcess();
+ var onClose = this._get(inst, 'onClose');
+ if (onClose)
+ onClose.apply((inst.input ? inst.input[0] : null),
+ [(inst.input ? inst.input.val() : ''), inst]); // trigger custom callback
+ this._datepickerShowing = false;
+ this._lastInput = null;
+ if (this._inDialog) {
+ this._dialogInput.css({ position: 'absolute', left: '0', top: '-100px' });
+ if ($.blockUI) {
+ $.unblockUI();
+ $('body').append(this.dpDiv);
+ }
+ }
+ this._inDialog = false;
+ }
+ },
+
+ /* Tidy up after a dialog display. */
+ _tidyDialog: function(inst) {
+ inst.dpDiv.removeClass(this._dialogClass).unbind('.ui-datepicker-calendar');
+ },
+
+ /* Close date picker if clicked elsewhere. */
+ _checkExternalClick: function(event) {
+ if (!$.datepicker._curInst)
+ return;
+ var $target = $(event.target);
+ if ($target[0].id != $.datepicker._mainDivId &&
+ $target.parents('#' + $.datepicker._mainDivId).length == 0 &&
+ !$target.hasClass($.datepicker.markerClassName) &&
+ !$target.hasClass($.datepicker._triggerClass) &&
+ $.datepicker._datepickerShowing && !($.datepicker._inDialog && $.blockUI))
+ $.datepicker._hideDatepicker();
+ },
+
+ /* Adjust one of the date sub-fields. */
+ _adjustDate: function(id, offset, period) {
+ var target = $(id);
+ var inst = this._getInst(target[0]);
+ if (this._isDisabledDatepicker(target[0])) {
+ return;
+ }
+ this._adjustInstDate(inst, offset +
+ (period == 'M' ? this._get(inst, 'showCurrentAtPos') : 0), // undo positioning
+ period);
+ this._updateDatepicker(inst);
+ },
+
+ /* Action for current link. */
+ _gotoToday: function(id) {
+ var target = $(id);
+ var inst = this._getInst(target[0]);
+ if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
+ inst.selectedDay = inst.currentDay;
+ inst.drawMonth = inst.selectedMonth = inst.currentMonth;
+ inst.drawYear = inst.selectedYear = inst.currentYear;
+ }
+ else {
+ var date = new Date();
+ inst.selectedDay = date.getDate();
+ inst.drawMonth = inst.selectedMonth = date.getMonth();
+ inst.drawYear = inst.selectedYear = date.getFullYear();
+ }
+ this._notifyChange(inst);
+ this._adjustDate(target);
+ },
+
+ /* Action for selecting a new month/year. */
+ _selectMonthYear: function(id, select, period) {
+ var target = $(id);
+ var inst = this._getInst(target[0]);
+ inst._selectingMonthYear = false;
+ inst['selected' + (period == 'M' ? 'Month' : 'Year')] =
+ inst['draw' + (period == 'M' ? 'Month' : 'Year')] =
+ parseInt(select.options[select.selectedIndex].value,10);
+ this._notifyChange(inst);
+ this._adjustDate(target);
+ },
+
+ /* Restore input focus after not changing month/year. */
+ _clickMonthYear: function(id) {
+ var target = $(id);
+ var inst = this._getInst(target[0]);
+ if (inst.input && inst._selectingMonthYear && !$.browser.msie)
+ inst.input.focus();
+ inst._selectingMonthYear = !inst._selectingMonthYear;
+ },
+
+ /* Action for selecting a day. */
+ _selectDay: function(id, month, year, td) {
+ var target = $(id);
+ if ($(td).hasClass(this._unselectableClass) || this._isDisabledDatepicker(target[0])) {
+ return;
+ }
+ var inst = this._getInst(target[0]);
+ inst.selectedDay = inst.currentDay = $('a', td).html();
+ inst.selectedMonth = inst.currentMonth = month;
+ inst.selectedYear = inst.currentYear = year;
+ this._selectDate(id, this._formatDate(inst,
+ inst.currentDay, inst.currentMonth, inst.currentYear));
+ },
+
+ /* Erase the input field and hide the date picker. */
+ _clearDate: function(id) {
+ var target = $(id);
+ var inst = this._getInst(target[0]);
+ this._selectDate(target, '');
+ },
+
+ /* Update the input field with the selected date. */
+ _selectDate: function(id, dateStr) {
+ var target = $(id);
+ var inst = this._getInst(target[0]);
+ dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
+ if (inst.input)
+ inst.input.val(dateStr);
+ this._updateAlternate(inst);
+ var onSelect = this._get(inst, 'onSelect');
+ if (onSelect)
+ onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); // trigger custom callback
+ else if (inst.input)
+ inst.input.trigger('change'); // fire the change event
+ if (inst.inline)
+ this._updateDatepicker(inst);
+ else {
+ this._hideDatepicker();
+ this._lastInput = inst.input[0];
+ if (typeof(inst.input[0]) != 'object')
+ inst.input.focus(); // restore focus
+ this._lastInput = null;
+ }
+ },
+
+ /* Update any alternate field to synchronise with the main field. */
+ _updateAlternate: function(inst) {
+ var altField = this._get(inst, 'altField');
+ if (altField) { // update alternate field too
+ var altFormat = this._get(inst, 'altFormat') || this._get(inst, 'dateFormat');
+ var date = this._getDate(inst);
+ var dateStr = this.formatDate(altFormat, date, this._getFormatConfig(inst));
+ $(altField).each(function() { $(this).val(dateStr); });
+ }
+ },
+
+ /* Set as beforeShowDay function to prevent selection of weekends.
+ @param date Date - the date to customise
+ @return [boolean, string] - is this date selectable?, what is its CSS class? */
+ noWeekends: function(date) {
+ var day = date.getDay();
+ return [(day > 0 && day < 6), ''];
+ },
+
+ /* Set as calculateWeek to determine the week of the year based on the ISO 8601 definition.
+ @param date Date - the date to get the week for
+ @return number - the number of the week within the year that contains this date */
+ iso8601Week: function(date) {
+ var checkDate = new Date(date.getTime());
+ // Find Thursday of this week starting on Monday
+ checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
+ var time = checkDate.getTime();
+ checkDate.setMonth(0); // Compare with Jan 1
+ checkDate.setDate(1);
+ return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
+ },
+
+ /* Parse a string value into a date object.
+ See formatDate below for the possible formats.
+
+ @param format string - the expected format of the date
+ @param value string - the date in the above format
+ @param settings Object - attributes include:
+ shortYearCutoff number - the cutoff year for determining the century (optional)
+ dayNamesShort string[7] - abbreviated names of the days from Sunday (optional)
+ dayNames string[7] - names of the days from Sunday (optional)
+ monthNamesShort string[12] - abbreviated names of the months (optional)
+ monthNames string[12] - names of the months (optional)
+ @return Date - the extracted date value or null if value is blank */
+ parseDate: function (format, value, settings) {
+ if (format == null || value == null)
+ throw 'Invalid arguments';
+ value = (typeof value == 'object' ? value.toString() : value + '');
+ if (value == '')
+ return null;
+ var shortYearCutoff = (settings ? settings.shortYearCutoff : null) || this._defaults.shortYearCutoff;
+ var dayNamesShort = (settings ? settings.dayNamesShort : null) || this._defaults.dayNamesShort;
+ var dayNames = (settings ? settings.dayNames : null) || this._defaults.dayNames;
+ var monthNamesShort = (settings ? settings.monthNamesShort : null) || this._defaults.monthNamesShort;
+ var monthNames = (settings ? settings.monthNames : null) || this._defaults.monthNames;
+ var year = -1;
+ var month = -1;
+ var day = -1;
+ var doy = -1;
+ var literal = false;
+ // Check whether a format character is doubled
+ var lookAhead = function(match) {
+ var matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) == match);
+ if (matches)
+ iFormat++;
+ return matches;
+ };
+ // Extract a number from the string value
+ var getNumber = function(match) {
+ lookAhead(match);
+ var size = (match == '@' ? 14 : (match == '!' ? 20 :
+ (match == 'y' ? 4 : (match == 'o' ? 3 : 2))));
+ var digits = new RegExp('^\\d{1,' + size + '}');
+ var num = value.substring(iValue).match(digits);
+ if (!num)
+ throw 'Missing number at position ' + iValue;
+ iValue += num[0].length;
+ return parseInt(num[0], 10);
+ };
+ // Extract a name from the string value and convert to an index
+ var getName = function(match, shortNames, longNames) {
+ var names = (lookAhead(match) ? longNames : shortNames);
+ for (var i = 0; i < names.length; i++) {
+ if (value.substr(iValue, names[i].length) == names[i]) {
+ iValue += names[i].length;
+ return i + 1;
+ }
+ }
+ throw 'Unknown name at position ' + iValue;
+ };
+ // Confirm that a literal character matches the string value
+ var checkLiteral = function() {
+ if (value.charAt(iValue) != format.charAt(iFormat))
+ throw 'Unexpected literal at position ' + iValue;
+ iValue++;
+ };
+ var iValue = 0;
+ for (var iFormat = 0; iFormat < format.length; iFormat++) {
+ if (literal)
+ if (format.charAt(iFormat) == "'" && !lookAhead("'"))
+ literal = false;
+ else
+ checkLiteral();
+ else
+ switch (format.charAt(iFormat)) {
+ case 'd':
+ day = getNumber('d');
+ break;
+ case 'D':
+ getName('D', dayNamesShort, dayNames);
+ break;
+ case 'o':
+ doy = getNumber('o');
+ break;
+ case 'm':
+ month = getNumber('m');
+ break;
+ case 'M':
+ month = getName('M', monthNamesShort, monthNames);
+ break;
+ case 'y':
+ year = getNumber('y');
+ break;
+ case '@':
+ var date = new Date(getNumber('@'));
+ year = date.getFullYear();
+ month = date.getMonth() + 1;
+ day = date.getDate();
+ break;
+ case '!':
+ var date = new Date((getNumber('!') - this._ticksTo1970) / 10000);
+ year = date.getFullYear();
+ month = date.getMonth() + 1;
+ day = date.getDate();
+ break;
+ case "'":
+ if (lookAhead("'"))
+ checkLiteral();
+ else
+ literal = true;
+ break;
+ default:
+ checkLiteral();
+ }
+ }
+ if (year == -1)
+ year = new Date().getFullYear();
+ else if (year < 100)
+ year += new Date().getFullYear() - new Date().getFullYear() % 100 +
+ (year <= shortYearCutoff ? 0 : -100);
+ if (doy > -1) {
+ month = 1;
+ day = doy;
+ do {
+ var dim = this._getDaysInMonth(year, month - 1);
+ if (day <= dim)
+ break;
+ month++;
+ day -= dim;
+ } while (true);
+ }
+ var date = this._daylightSavingAdjust(new Date(year, month - 1, day));
+ if (date.getFullYear() != year || date.getMonth() + 1 != month || date.getDate() != day)
+ throw 'Invalid date'; // E.g. 31/02/*
+ return date;
+ },
+
+ /* Standard date formats. */
+ ATOM: 'yy-mm-dd', // RFC 3339 (ISO 8601)
+ COOKIE: 'D, dd M yy',
+ ISO_8601: 'yy-mm-dd',
+ RFC_822: 'D, d M y',
+ RFC_850: 'DD, dd-M-y',
+ RFC_1036: 'D, d M y',
+ RFC_1123: 'D, d M yy',
+ RFC_2822: 'D, d M yy',
+ RSS: 'D, d M y', // RFC 822
+ TICKS: '!',
+ TIMESTAMP: '@',
+ W3C: 'yy-mm-dd', // ISO 8601
+
+ _ticksTo1970: (((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) +
+ Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000),
+
+ /* Format a date object into a string value.
+ The format can be combinations of the following:
+ d - day of month (no leading zero)
+ dd - day of month (two digit)
+ o - day of year (no leading zeros)
+ oo - day of year (three digit)
+ D - day name short
+ DD - day name long
+ m - month of year (no leading zero)
+ mm - month of year (two digit)
+ M - month name short
+ MM - month name long
+ y - year (two digit)
+ yy - year (four digit)
+ @ - Unix timestamp (ms since 01/01/1970)
+ ! - Windows ticks (100ns since 01/01/0001)
+ '...' - literal text
+ '' - single quote
+
+ @param format string - the desired format of the date
+ @param date Date - the date value to format
+ @param settings Object - attributes include:
+ dayNamesShort string[7] - abbreviated names of the days from Sunday (optional)
+ dayNames string[7] - names of the days from Sunday (optional)
+ monthNamesShort string[12] - abbreviated names of the months (optional)
+ monthNames string[12] - names of the months (optional)
+ @return string - the date in the above format */
+ formatDate: function (format, date, settings) {
+ if (!date)
+ return '';
+ var dayNamesShort = (settings ? settings.dayNamesShort : null) || this._defaults.dayNamesShort;
+ var dayNames = (settings ? settings.dayNames : null) || this._defaults.dayNames;
+ var monthNamesShort = (settings ? settings.monthNamesShort : null) || this._defaults.monthNamesShort;
+ var monthNames = (settings ? settings.monthNames : null) || this._defaults.monthNames;
+ // Check whether a format character is doubled
+ var lookAhead = function(match) {
+ var matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) == match);
+ if (matches)
+ iFormat++;
+ return matches;
+ };
+ // Format a number, with leading zero if necessary
+ var formatNumber = function(match, value, len) {
+ var num = '' + value;
+ if (lookAhead(match))
+ while (num.length < len)
+ num = '0' + num;
+ return num;
+ };
+ // Format a name, short or long as requested
+ var formatName = function(match, value, shortNames, longNames) {
+ return (lookAhead(match) ? longNames[value] : shortNames[value]);
+ };
+ var output = '';
+ var literal = false;
+ if (date)
+ for (var iFormat = 0; iFormat < format.length; iFormat++) {
+ if (literal)
+ if (format.charAt(iFormat) == "'" && !lookAhead("'"))
+ literal = false;
+ else
+ output += format.charAt(iFormat);
+ else
+ switch (format.charAt(iFormat)) {
+ case 'd':
+ output += formatNumber('d', date.getDate(), 2);
+ break;
+ case 'D':
+ output += formatName('D', date.getDay(), dayNamesShort, dayNames);
+ break;
+ case 'o':
+ output += formatNumber('o',
+ (date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000, 3);
+ break;
+ case 'm':
+ output += formatNumber('m', date.getMonth() + 1, 2);
+ break;
+ case 'M':
+ output += formatName('M', date.getMonth(), monthNamesShort, monthNames);
+ break;
+ case 'y':
+ output += (lookAhead('y') ? date.getFullYear() :
+ (date.getYear() % 100 < 10 ? '0' : '') + date.getYear() % 100);
+ break;
+ case '@':
+ output += date.getTime();
+ break;
+ case '!':
+ output += date.getTime() * 10000 + this._ticksTo1970;
+ break;
+ case "'":
+ if (lookAhead("'"))
+ output += "'";
+ else
+ literal = true;
+ break;
+ default:
+ output += format.charAt(iFormat);
+ }
+ }
+ return output;
+ },
+
+ /* Extract all possible characters from the date format. */
+ _possibleChars: function (format) {
+ var chars = '';
+ var literal = false;
+ // Check whether a format character is doubled
+ var lookAhead = function(match) {
+ var matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) == match);
+ if (matches)
+ iFormat++;
+ return matches;
+ };
+ for (var iFormat = 0; iFormat < format.length; iFormat++)
+ if (literal)
+ if (format.charAt(iFormat) == "'" && !lookAhead("'"))
+ literal = false;
+ else
+ chars += format.charAt(iFormat);
+ else
+ switch (format.charAt(iFormat)) {
+ case 'd': case 'm': case 'y': case '@':
+ chars += '0123456789';
+ break;
+ case 'D': case 'M':
+ return null; // Accept anything
+ case "'":
+ if (lookAhead("'"))
+ chars += "'";
+ else
+ literal = true;
+ break;
+ default:
+ chars += format.charAt(iFormat);
+ }
+ return chars;
+ },
+
+ /* Get a setting value, defaulting if necessary. */
+ _get: function(inst, name) {
+ return inst.settings[name] !== undefined ?
+ inst.settings[name] : this._defaults[name];
+ },
+
+ /* Parse existing date and initialise date picker. */
+ _setDateFromField: function(inst, noDefault) {
+ if (inst.input.val() == inst.lastVal) {
+ return;
+ }
+ var dateFormat = this._get(inst, 'dateFormat');
+ var dates = inst.lastVal = inst.input ? inst.input.val() : null;
+ var date, defaultDate;
+ date = defaultDate = this._getDefaultDate(inst);
+ var settings = this._getFormatConfig(inst);
+ try {
+ date = this.parseDate(dateFormat, dates, settings) || defaultDate;
+ } catch (event) {
+ this.log(event);
+ dates = (noDefault ? '' : dates);
+ }
+ inst.selectedDay = date.getDate();
+ inst.drawMonth = inst.selectedMonth = date.getMonth();
+ inst.drawYear = inst.selectedYear = date.getFullYear();
+ inst.currentDay = (dates ? date.getDate() : 0);
+ inst.currentMonth = (dates ? date.getMonth() : 0);
+ inst.currentYear = (dates ? date.getFullYear() : 0);
+ this._adjustInstDate(inst);
+ },
+
+ /* Retrieve the default date shown on opening. */
+ _getDefaultDate: function(inst) {
+ return this._restrictMinMax(inst,
+ this._determineDate(inst, this._get(inst, 'defaultDate'), new Date()));
+ },
+
+ /* A date may be specified as an exact value or a relative one. */
+ _determineDate: function(inst, date, defaultDate) {
+ var offsetNumeric = function(offset) {
+ var date = new Date();
+ date.setDate(date.getDate() + offset);
+ return date;
+ };
+ var offsetString = function(offset) {
+ try {
+ return $.datepicker.parseDate($.datepicker._get(inst, 'dateFormat'),
+ offset, $.datepicker._getFormatConfig(inst));
+ }
+ catch (e) {
+ // Ignore
+ }
+ var date = (offset.toLowerCase().match(/^c/) ?
+ $.datepicker._getDate(inst) : null) || new Date();
+ var year = date.getFullYear();
+ var month = date.getMonth();
+ var day = date.getDate();
+ var pattern = /([+-]?[0-9]+)\s*(d|D|w|W|m|M|y|Y)?/g;
+ var matches = pattern.exec(offset);
+ while (matches) {
+ switch (matches[2] || 'd') {
+ case 'd' : case 'D' :
+ day += parseInt(matches[1],10); break;
+ case 'w' : case 'W' :
+ day += parseInt(matches[1],10) * 7; break;
+ case 'm' : case 'M' :
+ month += parseInt(matches[1],10);
+ day = Math.min(day, $.datepicker._getDaysInMonth(year, month));
+ break;
+ case 'y': case 'Y' :
+ year += parseInt(matches[1],10);
+ day = Math.min(day, $.datepicker._getDaysInMonth(year, month));
+ break;
+ }
+ matches = pattern.exec(offset);
+ }
+ return new Date(year, month, day);
+ };
+ date = (date == null ? defaultDate : (typeof date == 'string' ? offsetString(date) :
+ (typeof date == 'number' ? (isNaN(date) ? defaultDate : offsetNumeric(date)) : date)));
+ date = (date && date.toString() == 'Invalid Date' ? defaultDate : date);
+ if (date) {
+ date.setHours(0);
+ date.setMinutes(0);
+ date.setSeconds(0);
+ date.setMilliseconds(0);
+ }
+ return this._daylightSavingAdjust(date);
+ },
+
+ /* Handle switch to/from daylight saving.
+ Hours may be non-zero on daylight saving cut-over:
+ > 12 when midnight changeover, but then cannot generate
+ midnight datetime, so jump to 1AM, otherwise reset.
+ @param date (Date) the date to check
+ @return (Date) the corrected date */
+ _daylightSavingAdjust: function(date) {
+ if (!date) return null;
+ date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
+ return date;
+ },
+
+ /* Set the date(s) directly. */
+ _setDate: function(inst, date, noChange) {
+ var clear = !(date);
+ var origMonth = inst.selectedMonth;
+ var origYear = inst.selectedYear;
+ date = this._restrictMinMax(inst, this._determineDate(inst, date, new Date()));
+ inst.selectedDay = inst.currentDay = date.getDate();
+ inst.drawMonth = inst.selectedMonth = inst.currentMonth = date.getMonth();
+ inst.drawYear = inst.selectedYear = inst.currentYear = date.getFullYear();
+ if ((origMonth != inst.selectedMonth || origYear != inst.selectedYear) && !noChange)
+ this._notifyChange(inst);
+ this._adjustInstDate(inst);
+ if (inst.input) {
+ inst.input.val(clear ? '' : this._formatDate(inst));
+ }
+ },
+
+ /* Retrieve the date(s) directly. */
+ _getDate: function(inst) {
+ var startDate = (!inst.currentYear || (inst.input && inst.input.val() == '') ? null :
+ this._daylightSavingAdjust(new Date(
+ inst.currentYear, inst.currentMonth, inst.currentDay)));
+ return startDate;
+ },
+
+ /* Generate the HTML for the current state of the date picker. */
+ _generateHTML: function(inst) {
+ var today = new Date();
+ today = this._daylightSavingAdjust(
+ new Date(today.getFullYear(), today.getMonth(), today.getDate())); // clear time
+ var isRTL = this._get(inst, 'isRTL');
+ var showButtonPanel = this._get(inst, 'showButtonPanel');
+ var hideIfNoPrevNext = this._get(inst, 'hideIfNoPrevNext');
+ var navigationAsDateFormat = this._get(inst, 'navigationAsDateFormat');
+ var numMonths = this._getNumberOfMonths(inst);
+ var showCurrentAtPos = this._get(inst, 'showCurrentAtPos');
+ var stepMonths = this._get(inst, 'stepMonths');
+ var isMultiMonth = (numMonths[0] != 1 || numMonths[1] != 1);
+ var currentDate = this._daylightSavingAdjust((!inst.currentDay ? new Date(9999, 9, 9) :
+ new Date(inst.currentYear, inst.currentMonth, inst.currentDay)));
+ var minDate = this._getMinMaxDate(inst, 'min');
+ var maxDate = this._getMinMaxDate(inst, 'max');
+ var drawMonth = inst.drawMonth - showCurrentAtPos;
+ var drawYear = inst.drawYear;
+ if (drawMonth < 0) {
+ drawMonth += 12;
+ drawYear--;
+ }
+ if (maxDate) {
+ var maxDraw = this._daylightSavingAdjust(new Date(maxDate.getFullYear(),
+ maxDate.getMonth() - (numMonths[0] * numMonths[1]) + 1, maxDate.getDate()));
+ maxDraw = (minDate && maxDraw < minDate ? minDate : maxDraw);
+ while (this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1)) > maxDraw) {
+ drawMonth--;
+ if (drawMonth < 0) {
+ drawMonth = 11;
+ drawYear--;
+ }
+ }
+ }
+ inst.drawMonth = drawMonth;
+ inst.drawYear = drawYear;
+ var prevText = this._get(inst, 'prevText');
+ prevText = (!navigationAsDateFormat ? prevText : this.formatDate(prevText,
+ this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepMonths, 1)),
+ this._getFormatConfig(inst)));
+ var prev = (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ?
+ '<a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_' + dpuuid +
+ '.datepicker._adjustDate(\'#' + inst.id + '\', -' + stepMonths + ', \'M\');"' +
+ ' title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>' :
+ (hideIfNoPrevNext ? '' : '<a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="'+ prevText +'"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>'));
+ var nextText = this._get(inst, 'nextText');
+ nextText = (!navigationAsDateFormat ? nextText : this.formatDate(nextText,
+ this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepMonths, 1)),
+ this._getFormatConfig(inst)));
+ var next = (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ?
+ '<a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_' + dpuuid +
+ '.datepicker._adjustDate(\'#' + inst.id + '\', +' + stepMonths + ', \'M\');"' +
+ ' title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>' :
+ (hideIfNoPrevNext ? '' : '<a class="ui-datepicker-next ui-corner-all ui-state-disabled" title="'+ nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + ( isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>'));
+ var currentText = this._get(inst, 'currentText');
+ var gotoDate = (this._get(inst, 'gotoCurrent') && inst.currentDay ? currentDate : today);
+ currentText = (!navigationAsDateFormat ? currentText :
+ this.formatDate(currentText, gotoDate, this._getFormatConfig(inst)));
+ var controls = (!inst.inline ? '<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" onclick="DP_jQuery_' + dpuuid +
+ '.datepicker._hideDatepicker();">' + this._get(inst, 'closeText') + '</button>' : '');
+ var buttonPanel = (showButtonPanel) ? '<div class="ui-datepicker-buttonpane ui-widget-content">' + (isRTL ? controls : '') +
+ (this._isInRange(inst, gotoDate) ? '<button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" onclick="DP_jQuery_' + dpuuid +
+ '.datepicker._gotoToday(\'#' + inst.id + '\');"' +
+ '>' + currentText + '</button>' : '') + (isRTL ? '' : controls) + '</div>' : '';
+ var firstDay = parseInt(this._get(inst, 'firstDay'),10);
+ firstDay = (isNaN(firstDay) ? 0 : firstDay);
+ var showWeek = this._get(inst, 'showWeek');
+ var dayNames = this._get(inst, 'dayNames');
+ var dayNamesShort = this._get(inst, 'dayNamesShort');
+ var dayNamesMin = this._get(inst, 'dayNamesMin');
+ var monthNames = this._get(inst, 'monthNames');
+ var monthNamesShort = this._get(inst, 'monthNamesShort');
+ var beforeShowDay = this._get(inst, 'beforeShowDay');
+ var showOtherMonths = this._get(inst, 'showOtherMonths');
+ var selectOtherMonths = this._get(inst, 'selectOtherMonths');
+ var calculateWeek = this._get(inst, 'calculateWeek') || this.iso8601Week;
+ var defaultDate = this._getDefaultDate(inst);
+ var html = '';
+ for (var row = 0; row < numMonths[0]; row++) {
+ var group = '';
+ for (var col = 0; col < numMonths[1]; col++) {
+ var selectedDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, inst.selectedDay));
+ var cornerClass = ' ui-corner-all';
+ var calender = '';
+ if (isMultiMonth) {
+ calender += '<div class="ui-datepicker-group';
+ if (numMonths[1] > 1)
+ switch (col) {
+ case 0: calender += ' ui-datepicker-group-first';
+ cornerClass = ' ui-corner-' + (isRTL ? 'right' : 'left'); break;
+ case numMonths[1]-1: calender += ' ui-datepicker-group-last';
+ cornerClass = ' ui-corner-' + (isRTL ? 'left' : 'right'); break;
+ default: calender += ' ui-datepicker-group-middle'; cornerClass = ''; break;
+ }
+ calender += '">';
+ }
+ calender += '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix' + cornerClass + '">' +
+ (/all|left/.test(cornerClass) && row == 0 ? (isRTL ? next : prev) : '') +
+ (/all|right/.test(cornerClass) && row == 0 ? (isRTL ? prev : next) : '') +
+ this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
+ row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
+ '</div><table class="ui-datepicker-calendar"><thead>' +
+ '<tr>';
+ var thead = (showWeek ? '<th class="ui-datepicker-week-col">' + this._get(inst, 'weekHeader') + '</th>' : '');
+ for (var dow = 0; dow < 7; dow++) { // days of the week
+ var day = (dow + firstDay) % 7;
+ thead += '<th' + ((dow + firstDay + 6) % 7 >= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' +
+ '<span title="' + dayNames[day] + '">' + dayNamesMin[day] + '</span></th>';
+ }
+ calender += thead + '</tr></thead><tbody>';
+ var daysInMonth = this._getDaysInMonth(drawYear, drawMonth);
+ if (drawYear == inst.selectedYear && drawMonth == inst.selectedMonth)
+ inst.selectedDay = Math.min(inst.selectedDay, daysInMonth);
+ var leadDays = (this._getFirstDayOfMonth(drawYear, drawMonth) - firstDay + 7) % 7;
+ var numRows = (isMultiMonth ? 6 : Math.ceil((leadDays + daysInMonth) / 7)); // calculate the number of rows to generate
+ var printDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1 - leadDays));
+ for (var dRow = 0; dRow < numRows; dRow++) { // create date picker rows
+ calender += '<tr>';
+ var tbody = (!showWeek ? '' : '<td class="ui-datepicker-week-col">' +
+ this._get(inst, 'calculateWeek')(printDate) + '</td>');
+ for (var dow = 0; dow < 7; dow++) { // create date picker days
+ var daySettings = (beforeShowDay ?
+ beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']);
+ var otherMonth = (printDate.getMonth() != drawMonth);
+ var unselectable = (otherMonth && !selectOtherMonths) || !daySettings[0] ||
+ (minDate && printDate < minDate) || (maxDate && printDate > maxDate);
+ tbody += '<td class="' +
+ ((dow + firstDay + 6) % 7 >= 5 ? ' ui-datepicker-week-end' : '') + // highlight weekends
+ (otherMonth ? ' ui-datepicker-other-month' : '') + // highlight days from other months
+ ((printDate.getTime() == selectedDate.getTime() && drawMonth == inst.selectedMonth && inst._keyEvent) || // user pressed key
+ (defaultDate.getTime() == printDate.getTime() && defaultDate.getTime() == selectedDate.getTime()) ?
+ // or defaultDate is current printedDate and defaultDate is selectedDate
+ ' ' + this._dayOverClass : '') + // highlight selected day
+ (unselectable ? ' ' + this._unselectableClass + ' ui-state-disabled': '') + // highlight unselectable days
+ (otherMonth && !showOtherMonths ? '' : ' ' + daySettings[1] + // highlight custom dates
+ (printDate.getTime() == currentDate.getTime() ? ' ' + this._currentClass : '') + // highlight selected day
+ (printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + // highlight today (if different)
+ ((!otherMonth || showOtherMonths) && daySettings[2] ? ' title="' + daySettings[2] + '"' : '') + // cell title
+ (unselectable ? '' : ' onclick="DP_jQuery_' + dpuuid + '.datepicker._selectDay(\'#' +
+ inst.id + '\',' + printDate.getMonth() + ',' + printDate.getFullYear() + ', this);return false;"') + '>' + // actions
+ (otherMonth && !showOtherMonths ? ' ' : // display for other months
+ (unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' +
+ (printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +
+ (printDate.getTime() == currentDate.getTime() ? ' ui-state-active' : '') + // highlight selected day
+ (otherMonth ? ' ui-priority-secondary' : '') + // distinguish dates from other months
+ '" href="#">' + printDate.getDate() + '</a>')) + '</td>'; // display selectable date
+ printDate.setDate(printDate.getDate() + 1);
+ printDate = this._daylightSavingAdjust(printDate);
+ }
+ calender += tbody + '</tr>';
+ }
+ drawMonth++;
+ if (drawMonth > 11) {
+ drawMonth = 0;
+ drawYear++;
+ }
+ calender += '</tbody></table>' + (isMultiMonth ? '</div>' +
+ ((numMonths[0] > 0 && col == numMonths[1]-1) ? '<div class="ui-datepicker-row-break"></div>' : '') : '');
+ group += calender;
+ }
+ html += group;
+ }
+ html += buttonPanel + ($.browser.msie && parseInt($.browser.version,10) < 7 && !inst.inline ?
+ '<iframe src="javascript:false;" class="ui-datepicker-cover" frameborder="0"></iframe>' : '');
+ inst._keyEvent = false;
+ return html;
+ },
+
+ /* Generate the month and year header. */
+ _generateMonthYearHeader: function(inst, drawMonth, drawYear, minDate, maxDate,
+ secondary, monthNames, monthNamesShort) {
+ var changeMonth = this._get(inst, 'changeMonth');
+ var changeYear = this._get(inst, 'changeYear');
+ var showMonthAfterYear = this._get(inst, 'showMonthAfterYear');
+ var html = '<div class="ui-datepicker-title">';
+ var monthHtml = '';
+ // month selection
+ if (secondary || !changeMonth)
+ monthHtml += '<span class="ui-datepicker-month">' + monthNames[drawMonth] + '</span>';
+ else {
+ var inMinYear = (minDate && minDate.getFullYear() == drawYear);
+ var inMaxYear = (maxDate && maxDate.getFullYear() == drawYear);
+ monthHtml += '<select class="ui-datepicker-month" ' +
+ 'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'M\');" ' +
+ 'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
+ '>';
+ for (var month = 0; month < 12; month++) {
+ if ((!inMinYear || month >= minDate.getMonth()) &&
+ (!inMaxYear || month <= maxDate.getMonth()))
+ monthHtml += '<option value="' + month + '"' +
+ (month == drawMonth ? ' selected="selected"' : '') +
+ '>' + monthNamesShort[month] + '</option>';
+ }
+ monthHtml += '</select>';
+ }
+ if (!showMonthAfterYear)
+ html += monthHtml + (secondary || !(changeMonth && changeYear) ? ' ' : '');
+ // year selection
+ if (secondary || !changeYear)
+ html += '<span class="ui-datepicker-year">' + drawYear + '</span>';
+ else {
+ // determine range of years to display
+ var years = this._get(inst, 'yearRange').split(':');
+ var thisYear = new Date().getFullYear();
+ var determineYear = function(value) {
+ var year = (value.match(/c[+-].*/) ? drawYear + parseInt(value.substring(1), 10) :
+ (value.match(/[+-].*/) ? thisYear + parseInt(value, 10) :
+ parseInt(value, 10)));
+ return (isNaN(year) ? thisYear : year);
+ };
+ var year = determineYear(years[0]);
+ var endYear = Math.max(year, determineYear(years[1] || ''));
+ year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
+ endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
+ html += '<select class="ui-datepicker-year" ' +
+ 'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
+ 'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
+ '>';
+ for (; year <= endYear; year++) {
+ html += '<option value="' + year + '"' +
+ (year == drawYear ? ' selected="selected"' : '') +
+ '>' + year + '</option>';
+ }
+ html += '</select>';
+ }
+ html += this._get(inst, 'yearSuffix');
+ if (showMonthAfterYear)
+ html += (secondary || !(changeMonth && changeYear) ? ' ' : '') + monthHtml;
+ html += '</div>'; // Close datepicker_header
+ return html;
+ },
+
+ /* Adjust one of the date sub-fields. */
+ _adjustInstDate: function(inst, offset, period) {
+ var year = inst.drawYear + (period == 'Y' ? offset : 0);
+ var month = inst.drawMonth + (period == 'M' ? offset : 0);
+ var day = Math.min(inst.selectedDay, this._getDaysInMonth(year, month)) +
+ (period == 'D' ? offset : 0);
+ var date = this._restrictMinMax(inst,
+ this._daylightSavingAdjust(new Date(year, month, day)));
+ inst.selectedDay = date.getDate();
+ inst.drawMonth = inst.selectedMonth = date.getMonth();
+ inst.drawYear = inst.selectedYear = date.getFullYear();
+ if (period == 'M' || period == 'Y')
+ this._notifyChange(inst);
+ },
+
+ /* Ensure a date is within any min/max bounds. */
+ _restrictMinMax: function(inst, date) {
+ var minDate = this._getMinMaxDate(inst, 'min');
+ var maxDate = this._getMinMaxDate(inst, 'max');
+ date = (minDate && date < minDate ? minDate : date);
+ date = (maxDate && date > maxDate ? maxDate : date);
+ return date;
+ },
+
+ /* Notify change of month/year. */
+ _notifyChange: function(inst) {
+ var onChange = this._get(inst, 'onChangeMonthYear');
+ if (onChange)
+ onChange.apply((inst.input ? inst.input[0] : null),
+ [inst.selectedYear, inst.selectedMonth + 1, inst]);
+ },
+
+ /* Determine the number of months to show. */
+ _getNumberOfMonths: function(inst) {
+ var numMonths = this._get(inst, 'numberOfMonths');
+ return (numMonths == null ? [1, 1] : (typeof numMonths == 'number' ? [1, numMonths] : numMonths));
+ },
+
+ /* Determine the current maximum date - ensure no time components are set. */
+ _getMinMaxDate: function(inst, minMax) {
+ return this._determineDate(inst, this._get(inst, minMax + 'Date'), null);
+ },
+
+ /* Find the number of days in a given month. */
+ _getDaysInMonth: function(year, month) {
+ return 32 - new Date(year, month, 32).getDate();
+ },
+
+ /* Find the day of the week of the first of a month. */
+ _getFirstDayOfMonth: function(year, month) {
+ return new Date(year, month, 1).getDay();
+ },
+
+ /* Determines if we should allow a "next/prev" month display change. */
+ _canAdjustMonth: function(inst, offset, curYear, curMonth) {
+ var numMonths = this._getNumberOfMonths(inst);
+ var date = this._daylightSavingAdjust(new Date(curYear,
+ curMonth + (offset < 0 ? offset : numMonths[0] * numMonths[1]), 1));
+ if (offset < 0)
+ date.setDate(this._getDaysInMonth(date.getFullYear(), date.getMonth()));
+ return this._isInRange(inst, date);
+ },
+
+ /* Is the given date in the accepted range? */
+ _isInRange: function(inst, date) {
+ var minDate = this._getMinMaxDate(inst, 'min');
+ var maxDate = this._getMinMaxDate(inst, 'max');
+ return ((!minDate || date.getTime() >= minDate.getTime()) &&
+ (!maxDate || date.getTime() <= maxDate.getTime()));
+ },
+
+ /* Provide the configuration settings for formatting/parsing. */
+ _getFormatConfig: function(inst) {
+ var shortYearCutoff = this._get(inst, 'shortYearCutoff');
+ shortYearCutoff = (typeof shortYearCutoff != 'string' ? shortYearCutoff :
+ new Date().getFullYear() % 100 + parseInt(shortYearCutoff, 10));
+ return {shortYearCutoff: shortYearCutoff,
+ dayNamesShort: this._get(inst, 'dayNamesShort'), dayNames: this._get(inst, 'dayNames'),
+ monthNamesShort: this._get(inst, 'monthNamesShort'), monthNames: this._get(inst, 'monthNames')};
+ },
+
+ /* Format the given date for display. */
+ _formatDate: function(inst, day, month, year) {
+ if (!day) {
+ inst.currentDay = inst.selectedDay;
+ inst.currentMonth = inst.selectedMonth;
+ inst.currentYear = inst.selectedYear;
+ }
+ var date = (day ? (typeof day == 'object' ? day :
+ this._daylightSavingAdjust(new Date(year, month, day))) :
+ this._daylightSavingAdjust(new Date(inst.currentYear, inst.currentMonth, inst.currentDay)));
+ return this.formatDate(this._get(inst, 'dateFormat'), date, this._getFormatConfig(inst));
+ }
+});
+
+/* jQuery extend now ignores nulls! */
+function extendRemove(target, props) {
+ $.extend(target, props);
+ for (var name in props)
+ if (props[name] == null || props[name] == undefined)
+ target[name] = props[name];
+ return target;
+};
+
+/* Determine whether an object is an array. */
+function isArray(a) {
+ return (a && (($.browser.safari && typeof a == 'object' && a.length) ||
+ (a.constructor && a.constructor.toString().match(/\Array\(\)/))));
+};
+
+/* Invoke the datepicker functionality.
+ @param options string - a command, optionally followed by additional parameters or
+ Object - settings for attaching new datepicker functionality
+ @return jQuery object */
+$.fn.datepicker = function(options){
+
+ /* Initialise the date picker. */
+ if (!$.datepicker.initialized) {
+ $(document).mousedown($.datepicker._checkExternalClick).
+ find('body').append($.datepicker.dpDiv);
+ $.datepicker.initialized = true;
+ }
+
+ var otherArgs = Array.prototype.slice.call(arguments, 1);
+ if (typeof options == 'string' && (options == 'isDisabled' || options == 'getDate' || options == 'widget'))
+ return $.datepicker['_' + options + 'Datepicker'].
+ apply($.datepicker, [this[0]].concat(otherArgs));
+ if (options == 'option' && arguments.length == 2 && typeof arguments[1] == 'string')
+ return $.datepicker['_' + options + 'Datepicker'].
+ apply($.datepicker, [this[0]].concat(otherArgs));
+ return this.each(function() {
+ typeof options == 'string' ?
+ $.datepicker['_' + options + 'Datepicker'].
+ apply($.datepicker, [this].concat(otherArgs)) :
+ $.datepicker._attachDatepicker(this, options);
+ });
+};
+
+$.datepicker = new Datepicker(); // singleton instance
+$.datepicker.initialized = false;
+$.datepicker.uuid = new Date().getTime();
+$.datepicker.version = "1.8.1";
+
+// Workaround for #4055
+// Add another global to avoid noConflict issues with inline event handlers
+window['DP_jQuery_' + dpuuid] = $;
+
+})(jQuery);
diff --git a/demos/movies/components/jquery-ui-1.8.1.custom.min.js b/demos/movies/components/jquery-ui-1.8.1.custom.min.js
new file mode 100644
index 0000000..ef9e731
--- /dev/null
+++ b/demos/movies/components/jquery-ui-1.8.1.custom.min.js
@@ -0,0 +1,96 @@
+/*!
+ * jQuery UI 1.8.1
+ *
+ * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://docs.jquery.com/UI
+ */
+jQuery.ui||function(c){c.ui={version:"1.8.1",plugin:{add:function(a,b,d){a=c.ui[a].prototype;for(var e in d){a.plugins[e]=a.plugins[e]||[];a.plugins[e].push([b,d[e]])}},call:function(a,b,d){if((b=a.plugins[b])&&a.element[0].parentNode)for(var e=0;e<b.length;e++)a.options[b[e][0]]&&b[e][1].apply(a.element,d)}},contains:function(a,b){return document.compareDocumentPosition?a.compareDocumentPosition(b)&16:a!==b&&a.contains(b)},hasScroll:function(a,b){if(c(a).css("overflow")=="hidden")return false;
+b=b&&b=="left"?"scrollLeft":"scrollTop";var d=false;if(a[b]>0)return true;a[b]=1;d=a[b]>0;a[b]=0;return d},isOverAxis:function(a,b,d){return a>b&&a<b+d},isOver:function(a,b,d,e,f,g){return c.ui.isOverAxis(a,d,f)&&c.ui.isOverAxis(b,e,g)},keyCode:{ALT:18,BACKSPACE:8,CAPS_LOCK:20,COMMA:188,CONTROL:17,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,INSERT:45,LEFT:37,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,P [...]
+PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38}};c.fn.extend({_focus:c.fn.focus,focus:function(a,b){return typeof a==="number"?this.each(function(){var d=this;setTimeout(function(){c(d).focus();b&&b.call(d)},a)}):this._focus.apply(this,arguments)},enableSelection:function(){return this.attr("unselectable","off").css("MozUserSelect","")},disableSelection:function(){return this.attr("unselectable","on").css("MozUserSelect","none")},scrollParent:function(){var a;a=c.browser.msie&&/(stati [...]
+/absolute/.test(this.css("position"))?this.parents().filter(function(){return/(relative|absolute|fixed)/.test(c.curCSS(this,"position",1))&&/(auto|scroll)/.test(c.curCSS(this,"overflow",1)+c.curCSS(this,"overflow-y",1)+c.curCSS(this,"overflow-x",1))}).eq(0):this.parents().filter(function(){return/(auto|scroll)/.test(c.curCSS(this,"overflow",1)+c.curCSS(this,"overflow-y",1)+c.curCSS(this,"overflow-x",1))}).eq(0);return/fixed/.test(this.css("position"))||!a.length?c(document):a},zIndex:fun [...]
+undefined)return this.css("zIndex",a);if(this.length){a=c(this[0]);for(var b;a.length&&a[0]!==document;){b=a.css("position");if(b=="absolute"||b=="relative"||b=="fixed"){b=parseInt(a.css("zIndex"));if(!isNaN(b)&&b!=0)return b}a=a.parent()}}return 0}});c.extend(c.expr[":"],{data:function(a,b,d){return!!c.data(a,d[3])},focusable:function(a){var b=a.nodeName.toLowerCase(),d=c.attr(a,"tabindex");return(/input|select|textarea|button|object/.test(b)?!a.disabled:"a"==b||"area"==b?a.href||!isNaN [...]
+!c(a)["area"==b?"parents":"closest"](":hidden").length},tabbable:function(a){var b=c.attr(a,"tabindex");return(isNaN(b)||b>=0)&&c(a).is(":focusable")}})}(jQuery);
+;/*
+ * jQuery UI Datepicker 1.8.1
+ *
+ * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://docs.jquery.com/UI/Datepicker
+ *
+ * Depends:
+ * jquery.ui.core.js
+ */
+(function(d){function J(){this.debug=false;this._curInst=null;this._keyEvent=false;this._disabledInputs=[];this._inDialog=this._datepickerShowing=false;this._mainDivId="ui-datepicker-div";this._inlineClass="ui-datepicker-inline";this._appendClass="ui-datepicker-append";this._triggerClass="ui-datepicker-trigger";this._dialogClass="ui-datepicker-dialog";this._disableClass="ui-datepicker-disabled";this._unselectableClass="ui-datepicker-unselectable";this._currentClass="ui-datepicker-current [...]
+"ui-datepicker-days-cell-over";this.regional=[];this.regional[""]={closeText:"Done",prevText:"Prev",nextText:"Next",currentText:"Today",monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],dayNamesShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],day [...]
+"Mo","Tu","We","Th","Fr","Sa"],weekHeader:"Wk",dateFormat:"mm/dd/yy",firstDay:0,isRTL:false,showMonthAfterYear:false,yearSuffix:""};this._defaults={showOn:"focus",showAnim:"show",showOptions:{},defaultDate:null,appendText:"",buttonText:"...",buttonImage:"",buttonImageOnly:false,hideIfNoPrevNext:false,navigationAsDateFormat:false,gotoCurrent:false,changeMonth:false,changeYear:false,yearRange:"c-10:c+10",showOtherMonths:false,selectOtherMonths:false,showWeek:false,calculateWeek:this.iso860 [...]
+minDate:null,maxDate:null,duration:"_default",beforeShowDay:null,beforeShow:null,onSelect:null,onChangeMonthYear:null,onClose:null,numberOfMonths:1,showCurrentAtPos:0,stepMonths:1,stepBigMonths:12,altField:"",altFormat:"",constrainInput:true,showButtonPanel:false,autoSize:false};d.extend(this._defaults,this.regional[""]);this.dpDiv=d('<div id="'+this._mainDivId+'" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"></div>')}funct [...]
+b);for(var c in b)if(b[c]==null||b[c]==undefined)a[c]=b[c];return a}d.extend(d.ui,{datepicker:{version:"1.8.1"}});var y=(new Date).getTime();d.extend(J.prototype,{markerClassName:"hasDatepicker",log:function(){this.debug&&console.log.apply("",arguments)},_widgetDatepicker:function(){return this.dpDiv},setDefaults:function(a){E(this._defaults,a||{});return this},_attachDatepicker:function(a,b){var c=null;for(var e in this._defaults){var f=a.getAttribute("date:"+e);if(f){c=c||{};try{c[e]=e [...]
+f}}}e=a.nodeName.toLowerCase();f=e=="div"||e=="span";if(!a.id)a.id="dp"+ ++this.uuid;var i=this._newInst(d(a),f);i.settings=d.extend({},b||{},c||{});if(e=="input")this._connectDatepicker(a,i);else f&&this._inlineDatepicker(a,i)},_newInst:function(a,b){return{id:a[0].id.replace(/([^A-Za-z0-9_])/g,"\\\\$1"),input:a,selectedDay:0,selectedMonth:0,selectedYear:0,drawMonth:0,drawYear:0,inline:b,dpDiv:!b?this.dpDiv:d('<div class="'+this._inlineClass+' ui-datepicker ui-widget ui-widget-content u [...]
+_connectDatepicker:function(a,b){var c=d(a);b.append=d([]);b.trigger=d([]);if(!c.hasClass(this.markerClassName)){this._attachments(c,b);c.addClass(this.markerClassName).keydown(this._doKeyDown).keypress(this._doKeyPress).keyup(this._doKeyUp).bind("setData.datepicker",function(e,f,h){b.settings[f]=h}).bind("getData.datepicker",function(e,f){return this._get(b,f)});this._autoSize(b);d.data(a,"datepicker",b)}},_attachments:function(a,b){var c=this._get(b,"appendText"),e=this._get(b,"isRTL") [...]
+b.append.remove();if(c){b.append=d('<span class="'+this._appendClass+'">'+c+"</span>");a[e?"before":"after"](b.append)}a.unbind("focus",this._showDatepicker);b.trigger&&b.trigger.remove();c=this._get(b,"showOn");if(c=="focus"||c=="both")a.focus(this._showDatepicker);if(c=="button"||c=="both"){c=this._get(b,"buttonText");var f=this._get(b,"buttonImage");b.trigger=d(this._get(b,"buttonImageOnly")?d("<img/>").addClass(this._triggerClass).attr({src:f,alt:c,title:c}):d('<button type="button"> [...]
+""?c:d("<img/>").attr({src:f,alt:c,title:c})));a[e?"before":"after"](b.trigger);b.trigger.click(function(){d.datepicker._datepickerShowing&&d.datepicker._lastInput==a[0]?d.datepicker._hideDatepicker():d.datepicker._showDatepicker(a[0]);return false})}},_autoSize:function(a){if(this._get(a,"autoSize")&&!a.inline){var b=new Date(2009,11,20),c=this._get(a,"dateFormat");if(c.match(/[DM]/)){var e=function(f){for(var h=0,i=0,g=0;g<f.length;g++)if(f[g].length>h){h=f[g].length;i=g}return i};b.se [...]
+c.match(/MM/)?"monthNames":"monthNamesShort")));b.setDate(e(this._get(a,c.match(/DD/)?"dayNames":"dayNamesShort"))+20-b.getDay())}a.input.attr("size",this._formatDate(a,b).length)}},_inlineDatepicker:function(a,b){var c=d(a);if(!c.hasClass(this.markerClassName)){c.addClass(this.markerClassName).append(b.dpDiv).bind("setData.datepicker",function(e,f,h){b.settings[f]=h}).bind("getData.datepicker",function(e,f){return this._get(b,f)});d.data(a,"datepicker",b);this._setDate(b,this._getDefaul [...]
+true);this._updateDatepicker(b);this._updateAlternate(b)}},_dialogDatepicker:function(a,b,c,e,f){a=this._dialogInst;if(!a){a="dp"+ ++this.uuid;this._dialogInput=d('<input type="text" id="'+a+'" style="position: absolute; top: -100px; width: 0px; z-index: -10;"/>');this._dialogInput.keydown(this._doKeyDown);d("body").append(this._dialogInput);a=this._dialogInst=this._newInst(this._dialogInput,false);a.settings={};d.data(this._dialogInput[0],"datepicker",a)}E(a.settings,e||{});b=b&&b.const [...]
+this._formatDate(a,b):b;this._dialogInput.val(b);this._pos=f?f.length?f:[f.pageX,f.pageY]:null;if(!this._pos)this._pos=[document.documentElement.clientWidth/2-100+(document.documentElement.scrollLeft||document.body.scrollLeft),document.documentElement.clientHeight/2-150+(document.documentElement.scrollTop||document.body.scrollTop)];this._dialogInput.css("left",this._pos[0]+20+"px").css("top",this._pos[1]+"px");a.settings.onSelect=c;this._inDialog=true;this.dpDiv.addClass(this._dialogClas [...]
+d.blockUI&&d.blockUI(this.dpDiv);d.data(this._dialogInput[0],"datepicker",a);return this},_destroyDatepicker:function(a){var b=d(a),c=d.data(a,"datepicker");if(b.hasClass(this.markerClassName)){var e=a.nodeName.toLowerCase();d.removeData(a,"datepicker");if(e=="input"){c.append.remove();c.trigger.remove();b.removeClass(this.markerClassName).unbind("focus",this._showDatepicker).unbind("keydown",this._doKeyDown).unbind("keypress",this._doKeyPress).unbind("keyup",this._doKeyUp)}else if(e=="d [...]
+_enableDatepicker:function(a){var b=d(a),c=d.data(a,"datepicker");if(b.hasClass(this.markerClassName)){var e=a.nodeName.toLowerCase();if(e=="input"){a.disabled=false;c.trigger.filter("button").each(function(){this.disabled=false}).end().filter("img").css({opacity:"1.0",cursor:""})}else if(e=="div"||e=="span")b.children("."+this._inlineClass).children().removeClass("ui-state-disabled");this._disabledInputs=d.map(this._disabledInputs,function(f){return f==a?null:f})}},_disableDatepicker:fu [...]
+d(a),c=d.data(a,"datepicker");if(b.hasClass(this.markerClassName)){var e=a.nodeName.toLowerCase();if(e=="input"){a.disabled=true;c.trigger.filter("button").each(function(){this.disabled=true}).end().filter("img").css({opacity:"0.5",cursor:"default"})}else if(e=="div"||e=="span")b.children("."+this._inlineClass).children().addClass("ui-state-disabled");this._disabledInputs=d.map(this._disabledInputs,function(f){return f==a?null:f});this._disabledInputs[this._disabledInputs.length]=a}},_is [...]
+for(var b=0;b<this._disabledInputs.length;b++)if(this._disabledInputs[b]==a)return true;return false},_getInst:function(a){try{return d.data(a,"datepicker")}catch(b){throw"Missing instance data for this datepicker";}},_optionDatepicker:function(a,b,c){var e=this._getInst(a);if(arguments.length==2&&typeof b=="string")return b=="defaults"?d.extend({},d.datepicker._defaults):e?b=="all"?d.extend({},e.settings):this._get(e,b):null;var f=b||{};if(typeof b=="string"){f={};f[b]=c}if(e){this._cur [...]
+this._hideDatepicker();var h=this._getDateDatepicker(a,true);E(e.settings,f);this._attachments(d(a),e);this._autoSize(e);this._setDateDatepicker(a,h);this._updateDatepicker(e)}},_changeDatepicker:function(a,b,c){this._optionDatepicker(a,b,c)},_refreshDatepicker:function(a){(a=this._getInst(a))&&this._updateDatepicker(a)},_setDateDatepicker:function(a,b){if(a=this._getInst(a)){this._setDate(a,b);this._updateDatepicker(a);this._updateAlternate(a)}},_getDateDatepicker:function(a,b){(a=this. [...]
+!a.inline&&this._setDateFromField(a,b);return a?this._getDate(a):null},_doKeyDown:function(a){var b=d.datepicker._getInst(a.target),c=true,e=b.dpDiv.is(".ui-datepicker-rtl");b._keyEvent=true;if(d.datepicker._datepickerShowing)switch(a.keyCode){case 9:d.datepicker._hideDatepicker();c=false;break;case 13:c=d("td."+d.datepicker._dayOverClass,b.dpDiv).add(d("td."+d.datepicker._currentClass,b.dpDiv));c[0]?d.datepicker._selectDay(a.target,b.selectedMonth,b.selectedYear,c[0]):d.datepicker._hide [...]
+return false;case 27:d.datepicker._hideDatepicker();break;case 33:d.datepicker._adjustDate(a.target,a.ctrlKey?-d.datepicker._get(b,"stepBigMonths"):-d.datepicker._get(b,"stepMonths"),"M");break;case 34:d.datepicker._adjustDate(a.target,a.ctrlKey?+d.datepicker._get(b,"stepBigMonths"):+d.datepicker._get(b,"stepMonths"),"M");break;case 35:if(a.ctrlKey||a.metaKey)d.datepicker._clearDate(a.target);c=a.ctrlKey||a.metaKey;break;case 36:if(a.ctrlKey||a.metaKey)d.datepicker._gotoToday(a.target);c [...]
+a.metaKey;break;case 37:if(a.ctrlKey||a.metaKey)d.datepicker._adjustDate(a.target,e?+1:-1,"D");c=a.ctrlKey||a.metaKey;if(a.originalEvent.altKey)d.datepicker._adjustDate(a.target,a.ctrlKey?-d.datepicker._get(b,"stepBigMonths"):-d.datepicker._get(b,"stepMonths"),"M");break;case 38:if(a.ctrlKey||a.metaKey)d.datepicker._adjustDate(a.target,-7,"D");c=a.ctrlKey||a.metaKey;break;case 39:if(a.ctrlKey||a.metaKey)d.datepicker._adjustDate(a.target,e?-1:+1,"D");c=a.ctrlKey||a.metaKey;if(a.originalEv [...]
+a.ctrlKey?+d.datepicker._get(b,"stepBigMonths"):+d.datepicker._get(b,"stepMonths"),"M");break;case 40:if(a.ctrlKey||a.metaKey)d.datepicker._adjustDate(a.target,+7,"D");c=a.ctrlKey||a.metaKey;break;default:c=false}else if(a.keyCode==36&&a.ctrlKey)d.datepicker._showDatepicker(this);else c=false;if(c){a.preventDefault();a.stopPropagation()}},_doKeyPress:function(a){var b=d.datepicker._getInst(a.target);if(d.datepicker._get(b,"constrainInput")){b=d.datepicker._possibleChars(d.datepicker._get [...]
+var c=String.fromCharCode(a.charCode==undefined?a.keyCode:a.charCode);return a.ctrlKey||c<" "||!b||b.indexOf(c)>-1}},_doKeyUp:function(a){a=d.datepicker._getInst(a.target);if(a.input.val()!=a.lastVal)try{if(d.datepicker.parseDate(d.datepicker._get(a,"dateFormat"),a.input?a.input.val():null,d.datepicker._getFormatConfig(a))){d.datepicker._setDateFromField(a);d.datepicker._updateAlternate(a);d.datepicker._updateDatepicker(a)}}catch(b){d.datepicker.log(b)}return true},_showDatepicker:functi [...]
+a;if(a.nodeName.toLowerCase()!="input")a=d("input",a.parentNode)[0];if(!(d.datepicker._isDisabledDatepicker(a)||d.datepicker._lastInput==a)){var b=d.datepicker._getInst(a);d.datepicker._curInst&&d.datepicker._curInst!=b&&d.datepicker._curInst.dpDiv.stop(true,true);var c=d.datepicker._get(b,"beforeShow");E(b.settings,c?c.apply(a,[a,b]):{});b.lastVal=null;d.datepicker._lastInput=a;d.datepicker._setDateFromField(b);if(d.datepicker._inDialog)a.value="";if(!d.datepicker._pos){d.datepicker._po [...]
+d.datepicker._pos[1]+=a.offsetHeight}var e=false;d(a).parents().each(function(){e|=d(this).css("position")=="fixed";return!e});if(e&&d.browser.opera){d.datepicker._pos[0]-=document.documentElement.scrollLeft;d.datepicker._pos[1]-=document.documentElement.scrollTop}c={left:d.datepicker._pos[0],top:d.datepicker._pos[1]};d.datepicker._pos=null;b.dpDiv.css({position:"absolute",display:"block",top:"-1000px"});d.datepicker._updateDatepicker(b);c=d.datepicker._checkOffset(b,c,e);b.dpDiv.css({po [...]
+d.blockUI?"static":e?"fixed":"absolute",display:"none",left:c.left+"px",top:c.top+"px"});if(!b.inline){c=d.datepicker._get(b,"showAnim");var f=d.datepicker._get(b,"duration"),h=function(){d.datepicker._datepickerShowing=true;var i=d.datepicker._getBorders(b.dpDiv);b.dpDiv.find("iframe.ui-datepicker-cover").css({left:-i[0],top:-i[1],width:b.dpDiv.outerWidth(),height:b.dpDiv.outerHeight()})};b.dpDiv.zIndex(d(a).zIndex()+1);d.effects&&d.effects[c]?b.dpDiv.show(c,d.datepicker._get(b,"showOpt [...]
+h):b.dpDiv[c||"show"](c?f:null,h);if(!c||!f)h();b.input.is(":visible")&&!b.input.is(":disabled")&&b.input.focus();d.datepicker._curInst=b}}},_updateDatepicker:function(a){var b=this,c=d.datepicker._getBorders(a.dpDiv);a.dpDiv.empty().append(this._generateHTML(a)).find("iframe.ui-datepicker-cover").css({left:-c[0],top:-c[1],width:a.dpDiv.outerWidth(),height:a.dpDiv.outerHeight()}).end().find("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a").bind("mouseout", [...]
+this.className.indexOf("ui-datepicker-prev")!=-1&&d(this).removeClass("ui-datepicker-prev-hover");this.className.indexOf("ui-datepicker-next")!=-1&&d(this).removeClass("ui-datepicker-next-hover")}).bind("mouseover",function(){if(!b._isDisabledDatepicker(a.inline?a.dpDiv.parent()[0]:a.input[0])){d(this).parents(".ui-datepicker-calendar").find("a").removeClass("ui-state-hover");d(this).addClass("ui-state-hover");this.className.indexOf("ui-datepicker-prev")!=-1&&d(this).addClass("ui-datepic [...]
+this.className.indexOf("ui-datepicker-next")!=-1&&d(this).addClass("ui-datepicker-next-hover")}}).end().find("."+this._dayOverClass+" a").trigger("mouseover").end();c=this._getNumberOfMonths(a);var e=c[1];e>1?a.dpDiv.addClass("ui-datepicker-multi-"+e).css("width",17*e+"em"):a.dpDiv.removeClass("ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4").width("");a.dpDiv[(c[0]!=1||c[1]!=1?"add":"remove")+"Class"]("ui-datepicker-multi");a.dpDiv[(this._get(a,"isRTL")?"add":"remove" [...]
+a==d.datepicker._curInst&&d.datepicker._datepickerShowing&&a.input&&a.input.is(":visible")&&!a.input.is(":disabled")&&a.input.focus()},_getBorders:function(a){var b=function(c){return{thin:1,medium:2,thick:3}[c]||c};return[parseFloat(b(a.css("border-left-width"))),parseFloat(b(a.css("border-top-width")))]},_checkOffset:function(a,b,c){var e=a.dpDiv.outerWidth(),f=a.dpDiv.outerHeight(),h=a.input?a.input.outerWidth():0,i=a.input?a.input.outerHeight():0,g=document.documentElement.clientWidt [...]
+k=document.documentElement.clientHeight+d(document).scrollTop();b.left-=this._get(a,"isRTL")?e-h:0;b.left-=c&&b.left==a.input.offset().left?d(document).scrollLeft():0;b.top-=c&&b.top==a.input.offset().top+i?d(document).scrollTop():0;b.left-=Math.min(b.left,b.left+e>g&&g>e?Math.abs(b.left+e-g):0);b.top-=Math.min(b.top,b.top+f>k&&k>f?Math.abs(f+i):0);return b},_findPos:function(a){for(var b=this._get(this._getInst(a),"isRTL");a&&(a.type=="hidden"||a.nodeType!=1);)a=a[b?"previousSibling":"n [...]
+a=d(a).offset();return[a.left,a.top]},_hideDatepicker:function(a){var b=this._curInst;if(!(!b||a&&b!=d.data(a,"datepicker")))if(this._datepickerShowing){a=this._get(b,"showAnim");var c=this._get(b,"duration"),e=function(){d.datepicker._tidyDialog(b);this._curInst=null};d.effects&&d.effects[a]?b.dpDiv.hide(a,d.datepicker._get(b,"showOptions"),c,e):b.dpDiv[a=="slideDown"?"slideUp":a=="fadeIn"?"fadeOut":"hide"](a?c:null,e);a||e();if(a=this._get(b,"onClose"))a.apply(b.input?b.input[0]:null,[ [...]
+"",b]);this._datepickerShowing=false;this._lastInput=null;if(this._inDialog){this._dialogInput.css({position:"absolute",left:"0",top:"-100px"});if(d.blockUI){d.unblockUI();d("body").append(this.dpDiv)}}this._inDialog=false}},_tidyDialog:function(a){a.dpDiv.removeClass(this._dialogClass).unbind(".ui-datepicker-calendar")},_checkExternalClick:function(a){if(d.datepicker._curInst){a=d(a.target);a[0].id!=d.datepicker._mainDivId&&a.parents("#"+d.datepicker._mainDivId).length==0&&!a.hasClass(d [...]
+!a.hasClass(d.datepicker._triggerClass)&&d.datepicker._datepickerShowing&&!(d.datepicker._inDialog&&d.blockUI)&&d.datepicker._hideDatepicker()}},_adjustDate:function(a,b,c){a=d(a);var e=this._getInst(a[0]);if(!this._isDisabledDatepicker(a[0])){this._adjustInstDate(e,b+(c=="M"?this._get(e,"showCurrentAtPos"):0),c);this._updateDatepicker(e)}},_gotoToday:function(a){a=d(a);var b=this._getInst(a[0]);if(this._get(b,"gotoCurrent")&&b.currentDay){b.selectedDay=b.currentDay;b.drawMonth=b.selecte [...]
+b.drawYear=b.selectedYear=b.currentYear}else{var c=new Date;b.selectedDay=c.getDate();b.drawMonth=b.selectedMonth=c.getMonth();b.drawYear=b.selectedYear=c.getFullYear()}this._notifyChange(b);this._adjustDate(a)},_selectMonthYear:function(a,b,c){a=d(a);var e=this._getInst(a[0]);e._selectingMonthYear=false;e["selected"+(c=="M"?"Month":"Year")]=e["draw"+(c=="M"?"Month":"Year")]=parseInt(b.options[b.selectedIndex].value,10);this._notifyChange(e);this._adjustDate(a)},_clickMonthYear:function( [...]
+a.input&&a._selectingMonthYear&&!d.browser.msie&&a.input.focus();a._selectingMonthYear=!a._selectingMonthYear},_selectDay:function(a,b,c,e){var f=d(a);if(!(d(e).hasClass(this._unselectableClass)||this._isDisabledDatepicker(f[0]))){f=this._getInst(f[0]);f.selectedDay=f.currentDay=d("a",e).html();f.selectedMonth=f.currentMonth=b;f.selectedYear=f.currentYear=c;this._selectDate(a,this._formatDate(f,f.currentDay,f.currentMonth,f.currentYear))}},_clearDate:function(a){a=d(a);this._getInst(a[0] [...]
+"")},_selectDate:function(a,b){a=this._getInst(d(a)[0]);b=b!=null?b:this._formatDate(a);a.input&&a.input.val(b);this._updateAlternate(a);var c=this._get(a,"onSelect");if(c)c.apply(a.input?a.input[0]:null,[b,a]);else a.input&&a.input.trigger("change");if(a.inline)this._updateDatepicker(a);else{this._hideDatepicker();this._lastInput=a.input[0];typeof a.input[0]!="object"&&a.input.focus();this._lastInput=null}},_updateAlternate:function(a){var b=this._get(a,"altField");if(b){var c=this._get [...]
+this._get(a,"dateFormat"),e=this._getDate(a),f=this.formatDate(c,e,this._getFormatConfig(a));d(b).each(function(){d(this).val(f)})}},noWeekends:function(a){a=a.getDay();return[a>0&&a<6,""]},iso8601Week:function(a){a=new Date(a.getTime());a.setDate(a.getDate()+4-(a.getDay()||7));var b=a.getTime();a.setMonth(0);a.setDate(1);return Math.floor(Math.round((b-a)/864E5)/7)+1},parseDate:function(a,b,c){if(a==null||b==null)throw"Invalid arguments";b=typeof b=="object"?b.toString():b+"";if(b=="")r [...]
+for(var e=(c?c.shortYearCutoff:null)||this._defaults.shortYearCutoff,f=(c?c.dayNamesShort:null)||this._defaults.dayNamesShort,h=(c?c.dayNames:null)||this._defaults.dayNames,i=(c?c.monthNamesShort:null)||this._defaults.monthNamesShort,g=(c?c.monthNames:null)||this._defaults.monthNames,k=c=-1,l=-1,u=-1,j=false,o=function(p){(p=z+1<a.length&&a.charAt(z+1)==p)&&z++;return p},m=function(p){o(p);p=new RegExp("^\\d{1,"+(p=="@"?14:p=="!"?20:p=="y"?4:p=="o"?3:2)+"}");p=b.substring(s).match(p);if( [...]
+s;s+=p[0].length;return parseInt(p[0],10)},n=function(p,w,G){p=o(p)?G:w;for(w=0;w<p.length;w++)if(b.substr(s,p[w].length)==p[w]){s+=p[w].length;return w+1}throw"Unknown name at position "+s;},r=function(){if(b.charAt(s)!=a.charAt(z))throw"Unexpected literal at position "+s;s++},s=0,z=0;z<a.length;z++)if(j)if(a.charAt(z)=="'"&&!o("'"))j=false;else r();else switch(a.charAt(z)){case "d":l=m("d");break;case "D":n("D",f,h);break;case "o":u=m("o");break;case "m":k=m("m");break;case "M":k=n("M" [...]
+case "y":c=m("y");break;case "@":var v=new Date(m("@"));c=v.getFullYear();k=v.getMonth()+1;l=v.getDate();break;case "!":v=new Date((m("!")-this._ticksTo1970)/1E4);c=v.getFullYear();k=v.getMonth()+1;l=v.getDate();break;case "'":if(o("'"))r();else j=true;break;default:r()}if(c==-1)c=(new Date).getFullYear();else if(c<100)c+=(new Date).getFullYear()-(new Date).getFullYear()%100+(c<=e?0:-100);if(u>-1){k=1;l=u;do{e=this._getDaysInMonth(c,k-1);if(l<=e)break;k++;l-=e}while(1)}v=this._daylightSa [...]
+k-1,l));if(v.getFullYear()!=c||v.getMonth()+1!=k||v.getDate()!=l)throw"Invalid date";return v},ATOM:"yy-mm-dd",COOKIE:"D, dd M yy",ISO_8601:"yy-mm-dd",RFC_822:"D, d M y",RFC_850:"DD, dd-M-y",RFC_1036:"D, d M y",RFC_1123:"D, d M yy",RFC_2822:"D, d M yy",RSS:"D, d M y",TICKS:"!",TIMESTAMP:"@",W3C:"yy-mm-dd",_ticksTo1970:(718685+Math.floor(492.5)-Math.floor(19.7)+Math.floor(4.925))*24*60*60*1E7,formatDate:function(a,b,c){if(!b)return"";var e=(c?c.dayNamesShort:null)||this._defaults.dayNames [...]
+c.dayNames:null)||this._defaults.dayNames,h=(c?c.monthNamesShort:null)||this._defaults.monthNamesShort;c=(c?c.monthNames:null)||this._defaults.monthNames;var i=function(o){(o=j+1<a.length&&a.charAt(j+1)==o)&&j++;return o},g=function(o,m,n){m=""+m;if(i(o))for(;m.length<n;)m="0"+m;return m},k=function(o,m,n,r){return i(o)?r[m]:n[m]},l="",u=false;if(b)for(var j=0;j<a.length;j++)if(u)if(a.charAt(j)=="'"&&!i("'"))u=false;else l+=a.charAt(j);else switch(a.charAt(j)){case "d":l+=g("d",b.getDate [...]
+case "D":l+=k("D",b.getDay(),e,f);break;case "o":l+=g("o",(b.getTime()-(new Date(b.getFullYear(),0,0)).getTime())/864E5,3);break;case "m":l+=g("m",b.getMonth()+1,2);break;case "M":l+=k("M",b.getMonth(),h,c);break;case "y":l+=i("y")?b.getFullYear():(b.getYear()%100<10?"0":"")+b.getYear()%100;break;case "@":l+=b.getTime();break;case "!":l+=b.getTime()*1E4+this._ticksTo1970;break;case "'":if(i("'"))l+="'";else u=true;break;default:l+=a.charAt(j)}return l},_possibleChars:function(a){for(var [...]
+e=function(h){(h=f+1<a.length&&a.charAt(f+1)==h)&&f++;return h},f=0;f<a.length;f++)if(c)if(a.charAt(f)=="'"&&!e("'"))c=false;else b+=a.charAt(f);else switch(a.charAt(f)){case "d":case "m":case "y":case "@":b+="0123456789";break;case "D":case "M":return null;case "'":if(e("'"))b+="'";else c=true;break;default:b+=a.charAt(f)}return b},_get:function(a,b){return a.settings[b]!==undefined?a.settings[b]:this._defaults[b]},_setDateFromField:function(a,b){if(a.input.val()!=a.lastVal){var c=this. [...]
+e=a.lastVal=a.input?a.input.val():null,f,h;f=h=this._getDefaultDate(a);var i=this._getFormatConfig(a);try{f=this.parseDate(c,e,i)||h}catch(g){this.log(g);e=b?"":e}a.selectedDay=f.getDate();a.drawMonth=a.selectedMonth=f.getMonth();a.drawYear=a.selectedYear=f.getFullYear();a.currentDay=e?f.getDate():0;a.currentMonth=e?f.getMonth():0;a.currentYear=e?f.getFullYear():0;this._adjustInstDate(a)}},_getDefaultDate:function(a){return this._restrictMinMax(a,this._determineDate(a,this._get(a,"defaul [...]
+_determineDate:function(a,b,c){var e=function(h){var i=new Date;i.setDate(i.getDate()+h);return i},f=function(h){try{return d.datepicker.parseDate(d.datepicker._get(a,"dateFormat"),h,d.datepicker._getFormatConfig(a))}catch(i){}var g=(h.toLowerCase().match(/^c/)?d.datepicker._getDate(a):null)||new Date,k=g.getFullYear(),l=g.getMonth();g=g.getDate();for(var u=/([+-]?[0-9]+)\s*(d|D|w|W|m|M|y|Y)?/g,j=u.exec(h);j;){switch(j[2]||"d"){case "d":case "D":g+=parseInt(j[1],10);break;case "w":case " [...]
+10)*7;break;case "m":case "M":l+=parseInt(j[1],10);g=Math.min(g,d.datepicker._getDaysInMonth(k,l));break;case "y":case "Y":k+=parseInt(j[1],10);g=Math.min(g,d.datepicker._getDaysInMonth(k,l));break}j=u.exec(h)}return new Date(k,l,g)};if(b=(b=b==null?c:typeof b=="string"?f(b):typeof b=="number"?isNaN(b)?c:e(b):b)&&b.toString()=="Invalid Date"?c:b){b.setHours(0);b.setMinutes(0);b.setSeconds(0);b.setMilliseconds(0)}return this._daylightSavingAdjust(b)},_daylightSavingAdjust:function(a){if(! [...]
+a.setHours(a.getHours()>12?a.getHours()+2:0);return a},_setDate:function(a,b,c){var e=!b,f=a.selectedMonth,h=a.selectedYear;b=this._restrictMinMax(a,this._determineDate(a,b,new Date));a.selectedDay=a.currentDay=b.getDate();a.drawMonth=a.selectedMonth=a.currentMonth=b.getMonth();a.drawYear=a.selectedYear=a.currentYear=b.getFullYear();if((f!=a.selectedMonth||h!=a.selectedYear)&&!c)this._notifyChange(a);this._adjustInstDate(a);if(a.input)a.input.val(e?"":this._formatDate(a))},_getDate:funct [...]
+a.input&&a.input.val()==""?null:this._daylightSavingAdjust(new Date(a.currentYear,a.currentMonth,a.currentDay))},_generateHTML:function(a){var b=new Date;b=this._daylightSavingAdjust(new Date(b.getFullYear(),b.getMonth(),b.getDate()));var c=this._get(a,"isRTL"),e=this._get(a,"showButtonPanel"),f=this._get(a,"hideIfNoPrevNext"),h=this._get(a,"navigationAsDateFormat"),i=this._getNumberOfMonths(a),g=this._get(a,"showCurrentAtPos"),k=this._get(a,"stepMonths"),l=i[0]!=1||i[1]!=1,u=this._dayli [...]
+new Date(9999,9,9):new Date(a.currentYear,a.currentMonth,a.currentDay)),j=this._getMinMaxDate(a,"min"),o=this._getMinMaxDate(a,"max");g=a.drawMonth-g;var m=a.drawYear;if(g<0){g+=12;m--}if(o){var n=this._daylightSavingAdjust(new Date(o.getFullYear(),o.getMonth()-i[0]*i[1]+1,o.getDate()));for(n=j&&n<j?j:n;this._daylightSavingAdjust(new Date(m,g,1))>n;){g--;if(g<0){g=11;m--}}}a.drawMonth=g;a.drawYear=m;n=this._get(a,"prevText");n=!h?n:this.formatDate(n,this._daylightSavingAdjust(new Date(m, [...]
+n=this._canAdjustMonth(a,-1,m,g)?'<a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_'+y+".datepicker._adjustDate('#"+a.id+"', -"+k+", 'M');\" title=\""+n+'"><span class="ui-icon ui-icon-circle-triangle-'+(c?"e":"w")+'">'+n+"</span></a>":f?"":'<a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="'+n+'"><span class="ui-icon ui-icon-circle-triangle-'+(c?"e":"w")+'">'+n+"</span></a>";var r=this._get(a,"nextText");r=!h?r:this.formatDate(r,this._daylightSavingAdjus [...]
+g+k,1)),this._getFormatConfig(a));f=this._canAdjustMonth(a,+1,m,g)?'<a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_'+y+".datepicker._adjustDate('#"+a.id+"', +"+k+", 'M');\" title=\""+r+'"><span class="ui-icon ui-icon-circle-triangle-'+(c?"w":"e")+'">'+r+"</span></a>":f?"":'<a class="ui-datepicker-next ui-corner-all ui-state-disabled" title="'+r+'"><span class="ui-icon ui-icon-circle-triangle-'+(c?"w":"e")+'">'+r+"</span></a>";k=this._get(a,"currentText");r=this._get(a,"go [...]
+a.currentDay?u:b;k=!h?k:this.formatDate(k,r,this._getFormatConfig(a));h=!a.inline?'<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" onclick="DP_jQuery_'+y+'.datepicker._hideDatepicker();">'+this._get(a,"closeText")+"</button>":"";e=e?'<div class="ui-datepicker-buttonpane ui-widget-content">'+(c?h:"")+(this._isInRange(a,r)?'<button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" onclick="D [...]
+y+".datepicker._gotoToday('#"+a.id+"');\">"+k+"</button>":"")+(c?"":h)+"</div>":"";h=parseInt(this._get(a,"firstDay"),10);h=isNaN(h)?0:h;k=this._get(a,"showWeek");r=this._get(a,"dayNames");this._get(a,"dayNamesShort");var s=this._get(a,"dayNamesMin"),z=this._get(a,"monthNames"),v=this._get(a,"monthNamesShort"),p=this._get(a,"beforeShowDay"),w=this._get(a,"showOtherMonths"),G=this._get(a,"selectOtherMonths");this._get(a,"calculateWeek");for(var K=this._getDefaultDate(a),H="",C=0;C<i[0];C+ [...]
+"",D=0;D<i[1];D++){var M=this._daylightSavingAdjust(new Date(m,g,a.selectedDay)),t=" ui-corner-all",x="";if(l){x+='<div class="ui-datepicker-group';if(i[1]>1)switch(D){case 0:x+=" ui-datepicker-group-first";t=" ui-corner-"+(c?"right":"left");break;case i[1]-1:x+=" ui-datepicker-group-last";t=" ui-corner-"+(c?"left":"right");break;default:x+=" ui-datepicker-group-middle";t="";break}x+='">'}x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t) [...]
+f:n:"")+(/all|right/.test(t)&&C==0?c?n:f:"")+this._generateMonthYearHeader(a,g,m,j,o,C>0||D>0,z,v)+'</div><table class="ui-datepicker-calendar"><thead><tr>';var A=k?'<th class="ui-datepicker-week-col">'+this._get(a,"weekHeader")+"</th>":"";for(t=0;t<7;t++){var q=(t+h)%7;A+="<th"+((t+h+6)%7>=5?' class="ui-datepicker-week-end"':"")+'><span title="'+r[q]+'">'+s[q]+"</span></th>"}x+=A+"</tr></thead><tbody>";A=this._getDaysInMonth(m,g);if(m==a.selectedYear&&g==a.selectedMonth)a.selectedDay=Ma [...]
+A);t=(this._getFirstDayOfMonth(m,g)-h+7)%7;A=l?6:Math.ceil((t+A)/7);q=this._daylightSavingAdjust(new Date(m,g,1-t));for(var N=0;N<A;N++){x+="<tr>";var O=!k?"":'<td class="ui-datepicker-week-col">'+this._get(a,"calculateWeek")(q)+"</td>";for(t=0;t<7;t++){var F=p?p.apply(a.input?a.input[0]:null,[q]):[true,""],B=q.getMonth()!=g,I=B&&!G||!F[0]||j&&q<j||o&&q>o;O+='<td class="'+((t+h+6)%7>=5?" ui-datepicker-week-end":"")+(B?" ui-datepicker-other-month":"")+(q.getTime()==M.getTime()&&g==a.selec [...]
+a._keyEvent||K.getTime()==q.getTime()&&K.getTime()==M.getTime()?" "+this._dayOverClass:"")+(I?" "+this._unselectableClass+" ui-state-disabled":"")+(B&&!w?"":" "+F[1]+(q.getTime()==u.getTime()?" "+this._currentClass:"")+(q.getTime()==b.getTime()?" ui-datepicker-today":""))+'"'+((!B||w)&&F[2]?' title="'+F[2]+'"':"")+(I?"":' onclick="DP_jQuery_'+y+".datepicker._selectDay('#"+a.id+"',"+q.getMonth()+","+q.getFullYear()+', this);return false;"')+">"+(B&&!w?" ":I?'<span class="ui-state-def [...]
+"</span>":'<a class="ui-state-default'+(q.getTime()==b.getTime()?" ui-state-highlight":"")+(q.getTime()==u.getTime()?" ui-state-active":"")+(B?" ui-priority-secondary":"")+'" href="#">'+q.getDate()+"</a>")+"</td>";q.setDate(q.getDate()+1);q=this._daylightSavingAdjust(q)}x+=O+"</tr>"}g++;if(g>11){g=0;m++}x+="</tbody></table>"+(l?"</div>"+(i[0]>0&&D==i[1]-1?'<div class="ui-datepicker-row-break"></div>':""):"");L+=x}H+=L}H+=e+(d.browser.msie&&parseInt(d.browser.version,10)<7&&!a.inline?'<if [...]
+"");a._keyEvent=false;return H},_generateMonthYearHeader:function(a,b,c,e,f,h,i,g){var k=this._get(a,"changeMonth"),l=this._get(a,"changeYear"),u=this._get(a,"showMonthAfterYear"),j='<div class="ui-datepicker-title">',o="";if(h||!k)o+='<span class="ui-datepicker-month">'+i[b]+"</span>";else{i=e&&e.getFullYear()==c;var m=f&&f.getFullYear()==c;o+='<select class="ui-datepicker-month" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+a.id+"', this, 'M');\" onclick=\"DP_jQuery_"+y+".d [...]
+a.id+"');\">";for(var n=0;n<12;n++)if((!i||n>=e.getMonth())&&(!m||n<=f.getMonth()))o+='<option value="'+n+'"'+(n==b?' selected="selected"':"")+">"+g[n]+"</option>";o+="</select>"}u||(j+=o+(h||!(k&&l)?" ":""));if(h||!l)j+='<span class="ui-datepicker-year">'+c+"</span>";else{g=this._get(a,"yearRange").split(":");var r=(new Date).getFullYear();i=function(s){s=s.match(/c[+-].*/)?c+parseInt(s.substring(1),10):s.match(/[+-].*/)?r+parseInt(s,10):parseInt(s,10);return isNaN(s)?r:s};b=i(g[0] [...]
+i(g[1]||""));b=e?Math.max(b,e.getFullYear()):b;g=f?Math.min(g,f.getFullYear()):g;for(j+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+a.id+"', this, 'Y');\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');\">";b<=g;b++)j+='<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";j+="</select>"}j+=this._get(a,"yearSuffix");if(u)j+=(h||!(k&&l)?" ":"")+o;j+="</div>";return j},_adjustInstDate:function(a,b [...]
+a.drawYear+(c=="Y"?b:0),f=a.drawMonth+(c=="M"?b:0);b=Math.min(a.selectedDay,this._getDaysInMonth(e,f))+(c=="D"?b:0);e=this._restrictMinMax(a,this._daylightSavingAdjust(new Date(e,f,b)));a.selectedDay=e.getDate();a.drawMonth=a.selectedMonth=e.getMonth();a.drawYear=a.selectedYear=e.getFullYear();if(c=="M"||c=="Y")this._notifyChange(a)},_restrictMinMax:function(a,b){var c=this._getMinMaxDate(a,"min");a=this._getMinMaxDate(a,"max");b=c&&b<c?c:b;return b=a&&b>a?a:b},_notifyChange:function(a){ [...]
+"onChangeMonthYear");if(b)b.apply(a.input?a.input[0]:null,[a.selectedYear,a.selectedMonth+1,a])},_getNumberOfMonths:function(a){a=this._get(a,"numberOfMonths");return a==null?[1,1]:typeof a=="number"?[1,a]:a},_getMinMaxDate:function(a,b){return this._determineDate(a,this._get(a,b+"Date"),null)},_getDaysInMonth:function(a,b){return 32-(new Date(a,b,32)).getDate()},_getFirstDayOfMonth:function(a,b){return(new Date(a,b,1)).getDay()},_canAdjustMonth:function(a,b,c,e){var f=this._getNumberOfM [...]
+c=this._daylightSavingAdjust(new Date(c,e+(b<0?b:f[0]*f[1]),1));b<0&&c.setDate(this._getDaysInMonth(c.getFullYear(),c.getMonth()));return this._isInRange(a,c)},_isInRange:function(a,b){var c=this._getMinMaxDate(a,"min");a=this._getMinMaxDate(a,"max");return(!c||b.getTime()>=c.getTime())&&(!a||b.getTime()<=a.getTime())},_getFormatConfig:function(a){var b=this._get(a,"shortYearCutoff");b=typeof b!="string"?b:(new Date).getFullYear()%100+parseInt(b,10);return{shortYearCutoff:b,dayNamesShort [...]
+"dayNamesShort"),dayNames:this._get(a,"dayNames"),monthNamesShort:this._get(a,"monthNamesShort"),monthNames:this._get(a,"monthNames")}},_formatDate:function(a,b,c,e){if(!b){a.currentDay=a.selectedDay;a.currentMonth=a.selectedMonth;a.currentYear=a.selectedYear}b=b?typeof b=="object"?b:this._daylightSavingAdjust(new Date(e,c,b)):this._daylightSavingAdjust(new Date(a.currentYear,a.currentMonth,a.currentDay));return this.formatDate(this._get(a,"dateFormat"),b,this._getFormatConfig(a))}});d.f [...]
+function(a){if(!d.datepicker.initialized){d(document).mousedown(d.datepicker._checkExternalClick).find("body").append(d.datepicker.dpDiv);d.datepicker.initialized=true}var b=Array.prototype.slice.call(arguments,1);if(typeof a=="string"&&(a=="isDisabled"||a=="getDate"||a=="widget"))return d.datepicker["_"+a+"Datepicker"].apply(d.datepicker,[this[0]].concat(b));if(a=="option"&&arguments.length==2&&typeof arguments[1]=="string")return d.datepicker["_"+a+"Datepicker"].apply(d.datepicker,[thi [...]
+return this.each(function(){typeof a=="string"?d.datepicker["_"+a+"Datepicker"].apply(d.datepicker,[this].concat(b)):d.datepicker._attachDatepicker(this,a)})};d.datepicker=new J;d.datepicker.initialized=false;d.datepicker.uuid=(new Date).getTime();d.datepicker.version="1.8.1";window["DP_jQuery_"+y]=d})(jQuery);
+;
\ No newline at end of file
diff --git a/demos/movies/components/jquery.pager.js b/demos/movies/components/jquery.pager.js
new file mode 100644
index 0000000..2d7bbbc
--- /dev/null
+++ b/demos/movies/components/jquery.pager.js
@@ -0,0 +1,132 @@
+/*
+* jQuery pager plugin
+* Version 1.0 (12/22/2008)
+* @requires jQuery v1.2.6 or later
+*
+* Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html
+*
+* Copyright (c) 2008-2009 Jon Paul Davies
+* Dual licensed under the MIT and GPL licenses:
+* http://www.opensource.org/licenses/mit-license.php
+* http://www.gnu.org/licenses/gpl.html
+*
+* Read the related blog post and contact the author at http://www.j-dee.com/2008/12/22/jquery-pager-plugin/
+*
+* This version is far from perfect and doesn't manage it's own state, therefore contributions are more than welcome!
+*
+* Usage: .pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PagerClickTest });
+*
+* Where pagenumber is the visible page number
+* pagecount is the total number of pages to display
+* buttonClickCallback is the method to fire when a pager button is clicked.
+*
+* buttonClickCallback signiture is PagerClickTest = function(pageclickednumber)
+* Where pageclickednumber is the number of the page clicked in the control.
+*
+* The included Pager.CSS file is a dependancy but can obviously tweaked to your wishes
+* Tested in IE6 IE7 Firefox & Safari. Any browser strangeness, please report.
+*/
+(function($) {
+
+ $.fn.pager = function(options) {
+
+ var opts = $.extend({}, $.fn.pager.defaults, options);
+
+ return this.each(function() {
+
+ // empty out the destination element and then render out the pager with the supplied options
+ $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));
+
+ // specify correct cursor activity
+ $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
+ });
+ };
+
+ // render and return the pager with the supplied options
+ function renderpager(pagenumber, pagecount, buttonClickCallback) {
+
+ // setup $pager to hold render
+ var $pager = $('<ul class="pages"></ul>');
+
+ // add in the previous and next buttons
+ $pager.append(renderButton('first', pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', pagenumber, pagecount, buttonClickCallback));
+
+ // pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases
+ var startPoint = 1;
+ var endPoint = 9;
+
+ if (pagenumber > 4) {
+ startPoint = pagenumber - 4;
+ endPoint = pagenumber + 4;
+ }
+
+ if (endPoint > pagecount) {
+ startPoint = pagecount - 8;
+ endPoint = pagecount;
+ }
+
+ if (startPoint < 1) {
+ startPoint = 1;
+ }
+
+ // loop thru visible pages and render buttons
+ for (var page = startPoint; page <= endPoint; page++) {
+
+ var currentButton = $('<li class="page-number">' + (page) + '</li>');
+
+ page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); });
+ currentButton.appendTo($pager);
+ }
+
+ // render in the next and last buttons before returning the whole rendered control back.
+ $pager.append(renderButton('next', pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', pagenumber, pagecount, buttonClickCallback));
+
+ return $pager;
+ }
+
+ // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button
+ function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
+
+ var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');
+
+ var destPage = 1;
+
+ // work out destination page for required button type
+ switch (buttonLabel) {
+ case "first":
+ destPage = 1;
+ break;
+ case "prev":
+ destPage = pagenumber - 1;
+ break;
+ case "next":
+ destPage = pagenumber + 1;
+ break;
+ case "last":
+ destPage = pagecount;
+ break;
+ }
+
+ // disable and 'grey' out buttons if not needed.
+ if (buttonLabel == "first" || buttonLabel == "prev") {
+ pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
+ }
+ else {
+ pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
+ }
+
+ return $Button;
+ }
+
+ // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version
+ $.fn.pager.defaults = {
+ pagenumber: 1,
+ pagecount: 1
+ };
+
+})(jQuery);
+
+
+
+
+
diff --git a/demos/movies/css/jquery-ui-1.8.1.custom.css b/demos/movies/css/jquery-ui-1.8.1.custom.css
new file mode 100644
index 0000000..9871af7
--- /dev/null
+++ b/demos/movies/css/jquery-ui-1.8.1.custom.css
@@ -0,0 +1,408 @@
+/*
+* jQuery UI CSS Framework
+* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
+* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
+*/
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+
+/*
+* jQuery UI CSS Framework
+* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
+* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial,sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=cc0000&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=15&borderColorHeader=e3a1a1&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=eeeeee&fcContent=333333&iconColorContent=cc0000&bgColorDefault=eeeeee&bgTextureDefault=04_highlight_hard.pn [...]
+*/
+
+
+/* Component containers
+----------------------------------*/
+.ui-widget { font-family: Arial,sans-serif; font-size: 1.1em; }
+.ui-widget .ui-widget { font-size: 1em; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial,sans-serif; font-size: 1em; }
+.ui-widget-content { border: 1px solid #eeeeee; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #333333; }
+.ui-widget-content a { color: #333333; }
+.ui-widget-header { border: 1px solid #e3a1a1; background: #cc0000 url(images/ui-bg_highlight-soft_15_cc0000_1x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
+.ui-widget-header a { color: #ffffff; }
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d8dcdf; background: #eeeeee url(images/ui-bg_highlight-hard_100_eeeeee_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #004276; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #004276; text-decoration: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #cdd5da; background: #f6f6f6 url(images/ui-bg_highlight-hard_100_f6f6f6_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #111111; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #111111; text-decoration: none; }
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #eeeeee; background: #ffffff url(images/ui-bg_flat_65_ffffff_40x100.png) 50% 50% repeat-x; font-weight: bold; color: #cc0000; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #cc0000; text-decoration: none; }
+.ui-widget :active { outline: none; }
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fcd3a1; background: #fbf8ee url(images/ui-bg_glass_55_fbf8ee_1x400.png) 50% 50% repeat-x; color: #444444; }
+.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #444444; }
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cc0000; background: #f3d8d8 url(images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png) 50% 50% repeat; color: #2e2e2e; }
+.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #2e2e2e; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #2e2e2e; }
+.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
+.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
+.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cc0000_256x240.png); }
+.ui-widget-content .ui-icon {background-image: url(images/ui-icons_cc0000_256x240.png); }
+.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
+.ui-state-default .ui-icon { background-image: url(images/ui-icons_cc0000_256x240.png); }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_cc0000_256x240.png); }
+.ui-state-active .ui-icon {background-image: url(images/ui-icons_cc0000_256x240.png); }
+.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_004276_256x240.png); }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cc0000_256x240.png); }
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-off { background-position: -96px -144px; }
+.ui-icon-radio-on { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-tl { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; }
+.ui-corner-tr { -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; }
+.ui-corner-bl { -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; }
+.ui-corner-br { -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
+.ui-corner-top { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; }
+.ui-corner-bottom { -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
+.ui-corner-right { -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
+.ui-corner-left { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; }
+.ui-corner-all { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
+
+/* Overlays */
+.ui-widget-overlay { background: #a6a6a6 url(images/ui-bg_dots-small_65_a6a6a6_2x2.png) 50% 50% repeat; opacity: .40;filter:Alpha(Opacity=40); }
+.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #333333 url(images/ui-bg_flat_0_333333_40x100.png) 50% 50% repeat-x; opacity: .10;filter:Alpha(Opacity=10); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/* Accordion
+----------------------------------*/
+.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
+.ui-accordion .ui-accordion-li-fix { display: inline; }
+.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
+.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
+/* IE7-/Win - Fix extra vertical space in lists */
+.ui-accordion a { zoom: 1; }
+.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
+.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
+.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
+.ui-accordion .ui-accordion-content-active { display: block; }/* Button
+----------------------------------*/
+
+.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
+.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
+button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
+.ui-button-icons-only { width: 3.4em; }
+button.ui-button-icons-only { width: 3.7em; }
+
+/*button text element */
+.ui-button .ui-button-text { display: block; line-height: 1.4; }
+.ui-button-text-only .ui-button-text { padding: .4em 1em; }
+.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
+.ui-button-text-icon .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
+.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
+/* no icon support for input elements, provide padding by default */
+input.ui-button { padding: .4em 1em; }
+
+/*button icon element(s) */
+.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
+.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
+.ui-button-text-icon .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
+.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
+
+/*button sets*/
+.ui-buttonset { margin-right: 7px; }
+.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
+
+/* workarounds */
+button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
+
+
+
+
+
+/* Slider
+----------------------------------*/
+.ui-slider { position: relative; text-align: left; }
+.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
+.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
+
+.ui-slider-horizontal { height: .8em; }
+.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
+.ui-slider-horizontal .ui-slider-range-min { left: 0; }
+.ui-slider-horizontal .ui-slider-range-max { right: 0; }
+
+.ui-slider-vertical { width: .8em; height: 100px; }
+.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
+.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
+.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
+.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Datepicker
+----------------------------------*/
+.ui-datepicker { width: 17em; padding: .2em .2em 0; }
+.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
+.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
+.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
+.ui-datepicker .ui-datepicker-prev { left:2px; }
+.ui-datepicker .ui-datepicker-next { right:2px; }
+.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
+.ui-datepicker .ui-datepicker-next-hover { right:1px; }
+.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
+.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
+.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
+.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year { width: 49%;}
+.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
+.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }
+.ui-datepicker td { border: 0; padding: 1px; }
+.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
+.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
+.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi { width:auto; }
+.ui-datepicker-multi .ui-datepicker-group { float:left; }
+.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
+.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
+.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
+.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
+.ui-datepicker-row-break { clear:both; width:100%; }
+
+/* RTL support */
+.ui-datepicker-rtl { direction: rtl; }
+.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+
+/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
+.ui-datepicker-cover {
+ display: none; /*sorry for IE5*/
+ display/**/: block; /*sorry for IE5*/
+ position: absolute; /*must have*/
+ z-index: -1; /*must have*/
+ filter: mask(); /*must have*/
+ top: -4px; /*must have*/
+ left: -4px; /*must have*/
+ width: 200px; /*must have*/
+ height: 200px; /*must have*/
+}
\ No newline at end of file
diff --git a/demos/movies/css/movies.css b/demos/movies/css/movies.css
new file mode 100644
index 0000000..22e15d9
--- /dev/null
+++ b/demos/movies/css/movies.css
@@ -0,0 +1,283 @@
+body
+{
+ background-color: #b9090b;
+ font-family: Verdana;
+ font-size: 12px;
+}
+
+#about
+{
+ text-align:center;
+ margin: auto;
+ margin-bottom: 5px;
+ background-color: #F9F5FA;
+ padding: 3px;
+ width: 50%;
+}
+
+#pageBody
+{
+ display: block;
+ clear: both;
+ position: relative;
+ margin: auto;
+ width: 90%;
+ background-color: #F9F5FA;
+ padding: 10px 15px 5px 15px;
+}
+
+#genres
+{
+ clear: both;
+ display: block;
+ padding: 0;
+}
+
+#genres li
+{
+ list-style: none;
+ float: left;
+ border: 1px solid #888;
+ text-decoration: none;
+ margin: 0 5px 0 0;
+ padding: 5px;
+ cursor: pointer;
+ background-color: #fff;
+}
+
+#genres li:hover
+{
+ border: 1px solid #003f7e;
+}
+
+#genres li.selected
+{
+ border: 1px solid #003f7e;
+ color: #042CCA;
+ font-weight: 700;
+ background: url(../images/ui-bg_glass_75_dadada_1x400.png) repeat-x 50% 50%;
+}
+
+#pager
+{
+ width: 100%;
+ float: left;
+ clear: left;
+ margin: 0 0 10px;
+}
+
+#pager ul.pages
+{
+ display: block;
+ border: none;
+ text-transform: uppercase;
+ font-size: 10px;
+ padding: 0;
+}
+
+#pager ul.pages li
+{
+ list-style: none;
+ float: left;
+ border: 1px solid #888;
+ text-decoration: none;
+ margin: 0 5px 0 0;
+ padding: 5px;
+ background-color: #fff;
+}
+
+#pager ul.pages li:hover
+{
+ border: 1px solid #00376f;
+}
+
+#pager ul.pages li.pgEmpty
+{
+ border: 1px solid #ccc;
+ color: #aaa;
+ cursor: default;
+}
+
+#pager ul.pages li.pgCurrent
+{
+ border: 1px solid #003f7e;
+ color: #042CCA;
+ font-weight: 700;
+ background: url(../images/ui-bg_glass_75_dadada_1x400.png) #dadada repeat-x 50% 50%;
+}
+
+#movieList
+{
+ display: block;
+ float: left;
+ width: 49.7%;
+ clear: both;
+}
+
+#movieList > div
+{
+ border: 1px solid #00509f;
+ margin-bottom: 10px;
+ padding: 8px;
+ background-color: #fff;
+}
+
+#movieList div div
+{
+ margin-right: 8px;
+ float: left;
+ width: 120px;
+ height: 150px;
+}
+
+#movieList div img
+{
+ height: 150px;
+}
+
+#movieList div br, #pageBody br
+{
+ clear: both;
+}
+
+.buyButton
+{
+ /* background: url(buyButton.png) no-repeat 0px -20px) */
+}
+
+#bookingsList
+{
+ border-collapse: collapse;
+ border: 3px double #00509f;
+ width: 49.7%;
+ float: right;
+ background-color: #fff;
+ margin-bottom: 10px;
+}
+
+#bookingsList tr
+{
+ border: 1px solid #00509f;
+ padding: 5px
+}
+
+.cart td
+{
+ height: 30px;
+ border: 3px double #00509f;
+ background-color: #F9F5FA;
+ text-align:center;
+}
+
+.cart .cart-true
+{
+ background-color: #E8DAEB;
+}
+
+.cart span.text
+{
+ color: #2F5071;
+ float:none;
+ height: 25px;
+ line-height: 25px;
+ font-size: 14px;
+ font-style: italic;
+ border: none;
+}
+
+#submit, #cancel, #sort
+{
+ color: #2F5071;
+ font-weight: 700;
+ float: right;
+ height: 25px;
+ line-height: 25px;
+ font-style: italic;
+ margin: 0 15px;
+}
+
+#submit, #cancel, #sortBtn
+{
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+#submit
+{
+ float: left;
+}
+
+.bookingTitle
+{
+ color: #2F5071;
+ font-weight: bold;
+ background: url(../images/ui-bg_highlight-hard_100_eeeeee_1x100.png) #e6e6e6 repeat-x 50% 50%;
+ cursor: pointer;
+}
+
+.bookingTitle:hover, .bookingTitleEdit:hover
+{
+ background: url(../images/ui-bg_glass_75_dadada_1x400.png) #dadada repeat-x 50% 50%;
+}
+
+.bookingTitleEdit
+{
+ color: #042CCA;
+ font-weight: bold;
+ background: url(../images/ui-bg_highlight-hard_100_eeeeee_1x100.png) #e6e6e6 repeat-x 50% 50%;
+ cursor: pointer;
+}
+
+.bookingTitle td
+{
+ padding: 8px;
+}
+
+.bookingTitleEdit td
+{
+ padding: 7px 8px 7px 8px;
+}
+
+.bookingEdit div
+{
+ float: right;
+ height: 116px;
+}
+
+.bookingEdit .fields
+{
+ float: left;
+}
+
+.bookingEdit .fields span
+{
+ margin: 12px 0 0 8px;
+ display: inline-block;
+ width: 100px;
+}
+
+.bookingEdit .fields input
+{
+ margin: 12px 0 0 8px;
+ width: 250px;
+}
+
+.bookingEdit img
+{
+ height: 100px;
+ margin: 8px;
+}
+
+.close
+{
+ background-position: -96px -128px;
+ float: right;
+ cursor: pointer;
+}
+
+.ui-icon
+{
+ width: 16px;
+ height: 16px;
+ background-image: url(../images/ui-icons_cc0000_256x240.png);
+}
diff --git a/demos/movies/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png b/demos/movies/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png
new file mode 100644
index 0000000..13a229f
Binary files /dev/null and b/demos/movies/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png differ
diff --git a/demos/movies/images/ui-bg_dots-small_65_a6a6a6_2x2.png b/demos/movies/images/ui-bg_dots-small_65_a6a6a6_2x2.png
new file mode 100644
index 0000000..b2d1a1e
Binary files /dev/null and b/demos/movies/images/ui-bg_dots-small_65_a6a6a6_2x2.png differ
diff --git a/demos/movies/images/ui-bg_flat_0_333333_40x100.png b/demos/movies/images/ui-bg_flat_0_333333_40x100.png
new file mode 100644
index 0000000..2f2c7a4
Binary files /dev/null and b/demos/movies/images/ui-bg_flat_0_333333_40x100.png differ
diff --git a/demos/movies/images/ui-bg_flat_65_ffffff_40x100.png b/demos/movies/images/ui-bg_flat_65_ffffff_40x100.png
new file mode 100644
index 0000000..ac8b229
Binary files /dev/null and b/demos/movies/images/ui-bg_flat_65_ffffff_40x100.png differ
diff --git a/demos/movies/images/ui-bg_flat_75_ffffff_40x100.png b/demos/movies/images/ui-bg_flat_75_ffffff_40x100.png
new file mode 100644
index 0000000..ac8b229
Binary files /dev/null and b/demos/movies/images/ui-bg_flat_75_ffffff_40x100.png differ
diff --git a/demos/movies/images/ui-bg_glass_55_fbf8ee_1x400.png b/demos/movies/images/ui-bg_glass_55_fbf8ee_1x400.png
new file mode 100644
index 0000000..cf10929
Binary files /dev/null and b/demos/movies/images/ui-bg_glass_55_fbf8ee_1x400.png differ
diff --git a/demos/movies/images/ui-bg_glass_75_dadada_1x400.png b/demos/movies/images/ui-bg_glass_75_dadada_1x400.png
new file mode 100644
index 0000000..5a46b47
Binary files /dev/null and b/demos/movies/images/ui-bg_glass_75_dadada_1x400.png differ
diff --git a/demos/movies/images/ui-bg_highlight-hard_100_eeeeee_1x100.png b/demos/movies/images/ui-bg_highlight-hard_100_eeeeee_1x100.png
new file mode 100644
index 0000000..7c77ea7
Binary files /dev/null and b/demos/movies/images/ui-bg_highlight-hard_100_eeeeee_1x100.png differ
diff --git a/demos/movies/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png b/demos/movies/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png
new file mode 100644
index 0000000..2656c08
Binary files /dev/null and b/demos/movies/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png differ
diff --git a/demos/movies/images/ui-bg_highlight-soft_15_cc0000_1x100.png b/demos/movies/images/ui-bg_highlight-soft_15_cc0000_1x100.png
new file mode 100644
index 0000000..834797a
Binary files /dev/null and b/demos/movies/images/ui-bg_highlight-soft_15_cc0000_1x100.png differ
diff --git a/demos/movies/images/ui-icons_004276_256x240.png b/demos/movies/images/ui-icons_004276_256x240.png
new file mode 100644
index 0000000..0575381
Binary files /dev/null and b/demos/movies/images/ui-icons_004276_256x240.png differ
diff --git a/demos/movies/images/ui-icons_cc0000_256x240.png b/demos/movies/images/ui-icons_cc0000_256x240.png
new file mode 100644
index 0000000..03a953b
Binary files /dev/null and b/demos/movies/images/ui-icons_cc0000_256x240.png differ
diff --git a/demos/movies/images/ui-icons_ffffff_256x240.png b/demos/movies/images/ui-icons_ffffff_256x240.png
new file mode 100644
index 0000000..42f8f99
Binary files /dev/null and b/demos/movies/images/ui-icons_ffffff_256x240.png differ
diff --git a/demos/samplesCore/Interactive/resources/collapsed.png b/demos/samplesCore/Interactive/resources/collapsed.png
new file mode 100644
index 0000000..ff86cec
Binary files /dev/null and b/demos/samplesCore/Interactive/resources/collapsed.png differ
diff --git a/demos/samplesCore/Interactive/resources/empty.png b/demos/samplesCore/Interactive/resources/empty.png
new file mode 100644
index 0000000..11faecd
Binary files /dev/null and b/demos/samplesCore/Interactive/resources/empty.png differ
diff --git a/demos/samplesCore/Interactive/resources/expanded.png b/demos/samplesCore/Interactive/resources/expanded.png
new file mode 100644
index 0000000..1c7ac43
Binary files /dev/null and b/demos/samplesCore/Interactive/resources/expanded.png differ
diff --git a/demos/samplesCore/Interactive/resources/folder.png b/demos/samplesCore/Interactive/resources/folder.png
new file mode 100644
index 0000000..577638d
Binary files /dev/null and b/demos/samplesCore/Interactive/resources/folder.png differ
diff --git a/demos/samplesCore/Interactive/resources/tabs.css b/demos/samplesCore/Interactive/resources/tabs.css
new file mode 100644
index 0000000..fb43ba9
--- /dev/null
+++ b/demos/samplesCore/Interactive/resources/tabs.css
@@ -0,0 +1,75 @@
+body
+{
+ font-family: Arial;
+}
+
+.special
+{
+ color: Red;
+ font-family: Comic Sans MS;
+ font-size: 20px;
+ font-style: italic;
+}
+
+.tabsView .body
+{
+ height: 200px;
+}
+
+.tabsView .body div
+{
+ padding: 15px;
+ height: 60px;
+ vertical-align: middle;
+ text-align: center;
+}
+
+.tabsView .body h3
+{
+ text-align:center;
+}
+
+.tabsView td
+{
+ border: solid 1px #0000A6;
+ border-top: none;
+ border-right: solid 2px #1E1ED2;
+}
+
+.tabsView th
+{
+ cursor: pointer;
+ padding: 2px;
+ font-weight: normal;
+ font-style: italic;
+ color: #888;
+ border: solid 1px #bbb;
+ border-right: none;
+ background-color: #f8f8f8;
+ border-bottom: solid 1px #1E1ED2;
+}
+
+.tabsView
+{
+ width: 500px;
+ border-collapse: collapse;
+ border: none;
+ margin-top: 20px;
+}
+
+.tabsView tr
+{
+ border-right: solid 1px #bbb;
+}
+
+.tabsView th.header_true
+{
+ cursor:default;
+ font-weight: bold;
+ border: solid 1px #0000A6;
+ border-right: solid 2px #1E1ED2;
+ border-bottom: solid 1px #eee;
+ color: #0000A6;
+ background-color: #fff;
+}
+
diff --git a/demos/samplesCore/Interactive/resources/treeView.css b/demos/samplesCore/Interactive/resources/treeView.css
new file mode 100644
index 0000000..7d329b6
--- /dev/null
+++ b/demos/samplesCore/Interactive/resources/treeView.css
@@ -0,0 +1,50 @@
+.treeView, .treeView ul
+{
+ padding: 0;
+ margin: 0;
+}
+
+.treeView li
+{
+ list-style-type: none;
+ padding: 2px;
+}
+
+.treeView li li
+{
+ margin-left: 18px;
+}
+
+.treeView img
+{
+ vertical-align: middle;
+ border: 0px;
+ margin-right:7px;
+}
+
+img.folder
+{
+ width:15px;
+ height:14px;
+}
+
+img.expand
+{
+ width:8px;
+ width:9px;
+}
+
+.treeView li.folderItem
+{
+ cursor: pointer;
+ color:Blue;
+ text-decoration: underline;
+ font-style:italic;
+ margin-bottom: 4px;
+}
+
+.content_true
+{
+ cursor: pointer;
+ font-weight: bold;
+}
diff --git a/demos/samplesCore/Interactive/tabsTmpl.html b/demos/samplesCore/Interactive/tabsTmpl.html
new file mode 100644
index 0000000..d433a3e
--- /dev/null
+++ b/demos/samplesCore/Interactive/tabsTmpl.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+A tabs control against data, using {{tmpl}}
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>A tabs control against data, using {{tmpl}}</title>
+ <link href="resources/tabs.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<h1>Tabs</h1>
+<div id="tabsView">..loading</div>
+
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
+<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
+
+<script id="tabsTmpl" type="text/x-jquery-tmpl">
+ <table class="tabsView"><tbody>
+ <tr>{{tmpl(items) "#headerItemTmpl"}}</tr>
+ <tr><td colspan="${items.length}">
+ <div class="body">{{tmpl(activeDataItem) "#contentTmpl"}}</div>
+ </td></tr>
+ </tbody></table>
+</script>
+
+<script id="headerItemTmpl" type="text/x-jquery-tmpl">
+ <th class="header_${$data === activeDataItem}">${name}</th>
+</script>
+
+<script id="contentTmpl" type="text/x-jquery-tmpl">
+ <h3>${title}</h3>
+ <div>{{html description}}</div>
+</script>
+
+<script type="text/javascript">
+
+ // ******************** Data for categories and samples ********************
+
+ var samples = {
+ title: "Templating samples",
+ items: [
+ { name: "Inline", title: "Template inline in a script block",
+ description:"Rendering a <span class='special'>template</span> declared in script block" },
+ { name: "String", title: "Template as string",
+ description:"Rendering a <span class='special'>template</span> passed as a string" },
+ { name: "Remote", title: "Render remote data",
+ description:"Rendering remote data using <span class='special'>templates</span>" },
+ { name: "TreeView", title: "Building a Tree View",
+ description:"A tree view using recursive nested <span class='special'>templates</span>" },
+ { name: "Tabs", title: "A Tabs control",
+ description:"Create a tabs control using <span class='special'>templates</span>" }
+ ]
+ },
+
+ activeDataItem = samples.items[0];
+
+ // ******************** Load UI ********************
+
+ $( "#tabsView" ).empty();
+ $( "#tabsTmpl" ).tmpl( samples ).appendTo( "#tabsView" );
+
+ // ******************** Events ********************
+
+ $( "#tabsView" )
+ .delegate( ".header_false", "click", function() {
+ // Get the 'template item' for this tab
+ var activeHeaderTmplItem = $.tmplItem( this );
+ activeDataItem = activeHeaderTmplItem.data;
+
+ // Update the template item for the whole tabs control
+ activeHeaderTmplItem.parent.update();
+ })
+</script>
+
+</body>
+</html>
diff --git a/demos/samplesCore/Interactive/tabsWrap.html b/demos/samplesCore/Interactive/tabsWrap.html
new file mode 100644
index 0000000..acb763f
--- /dev/null
+++ b/demos/samplesCore/Interactive/tabsWrap.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+A tabs control against HTML markup, using {{wrap}}
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>A tabs control against HTML markup, using {{wrap}}</title>
+ <link href="resources/tabs.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<h1>Tabs</h1>
+
+<div id="tabsView">..loading</div>
+
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
+<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
+
+<script id="tabsTmpl" type="text/x-jquery-tmpl">
+ {{wrap(null, {state: state}) "#tabsWrap"}}
+
+ <h3>Inline</h3>
+ <div>
+ Rendering a <span class='special'>template</span> declared in script block
+ </div>
+
+ <h3>String</h3>
+ <div>
+ Rendering a <span class='special'>template</span> passed as a string
+ </div>
+
+ <h3>Remote</h3>
+ <div>
+ Rendering remote data using <span class='special'>templates</span>
+ </div>
+
+ {{/wrap}}
+</script>
+
+<script id="tabsWrap" type="text/x-jquery-tmpl">
+ <table class="tabsView"><tbody>
+ <tr>
+ {{each tabs()}}
+ <th class="${headerClass($index)}">
+ ${$value}
+ </th>
+ {{/each}}
+ </tr>
+ <tr><td colspan="${tabCount()}">
+ <div class="body">
+ {{html tabContent()}}
+ </div>
+ </td></tr>
+ </tbody></table>
+</script>
+
+<script type="text/javascript">
+
+ var state = { activeIndex: 0 };
+
+ // ******************** Load UI ********************
+
+ $( "#tabsView" ).empty();
+ $( "#tabsTmpl" ).tmpl().appendTo( "#tabsView" );
+
+ // ******************** Events ********************
+
+ $( "#tabsView" )
+ .delegate( ".header_false", "click", function() {
+ var ti = $.tmplItem( this );
+ ti.state.activeIndex = $(this).index();
+ ti.update();
+ });
+
+ // ******************** Helper functions ********************
+
+ function tabs() {
+ return this.html("h3", true);
+ }
+ function tabCount() {
+ return this.html("h3").length;
+ }
+ function headerClass( index ) {
+ return index === this.state.activeIndex ? "header_true" : "header_false";
+ }
+
+ function tabContent() {
+ return this.html("div")[this.state.activeIndex];
+ }
+
+</script>
+
+</body>
+</html>
diff --git a/demos/samplesCore/Interactive/tabsWrapImperative.html b/demos/samplesCore/Interactive/tabsWrapImperative.html
new file mode 100644
index 0000000..55b30fd
--- /dev/null
+++ b/demos/samplesCore/Interactive/tabsWrapImperative.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+A tabs control against HTML markup, using imperative API to provide wrapped HTML content
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>A tabs control against HTML markup, using imperative API to provide wrapped HTML content</title>
+ <link href="resources/tabs.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<h1>Tabs</h1>
+
+<div id="tabsView">..loading</div>
+
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
+<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
+
+<div id="tabsContent" style="display:none">
+ <h3>Inline</h3>
+ <div>
+ Rendering a <span class='special'>template</span> declared in script block
+ </div>
+
+ <h3>String</h3>
+ <div>
+ Rendering a <span class='special'>template</span> passed as a string
+ </div>
+
+ <h3>Remote</h3>
+ <div>
+ Rendering remote data using <span class='special'>templates</span>
+ </div>
+</div>
+
+<script id="tabsWrap" type="text/x-jquery-tmpl">
+ <table class="tabsView"><tbody>
+ <tr>
+ {{each $item.html("h3", true)}}
+ <th class="header_${$index === $item.state.activeIndex}">
+ ${$value}
+ </th>
+ {{/each}}
+ </tr>
+ <tr><td colspan='${$item.html("h3").length}'>
+ <div class="body">
+ {{html $item.html("div")[$item.state.activeIndex]}}
+ </div>
+ </td></tr>
+ </tbody></table>
+</script>
+
+<script type="text/javascript">
+
+ var state = { activeIndex: 0 };
+
+ // ******************** Load UI ********************
+
+ $( "#tabsView" ).empty();
+ $( "#tabsWrap" ).tmpl( null, {state: state, wrapped: "#tabsContent"} ).appendTo( "#tabsView" );
+
+ // ******************** Events ********************
+
+ $( "#tabsView" )
+ .delegate( ".header_false", "click", function() {
+ var ti = $.tmplItem( this );
+ ti.state.activeIndex = $(this).index();
+ ti.update();
+ });
+
+</script>
+
+</body>
+</html>
diff --git a/demos/samplesCore/Interactive/tabsWrapNested.html b/demos/samplesCore/Interactive/tabsWrapNested.html
new file mode 100644
index 0000000..453f60e
--- /dev/null
+++ b/demos/samplesCore/Interactive/tabsWrapNested.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+Nested tabs controls against HTML markup, using {{wrap}}
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Nested tabs controls against HTML markup, using {{wrap}}</title>
+ <link href="resources/tabs.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<h1>Tabs</h1>
+
+<div id="tabsView">..loading</div>
+
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
+
+<script id="tabsTmpl" type="text/x-jquery-tmpl">
+ {{wrap(null, {state: outerState}) "#tabsWrap"}}
+
+ <h3>Inline</h3>
+ <div>
+ Rendering a <span class='special'>template</span> declared in script block
+ </div>
+
+ <h3>String</h3>
+ <div>
+ Rendering a <span class='special'>template</span> passed as a string
+ </div>
+
+ <h3>Remote</h3>
+ <div>
+ Rendering remote data using <span class='special'>templates</span>
+
+ {{wrap(null, {state: innerState}) "#tabsWrap"}}
+
+ <h3>GET</h3>
+ <div>
+ Using <b>GET</b> to fetch data
+ </div>
+
+ <h3>POST</h3>
+ <div>
+ Using <b>POST</b> to update server data
+ </div>
+
+ {{/wrap}}
+
+ </div>
+
+ {{/wrap}}
+</script>
+
+<script id="tabsWrap" type="text/x-jquery-tmpl">
+ <table class="tabsView"><tbody>
+ <tr>
+ {{each tabs()}}
+ <th class="${headerClass($index)}">
+ ${$value}
+ </th>
+ {{/each}}
+ </tr>
+ <tr><td colspan="${tabCount()}">
+ <div class="body">
+ {{html tabContent()}}
+ </div>
+ </td></tr>
+ </tbody></table>
+</script>
+
+<script type="text/javascript">
+
+ var innerState = { activeIndex: 0 },
+ outerState = { activeIndex: 2 };
+
+ // ******************** Load UI ********************
+
+ function refresh() {
+ $( "#tabsView" ).empty();
+ $( "#tabsTmpl" ).tmpl().appendTo( "#tabsView" );
+ }
+ refresh();
+
+
+ // ******************** Events ********************
+
+ $( "#tabsView" )
+ .delegate( ".header_false", "click", function() {
+ var ti = $.tmplItem( this );
+ ti.state.activeIndex = $(this).index();
+ refresh();
+ });
+
+ // ******************** Helper functions ********************
+
+ function tabs() {
+ return this.html("h3", true);
+ }
+
+ function tabCount() {
+ return this.html("h3").length;
+ }
+
+ function headerClass( index ) {
+ return index === this.state.activeIndex ? "header_true" : "header_false";
+ }
+
+ function tabContent() {
+ return this.html("div")[this.state.activeIndex];
+ }
+
+</script>
+
+</body>
+</html>
diff --git a/demos/samplesCore/Interactive/treeView.html b/demos/samplesCore/Interactive/treeView.html
new file mode 100644
index 0000000..ea2f474
--- /dev/null
+++ b/demos/samplesCore/Interactive/treeView.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+A tree view control using recursive templates
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>A tree view control using recursive templates</title>
+ <link href="resources/treeView.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<h1>Tree View</h1>
+
+<div><ul id="samplesList" class="treeView"><li>Loading...</li></ul></div>
+
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
+<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
+
+<script id="folderTmpl" type="text/x-jquery-tmpl">
+ <li class="content_${hasContent($item)}">
+ <img class="expand" src="resources/${expanderImage()}.png" />
+ <img class="folder" src="resources/folder.png" />
+ <span>${name}</span>
+ </li>
+ {{if expanded}}
+ <li>
+ <ul>{{tmpl(getSamples($item)) "#itemTmpl"}}</ul>
+ <ul>{{tmpl(getFolders($item)) "#folderTmpl"}}</ul>
+ </li>
+ {{/if}}
+</script>
+
+<script id="itemTmpl" type="text/x-jquery-tmpl">
+ <li class="folderItem">${name}</li>
+</script>
+
+<script type="text/javascript">
+
+ // ******************** Data for folders hierarchy, and samples ********************
+
+ var folders = {
+ name: "Samples",
+ folders: [
+ { name: "API", folders: [
+ { name: ".tmpl"},
+ { name: ".tmplItem" }
+ ]},
+ { name: "Template markup", folders: [
+ { name: "Tags", folders: [
+ { name: "tmpl"},
+ { name: "if" },
+ { name: "each" }
+ ]},
+ ]},
+ ]
+ };
+
+ var samples = [
+ { name: "Template in script block",
+ folders: [ ".tmpl" ],
+ description: "Rendering a template declared in script block" },
+ { name: "Template as string",
+ folders: [ ".tmpl" ],
+ description:"Rendering a template passed as a string" },
+ { name: "Render remote data",
+ folders: [ "API" ],
+ description: "Rendering remote data using templates" },
+ { name: "Tree View",
+ folders: [ "tmpl", ".tmpl" ],
+ description: "A tree view using recursive nested templates" }
+ ];
+
+ // ******************** Load UI ********************
+
+ $( "#samplesList" ).empty();
+ $( "#folderTmpl" ).tmpl( folders ).appendTo( "#samplesList" );
+
+ // ******************** Events ********************
+
+ $( "#samplesList" )
+ .delegate( ".content_true", "click", function() {
+ // Get the 'template item' for this folder
+ var fldrTmplItem = $.tmplItem( this );
+
+ // Toggle expanded property on data
+ fldrTmplItem.data.expanded = !fldrTmplItem.data.expanded;
+
+ // Update the template item
+ fldrTmplItem.update();
+ })
+ .delegate( ".folderItem", "click", function() {
+ // Get the 'template item' for this folder item
+ var dataItem = $.tmplItem( this ).data;
+ alert( dataItem.description );
+ });
+
+ // ******************** Helper functions ********************
+
+ function getSamples( folderTmplItem ) {
+ return $.map( samples, function( sample ) {
+ return $.inArray( folderTmplItem.data.name, sample.folders ) > -1 ? sample : null;
+ });
+ }
+
+ function getFolders( folderTmplItem ) {
+ return folderTmplItem.data.folders || [];
+ }
+
+ function expanderImage() {
+ if ( hasContent( this ) ) {
+ return this.data.expanded ? "expanded" : "collapsed";
+ }
+ return "empty"
+ }
+
+ function hasContent( folderTmplItem ) {
+ return getFolders( folderTmplItem ).length > 0 || getSamples( folderTmplItem ).length > 0;
+ }
+
+</script>
+
+</body>
+</html>
diff --git a/demos/samplesCore/basic.html b/demos/samplesCore/basic.html
new file mode 100644
index 0000000..5226caa
--- /dev/null
+++ b/demos/samplesCore/basic.html
@@ -0,0 +1,133 @@
+<!--
+This sample illustrates some basic templating features and scenarios.
+-->
+<style type="text/css">
+ .clickable {
+ cursor:pointer;
+ color: Blue;
+ }
+</style>
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script>
+
+var dataObject = {
+ firstName: "John",
+ lastName: "Resig",
+ url: "http://ejohn.org/",
+ cities: [
+ "Boston, MA",
+ "San Francisco, CA"
+ ]
+};
+
+var arrayOfDataObjects = [
+ dataObject
+ ,
+ {
+ firstName: "Dave",
+ lastName: "Reed",
+ url: "http://dave.org/",
+ cities: [
+ "Seattle, WA",
+ "Los Angeles, CA",
+ "New York, NY"
+ ]
+ },
+ {
+ firstName: "Boris",
+ lastName: "Moore",
+ url: "http://boris.org/",
+ cities: [
+ "Redmond, WA",
+ "Seattle, WA",
+ "New York, NY"
+ ]
+ }
+];
+
+function cityJoin( separator ) {
+ return this.data.cities.join( separator || ", " );
+}
+
+function getName() {
+ return this.data.firstName + " " + this.data.lastName;
+}
+
+function index( array ) {
+ return $.inArray( this.data, array ) + 1;
+}
+
+jQuery(function(){
+ // A template string
+ var tmpl = '<li><a href="${url}">${getName()}</a> {{if $item.showCities}}(${cityJoin()}){{/if}}</li>';
+
+ // Renders one LI, filled with data, then appends it into the UL
+ $.tmpl( tmpl, dataObject )
+ .appendTo( "ul" );
+
+ // Store a string as a compiled template for later use
+ $.template( "myTmpl", '<li>My template: <a href="${url}">${getName()}</a> {{if $item.showCities}}(${cityJoin()}){{/if}}</li>' );
+
+ // Render stored template and insert after target.
+ // Target wrapped set has more than one element, so rendered template cloned into two places in DOM
+ $.tmpl( "myTmpl", dataObject )
+ .insertAfter( ".multiple" );
+
+ // Use a template declared in a script block
+ // Appends multiple LIs - one for each item.
+ $( "#sometmpl" )
+ .tmpl( arrayOfDataObjects )
+ .appendTo( "ul" );
+
+ // Store a template declared in a script block as a named template for later use.
+ $( "#sometmpl" ).template( "peopleList" );
+
+ // Use the named template
+ $.tmpl( "peopleList", arrayOfDataObjects )
+ .appendTo( "ul" );
+
+ // Set options: showCities and array, referenced within the template.
+ $( "#sometmpl" )
+ .tmpl( arrayOfDataObjects, { array: arrayOfDataObjects, showCities: true } )
+ .prependTo( "ul" );
+
+ // Getting to the data in a click event.
+ $( "#sometmpl" )
+ .tmpl( arrayOfDataObjects )
+ .prependTo( "ul" )
+ .find( "span" )
+ .addClass( "clickable" )
+ .click( function() {
+ var item = $.tmplItem(this);
+ alert( item.data.firstName + " at " + item.data.url );
+ });
+
+ // Example of template that has leading or trailing text
+ $( "#leadingOrTrailingText" )
+ .tmpl( arrayOfDataObjects )
+ .insertBefore( ".target" );
+});
+</script>
+
+<script id="sometmpl" type="text/x-jquery-tmpl">
+ <li>
+ {{if $item.array}}
+ ${index($item.array)} of ${$item.array.length})
+ {{/if}}
+ <span>${getName()}</span>
+ {{if $item.showCities}}
+ Cities: {{each cities}} ${this} {{/each}}
+ {{else}}
+ No Cities
+ {{/if}}
+ </li>
+</script>
+
+<script id="leadingOrTrailingText" type="text/x-jquery-tmpl">
+ ${firstName} <strong>${lastName}</strong> <br/>
+</script>
+
+<ul><li class="multiple">first</li><li class="multiple">last</li></ul>
+
+<div class="target">Target</div>
diff --git a/demos/samplesCore/composition.html b/demos/samplesCore/composition.html
new file mode 100644
index 0000000..5e29750
--- /dev/null
+++ b/demos/samplesCore/composition.html
@@ -0,0 +1,91 @@
+<!--
+This sample illustrates template composition, including passing parameters to a {{tmpl}} tag.
+-->
+<style type="text/css">
+ .peopleTable td { border:2px solid #555; text-align:center; }
+ .person{ background-color:#AFA; }
+ .personAlt{ background-color:#9ED; }
+ .citySeparator { background-color:#CCC; height:4px;}
+ .separator { background-color:#C77; height:6px;}
+ .peopleTable { border-collapse:collapse; border:2px solid #555; }
+</style>
+
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script>
+var people = [
+ {
+ firstName: "John",
+ lastName: "Resig",
+ url: "http://ejohn.org/",
+ cities: [
+ { name: "Boston", state: "MA" },
+ { name: "San Francisco", state: "CA" }
+ ]
+ },
+ {
+ firstName: "Dave",
+ lastName: "Reed",
+ url: "http://dave.org/"
+ },
+ {
+ firstName: "Boris",
+ lastName: "Moore",
+ url: "http://boris.org/",
+ cities: [
+ { name: "Redmond", state: "WA" },
+ { name: "Seattle", state: "WA" },
+ { name: "New York", state: "NY" }
+ ]
+ }
+];
+
+function getName() {
+ return this.data.firstName + " " + this.data.lastName;
+}
+
+function alternate( item, array ) {
+ return ($.inArray( item, array ) % 2) ? "personAlt" : "person";
+}
+
+function cityNumber() {
+ return $.inArray( this.data, this.parent.data.cities ) + 1;
+}
+
+function getTemplate( key ) {
+ return $( "#tmpl" + key ).template();
+}
+
+$(function(){
+ // Create named template, to be used in composition below
+ $.template( "citySeparator", '<tr class="citySeparator"><td colspan="2"></td></tr>' );
+
+ $( "#tmplPeople" )
+ .tmpl( people )
+ .appendTo( ".peopleTable" );
+ $( "#tmplSeparator" )
+ .tmpl()
+ .appendTo( ".peopleTable" );
+});
+</script>
+
+<script id="tmplPeople" type="text/x-jquery-tmpl">
+ {{tmpl "#tmplSeparator"}}
+ <tr class="${alternate(this.data, people)}"><td colspan="2"><a href="${url}">${getName()}</a></td></tr>
+ {{if cities}}
+ {{tmpl(cities) getTemplate("City")}}
+ {{/if}}
+</script>
+
+<script id="tmplSeparator" type="text/x-jquery-tmpl">
+ <tr class="separator"><td colspan="2"></td></tr>
+</script>
+
+<script id="tmplCity" type="text/x-jquery-tmpl">
+ {{tmpl "citySeparator"}}
+ <tr class="${alternate(this.parent.data, people)}"><td colspan="2"><b><i>City ${cityNumber()}:</i></b></td></tr>
+ <tr class="${alternate(this.parent.data, people)}"><td><b>${name}</b></td><td>${state}</td></tr>
+</script>
+
+<table class="peopleTable"><tbody></tbody></table>
+
diff --git a/demos/samplesCore/conditional.html b/demos/samplesCore/conditional.html
new file mode 100644
index 0000000..924c13f
--- /dev/null
+++ b/demos/samplesCore/conditional.html
@@ -0,0 +1,36 @@
+<!--
+This sample illustrates use of conditional template tags {{if}} and {{else}}.
+The comment tag {{! }} is also shown.
+-->
+
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script>
+$(function(){
+ $( "#movieTemplate" )
+ .tmpl( movies )
+ .appendTo( "#movieList" );
+});
+
+var movies = [
+ { Name: "Meet Joe Black", Languages: "French", Subtitles: "English" },
+ { Name: "The Mighty", Subtitles: "French and Spanish" },
+ { Name: "The Mighty" },
+ { Name: "City Hunter", Languages: "Mandarin and Cantonese" }
+];
+</script>
+
+<script id="movieTemplate" type="text/x-jquery-tmpl">
+<li>
+ Title: ${Name}.
+ {{if Languages}}
+ (Alternative languages: ${Languages}).
+ {{else Subtitles}}
+ (Original language only. Subtitles in ${Subtitles}).
+ {{else}}
+ (Original version only, without subtitles).
+ {{/if}}
+</li>
+</script>
+
+<ul id="movieList"></ul>
diff --git a/demos/samplesCore/each.html b/demos/samplesCore/each.html
new file mode 100644
index 0000000..c535fe2
--- /dev/null
+++ b/demos/samplesCore/each.html
@@ -0,0 +1,79 @@
+<!--
+This sample illustrates using the {{each}} template tag,
+for iterative rendering of nested markup within a template.
+-->
+<style type="text/css">
+ .peopleTable td { border:2px solid #555; text-align:center; }
+ .person{ background-color:#AFA; }
+ .personAlt{ background-color:#9ED; }
+ .separator { background-color:#C77; height:6px;}
+ .cityseparator { background-color:#CCC; height:4px;}
+ .peopleTable { border-collapse:collapse; border:2px solid #555; }
+</style>
+
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script>
+$(function(){
+ $("#tmplPeople")
+ .tmpl( people )
+ .appendTo(".peopleTable");
+});
+
+var people = [
+ {
+ firstName: "John",
+ lastName: "Resig",
+ url: "http://ejohn.org/",
+ cities: [
+ { name: "Boston", state: "MA" },
+ { name: "San Francisco", state: "CA" }
+ ]
+ },
+ {
+ firstName: "Dave",
+ lastName: "Reed",
+ url: "http://dave.org/",
+ cities: [
+ { name: "Seattle", state: "WA" },
+ { name: "Los Angeles", state: "CA" },
+ { name: "New York", state: "NY" }
+ ]
+ },
+ {
+ firstName: "Boris",
+ lastName: "Moore",
+ url: "http://boris.org/",
+ cities: [
+ { name: "Redmond", state: "WA" }
+ ]
+ }
+];
+
+function index( item, array ) {
+ return $.inArray( item, array ) + 1;
+}
+
+function getName() {
+ return this.data.firstName + " " + this.data.lastName;
+}
+
+function alternate( item, array ) {
+ return ($.inArray( item, array ) % 2) ? "personAlt" : "person";
+}
+</script>
+
+<script id="tmplPeople" type="text/x-jquery-tmpl">
+ <tr class="${alternate($data, people)}"><td colspan="2"><a href="${url}">${getName()}</a></td></tr>
+ {{each cities}}
+ <tr class="cityseparator"><td colspan="2"></td></tr>
+ <tr class="${alternate($data, people)}"><td colspan="2"><b><i>City ${index($value, cities)}:</i></b></td></tr>
+ <tr class="${alternate($data, people)}"><td><b>${name}</b></td><td>${state}</td></tr>
+ {{/each}}
+ <tr class="separator"><td colspan="2"></td></tr>
+</script>
+
+<table class="peopleTable"><tbody>
+ <tr class="separator"><td colspan="2"></td></tr>
+</tbody></table>
+
diff --git a/demos/samplesCore/parameters.html b/demos/samplesCore/parameters.html
new file mode 100644
index 0000000..44bafe5
--- /dev/null
+++ b/demos/samplesCore/parameters.html
@@ -0,0 +1,98 @@
+<!--
+This sample illustrates using the {{if}}, {{each}} and {{tmpl}} template tags, with parameters.
+-->
+<style type="text/css">
+ .peopleTable td { border:2px solid #555; text-align:center; }
+ .person{ background-color:#AFA; }
+ .personAlt{ background-color:#9ED; }
+ .separator { background-color:#C77; height:6px;}
+ .cityseparator { background-color:#CCC; height:4px;}
+ .peopleTable { border-collapse:collapse; border:2px solid #555; }
+</style>
+
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script>
+$(function(){
+ $("#tmplPeople")
+ .tmpl( people, {allCities: allCities} )
+ .appendTo(".peopleTable");
+});
+
+var people = [
+ {
+ firstName: "John",
+ lastName: "Resig",
+ url: "http://ejohn.org/",
+ cities: [ "BSTN", "NY", "SF" ]
+ },
+ {
+ firstName: "Dave",
+ lastName: "Reed",
+ url: "http://dave.org/",
+ cities: [ "RDMD", "STL", "SF", "LA" ]
+ },
+ {
+ firstName: "Boris",
+ lastName: "Moore",
+ url: "http://boris.org/",
+ cities: [ "RDMD" ]
+ }
+];
+
+var allCities = {
+ BSTN: { name: "Boston", state: "MA", weather: "Cold" },
+ SF: { name: "San Francisco", state: "CA", weather: "Warm" },
+ STL: { name: "Seattle", state: "WA", weather: "Wet" },
+ RDMD: { name: "Redmond", state: "WA", weather: "Wet" },
+ LA: { name: "Los Angeles", state: "CA", weather: "Hot" },
+ NY: { name: "New York", state: "NY", weather: "Variable" }
+};
+
+function getName() {
+ return this.data.firstName + " " + this.data.lastName;
+}
+
+function getCities( begin, end ) {
+ return $.map(this.data.cities.slice(begin, end), function(city) {
+ return allCities[city];
+ });
+}
+
+function getCityCount( begin, end ) {
+ return this.data.cities.slice(begin, end).length;
+}
+
+function alternate() {
+ return ($.inArray( this.data, people ) % 2) ? "personAlt" : "person";
+}
+
+var startIndex = 1, endIndex = 3;
+</script>
+
+<script id="tmplPeople" type="text/x-jquery-tmpl">
+ <tr class="${alternate()}"><td colspan="3"><a href="${url}">${getName()}</a></td></tr>
+ {{tmpl "#tmplSeparator"}}
+ {{if getCityCount(startIndex, endIndex)}}
+ <tr class="${alternate()}"><td colspan="3"><i>Favorite Cities</i></td></tr>
+ {{each getCities(startIndex, endIndex)}}
+ {{tmpl(null, {type:"city"}) "#tmplSeparator"}}
+ <tr class="${alternate()}">
+ <td>${$index + 1}</td>
+ <td><b>${name}</b></td>
+ <td>${state}</td>
+ </tr>
+ <tr class="${alternate()}"><td colspan="3"><i>${weather}...</i></td></tr>
+ {{/each}}
+ {{tmpl "#tmplSeparator"}}
+ {{/if}}
+</script>
+
+<script id="tmplSeparator" type="text/x-jquery-tmpl">
+ <tr class="${$item.type}separator"><td colspan="3"></td></tr>
+</script>
+
+<table class="peopleTable"><tbody>
+ <tr class="separator"><td colspan="3"></td></tr>
+</tbody></table>
+
diff --git a/demos/samplesTmplPlus/basic.html b/demos/samplesTmplPlus/basic.html
new file mode 100644
index 0000000..aac1b28
--- /dev/null
+++ b/demos/samplesTmplPlus/basic.html
@@ -0,0 +1,95 @@
+<!--
+This sample illustrates some basic templating features and scenarios.
+-->
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../jquery.tmpl.js" type="text/javascript" ></script>
+<script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
+<script>
+
+var dataObject = {
+ firstName: "John",
+ lastName: "Resig",
+ url: "http://ejohn.org/",
+ cities: [
+ "Boston, MA",
+ "San Francisco, CA"
+ ]
+};
+
+var arrayOfDataObjects = [
+ dataObject
+ ,
+ {
+ firstName: "Dave",
+ lastName: "Reed",
+ url: "http://dave.org/",
+ cities: [
+ "Seattle, WA",
+ "Los Angeles, CA",
+ "New York, NY"
+ ]
+ },
+ {
+ firstName: "Boris",
+ lastName: "Moore",
+ url: "http://boris.org/",
+ cities: [
+ "Redmond, WA",
+ "Seattle, WA",
+ "New York, NY"
+ ]
+ }
+];
+
+function cityJoin( separator ) {
+ return this.data.cities.join( separator || ", " );
+}
+
+function getName() {
+ return this.data.firstName + " " + this.data.lastName;
+}
+
+function index( array ) {
+ return $.inArray( this.data, array ) + 1;
+}
+
+jQuery(function(){
+ // A template string
+ var tmpl = '<li><a href="${url}">${getName()}</a> {{if $item.showCities}}(${cityJoin()}){{/if}}</li>';
+
+ // Renders one LI, filled with data, then appends it into the UL
+ $("ul").append( tmpl, dataObject, null );
+
+ // Store a string as a compiled template for later use
+ $.template( "myTmpl", '<li>My template: <a href="${url}">${getName()}</a> {{if $item.showCities}}(${cityJoin()}){{/if}}</li>' );
+
+ // Render stored template and insert after target.
+ // Target wrapped set has more than one element, so rendered template cloned into two places in DOM
+ $(".multiple").after( "myTmpl", dataObject );
+
+ // Appends multiple LIs for each item. Set options: showCities and array, referenced within the template.
+ $("ul").prepend( "#sometmpl", arrayOfDataObjects, { array: arrayOfDataObjects, showCities: true } );
+
+ // Example of template that has leading or trailing text
+ $("#target").before( "#leadingOrTrailingText", arrayOfDataObjects );
+});
+</script>
+
+<script id="sometmpl" type="text/x-jquery-tmpl">
+ <li>${index($item.array)} of ${$item.array.length}) <a href="${url}">${getName()}</a>
+ {{if $item.showCities}}
+ Cities: {{each cities}} ${this} {{/each}}
+ {{else}}
+ No Cities
+ {{/if}}
+ </li>
+</script>
+
+<script id="leadingOrTrailingText" type="text/x-jquery-tmpl">
+ ${firstName} <strong>${lastName}</strong> <br/>
+</script>
+
+<ul><li class="multiple">first</li><li class="multiple">last</li></ul>
+
+<div id="target">Target</div>
+
diff --git a/demos/samplesTmplPlus/composition.html b/demos/samplesTmplPlus/composition.html
new file mode 100644
index 0000000..e316d63
--- /dev/null
+++ b/demos/samplesTmplPlus/composition.html
@@ -0,0 +1,91 @@
+<!--
+This sample illustrates template composition, including passing parameters to a {{tmpl}} tag.
+-->
+<style type="text/css">
+ .peopleTable td { border:2px solid #555; text-align:center; }
+ .person{ background-color:#AFA; }
+ .personAlt{ background-color:#9ED; }
+ .citySeparator { background-color:#CCC; height:4px;}
+ .separator { background-color:#C77; height:6px;}
+ .peopleTable { border-collapse:collapse; border:2px solid #555; }
+</style>
+
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
+<script>
+var people = [
+ {
+ firstName: "John",
+ lastName: "Resig",
+ url: "http://ejohn.org/",
+ cities: [
+ { name: "Boston", state: "MA" },
+ { name: "San Francisco", state: "CA" }
+ ]
+ },
+ {
+ firstName: "Dave",
+ lastName: "Reed",
+ url: "http://dave.org/"
+ },
+ {
+ firstName: "Boris",
+ lastName: "Moore",
+ url: "http://boris.org/",
+ cities: [
+ { name: "Redmond", state: "WA" },
+ { name: "Seattle", state: "WA" },
+ { name: "New York", state: "NY" }
+ ]
+ }
+];
+
+function getName() {
+ return this.data.firstName + " " + this.data.lastName;
+}
+
+function alternate( item, array ) {
+ return ($.inArray( item, array ) % 2) ? "personAlt" : "person";
+}
+
+function cityNumber() {
+ return $.inArray( this.data, this.parent.data.cities ) + 1;
+}
+
+function getTemplate( key ) {
+ return $( "#tmpl" + key ).template();
+}
+
+$(function(){
+ $( ".peopleTable" )
+ .append( "#tmplPeople", people );
+ $( ".peopleTable" )
+ .append( "#tmplSeparator", {} );
+});
+</script>
+
+<script id="tmplPeople" type="text/x-jquery-tmpl">
+ {{tmpl "#tmplSeparator"}}
+ <tr class="${alternate($data, people)}"><td colspan="2"><a href="${url}">${getName()}</a></td></tr>
+ {{if cities}}
+ {{tmpl(cities) getTemplate("City")}}
+ {{/if}}
+</script>
+
+<script id="tmplSeparator" type="text/x-jquery-tmpl">
+ <tr class="separator"><td colspan="2"></td></tr>
+</script>
+
+<script id="tmplCitySeparator" type="text/x-jquery-tmpl">
+ <tr class="citySeparator"><td colspan="2"></td></tr>
+</script>
+
+<script id="tmplCity" type="text/x-jquery-tmpl">
+ {{tmpl "#tmplCitySeparator"}}
+ <tr class="${alternate(this.parent.data, people)}"><td colspan="2"><b><i>City ${cityNumber()}:</i></b></td></tr>
+ <tr class="${alternate(this.parent.data, people)}"><td><b>${name}</b></td><td>${state}</td></tr>
+</script>
+
+<table class="peopleTable"><tbody></tbody></table>
+
diff --git a/demos/samplesTmplPlus/each.html b/demos/samplesTmplPlus/each.html
new file mode 100644
index 0000000..6eedfd4
--- /dev/null
+++ b/demos/samplesTmplPlus/each.html
@@ -0,0 +1,80 @@
+<!--
+This sample illustrates using the {{each}} template tag,
+for iterative rendering of nested markup within a template.
+-->
+<style type="text/css">
+ .peopleTable td { border:2px solid #555; text-align:center; }
+ .person{ background-color:#AFA; }
+ .personAlt{ background-color:#9ED; }
+ .separator { background-color:#C77; height:6px;}
+ .cityseparator { background-color:#CCC; height:4px;}
+ .peopleTable { border-collapse:collapse; border:2px solid #555; }
+</style>
+
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
+<script>
+$(function(){
+ $("#tmplPeople")
+ .tmpl( people )
+ .appendTo(".peopleTable");
+});
+
+var people = [
+ {
+ firstName: "John",
+ lastName: "Resig",
+ url: "http://ejohn.org/",
+ cities: [
+ { name: "Boston", state: "MA" },
+ { name: "San Francisco", state: "CA" }
+ ]
+ },
+ {
+ firstName: "Dave",
+ lastName: "Reed",
+ url: "http://dave.org/",
+ cities: [
+ { name: "Seattle", state: "WA" },
+ { name: "Los Angeles", state: "CA" },
+ { name: "New York", state: "NY" }
+ ]
+ },
+ {
+ firstName: "Boris",
+ lastName: "Moore",
+ url: "http://boris.org/",
+ cities: [
+ { name: "Redmond", state: "WA" }
+ ]
+ }
+];
+
+function index( item, array ) {
+ return $.inArray( item, array ) + 1;
+}
+
+function getName() {
+ return this.data.firstName + " " + this.data.lastName;
+}
+
+function alternate( item, array ) {
+ return ($.inArray( item, array ) % 2) ? "personAlt" : "person";
+}
+</script>
+
+<script id="tmplPeople" type="text/x-jquery-tmpl">
+ <tr class="${alternate($data, people)}"><td colspan="2"><a href="${url}">${getName()}</a></td></tr>
+ {{each cities}}
+ <tr class="cityseparator"><td colspan="2"></td></tr>
+ <tr class="${alternate($data, people)}"><td colspan="2"><b><i>City ${index($value, cities)}:</i></b></td></tr>
+ <tr class="${alternate($data, people)}"><td><b>${name}</b></td><td>${state}</td></tr>
+ {{/each}}
+ <tr class="separator"><td colspan="2"></td></tr>
+</script>
+
+<table class="peopleTable"><tbody>
+ <tr class="separator"><td colspan="2"></td></tr>
+</tbody></table>
+
diff --git a/demos/samplesTmplPlus/parameters.html b/demos/samplesTmplPlus/parameters.html
new file mode 100644
index 0000000..8380561
--- /dev/null
+++ b/demos/samplesTmplPlus/parameters.html
@@ -0,0 +1,98 @@
+<!--
+This sample illustrates using the {{if}}, {{each}} and {{tmpl}} template tags, with parameters.
+-->
+<style type="text/css">
+ .peopleTable td { border:2px solid #555; text-align:center; }
+ .person{ background-color:#AFA; }
+ .personAlt{ background-color:#9ED; }
+ .separator { background-color:#C77; height:6px;}
+ .cityseparator { background-color:#CCC; height:4px;}
+ .peopleTable { border-collapse:collapse; border:2px solid #555; }
+</style>
+
+<script src="http://code.jquery.com/jquery.js"></script>
+<script src="../../jquery.tmpl.js" type="text/javascript"></script>
+<script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
+<script>
+$(function(){
+ $(".peopleTable")
+ .append("#tmplPeople", people, {allCities: allCities} );
+});
+
+var people = [
+ {
+ firstName: "John",
+ lastName: "Resig",
+ url: "http://ejohn.org/",
+ cities: [ "BSTN", "NY", "SF" ]
+ },
+ {
+ firstName: "Dave",
+ lastName: "Reed",
+ url: "http://dave.org/",
+ cities: [ "RDMD", "STL", "SF", "LA" ]
+ },
+ {
+ firstName: "Boris",
+ lastName: "Moore",
+ url: "http://boris.org/",
+ cities: [ "RDMD" ]
+ }
+];
+
+var allCities = {
+ BSTN: { name: "Boston", state: "MA", weather: "Cold" },
+ SF: { name: "San Francisco", state: "CA", weather: "Warm" },
+ STL: { name: "Seattle", state: "WA", weather: "Wet" },
+ RDMD: { name: "Redmond", state: "WA", weather: "Wet" },
+ LA: { name: "Los Angeles", state: "CA", weather: "Hot" },
+ NY: { name: "New York", state: "NY", weather: "Variable" }
+};
+
+function getName() {
+ return this.data.firstName + " " + this.data.lastName;
+}
+
+function getCities( begin, end ) {
+ return $.map(this.data.cities.slice(begin, end), function(city) {
+ return allCities[city];
+ });
+}
+
+function getCityCount( begin, end ) {
+ return this.data.cities.slice(begin, end).length;
+}
+
+function alternate() {
+ return ($.inArray( this.data, people ) % 2) ? "personAlt" : "person";
+}
+
+var startIndex = 1, endIndex = 3;
+</script>
+
+<script id="tmplPeople" type="text/x-jquery-tmpl">
+ <tr class="${alternate()}"><td colspan="3"><a href="${url}">${getName()}</a></td></tr>
+ {{tmpl "#tmplSeparator"}}
+ {{if getCityCount(startIndex, endIndex)}}
+ <tr class="${alternate()}"><td colspan="3"><i>Favorite Cities</i></td></tr>
+ {{each getCities(startIndex, endIndex)}}
+ {{tmpl(null, {type:"city"}) "#tmplSeparator"}}
+ <tr class="${alternate()}">
+ <td>${$index + 1}</td>
+ <td><b>${name}</b></td>
+ <td>${state}</td>
+ </tr>
+ <tr class="${alternate()}"><td colspan="3"><i>${weather}...</i></td></tr>
+ {{/each}}
+ {{tmpl "#tmplSeparator"}}
+ {{/if}}
+</script>
+
+<script id="tmplSeparator" type="text/x-jquery-tmpl">
+ <tr class="${$item.type}separator"><td colspan="3"></td></tr>
+</script>
+
+<table class="peopleTable"><tbody>
+ <tr class="separator"><td colspan="3"></td></tr>
+</tbody></table>
+
diff --git a/jquery.tmpl.js b/jquery.tmpl.js
new file mode 100644
index 0000000..9003a1b
--- /dev/null
+++ b/jquery.tmpl.js
@@ -0,0 +1,489 @@
+/*!
+ * jQuery Templates Plugin
+ * http://github.com/jquery/jquery-tmpl
+ *
+ * Copyright Software Freedom Conservancy, Inc.
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+(function( jQuery, undefined ){
+ var oldManip = jQuery.fn.domManip, tmplItmAtt = "_tmplitem", htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
+ newTmplItems = {}, wrappedItems = {}, appendToTmplItems, topTmplItem = { key: 0, data: {} }, itemKey = 0, cloneIndex = 0, stack = [];
+
+ function newTmplItem( options, parentItem, fn, data ) {
+ // Returns a template item data structure for a new rendered instance of a template (a 'template item').
+ // The content field is a hierarchical array of strings and nested items (to be
+ // removed and replaced by nodes field of dom elements, once inserted in DOM).
+ var newItem = {
+ data: data || (parentItem ? parentItem.data : {}),
+ _wrap: parentItem ? parentItem._wrap : null,
+ tmpl: null,
+ parent: parentItem || null,
+ nodes: [],
+ calls: tiCalls,
+ nest: tiNest,
+ wrap: tiWrap,
+ html: tiHtml,
+ update: tiUpdate
+ };
+ if ( options ) {
+ jQuery.extend( newItem, options, { nodes: [], parent: parentItem } );
+ }
+ if ( fn ) {
+ // Build the hierarchical content to be used during insertion into DOM
+ newItem.tmpl = fn;
+ newItem._ctnt = newItem._ctnt || newItem.tmpl( jQuery, newItem );
+ newItem.key = ++itemKey;
+ // Keep track of new template item, until it is stored as jQuery Data on DOM element
+ (stack.length ? wrappedItems : newTmplItems)[itemKey] = newItem;
+ }
+ return newItem;
+ }
+
+ // Override appendTo etc., in order to provide support for targeting multiple elements. (This code would disappear if integrated in jquery core).
+ jQuery.each({
+ appendTo: "append",
+ prependTo: "prepend",
+ insertBefore: "before",
+ insertAfter: "after",
+ replaceAll: "replaceWith"
+ }, function( name, original ) {
+ jQuery.fn[ name ] = function( selector ) {
+ var ret = [], insert = jQuery( selector ), elems, i, l, tmplItems,
+ parent = this.length === 1 && this[0].parentNode;
+
+ appendToTmplItems = newTmplItems || {};
+ if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
+ insert[ original ]( this[0] );
+ ret = this;
+ } else {
+ for ( i = 0, l = insert.length; i < l; i++ ) {
+ cloneIndex = i;
+ elems = (i > 0 ? this.clone(true) : this).get();
+ jQuery.fn[ original ].apply( jQuery(insert[i]), elems );
+ ret = ret.concat( elems );
+ }
+ cloneIndex = 0;
+ ret = this.pushStack( ret, name, insert.selector );
+ }
+ tmplItems = appendToTmplItems;
+ appendToTmplItems = null;
+ jQuery.tmpl.complete( tmplItems );
+ return ret;
+ };
+ });
+
+ jQuery.fn.extend({
+ // Use first wrapped element as template markup.
+ // Return wrapped set of template items, obtained by rendering template against data.
+ tmpl: function( data, options, parentItem ) {
+ return jQuery.tmpl( this[0], data, options, parentItem );
+ },
+
+ // Find which rendered template item the first wrapped DOM element belongs to
+ tmplItem: function() {
+ return jQuery.tmplItem( this[0] );
+ },
+
+ // Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
+ template: function( name ) {
+ return jQuery.template( name, this[0] );
+ },
+
+ domManip: function( args, table, callback, options ) {
+ // This appears to be a bug in the appendTo, etc. implementation
+ // it should be doing .call() instead of .apply(). See #6227
+ if ( args[0] && args[0].nodeType ) {
+ var dmArgs = jQuery.makeArray( arguments ), argsLength = args.length, i = 0, tmplItem;
+ while ( i < argsLength && !(tmplItem = jQuery.data( args[i++], "tmplItem" ))) {}
+ if ( argsLength > 1 ) {
+ dmArgs[0] = [jQuery.makeArray( args )];
+ }
+ if ( tmplItem && cloneIndex ) {
+ dmArgs[2] = function( fragClone ) {
+ // Handler called by oldManip when rendered template has been inserted into DOM.
+ jQuery.tmpl.afterManip( this, fragClone, callback );
+ };
+ }
+ oldManip.apply( this, dmArgs );
+ } else {
+ oldManip.apply( this, arguments );
+ }
+ cloneIndex = 0;
+ if ( !appendToTmplItems ) {
+ jQuery.tmpl.complete( newTmplItems );
+ }
+ return this;
+ }
+ });
+
+ jQuery.extend({
+ // Return wrapped set of template items, obtained by rendering template against data.
+ tmpl: function( tmpl, data, options, parentItem ) {
+ var ret, topLevel = !parentItem;
+ if ( topLevel ) {
+ // This is a top-level tmpl call (not from a nested template using {{tmpl}})
+ parentItem = topTmplItem;
+ tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );
+ wrappedItems = {}; // Any wrapped items will be rebuilt, since this is top level
+ } else if ( !tmpl ) {
+ // The template item is already associated with DOM - this is a refresh.
+ // Re-evaluate rendered template for the parentItem
+ tmpl = parentItem.tmpl;
+ newTmplItems[parentItem.key] = parentItem;
+ parentItem.nodes = [];
+ if ( parentItem.wrapped ) {
+ updateWrapped( parentItem, parentItem.wrapped );
+ }
+ // Rebuild, without creating a new template item
+ return jQuery( build( parentItem, null, parentItem.tmpl( jQuery, parentItem ) ));
+ }
+ if ( !tmpl ) {
+ return []; // Could throw...
+ }
+ if ( typeof data === "function" ) {
+ data = data.call( parentItem || {} );
+ }
+ if ( options && options.wrapped ) {
+ updateWrapped( options, options.wrapped );
+ }
+ ret = jQuery.isArray( data ) ?
+ jQuery.map( data, function( dataItem ) {
+ return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
+ }) :
+ [ newTmplItem( options, parentItem, tmpl, data ) ];
+ return topLevel ? jQuery( build( parentItem, null, ret ) ) : ret;
+ },
+
+ // Return rendered template item for an element.
+ tmplItem: function( elem ) {
+ var tmplItem;
+ if ( elem instanceof jQuery ) {
+ elem = elem[0];
+ }
+ while ( elem && elem.nodeType === 1 && !(tmplItem = jQuery.data( elem, "tmplItem" )) && (elem = elem.parentNode) ) {}
+ return tmplItem || topTmplItem;
+ },
+
+ // Set:
+ // Use $.template( name, tmpl ) to cache a named template,
+ // where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
+ // Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
+
+ // Get:
+ // Use $.template( name ) to access a cached template.
+ // Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
+ // will return the compiled template, without adding a name reference.
+ // If templateString includes at least one HTML tag, $.template( templateString ) is equivalent
+ // to $.template( null, templateString )
+ template: function( name, tmpl ) {
+ if (tmpl) {
+ // Compile template and associate with name
+ if ( typeof tmpl === "string" ) {
+ // This is an HTML string being passed directly in.
+ tmpl = buildTmplFn( tmpl )
+ } else if ( tmpl instanceof jQuery ) {
+ tmpl = tmpl[0] || {};
+ }
+ if ( tmpl.nodeType ) {
+ // If this is a template block, use cached copy, or generate tmpl function and cache.
+ tmpl = jQuery.data( tmpl, "tmpl" ) || jQuery.data( tmpl, "tmpl", buildTmplFn( tmpl.innerHTML ));
+ }
+ return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;
+ }
+ // Return named compiled template
+ return name ? (typeof name !== "string" ? jQuery.template( null, name ):
+ (jQuery.template[name] ||
+ // If not in map, treat as a selector. (If integrated with core, use quickExpr.exec)
+ jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
+ },
+
+ encode: function( text ) {
+ // Do HTML encoding replacing < > & and ' and " by corresponding entities.
+ return ("" + text).split("<").join("<").split(">").join(">").split('"').join(""").split("'").join("'");
+ }
+ });
+
+ jQuery.extend( jQuery.tmpl, {
+ tag: {
+ "tmpl": {
+ _default: { $2: "null" },
+ open: "if($notnull_1){_=_.concat($item.nest($1,$2));}"
+ // tmpl target parameter can be of type function, so use $1, not $1a (so not auto detection of functions)
+ // This means that {{tmpl foo}} treats foo as a template (which IS a function).
+ // Explicit parens can be used if foo is a function that returns a template: {{tmpl foo()}}.
+ },
+ "wrap": {
+ _default: { $2: "null" },
+ open: "$item.calls(_,$1,$2);_=[];",
+ close: "call=$item.calls();_=call._.concat($item.wrap(call,_));"
+ },
+ "each": {
+ _default: { $2: "$index, $value" },
+ open: "if($notnull_1){$.each($1a,function($2){with(this){",
+ close: "}});}"
+ },
+ "if": {
+ open: "if(($notnull_1) && $1a){",
+ close: "}"
+ },
+ "else": {
+ _default: { $1: "true" },
+ open: "}else if(($notnull_1) && $1a){"
+ },
+ "html": {
+ // Unecoded expression evaluation.
+ open: "if($notnull_1){_.push($1a);}"
+ },
+ "=": {
+ // Encoded expression evaluation. Abbreviated form is ${}.
+ _default: { $1: "$data" },
+ open: "if($notnull_1){_.push($.encode($1a));}"
+ },
+ "!": {
+ // Comment tag. Skipped by parser
+ open: ""
+ }
+ },
+
+ // This stub can be overridden, e.g. in jquery.tmplPlus for providing rendered events
+ complete: function( items ) {
+ newTmplItems = {};
+ },
+
+ // Call this from code which overrides domManip, or equivalent
+ // Manage cloning/storing template items etc.
+ afterManip: function afterManip( elem, fragClone, callback ) {
+ // Provides cloned fragment ready for fixup prior to and after insertion into DOM
+ var content = fragClone.nodeType === 11 ?
+ jQuery.makeArray(fragClone.childNodes) :
+ fragClone.nodeType === 1 ? [fragClone] : [];
+
+ // Return fragment to original caller (e.g. append) for DOM insertion
+ callback.call( elem, fragClone );
+
+ // Fragment has been inserted:- Add inserted nodes to tmplItem data structure. Replace inserted element annotations by jQuery.data.
+ storeTmplItems( content );
+ cloneIndex++;
+ }
+ });
+
+ //========================== Private helper functions, used by code above ==========================
+
+ function build( tmplItem, nested, content ) {
+ // Convert hierarchical content into flat string array
+ // and finally return array of fragments ready for DOM insertion
+ var frag, ret = content ? jQuery.map( content, function( item ) {
+ return (typeof item === "string") ?
+ // Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM.
+ (tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) :
+ // This is a child template item. Build nested template.
+ build( item, tmplItem, item._ctnt );
+ }) :
+ // If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}.
+ tmplItem;
+ if ( nested ) {
+ return ret;
+ }
+
+ // top-level template
+ ret = ret.join("");
+
+ // Support templates which have initial or final text nodes, or consist only of text
+ // Also support HTML entities within the HTML markup.
+ ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) {
+ frag = jQuery( middle ).get();
+
+ storeTmplItems( frag );
+ if ( before ) {
+ frag = unencode( before ).concat(frag);
+ }
+ if ( after ) {
+ frag = frag.concat(unencode( after ));
+ }
+ });
+ return frag ? frag : unencode( ret );
+ }
+
+ function unencode( text ) {
+ // Use createElement, since createTextNode will not render HTML entities correctly
+ var el = document.createElement( "div" );
+ el.innerHTML = text;
+ return jQuery.makeArray(el.childNodes);
+ }
+
+ // Generate a reusable function that will serve to render a template against data
+ function buildTmplFn( markup ) {
+ return new Function("jQuery","$item",
+ "var $=jQuery,call,_=[],$data=$item.data;" +
+
+ // Introduce the data as local variables using with(){}
+ "with($data){_.push('" +
+
+ // Convert the template into pure JavaScript
+ jQuery.trim(markup)
+ .replace( /([\\'])/g, "\\$1" )
+ .replace( /[\r\t\n]/g, " " )
+ .replace( /\$\{([^\}]*)\}/g, "{{= $1}}" )
+ .replace( /\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,
+ function( all, slash, type, fnargs, target, parens, args ) {
+ var tag = jQuery.tmpl.tag[ type ], def, expr, exprAutoFnDetect;
+ if ( !tag ) {
+ throw "Template command not found: " + type;
+ }
+ def = tag._default || [];
+ if ( parens && !/\w$/.test(target)) {
+ target += parens;
+ parens = "";
+ }
+ if ( target ) {
+ target = unescape( target );
+ args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : "");
+ // Support for target being things like a.toLowerCase();
+ // In that case don't call with template item as 'this' pointer. Just evaluate...
+ expr = parens ? (target.indexOf(".") > -1 ? target + parens : ("(" + target + ").call($item" + args)) : target;
+ exprAutoFnDetect = parens ? expr : "(typeof(" + target + ")==='function'?(" + target + ").call($item):(" + target + "))";
+ } else {
+ exprAutoFnDetect = expr = def.$1 || "null";
+ }
+ fnargs = unescape( fnargs );
+ return "');" +
+ tag[ slash ? "close" : "open" ]
+ .split( "$notnull_1" ).join( target ? "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" : "true" )
+ .split( "$1a" ).join( exprAutoFnDetect )
+ .split( "$1" ).join( expr )
+ .split( "$2" ).join( fnargs ?
+ fnargs.replace( /\s*([^\(]+)\s*(\((.*?)\))?/g, function( all, name, parens, params ) {
+ params = params ? ("," + params + ")") : (parens ? ")" : "");
+ return params ? ("(" + name + ").call($item" + params) : all;
+ })
+ : (def.$2||"")
+ ) +
+ "_.push('";
+ }) +
+ "');}return _;"
+ );
+ }
+ function updateWrapped( options, wrapped ) {
+ // Build the wrapped content.
+ options._wrap = build( options, true,
+ // Suport imperative scenario in which options.wrapped can be set to a selector or an HTML string.
+ jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()]
+ ).join("");
+ }
+
+ function unescape( args ) {
+ return args ? args.replace( /\\'/g, "'").replace(/\\\\/g, "\\" ) : null;
+ }
+ function outerHtml( elem ) {
+ var div = document.createElement("div");
+ div.appendChild( elem.cloneNode(true) );
+ return div.innerHTML;
+ }
+
+ // Store template items in jQuery.data(), ensuring a unique tmplItem data data structure for each rendered template instance.
+ function storeTmplItems( content ) {
+ var keySuffix = "_" + cloneIndex, elem, elems, newClonedItems = {}, i, l, m;
+ for ( i = 0, l = content.length; i < l; i++ ) {
+ if ( (elem = content[i]).nodeType !== 1 ) {
+ continue;
+ }
+ elems = elem.getElementsByTagName("*");
+ for ( m = elems.length - 1; m >= 0; m-- ) {
+ processItemKey( elems[m] );
+ }
+ processItemKey( elem );
+ }
+ function processItemKey( el ) {
+ var pntKey, pntNode = el, pntItem, tmplItem, key;
+ // Ensure that each rendered template inserted into the DOM has its own template item,
+ if ( (key = el.getAttribute( tmplItmAtt ))) {
+ while ( pntNode.parentNode && (pntNode = pntNode.parentNode).nodeType === 1 && !(pntKey = pntNode.getAttribute( tmplItmAtt ))) { }
+ if ( pntKey !== key ) {
+ // The next ancestor with a _tmplitem expando is on a different key than this one.
+ // So this is a top-level element within this template item
+ // Set pntNode to the key of the parentNode, or to 0 if pntNode.parentNode is null, or pntNode is a fragment.
+ pntNode = pntNode.parentNode ? (pntNode.nodeType === 11 ? 0 : (pntNode.getAttribute( tmplItmAtt ) || 0)) : 0;
+ if ( !(tmplItem = newTmplItems[key]) ) {
+ // The item is for wrapped content, and was copied from the temporary parent wrappedItem.
+ tmplItem = wrappedItems[key];
+ tmplItem = newTmplItem( tmplItem, newTmplItems[pntNode]||wrappedItems[pntNode], null, true );
+ tmplItem.key = ++itemKey;
+ newTmplItems[itemKey] = tmplItem;
+ }
+ if ( cloneIndex ) {
+ cloneTmplItem( key );
+ }
+ }
+ el.removeAttribute( tmplItmAtt );
+ } else if ( cloneIndex && (tmplItem = jQuery.data( el, "tmplItem" )) ) {
+ // This was a rendered element, cloned during append or appendTo etc.
+ // TmplItem stored in jQuery data has already been cloned in cloneCopyEvent. We must replace it with a fresh cloned tmplItem.
+ cloneTmplItem( tmplItem.key );
+ newTmplItems[tmplItem.key] = tmplItem;
+ pntNode = jQuery.data( el.parentNode, "tmplItem" );
+ pntNode = pntNode ? pntNode.key : 0;
+ }
+ if ( tmplItem ) {
+ pntItem = tmplItem;
+ // Find the template item of the parent element.
+ // (Using !=, not !==, since pntItem.key is number, and pntNode may be a string)
+ while ( pntItem && pntItem.key != pntNode ) {
+ // Add this element as a top-level node for this rendered template item, as well as for any
+ // ancestor items between this item and the item of its parent element
+ pntItem.nodes.push( el );
+ pntItem = pntItem.parent;
+ }
+ // Delete content built during rendering - reduce API surface area and memory use, and avoid exposing of stale data after rendering...
+ delete tmplItem._ctnt;
+ delete tmplItem._wrap;
+ // Store template item as jQuery data on the element
+ jQuery.data( el, "tmplItem", tmplItem );
+ }
+ function cloneTmplItem( key ) {
+ key = key + keySuffix;
+ tmplItem = newClonedItems[key] =
+ (newClonedItems[key] || newTmplItem( tmplItem, newTmplItems[tmplItem.parent.key + keySuffix] || tmplItem.parent, null, true ));
+ }
+ }
+ }
+
+ //---- Helper functions for template item ----
+
+ function tiCalls( content, tmpl, data, options ) {
+ if ( !content ) {
+ return stack.pop();
+ }
+ stack.push({ _: content, tmpl: tmpl, item:this, data: data, options: options });
+ }
+
+ function tiNest( tmpl, data, options ) {
+ // nested template, using {{tmpl}} tag
+ return jQuery.tmpl( jQuery.template( tmpl ), data, options, this );
+ }
+
+ function tiWrap( call, wrapped ) {
+ // nested template, using {{wrap}} tag
+ var options = call.options || {};
+ options.wrapped = wrapped;
+ // Apply the template, which may incorporate wrapped content,
+ return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item );
+ }
+
+ function tiHtml( filter, textOnly ) {
+ var wrapped = this._wrap;
+ return jQuery.map(
+ jQuery( jQuery.isArray( wrapped ) ? wrapped.join("") : wrapped ).filter( filter || "*" ),
+ function(e) {
+ return textOnly ?
+ e.innerText || e.textContent :
+ e.outerHTML || outerHtml(e);
+ });
+ }
+
+ function tiUpdate() {
+ var coll = this.nodes;
+ jQuery.tmpl( null, null, null, this).insertBefore( coll[0] );
+ jQuery( coll ).remove();
+ }
+})( jQuery );
diff --git a/jquery.tmpl.min.js b/jquery.tmpl.min.js
new file mode 100644
index 0000000..f08e81d
--- /dev/null
+++ b/jquery.tmpl.min.js
@@ -0,0 +1 @@
+(function(a){var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,b={},f={},e,p={key:0,data:{}},h=0,c=0,l=[];function g(e,d,g,i){var c={data:i||(d?d.data:{}),_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t};e&&a.extend(c,e,{nodes:[],parent:d});if(g){c.tmpl=g;c._ctnt=c._ctnt||c.tmpl(a,c);c.key=++h;(l.length?f:b)[h]=c}return c}a.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"rep [...]
\ No newline at end of file
diff --git a/jquery.tmplPlus.js b/jquery.tmplPlus.js
new file mode 100644
index 0000000..7daae86
--- /dev/null
+++ b/jquery.tmplPlus.js
@@ -0,0 +1,98 @@
+/*!
+ * Additional templating features or support for more advanced/less common scenarios.
+ * Requires jquery.tmpl.js
+ * http://github.com/jquery/jquery-tmpl
+ *
+ * Copyright Software Freedom Conservancy, Inc.
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+(function (jQuery) {
+ var oldComplete = jQuery.tmpl.complete, oldManip = jQuery.fn.domManip;
+
+ // Override jQuery.tmpl.complete in order to provide rendered event.
+ jQuery.tmpl.complete = function( tmplItems ) {
+ var tmplItem;
+ oldComplete( tmplItems);
+ for ( tmplItem in tmplItems ) {
+ tmplItem = tmplItems[tmplItem];
+ if ( tmplItem.addedTmplItems && jQuery.inArray( tmplItem, tmplItem.addedTmplItems ) === -1 ) {
+ tmplItem.addedTmplItems.push( tmplItem );
+ }
+ }
+ for ( tmplItem in tmplItems ) {
+ tmplItem = tmplItems[tmplItem];
+ // Raise rendered event
+ if ( tmplItem.rendered ) {
+ tmplItem.rendered( tmplItem );
+ }
+ }
+ };
+
+ jQuery.extend({
+ tmplCmd: function( command, data, tmplItems ) {
+ var retTmplItems = [], before;
+ function find( data, tmplItems ) {
+ var found = [], tmplItem, ti, tl = tmplItems.length, dataItem, di = 0, dl = data.length;
+ for ( ; di < dl; ) {
+ dataItem = data[di++];
+ for ( ti = 0; ti < tl; ) {
+ tmplItem = tmplItems[ti++];
+ if ( tmplItem.data === dataItem ) {
+ found.push( tmplItem );
+ }
+ }
+ }
+ return found;
+ }
+
+ data = jQuery.isArray( data ) ? data : [ data ];
+ switch ( command ) {
+ case "find":
+ return find( data, tmplItems );
+ case "replace":
+ data.reverse();
+ }
+ jQuery.each( tmplItems ? find( data, tmplItems ) : data, function( i, tmplItem ) {
+ coll = tmplItem.nodes;
+ switch ( command ) {
+ case "update":
+ tmplItem.update();
+ break;
+ case "remove":
+ jQuery( coll ).remove();
+ if ( tmplItems ) {
+ tmplItems.splice( jQuery.inArray( tmplItem, tmplItems ), 1 );
+ }
+ break;
+ case "replace":
+ before = before ?
+ jQuery( coll ).insertBefore( before )[0] :
+ jQuery( coll ).appendTo( coll[0].parentNode )[0];
+ retTmplItems.unshift( tmplItem );
+ }
+ });
+ return retTmplItems;
+ }
+ });
+
+ jQuery.fn.extend({
+ domManip: function (args, table, callback, options) {
+ var data = args[1], tmpl = args[0], dmArgs;
+ if ( args.length >= 2 && typeof data === "object" && !data.nodeType && !(data instanceof jQuery)) {
+ // args[1] is data, for a template.
+ dmArgs = jQuery.makeArray( arguments );
+
+ // Eval template to obtain fragment to clone and insert
+ dmArgs[0] = [ jQuery.tmpl( jQuery.template( tmpl ), data, args[2], args[3] ) ];
+
+ dmArgs[2] = function( fragClone ) {
+ // Handler called by oldManip when rendered template has been inserted into DOM.
+ jQuery.tmpl.afterManip( this, fragClone, callback );
+ };
+ return oldManip.apply( this, dmArgs );
+ }
+ return oldManip.apply( this, arguments );
+ }
+ });
+})(jQuery);
diff --git a/jquery.tmplplus.min.js b/jquery.tmplplus.min.js
new file mode 100644
index 0000000..2df9af9
--- /dev/null
+++ b/jquery.tmplplus.min.js
@@ -0,0 +1 @@
+(function(a){var c=a.tmpl.complete,b=a.fn.domManip;a.tmpl.complete=function(d){var b;c(d);for(b in d){b=d[b];b.addedTmplItems&&a.inArray(b,b.addedTmplItems)===-1&&b.addedTmplItems.push(b)}for(b in d){b=d[b];b.rendered&&b.rendered(b)}};a.extend({tmplCmd:function(f,b,c){var e=[],d;function g(f,c){for(var e=[],a,b,i=c.length,d,g=0,h=f.length;g<h;){d=f[g++];for(b=0;b<i;){a=c[b++];a.data===d&&e.push(a)}}return e}b=a.isArray(b)?b:[b];switch(f){case"find":return g(b,c);case"replace":b.reverse() [...]
\ No newline at end of file
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/libjs-jquery-tmpl.git
More information about the Pkg-javascript-commits
mailing list