/**
 * @file _sprites.scss
 *
 * Sprite generation - all icons are served from the public/assets/icons directory.
 * */

@import "compass/utilities/sprites";         // Include compass sprite helpers
@import "compass/css3/background-size";      // Include helper to calc background size
@import "compass/css3/inline-block";

@import "retina";

/**
 * Option variable to define the spacing between images in the generated sprite
 */
$retina-sprite-spacing: 0px !default;

$retina-sprite-names     : 0;
$retina-sprite-sprites   : 0;
$retina-sprite-urls      : 0;
$retina-sprite-sprites2x : 0;
$retina-sprite-urls2x    : 0;

/**
 * A mixin to create retina sprites with hover & active states
 *
 * You have to register a pair of sprites using `{@link #retina-sprite-add}` and then you can use this mixin:
 *
 *     @include retina-sprite-add(icons, "icons/*.png", "icons-retina/*.png");
 *
 *     .my-icon {
 *       @include retina-sprite(icon-name, icons);
 *     }
 *
 * @param {String} $name
 * @param {String} [$sprite-name]
 * @param {Boolean} [$hover=false]
 * @param {Boolean} [$active=false]
 */
@mixin retina-sprite($name, $sprite-name: spritesheet, $dimensions: false, $hover: false, $active: false, $nonRetina: false) {
  $index: 1;
  $len: length($retina-sprite-names);

  @for $i from $index through $len {
    @if $sprite-name == nth($retina-sprite-names, $i) {
      $index: $i;
    }
  }

  $sprite       : nth($retina-sprite-sprites, $index);
  $sprite-url   : nth($retina-sprite-urls, $index);

  $sprite2x     : nth($retina-sprite-sprites2x, $index);
  $sprite-url2x : nth($retina-sprite-urls2x, $index);


  @include _retina-sprite($name, $sprite, $sprite-url, $sprite2x, $sprite-url2x, $hover, $active, $dimensions, $nonRetina: $nonRetina);
}

@function retina-sprite-width($name, $sprite-name: 0) {
  $index: 2;
  $len: length($retina-sprite-names);

  @for $i from $index through $len {
    @if $sprite-name == nth($retina-sprite-names, $i) {
      $index: $i;
    }
  }

  $sprite : nth($retina-sprite-sprites, $index);
  @return image-width(sprite-file($sprite, $name));
}

@function retina-sprite-height($name, $sprite-name: 0) {
  $index: 2;
  $len: length($retina-sprite-names);

  @for $i from $index through $len {
    @if $sprite-name == nth($retina-sprite-names, $i) {
      $index: $i;
    }
  }

  $sprite : nth($retina-sprite-sprites, $index);
  @return image-height(sprite-file($sprite, $name));
}

/**
 * @param {String} $name
 * @param {String} $path
 * @param {String} $path2x
 */
@mixin retina-sprite-add($name, $path, $path2x) {
  $sprite   : sprite-map($path, $spacing: $retina-sprite-spacing);
  $sprite2x : sprite-map($path2x, $spacing: $retina-sprite-spacing * 2);

  @if (feature-exists(global-variable-shadowing)) {
    $retina-sprite-names     : append($retina-sprite-names, $name) !global;

    $retina-sprite-sprites   : append($retina-sprite-sprites, $sprite) !global;
    $retina-sprite-urls      : append($retina-sprite-urls, sprite-url($sprite)) !global;

    $retina-sprite-sprites2x : append($retina-sprite-sprites2x, $sprite2x) !global;
    $retina-sprite-urls2x    : append($retina-sprite-urls2x, sprite-url($sprite2x)) !global;
  } @else {
    $retina-sprite-names     : append($retina-sprite-names, $name);

    $retina-sprite-sprites   : append($retina-sprite-sprites, $sprite);
    $retina-sprite-urls      : append($retina-sprite-urls, sprite-url($sprite));

    $retina-sprite-sprites2x : append($retina-sprite-sprites2x, $sprite2x);
    $retina-sprite-urls2x    : append($retina-sprite-urls2x, sprite-url($sprite2x));
  }
}

@mixin _retina-sprite-bg-pos($sprite, $name, $pad, $multiplier: 1) {
  $pos: sprite-position($sprite, $name, -$pad * $multiplier, -$pad * $multiplier);
  background-position: nth($pos, 1) nth($pos, 2) / $multiplier;
}


// The general purpose retina sprite mixin.
//
//    @include retina-sprite(name, $spritemap1, $spritemap2)
//    @include retina-sprite(name, $spritemap1, $spritemap2[, $dimensions: true, $pad: 0])
//
//    If `dimensions` is true, then width/height will also be set.
//
//    if `pad` is non-zero, then that's how much padding the element will have (requires
//    $spacing on the sprite maps). Great for iPhone interfaces to make hit areas bigger.
//
@mixin _retina-sprite($name, $sprite, $sprite-url, $sprite2x, $sprite-url2x, $hover, $active, $dimensions: true, $pad: 0, $nonRetina: false) {
  background-image: $sprite-url;

  @include _retina-sprite-bg-pos($sprite, $name, $pad);

  @if $nonRetina {
  	@include background-size(auto);
  }

  background-repeat: repeat-y;

  @if $dimensions == true {
    @include sprite-dimensions($sprite, $name);
  }

  @if $hover == true {
    &:hover  { @include _retina-sprite-bg-pos($sprite, $name + _hover, $pad); }
  }
  @if $active == true {
    &:active { @include _retina-sprite-bg-pos($sprite, $name + _active, $pad); }
  }

  @if $pad > 0 {
    padding: $pad;
  }

  @if $nonRetina == false {
	@include retina {
	    background-image: $sprite-url2x;
	    // workaround for Chrome rendering bug when zoomed
	    // see issue: https://code.google.com/p/chromium/issues/detail?id=260319
	    @include background-size(ceil(image-width(sprite-path($sprite2x)) / 2) ceil(image-height(sprite-path($sprite2x)) / 2));
	    //  sprite-path() returns the path of the generated sprite sheet, which
	    //  image-width() calculates the width of. the ceil() is in place in case
	    //  you have sprites that have an odd-number of pixels in width

	    @include _retina-sprite-bg-pos($sprite2x, $name, $pad, 2);

		@if $hover == true {
			&:hover  { @include _retina-sprite-bg-pos($sprite2x, $name + _hover, $pad, 2); }
		}
		@if $active == true {
			&:active { @include _retina-sprite-bg-pos($sprite2x, $name + _active, $pad, 2); }
		}
	}
  }

}