var productBrowser = '<p>Voit rajata tuotelistaa valitsemalla haluamasi ominaisuudet valikoista: <a href="#" id="delete-para">POISTA RAJAUKSET</a></p>\
<ul id="parameters-nav" class="parameters nav clearfix">\
	<li id="brand">\
		<span class="label"><a href="#">Tuotemerkki</a></span>\
		<div class="second-level">\
			<ul>\
				<li class="product-search"><a href="#">Kaikki tuotteet</a></li>\
				<li class="aino"><a href="#aino">Aino</a></li>\
				<li class="classic"><a href="#classic">Classic</a></li>\
				<li class="pingviini"><a href="#pingviini">Pingviini</a></li>\
				<li class="irtojaatelo"><a href="#irtojaatelo">Irtojäätelö</a></li>\
				<li class="eskimo"><a href="#eskimo">Eskimo</a></li>\
				<li class="fazer"><a href="#fazer">Fazer</a></li>\
				<li class="grandi"><a href="#grandi">Grandi</a></li>\
				<li class="hittituotteitamaailmalta"><a href="#hittituotteitamaailmalta">Hittituotteita maailmalta</a></li>\
				<li class="hurmaava"><a href="#hurmaava">Hurmaava</a></li>\
				<li class="juhlatuutti"><a href="#juhlatuutti">Juhlatuutti</a></li>\
				<li class="muru"><a href="#muru">Muru</a></li>\
				<li class="oma"><a href="#oma">Oma</a></li>\
				<li class="pehmis"><a href="#pehmis">Pehmis</a></li>\
				<li class="puffet"><a href="#puffet">Puffet</a></li>\
				<li class="valiojaatelokotipakkauksetpikarit"><a href="#valiojaatelokotipakkauksetpikarit">Kotipakkaukset ja pikarit</a></li>\
				<li class="wanhanajan"><a href="#wanhanajan">Wanhan ajan</a></li>\
			</ul>\
		</div>\
		<span class="selected-para">Kaikki tuotemerkit</span>\
	</li>\
	<li id="package">\
		<span class="label"><a href="#">Pakkaustyyppi</a></span>\
		<div class="second-level">\
			<ul>\
				<li class="delete-paras"><a href="#">Kaikki pakkaustyypit</a></li>\
				<li class="ice"><a href="#irtojaatelo">Irtojäätelö</a></li>\
				<li class="packages even"><a href="#kotipakkaukset">Kotipakkaukset</a></li>\
				<li class="lemonade-ice"><a href="#limonadijaat">Limonadijäät</a></li>\
				<li class="multi-packages even"><a href="#monipakkaukset">Monipakkaukset</a></li>\
				<li class="ice-cone"><a href="#tuutit">Tuutit</a></li>\
				<li class="soft-ice even"><a href="#pehmis">Pehmis</a></li>\
				<li class="chalice"><a href="#pikarit">Pikarit</a></li>\
				<li class="finger even"><a href="#puikot">Puikot</a></li>\
				<li class="snack last"><a href="#valipalat">Välipalat</a></li>\
			</ul>\
		</div>\
		<span class="selected-para">Kaikki pakkaustyypit</span>\
	</li>\
	<li id="favourite-taste">\
		<span class="label"><a href="#">Suosikkimaku</a></span>\
		<div class="second-level">\
			<ul>\
				<li class="delete-paras"><a href="#">Kaikki maut</a></li>\
				<li class="fruit even"><a href="#hedelmaa">Hedelmää</a></li>\
				<li class="candy"><a href="#karkkimakuja">Karkkimakuja</a></li>\
				<li class="fudge even"><a href="#kinuskia">Kinuskia</a></li>\
				<li class="licorice"><a href="#lakritsia">Lakritsia</a></li>\
				<li class="berry even"><a href="#marjoja">Marjoja</a></li>\
				<li class="chocolate last"><a href="#suklaata">Suklaata</a></li>\
			</ul>\
		</div>\
		<span class="selected-para">Kaikki maut</span>\
	</li>\
	<li id="materials" class="multi">\
		<span class="label"><a href="#">Raaka-aineet ja allergiat</a></span>\
		<div class="second-level">\
			<ul>\
				<li><a href="#eilisattuasokeria">Ei lisättyä sokeria</a></li>\
				<li><a href="#sydanmerkkituotteet">Sydänmerkki tuotteet</a></li>\
				<li><a href="#hyla">Hyla</a></li>\
				<li><a href="#laktoositon">Laktoositon</a></li>\
				<li><a href="#eimaito">Ei maitoa</a></li>\
				<li><a href="#eisoija">Ei soijaa</a></li>\
				<li><a href="#eikananmunaa">Ei kananmunaa</a></li>\
				<li><a href="#eiseesaminsiemenia">Ei seesaminsiemeniä</a></li>\
			</ul>\
			<p class="remove-selections"><a href="#">Poista valinnat</a></p>\
		</div>\
		<span class="selected-para">Ei rajauksia</span>\
	</li>\
</ul>\
<form action="?likes" method="post" id="prod-results" name="prod-results">\
	<fieldset>\
		<div class="num-of-results"></div>\
		<div class="form-item">\
			<label for="order-results">Järjestys:</label>\
			<select name="sorder" id="sorder">\
				<option value="new">Uusimmasta alkaen</option>\
				<option value="likes">Suosituimmat</option>\
			</select>\
		</div>\
	</fieldset>\
</form>';


