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

// http://rickyrosario.com/blog/sorting-dropdown-select-options-using-jquery/

jQuery.fn.sort = function(){
	return this.pushStack([].sort.apply(this, arguments), []);
};
jQuery.fn.sortOptions = function(sortCallback){
	jQuery('option', this)
	.sort(sortCallback)
	.appendTo(this);
	return this;
};
jQuery.fn.sortOptionsByText = function(){
	var byTextSortCallback = function(x, y){
		var xText = jQuery(x).text().toUpperCase();
		var yText = jQuery(y).text().toUpperCase();
		return (xText < yText) ? -1 : (xText > yText) ? 1 : 0;
	};
	return this.sortOptions(byTextSortCallback);
};
jQuery.fn.sortOptionsByValue = function(){
	var byValueSortCallback = function(x, y){
		var xVal = jQuery(x).val();
		var yVal = jQuery(y).val();
		return (xVal < yVal) ? -1 : (xVal > yVal) ? 1 : 0;
	};
	return this.sortOptions(byValueSortCallback);
};
//DW
jQuery.fn.sortOptionsBySize = function(){
	var byValueSortCallback = function(x, y){
		var xStr = jQuery(x).text();
		var xExplA = xStr.split(' - ');
		//var xExplB = xExplA[1].split(' (');
		//var xSize = xExplB[0].toUpperCase();
		var xSize = xExplA[1].toUpperCase();

		var yStr = jQuery(y).text();
		var yExplA = yStr.split(' - ');
		//var yExplB = yExplA[1].split(' (');
		//var ySize = yExplB[0].toUpperCase();
		var ySize = yExplA[1].toUpperCase();

		return (xSize < ySize) ? -1 : (xSize > ySize) ? 1 : 0;
	};
	return this.sortOptions(byValueSortCallback);
};
//-DW
/* Usage: $('#mylist').sortOptionsByText(); */ 



	
	

	
// Elements
var $selects = $("#dropdown").find(".yak_select");	


if ( $selects.length ){	
		
	// does each select option contain " - "?
	var allComply = '1';
	$selects.find("option").each(function() {
		
		if ( $(this).text().indexOf(" - ") < 0 ) {
			allComply = ''; //alert("no.");
			return false;
		}	
	
	}); // each
	
}

