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
Index: branches/1.0.x/elements/pagination.elm.tpl
===================================================================
diff -u -N -r14770 -r14864
--- branches/1.0.x/elements/pagination.elm.tpl	(.../pagination.elm.tpl)	(revision 14770)
+++ branches/1.0.x/elements/pagination.elm.tpl	(.../pagination.elm.tpl)	(revision 14864)
@@ -1,27 +1,27 @@
-<inp2:m_DefaultParam prefix="" list_name=""/>
+<inp2:m_DefaultParam prefix="" list_name="" ajax="0"/>
 
 <inp2:m_DefineElement name="prev_page">
-	<a href="<inp2:PageLink/>" class="prev">&nbsp;</a>
+	<a href="<inp2:PageLink/>" page="<inp2:m_Param name='page'/>" class="prev">&nbsp;</a>
 </inp2:m_DefineElement>
 
 <inp2:m_DefineElement name="no_prev_page">
 	<span class="prev">&nbsp;</span>
 </inp2:m_DefineElement>
 
 <inp2:m_DefineElement name="next_page">
-	<a href="<inp2:PageLink/>" class="next">&nbsp;</a>
+	<a href="<inp2:PageLink/>" page="<inp2:m_Param name='page'/>" class="next">&nbsp;</a>
 </inp2:m_DefineElement>
 
 <inp2:m_DefineElement name="no_next_page">
 	<span class="next">&nbsp;</span>
 </inp2:m_DefineElement>
 
 <inp2:m_DefineElement name="page_current">
-	<a href="<inp2:PageLink/>" class="active"><inp2:m_param name="page"/></a>
+	<a href="<inp2:PageLink/>" page="<inp2:m_Param name='page'/>" class="active"><inp2:m_param name="page"/></a>
 </inp2:m_DefineElement>
 
 <inp2:m_DefineElement name="page_link">
-	<a href="<inp2:PageLink/>"><inp2:m_param name="page"/></a>
+	<a href="<inp2:PageLink/>" page="<inp2:m_Param name='page'/>"><inp2:m_param name="page"/></a>
 </inp2:m_DefineElement>
 
 <inp2:m_if check="{$prefix}_GridInfo" type="needs_pagination" list_name="$list_name">
@@ -38,4 +38,20 @@
 		/>
 	</div>
 	<div class="clear"></div>
+
+	<inp2:m_if check="m_Param" name="ajax">
+		<script type="text/javascript">
+			$(document).ready(
+				function () {
+					$('a', '.pagination').click(
+						function () {
+							ListManager.setParam('page', $(this).attr('page'), true);
+
+							return false;
+						}
+					);
+				}
+			);
+		</script>
+	</inp2:m_if>
 </inp2:m_if>
\ No newline at end of file
Index: branches/1.0.x/designs/section.tpl
===================================================================
diff -u -N -r14772 -r14864
--- branches/1.0.x/designs/section.tpl	(.../section.tpl)	(revision 14772)
+++ branches/1.0.x/designs/section.tpl	(.../section.tpl)	(revision 14864)
@@ -4,6 +4,9 @@
 <SECTION></SECTION>
 ##-->
 
+<!--## required, when filters are used ##-->
+<inp2:p_InitList list_name="products_in_category" main_list="1"/>
+
 <inp2:m_DefineElement name="page_title">
 	<inp2:m_include template="elements/title_bar.elm"/>
 </inp2:m_DefineElement>
@@ -19,73 +22,67 @@
 <!--## MAIN CONTENT ##-->
 <inp2:m_DefineElement name="content">
 
-		<div class="block no-border-bottom" style="margin-bottom:0;">
+	<div class="block no-border-bottom" style="margin-bottom: 0;">
+		<inp2:m_Include template="elements/navigation_bar.elm"/>
+		<inp2:m_Include template="elements/content_boxes/categories.elm" data_exists="1" />
+	</div>
 
-			<inp2:m_Include template="elements/navigation_bar.elm"/>
+	<div id="products">
+		<inp2:m_Include template="elements/content_boxes/products.elm" list_name="products_in_category" prefix="p" data_exists="1" />
+	</div>
+</inp2:m_DefineElement>
+<!--## /MAIN CONTENT ##-->
 
-			<inp2:m_Include template="elements/content_boxes/categories.elm" data_exists="1" />
+<inp2:m_DefineElement name="add_to_head">
+	<script type="text/javascript">
+		$(document).ready(
+			function() {
+				// js that works for "Shop All" menu and "Categories sidebox": begin
+				var icons = {header: 'ui-icon-circle-arrow-e', headerSelected: 'ui-icon-circle-arrow-s'},
+					level2icons = {header: 'ui-icon-circle-arrow-l2e', headerSelected: 'ui-icon-circle-arrow-l2s'},
+					level3icons = {header: 'ui-icon-circle-arrow-l3e', headerSelected: 'ui-icon-circle-arrow-l3s'};
 
-		</div>
+				$('#accordion-menu').accordion({icons: icons});
+				$('#level2-menu').accordion({icons: level2icons});
 
-		<inp2:m_Cache key="prefix:p;currency;guest_only">
+				$('.level3-menu').accordion({
+					icons: level3icons,
+					header: 'h4',
+					autoHeight: false,
+					event: 'mouseover'
+				});
+			}
+		);
 
