$default-prefixes: webkit moz ms o;

@mixin prefix-values($property, $value, $prefixes: $default-prefixes) {
    @each $prefix in $prefixes {
        -#{$prefix}-#{$property}: #{$value};
    }
    #{$property}: #{$value};
} 

@mixin transform-origin ($x: left, $y: top) {
    $values: #{$x} #{$y};
    @include prefix-values('transform-origin', $values);
}

@mixin transform-rotate ($degrees) {
    $value: rotate($degrees);
    @include prefix-values('transform', $value);
}

@mixin transform-mirror-rotate ($degrees) {
    $values: scale(-1, 1) rotate($degrees);
    @include prefix-values('transform', $values);
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #111;
    font-family: sans serif;
    font-size: 10pt;
}

.kaleidoscope {
    width: 100%;
    height: 100%;

    .tile {
	display: none;
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 0;
	overflow: hidden;
	height: 100%;
	width: 50%;
	@include transform-origin(right, top);

	.image {
	    position: relative;
	    top: 0;
	    left: 100%;
	    height: 100%;
	    width: 100%;
	    background-image: url(../img/butterfly-montage.jpg); // Apologies to Damien Hirst.
	    @include transform-origin();
	 }
    }

    $max_segments: 32;
    $segments: 0;

    @while $segments <= $max_segments {
	$step: 360deg / ($segments * 2);

	$angle: 0 - $step;
	$i: 0;

	&.n#{$segments} {

	    .tile {
	        display: block;

		@while $i < $segments * 2 {
		    &.t#{$i} {
			@include transform-rotate($angle + $step);
		    }

		    &.t#{$i+1} {
			@include transform-mirror-rotate($angle + $step);
		    }

		    $angle: $angle + ($step * 2);
		    $i: $i + 2;
		}
		.image {
		    @include transform-rotate($step);
		}
	    }
	}
	$segments: $segments + 1;
    }
    
}

nav {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    color: #666;
    text-decoration: none;
    font-family: Helvetica;
    cursor: pointer;

    body.clean & {
      opacity: 0;

      &:hover {
        opacity: 1;
      }
    }

    a {
        color: #666;
    	text-decoration: none;
    }

    & > * {
	float: left;
	padding: 0.6em;

        background-color: #eee;
        opacity: 0.8;

    	&:hover {
            opacity: 0.9;
        }

	&:nth-child(n + 2) {
	    border-left: 1px solid #666;
	}

	&:first-child {
	    border-bottom-left-radius: 0.6em;
	}

	&:last-child {
	    border-bottom-right-radius: 0.6em;
	}
    }
}
