Index: branches/1.0.x/elements/sorting.elm.tpl
===================================================================
diff -u -N -r14747 -r14864
--- branches/1.0.x/elements/sorting.elm.tpl	(.../sorting.elm.tpl)	(revision 14747)
+++ branches/1.0.x/elements/sorting.elm.tpl	(.../sorting.elm.tpl)	(revision 14864)
@@ -1,35 +1,134 @@
+<inp2:m_DefaultParam prefix="" list_name="" layout="list" ajax="0"/>
+
 <div class="filter-block">
-	<div class="paginate">
-		<a href=""><img src="<inp2:m_TemplatesBase/>img/arrow-left.png" width="7" height="13" alt="" /></a>&nbsp;
-		Products
-		<select id="paginate">
-			<option value="" selected="selected">1-10</option>
-			<option value="">11-20</option>
-			<option value="">21-30</option>
-		</select>
-		out of 120&nbsp;
-		<a href=""><img src="<inp2:m_TemplatesBase/>img/arrow-right.png" width="7" height="13" alt="" /></a>
-	</div>
+
+	<inp2:m_if check="{$prefix}_GridInfo" type="needs_pagination" list_name="$list_name">
+		<div class="paginate">
+			<a href="#prev" class="prev"><img src="<inp2:m_TemplatesBase/>img/arrow-left.png" width="7" height="13" alt="" /></a>&nbsp;
+			Products
+			<select id="paginate">
+				<inp2:m_DefineElement name="option_page_current">
+					<option value="<inp2:m_param name='page'/>" selected><inp2:m_param name="from_record"/> - <inp2:m_param name="to_record"/></a>
+				</inp2:m_DefineElement>
+
+				<inp2:m_DefineElement name="option_page_link">
+					<option value="<inp2:m_param name='page'/>"><inp2:m_param name="from_record"/> - <inp2:m_param name="to_record"/></a>
+				</inp2:m_DefineElement>
+
+				<inp2:$prefix_PaginationBar list_name="$list_name" current_render_as="option_page_current" link_render_as="option_page_link"/>
+			</select>
+			out of <inp2:p_TotalRecords/>&nbsp;
+			<a href="#next" class="next"><img src="<inp2:m_TemplatesBase/>img/arrow-right.png" width="7" height="13" alt="" /></a>
+		</div>
+	</inp2:m_if>
+
 	<div class="sortby">
 		<form method="post" action="<inp2:m_FormAction/>">
 			Sort by:
-			<select name="<inp2:p_CombinedSortingDropDownName/>">
+			<select name="<inp2:p_CombinedSortingDropDownName/>" id="sorting">
 				<option value="Name|asc" <inp2:p_SortingSelected sorting="l1_Name|asc" selected='selected="selected"'/>>Name</option>
 				<option value="Price|asc" <inp2:p_SortingSelected sorting="Price|asc" selected='selected="selected"'/>>Price Low</option>
 				<option value="Price|desc" <inp2:p_SortingSelected sorting="Price|desc" selected='selected="selected"'/>>Price High</option>
-				<option value="CachedRating|asc" <inp2:p_SortingSelected sorting="CachedRating|asc" selected='selected="selected"'/>>Rating</option>				
-			</select>&nbsp;&nbsp;		
-				Per Page:
-			<select name="<inp2:{$prefix}_VarName type='PerPage'/>">
-				<option value="10" <inp2:{$prefix}_PerPageSelected per_page="10" selected='selected="selected"'/>>10</option>
-				<option value="20" <inp2:{$prefix}_PerPageSelected per_page="20" selected='selected="selected"'/>>20</option>
-				<option value="50" <inp2:{$prefix}_PerPageSelected per_page="50" selected='selected="selected"'/>>50</option>
+				<option value="CachedRating|asc" <inp2:p_SortingSelected sorting="CachedRating|asc" selected='selected="selected"'/>>Rating</option>
 			</select>&nbsp;&nbsp;
+
+			Per Page:
+			<select name="<inp2:{$prefix}_VarName type='PerPage'/>" id="per-page">
+				<option value="10" <inp2:$prefix_PerPageSelected per_page="10" selected='selected="selected"'/>>10</option>
+				<option value="20" <inp2:$prefix_PerPageSelected per_page="20" selected='selected="selected"'/>>20</option>
+				<option value="50" <inp2:$prefix_PerPageSelected per_page="50" selected='selected="selected"'/>>50</option>
+				<option value="-1" <inp2:$prefix_PerPageSelected per_page="-1" selected='selected="selected"'/>>All</option>
+			</select>&nbsp;&nbsp;
 		</form>
-		<a href="#">Show All</a>
+
+		<a href="#" id="per-page-all">Show All</a>
 	</div>
+
 	<div class="display_switch">
-		<a href="#" class="switch_thumb"></a>
+		<a href="#" class="switch_thumb" layout="<inp2:m_Param name='layout'/>"></a>
 	</div>
+
+	<script type="text/javascript">
+		$(document).ready(
+			function() {
+				$('a.switch_thumb').click(
+					function ($e) {
+						var $me = $(this);
+
+						if ( $me.attr('layout') == 'list' ) {
+							$me.addClass('swap');
+
+							$('ul.display').fadeOut(
+								'fast',
+								function() {
+									$me.attr('layout', 'grid');
+									ListManager.setParam('layout', 'grid');
+
+									$('div.items').removeClass('border-radius').addClass('items-alt');
+									$(this).fadeIn('fast').addClass('thumb_view');
+								}
+							);
+						}
+						else {
+							$me.removeClass('swap');
+
+							$('ul.display').fadeOut(
+								'fast',
+								function() {
+									$me.attr('layout', 'list');
+									ListManager.setParam('layout', 'list');
+
+									$('div.items').addClass('border-radius').removeClass('items-alt');
+									$(this).fadeIn('fast').removeClass('thumb_view');
+								}
+							);
+						}
+
+						return false;
+					}
+				);
+
+				<inp2:m_if check="{$prefix}_GridInfo" type="needs_pagination" list_name="$list_name">
+					$('#paginate').change(
+						function () {
+							ListManager.setParam('page', $(this).val(), true);
+						}
+					);
+
+					$('.prev, .next', '.paginate').click(
+						function ($e) {
+							var $option = $('option:selected', '#paginate')[ $(this).attr('class') ]();
+
+							if ( $option.length ) {
+								$('#paginate').val( $option.attr('value') ).change();
+							}
+
+							return false;
+						}
+					);
+				</inp2:m_if>
+
+				$('#sorting').change(
+					function ($e) {
+						ListManager.setParam('sort_by', $(this).val().replace('|', ','), true);
+					}
+				);
+
+				$('#per-page').change(
+					function ($e) {
+						ListManager.setParam('per_page', $(this).val(), true);
+					}
+				);
+
+				$('#per-page-all').click(
+					function () {
+						$('#per-page').val(-1).change();
+
+						return false;
+					}
+				);
+			}
+		);
+	</script>
 </div>
 <div class="clear"></div>
\ No newline at end of file