-			<inp2:m_Include template="elements/content_boxes/products.elm" list_name="products_in_category" prefix="p" data_exists="1" />
+		function ListManager() {}
 
-		</inp2:m_Cache>
+		ListManager.containerSelector = '#products';
+		ListManager.url = '<inp2:m_Link render_template="elements/content_boxes/products.elm" list_name="products_in_category" list_prefix="p" js_escape="1" no_amp="1"/>';
+		ListManager.urlParams = {layout: 'list'};
 
-</inp2:m_DefineElement>
-<!--## /MAIN CONTENT ##-->
+		ListManager.getUrl = function () {
+			var $url = this.url;
+		}
 
-<inp2:m_DefineElement name="add_to_head">
-	<script>
-	$(function() {
-		var icons = {
-			header: "ui-icon-circle-arrow-e",
-			headerSelected: "ui-icon-circle-arrow-s"
-		};
-		var level2icons = {
-			header: "ui-icon-circle-arrow-l2e",
-			headerSelected: "ui-icon-circle-arrow-l2s"
-		};
-		var level3icons = {
-			header: "ui-icon-circle-arrow-l3e",
-			headerSelected: "ui-icon-circle-arrow-l3s"
-		};
-		$( "#accordion-menu" ).accordion({
-			icons: icons
-		});
-		$( "#level2-menu" ).accordion({
-			icons: level2icons
-		});
-		$( ".level3-menu" ).accordion({
-			icons: level3icons,
-			header: 'h4',
-			autoHeight: false,
-			event: "mouseover"
-		});
-		$("a.switch_thumb").toggle(function(){
-			$(this).addClass("swap");
-			$("ul.display").fadeOut("fast", function() {
-				$("div.items").removeClass("border-radius").addClass("items-alt");
-				$(this).fadeIn("fast").addClass("thumb_view");
-			});
-		}, function () {
-			$(this).removeClass("swap");
-			$("ul.display").fadeOut("fast", function() {
-				$("div.items").addClass("border-radius").removeClass("items-alt");
-				$(this).fadeIn("fast").removeClass("thumb_view");
-			});
-		});
+		ListManager.reload = function () {
+			$(this.containerSelector)
+			.fadeTo('fast', 0.7)
+			.load(
+				this.url,
+				this.urlParams,
+				function () {
+					$(this).fadeTo('fast', 1.0);
+				}
+			);
+		}
 
-		$( "#slider-vertical" ).slider({
-			orientation: "vertical",
-			range: true,
-			min: 0,
-			max: 1000,
-			step: 100,
-			values: [ 0, 400 ]
-		});
-	});
+		ListManager.setParam = function ($name, $value, $reload) {
+			this.urlParams[$name] = $value;
+
+			if ( $reload === true ) {
+				this.reload();
+			}
+		}
 	</script>
 </inp2:m_DefineElement>
 
Index: branches/1.0.x/elements/content_boxes/products.elm.tpl
===================================================================
diff -u -N -r14747 -r14864
--- branches/1.0.x/elements/content_boxes/products.elm.tpl	(.../products.elm.tpl)	(revision 14747)
+++ branches/1.0.x/elements/content_boxes/products.elm.tpl	(.../products.elm.tpl)	(revision 14864)
@@ -1,17 +1,22 @@
-<inp2:m_DefaultParam prefix="p" list_name="products_in_category" type=""/>
+<inp2:m_DefaultParam prefix="" list_name="" layout="list"/>
 
-<inp2:{$prefix}_InitList list_name="$list_name" main_list="1"/>
-		
-<inp2:m_Include template="elements/sorting.elm" list_name="$list_name" prefix="$prefix"/>
+<inp2:m_if check="m_Get" name="ajax" equals_to="yes">
+	<inp2:m_Get name="list_prefix" result_to_var="prefix"/>
+	<inp2:m_Get name="list_name" result_to_var="list_name"/>
+	<inp2:m_Get name="layout" result_to_var="layout"/>
+</inp2:m_if>
 
-<div class="items border-radius">
-	<ul class="display">			
-	
-		<inp2:{$prefix}_ListProducts list_name="$list_name" render_as="product_list_element"/>
-				
-	</ul>	
+<inp2:$prefix_InitList list_name="$list_name" main_list="1"/>
+
+<inp2:m_Include template="elements/content_boxes.elm" strip_nl="2"/>
+<inp2:m_Include template="elements/product_elements.elm" strip_nl="2"/>
+<inp2:m_Include template="elements/sorting.elm" list_name="$list_name" prefix="$prefix" layout="$layout" ajax="1"/>
+
+<div class="items <inp2:m_if check='m_Param' name='layout' equals_to='list'>border-radius<inp2:m_else/>items-alt</inp2:m_if>">
+	<ul class="display<inp2:m_if check='m_Param' name='layout' equals_to='grid'> thumb_view</inp2:m_if>">
+		<inp2:$prefix_ListProducts list_name="$list_name" render_as="product_list_element"/>
+	</ul>
 	<div class="clear"></div>
-	
-	<inp2:m_Include template="elements/pagination.elm" list_name="$list_name" prefix="$prefix"/>	
-	
-</div>		
\ No newline at end of file
+
+	<inp2:m_Include template="elements/pagination.elm" list_name="$list_name" prefix="$prefix" ajax="1"/>
+</div>
\ No newline at end of file