$(document).ready(
	function()
	{
		//$('#teaser-title-wrap li a:first').preload();
		bindHome();
		bindProductDetail();
	}
);

function bindHome()
{
	$("#teaser-title-wrap li").mouseover(
		function()
		{
			$("#content-img img:first").hide();
			$("#content-img img:first").attr("src", $(this).find("a:first img:first").attr("rel")).fadeIn(150).load(
					function()
					{
						var width = $(this).width();
						var left = Math.round((400 - width)/2);
						
						$(this).css('left', left+"px");					
					}
			
			);
		}
	);	
}

function bindProductDetail()
{
	$("#product-detail-img img:first").hide();
	alignImg();
	alignThumbs();
	
	$("#product-detail-thumbs li a img").css("opacity", "0.35");
	
	$("#product-detail-thumbs li").mouseover(
			function()
			{
				$(this).find("img").animate({opacity: "1.0"}, 500);
			}
	).mouseout(
			function()
			{
				$(this).find("img").animate({opacity: "0.35"}, 500);
			}			
	);
	
	$("#product-detail-thumbs li a").click(
		function()
		{
			$("#product-detail-img img:first").hide();//fadeOut("medium");
			$("#product-detail-img img:first").attr("src", $(this).attr("href"));
			
			alignImg();			
			return false;
		}
	);
	
	function alignImg()
	{
		var src = $("#product-detail-img img:first").attr("src");
		
		if ($("#product-detail-img img:first").length > 0)
		{
			$("#product-detail-img img:first").attr("src", src).load(
					function()
					{
						var width = $("#product-detail-img img:first").width();
						var left = Math.round((550 - width)/2);
						
						$("#product-detail-img img:first").css('left', left+"px");
						
						$("#product-detail-img img:first").fadeIn("medium")
					}
			);
		}
	}
	
	function alignThumbs()
	{
//		$("a.title-thumb > img.first,a.product-thumb > img.first").hide();
		$("a.title-thumb,a.product-thumb").each(
				function()
				{
					if ($(this).find("img.first").length > 0)
					{
						var img = $(this).find("img.first");
						var url = img.attr("src");
						
						
						img.attr("src", img.attr("src")).load(
										function()
										{			
												
														var width = img.width();
														var left = Math.round((146 - width)/2);
														
														img.css('left', left+"px");
														img.show();
										}
						);
					}
				}
		);
	}
	
	$.getJSON("/ajax/categorieen.php",
				function(data)
				{
					$("#subnav").html('');
					
					for (var i = 0; i < data.length; i++)
					{
						var li = $("<li>");
						var a = $("<a>");
						
						a.html(data[i]["naam"]);
						a.attr("href", data[i]["url"]);
						
						li.append(a);
						
						if (data[i]["sub"].length > 0)
						{
							var ul = $("<ul>");
							
							for (var j = 0; j < data[i]["sub"].length; j++)
							{
								var lisub = $("<li>");
								var asub = $("<a>");
																
								asub.html(data[i]["sub"][j]["naam"]);
								asub.attr("href", data[i]["sub"][j]["url"]);
								
								lisub.append(asub);
								ul.append(lisub);
							}
							
							li.append(ul);
						}
						
						$("#subnav").append(li);
						
					}
				}
	);
}