if ( allComply ){ // Run this jazz!


		// Vars
		var	colour = "",
			size = "",
			price = "",
			
			was = "",
			now = "",
	
			swatchesString = '<p><small>Select a colour, then a size.</small></p><h3>Colour</h3> <p class="clearfix">',
			sizesString = '<h3>Size</h3><p class="clearfix">',
			
			i = 0;
		
		
		// Colours
		$selects.sortOptionsByText() // ORDER BY TEXT - ie, COLOUR
				.children("option")
					.each(function(){
						var str = $(this).text();
						var val = $(this).attr("value");
				
						var explodeA = str.split(' - ');
						//var explodeB = explodeA[1].split(' (');
	
						colour = explodeA[0];
			
						now = colour;

						if (now.toUpperCase() == was.toUpperCase()){ 
							// if colour matches the previous colour
							swatchesString += ', ' + val;
						} else { 
							// else, this is a new colour
							if ( i > 0 ){ swatchesString += '">' + was + '</a> '; }
							swatchesString += '<a style="background:'+colour+';" data-val="'+val+''; // + colour + '</a>';
						}
						was = now;
					
						i = i+1;
					});
		
					
		swatchesString += '">' + was + '</a></p>'; // adding the final bit to X.
	
	

		
		
		// Size 
		
		was = "";
		now = "";
		i = 0;
		var tempStringPrice = '',
			tempStringValue = '',
			partA = '';
			partZ = '';
		
		$selects.sortOptionsBySize() // ORDER BY SIZE (text part)
				.children("option")
					.each(function(){		
						var str = $(this).text();
						var val = $(this).attr("value");
						
						var explodeA = str.split(' - ');
						//var explodeB = explodeA[1].split(' (');
						//
						//var explodeC = explodeB[1].split(')');
				
						//size = explodeB[0];
						size = explodeA[1];
						//price = explodeC[0];
						
						now = size;
						if (now.toUpperCase() == was.toUpperCase()){
							// if size matches the previous szie
							sizesString += ' value-' + val;
						} else { 
							// else, this is a new size
							if ( i > 0 ){ sizesString += '">' + was + '</a> '; }
							sizesString += '<a class="'+'value-'+val+''; // + size + '</a>';
						}
						was = now;
														
						i = i+1;
						
					});
		sizesString += '">' + was + '</a></p>'; // adding the final bit to Y.
	
		
		if (was){ $("#dropdown").addClass("visuallyhidden").css("visibility", "hidden"); }
		
		
		
		//#tab-shop // create these divs, then appendTo var $tab; fast and elegant !
		
		$("#swatches").html(swatchesString);	
		$("#sizes").html(sizesString).after('<small id="chart">Download our <a href="http://rebeccaroth.com.au/wp-content/uploads/2011/02/RR_Sizechart.pdf">size chart</a></small>');
		$("#price_wrapper").append('<a id="btn">Add to Cart</a>');
	



	
	
	

		
	// end of swatch making	
	
	
	
	
	
	
	// ACTIONS
		
		
	var $button = $("#dropdown").find(".yak_button"),
		$fauxButton = $("#btn"),
		$swatches = $("#swatches"),
		$sizes = $("#sizes"),
		selectedSwatchClass = "selectedSwatch",
		selectedSizeClass = "selectedSize",
		option = "option";
	
	function disableButton(){
		$button.attr('disabled', 'disabled');
		$fauxButton.css('opacity', 0.2);
		}

	function enableButton(){
		$button.removeAttr('disabled');
		$fauxButton.css('opacity', 1);
		}


	$fauxButton.click(function(){ 
		$button.trigger("click");
	});




	
	disableButton(); // !!!
	
	$sizes.find("a").css("opacity", 0.2);

	
	// swatch click...

	$swatches.find("a").click(function(e){
		e.preventDefault();
		
		disableButton();
		//$button.attr('disabled', 'disabled');
	
		$(this)
			.siblings()
			   .removeClass(selectedSwatchClass)
			   .css("opacity",0.2)
			   .end()
			.addClass(selectedSwatchClass)
			.css("opacity",1);
				   
		
		var values = $(this).attr("data-val"),
			arr = eval("[ " + values + " ]"); 			
			
		$sizes.find("a")
			.css("opacity", 0.2)
			.removeClass(option) //.attr("data-status","nope")
			.removeClass(selectedSizeClass);	
	
		//$.each(arr, function(index, active) {
		$.each(arr, function() {
			
			$sizes.find(".value-"+this)
				.css("opacity",1)
				.addClass(option)
				.attr("data-value",this); // pass this the value from the colour
					
		}); // each
		
	
	
	}); //$swatches.click
	
	
	
	
	// size click
	
	var $dropdown = $("#dropdown"),
		$price = $("#price");
	
	$("#sizes").find("a").click(function(e){
		e.preventDefault();
		
		if ( $(this).hasClass(option) == true ){
		
			var o = $(this).attr("data-value");
			
			$dropdown.find("select").val(o);
			
			//$price.text( $(this).attr("data-price") );
			
			enableButton();
			
			$(this).addClass(selectedSizeClass)
				   .siblings()
						.removeClass(selectedSizeClass)
				   		.end();
		}
	});
	




} // end if ( $swatches.length )
		






var $infoBtn = $("#info-btn"),
	$description = $("#tab-description");
	
$infoBtn.click(function(){
	if ( $(this).hasClass("active") ){
	
		$(this).removeClass("active");
		$description
			.animate({"opacity" : 0 }, 600, function(){
				$(this).css('display', 'none');
			});

	} else {

		$(this).addClass("active");
		$description
			.css({ 
			'opacity' : 0,
			'display' : 'block'
			})
			.animate({"opacity" : 1 }, 600);
	
	}
	
});







//alert("*** last! ***"); 
// Just to check everything ran through
// and that an error checking or conditionals 
// didn't fail. - Dom

}); // end ready