// $cmignore
function reloadDetail(swatch) {
	var swatchDetail = $('#colours #swatch-wrapper #swatch-detail');
	swatchDetail.find('img').attr('src', swatch.find('img').attr('src'));
	swatchDetail.find('ul.colour-skus').remove();
	swatchDetail.append('<ul class="colour-skus">' + swatch.find('ul.colour-skus').html() + '</ul>');
}
		
$(document).ready(function () {
	// Don't do any of this if there are less than 5 colours
	var numberOfColors = $('#colours #colour-list li.colour').size();
	
	if (numberOfColors > 5) {
		// prepare markup
		$('#colours #colour-list').addClass('dynamic').wrap('<div id="swatch-wrapper"></div>');
		$('#colours #colour-list li.colour ul.colour-skus').hide();
		$('#colours #swatch-wrapper').append('<div id="swatch-detail"><img src="" /></div>');
		
		if (numberOfColors > 20) {
			$('#colours #swatch-wrapper').append('<p id="view-all-colours"><a href="#">View all colours</a></p>');
		}
		
		// add click methods
		$('#colours #colour-list li.colour img').bind('click', function (e) {
			reloadDetail($(this).parent());
			return false;
		});
		
		var isCollapsed = true;
		
		$('#colours #swatch-wrapper #view-all-colours').bind('click', function (e) {
			var scrollUIComponents = $('.jScrollPaneTrack, .jScrollArrowUp, .jScrollArrowDown');
			
			if (isCollapsed) {
				//$('#colours #colour-list, .jScrollPaneDrag').css('top', '0');
				$('#colours #colour-list, .jScrollPaneDrag').animate({'top': '0'});
				scrollUIComponents.animate({opacity: 'hide'});
			}
			
			$(this).find('a').text(isCollapsed ? 'Collapse colours ↑' : 'View all colours');
			
			$('.jScrollPaneContainer').animate({
				height: ((isCollapsed ? (((Math.ceil(numberOfColors / 5) * 56) + 4)) : 224) + 'px')
			});
			
			if (!isCollapsed) scrollUIComponents.animate({opacity: 'show'}, 'fast');
			
			isCollapsed = !isCollapsed;
			
			return false;
		});
		
	
		// populate detail area with first swatch
		var targetSwatch = $('#colours #colour-list li.colour:first');
		reloadDetail(targetSwatch);
	
		// add jScrollPane
		$('#colours #colour-list').jScrollPane({'scrollbarWidth': 29, 'scrollbarMargin': 0, 'showArrows':true});
	}
});
// $/cmignore