var $jq = jQuery.noConflict();

(function($){
	$(document).ready(function(){

		function keys(obj){
			var keys = [];
			for(var key in obj){
				keys.push(key);
			}
			return keys;
		}
	
		if ( $("#product .associated-products li.groupme").length ) {
			// group associated prods by li class name + prepend dropdown
			
			var list = $(".associated-products");
			var lis = {};
			$(".groupme",list).removeClass("groupme");
			$(".associated-products").hide()
				.before('<div id="colour-groups"><label for="colour-group-select">Choose a colour group</label><select id="colour-group-select"></select></div>')
				.find("li").each(function(){
					if ( typeof(lis[$(this).attr("class")]) == "undefined" ) {
						lis[$(this).attr("class")] = "";
					}
					lis[$(this).attr("class")] += '<li>' + $(this).html() + '</li>';
				}).end().remove();
			var liskeys = keys(lis).sort();
			$.each(liskeys,function(k,v){
				$("#colour-group-select").append('<option value="'+v+'">'+ v.replace(/\-/g," / ") +'</option>');
				$("#colour-groups").append('<div class="'+v+' colour-group"><h3>'+ v.replace(/\-/g," / ") +'</h3><ul class="associated-products">'+ lis[v] +'</ul></div>');
			});
			$("#colour-group-select").change(function(){
				$(".colour-group").hide();
				$("."+$(this).val()).show();
			}).change();
		}

	});
})($jq);