// -----------------------------------------------------
// SPRITES MAKER
// Combine multiple PNGs into one
// - Image's type must be PNG
// - Image's name can't start with number or contains special symbol like `@`
//
// - In your config.rb, add `relative_assets = true`
// - If you use 3rd party precompiler like Prepros,
//   don't forget to tick the `Full Compass Support`
//
// Special Thanks:
// www.gayadesign.com/diy/retina-sprites-for-compass
// -----------------------------------------------------

// Generate standard sprites
@mixin sprite(
	$folder-name   : "sprites",
	$main-class    : "sprite",
	$prefix-class  : "") {
	$sprites: sprite-map("#{$folder-name}/*.png", $layout: smart);
	.#{$main-class}{
		background : $sprites;
		display    : inline-block;
		@include loop-sprite-map($sprites, false, $prefix-class);

		@content; // placeholder for retina sprites
	}
}

// Generate both Retina and Standard sprites
// - Folder's name for Retina must be EXACT SAME as Standard one with the addition of `@2x`
// - Image's name must be EXACT SAME for standard and retina
@mixin sprite-retina($folder-name : 'sprites',
					$main-class   : 'sprite',
					$prefix-class : '') {

	@include sprite($folder-name, $main-class, $prefix-class) {
		$sprites    : sprite-map("#{$folder-name}/*.png", $layout: smart);
		$sprites-2x : sprite-map("#{$folder-name}@2x/*.png", $layout: smart);
		@include retina {
			// If all images in Retina and Standard folder is the same
			@if length(sprite_names($sprites) ) == length(sprite_names($sprites-2x) ) {
			background: $sprites-2x;
			background-size: 
					(image-width(sprite-path($sprites-2x)) / 2)
					(image-height(sprite-path($sprites-2x)) / 2);
			}
			// If there's missing images in retina folder
			@else {
				@include loop-sprite-map($sprites-2x, true, $prefix-class);
			}
		}
	}
}


// Helper for looping through sprite-map
@mixin loop-sprite-map($sprite-map, $is-retina: false , $prefix-class: '') {
	$divide-by  : 1; // for retina sprites' scaling
	$sprite-url : '';
	@if $is-retina {
		$divide-by : 2;
		$sprite-url : sprite-url($sprite-map);
	}

	@each $i in sprite_names($sprite-map) {
		&.#{$prefix-class}#{$i} {
			@if $is-retina {
				// It makes sure that if the sprite doesn't exist in Retina folder,
				//     it uses sprite from the Standard one.
				background: $sprite-url;
				background-size: 
					(image-width(sprite-path($sprite-map)) / 2)
					(image-height(sprite-path($sprite-map)) / 2);
			}
			background-position:
				round(nth(sprite-position($sprite-map, $i), 1) / $divide-by)
				round(nth(sprite-position($sprite-map, $i), 2) / $divide-by);
			height : image-height(sprite-file($sprite-map, $i)) / $divide-by;
			width  : image-width(sprite-file($sprite-map, $i)) / $divide-by;
		}
	}
}