$(function() {

	$("#parameters-nav-nojs").replaceWith(productBrowser)
	
	
	$("ul.parameters span.label").ftr("/swf/ftr/saunaroman.swf",
		{
			size: 22,
			leading: 24,
			topOffset: -3,
			color: "#ffffff"
		}
	);
	
	$("ul.parameters > li").hover(
		function(){
			$(this).css("cursor","pointer").find("div.second-level").stop(true,true).show().css("z-index",11);
	}, function(){
			$(this).find("div.second-level").stop(true,true).hide();
	});
	
	$("#delete-para").click(function (event)
	{
		event.preventDefault();
		resetSort();
	});

	
	var $sort = $("#parameters-nav");
	var $products = $("#product-browser .items");
	var productelement = "li";
	var sortidelement = "li";
	var sortelement = "li";
	var title = document.title;
	
	$products.find('li').hover(
		function (){ $(this).find('.pic img').animate({marginTop:-5,marginBottom:5},200)},
		function (){ $(this).find('.pic img').animate({marginTop:0,marginBottom:0},200)}
	);
	
	var sortValues = {};
	
	$sort.click(function (event) {
		
		event.preventDefault();
		if ($(event.target).attr('href')) {
			setSortValues($(event.target));
			sortProducts();
		}
	});
	
	function resetSort() {
		sortValues = {};
		sortProducts();
	}

	function getHash(url) {
		if (url) {
			if (url.indexOf("#") >= 0) {
				return url.split("#")[1]
			}
			else return "";
		}
		var hash = window.location.hash;
		return hash.substring(1);
	}
		
	function setHash(hash) {
		if (!hash) hash = "kaikki";
		window.location = "#" + hash;
	}
	
	function setSortValues($element)
	{
		var $parent = $element.parent().parents(sortidelement);
		var sort = $parent.attr('id');
		var multi = $parent.hasClass('multi')
		var value = getHash($element.attr('href'));
				
		if (!value)
		{
			delete sortValues[sort];
			return;
		}
		
		if (multi && sortValues[sort] && sortValues[sort][value])
		{
			delete sortValues[sort][value];
			return
		}
		
		if (!multi)
		{
			sortValues[sort] = {};
			sortValues[sort][value] = $element.attr('href')
		}
		else
		{
			if (!sortValues[sort])
			{
				sortValues[sort] = {};
			}
			sortValues[sort][value] = $element.attr('href');
		}
		return;
	}
	
	function sortProducts()
	{				
		$sort.find("*").removeClass("selected-item");
		$products.find(productelement).hide();
		$products.find(productelement + " img").css("opacity",0)
		classes = [];
		names = [];
		
		var $sortoption;
		
		for (var sortname in sortValues)
		{
			for (classname in sortValues[sortname])
			{
				$sortoption = $sort.find("a[href="+sortValues[sortname][classname]+"]");
				$sortoption.parent().addClass("selected-item");
				classes.push(classname);
				names.push($sortoption.text());
			}
		}
		
		$sort.find(">"+sortidelement).each(function()
		{
			var $this = $(this);
			var $label = $this.find(".selected-para");
			var sortname = $this.attr('id');
			
			if (!$label.data("originaltext")) $label.data("originaltext",$label.text());
			
			if (sortValues[sortname])
			{
				var count = 0;
				for (var classname in sortValues[sortname])
				{
					count++;
				}
				if (count > 1)
				{
					$label.text(count + " valittu");
				}
				else
				{
					$sortoption = $sort.find("a[href="+sortValues[sortname][classname]+"]:eq(0)");
					
					$label.text($sortoption.text())
				}
			}
			else
			{
				$label.text($label.data("originaltext"))
			}
		});

		setHash(classes.join("/"))

		if (classes.length)
		{
			$products.find("."+classes.join(".")).fadeIn(500)
		}
		else
		{
			$products.find("*").fadeIn(500)
		}
	
		var total = $products.find(productelement + ":visible").length;
	
		$(".num-of-results").text("Hakuehdoilla löytyi "+total+" tuotetta");
		
		$(window).scroll();
	}
	
	function setSelectedOrder() 
	{
		var likesparam = window.location.href.indexOf('?likes');
		$('#sorder option:selected').removeAttr('selected');
		if(likesparam != -1) {
			$('#sorder option[value="likes"]').attr('selected','selected');
		} else {
			$('#sorder option[value="new"]').attr('selected','selected');
		}
	}
	
	function initLazyLoad()
	{
		
		$products.find("img").each(function ()
		{
			var $this = $(this);
			$this.attr("original", $this.attr("src"));
			$this.attr("src","null");
		})
		
		$(window).scroll(function (event)
		{
			var offset;
			$products.find("img").each(function ()
			{
				offset = $(window).height() + $(window).scrollTop();
				var $this = $(this);
				
				if (!$this.offset().top) return;
				
				if (offset >= $this.offset().top + 100)
				{
					if ($this.attr("src") != $this.attr("original"))
					{
						//$this.css('opacity',".01");
						
						$this.bind('load',function () {
							$this.animate({opacity:1})
						})
						$this.attr("src", $this.attr("original"))
						
					}
					else if ($this.css('opacity') == "0")
					{
						$this.animate({opacity:1})
						
					}
				}
				
			})
		});
	}
	
	function init()
	{
		if (getHash())
		{
			var classes = getHash().split("/");

			for (var i in classes)
			{
				$sort.find("a[href*="+classes[i]+"]").each(function ()
				{
					setSortValues($(this))
				})
			}	
		}
	
		initLazyLoad();
		sortProducts();
		setSelectedOrder();
		
	}
	
	init();
	
	
	$("#sorder").change(function () {
    	var selected = $("#sorder option:selected").val();  
		
		if(selected == "likes") {
			$("#prod-results").attr('action', '?likes#'+getHash());
		} else {
			$("#prod-results").attr('action', '?#'+getHash());
		}
		$("#prod-results").submit();
  	});

	
});