(function($) {
	$.fn.flyOut = function() {
		return $(this).each(function() {
			var self = $(this);
			
			// add style to show its active
			self.addClass("flyout-active");
			
			// find the next sibling to use as the flyout
			var flyoutContainer = $(this).next(); 
			
			// create the flyout container
			var container = $("<div class='flyout-container'></div>");
			container.hide();
			container.append($(flyoutContainer).remove());
			$("body").append(container);

			// hard coded - should be able to do it better than this
			var itemsPerRow = 5;
			var numberOfItems = container.find("li").length;
			var numberOfRows = Math.ceil(numberOfItems / itemsPerRow);
			var naturalWidth = 5 + ((numberOfItems <=itemsPerRow ? numberOfItems : itemsPerRow) * 57);
			var height = 5 + (numberOfRows * 68);

			container.height(height);
			container.find("ul").width(naturalWidth - 5);
			
			self.click(function() {
				var position = $(this).offset();

				var closed = !container.hasClass("open");

				$("h5.open").removeClass("open");
				
				$("div.flyout-container").each(function() {
					if ($(this).hasClass("open")) {
						$(this).animate({ width: 0}, "slow", "linear", function() { $(this).removeClass("open").hide(); });
					}
				});
				
				if (closed) {
					var startRight= $("body").width() - position.left + ($.browser.msie ? 10 : 9);
					var top = position.top - (height / 2) + 9; 

					self.addClass("open");
					container.addClass("open");
					container.css({position: 'absolute', top:top, right:startRight, width:0 });
					container.show();
					container.animate({ width: naturalWidth });
				}
				else {
					self.removeClass("open");
					container.removeClass("open");
				}

			});
			
		});
	};
})(jQuery);

$(document).ready(function() {
	function page(position, pager) {
		var sku = $("meta[name=sku]").attr("content");
		$.get($.mapPath('product/pager/' + sku + "/" + position), {}, function(data, textStatus) {
			var list = $("div.search-pager ul");
			var results = $(data).find("li");
			
			if (results.length > 0) {
				list.find("li").remove();
				list.append(results);
			}
			else {
				$(pager).addClass("disabled");
			}
		});
	}
	$("h5.flyout").flyOut();
	
	$("div.product div.section h4").each(function() {
		$(this).append("<a href='#'><!-- click me --></a>");
		$(this).find("a").click(function() {
			$(this).toggleClass("closed");
	
			var section = $(this).parent().parent().find("div.inner");
	
			if (section.hasClass("closed")) {
				section.removeClass("closed");
				section.show();
			}
			else {
				section.addClass("closed");
				section.hide();
			}
	
			return false;
		});
	});
	
	$("div.product a.show").click(function() {
		$(this).toggleClass("shown");
		
		if ($(this).hasClass("shown")) {
			$(this).find("span").text("Pattern and info");
			$("div.product div.section").hide();
		}
		else {
			$(this).find("span").text("Pattern only");
			$("div.product div.section").show();
		}
		return false;
	});
	
	$("div.search-pager a.prev").click(function() {
		var position = parseInt($("ul.product-search li:first a").attr("rel"),10);
	
		if (!$(this).hasClass("disabled") && position > 0) {
			page(position < 6 ? 0 : position - 6, this);				
		}
	
		return false;
	});
	
	$("div.search-pager a.next").click(function() {
		var position = parseInt($("ul.product-search li:last a").attr("rel"),10) - 6;
	
		if (!$(this).hasClass("disabled")) {
			page(position, this);				
		}
	
		return false;
	});
	
	$("div.draggable").draggable({
		start: function() {
			$("h5.flyout").removeClass("open"); 	
			$("div.flyout-container").hide().removeClass("open"); 	
		}
	});
});