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>