/**
 * The BIVROST 360WebPlayer
 * @preserve Copyright 2016 Bivrost Sp. Z O. O.
 * @license dual licensed, see http://github.com/Bivrost/360WebPlayer/ for full license
 */

@import "compass/utilities/sprites";
$common: "style-common";

$ui-height: 68px;
$range-size: 14px;
$button-margin: 8px;
$transition-time: 0.5s;

/// Adds $add to every $argno-th part of each selector in & 
/// @param {selector} $add
/// @param {number} $argno (default: 1)
@function theme($add, $argno:1) {
	$collector: ();
	@each $sel in & {
		$collector: append(
			$collector, 
			set-nth( $sel, $argno, nth($sel, $argno) + $add ),
			comma
		);
	};
	@return $collector;
}





@mixin themed {
	// #ffffff #00a7f5
	$skin: "style-skin-default" !global;
	$ui-background: rgba(0,0,0, 0.5) !global;
	$text-color: #ffffff !global;
	@content;

	// #ffffff #86c239
	$skin: "style-skin-spring" !global;
	$ui-background: transparentize(#000000, 0.5) !global;
	$text-color: #ffffff !global;
	@at-root #{theme(".bivrost-theme-spring")} { @content; }
	
	// #ffffff #f53753
	$skin: "style-skin-autumn" !global;
	//$ui-background: inline-image("#{$skin}/ui-background.png") !global;
	$ui-background: transparentize(#000000, 0.5) !global;
	$text-color: #ffffff !global;
	@at-root #{theme(".bivrost-theme-autumn")} { @content; }
	
	$skin: null !global;;
	$ui-background: null !global;;
	$text-color: null !global;
}



.bivrost-player {
	
	// theme default
	$bivrost-icon-inline: true;
	@import "style-skin-default/bivrost-icon/*.png";
	@include all-bivrost-icon-sprites;
	// theme spring
	&.bivrost-theme-spring {
		@import "style-skin-spring/bivrost-icon/*.png";
		@include all-bivrost-icon-sprites;
	}
	// theme autumn
	&.bivrost-theme-autumn {
		@import "style-skin-autumn/bivrost-icon/*.png";
		@include all-bivrost-icon-sprites;
	}
	
	display: block;
	overflow: hidden;
	position: relative;
		
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
	
	&.bivrost-grabbing {
		cursor: -webkit-grabbing;
		cursor: -moz-grabbing;
		cursor: grabbing;
	}
		
	font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
	font-size: 12px;
	
	canvas {
		position:absolute;
		top:0; left:0; right:0; bottom:0;
	}
	
	&.bivrost-no-ui .bivrost-ui,
	&.bivrost-no-ui .bivrost-bigplay,
	&.bivrost-no-ui .bivrost-logo,
	&.bivrost-no-ui .bivrost-loading {
		display: none !important; 
	}
	
	.bivrost-loading {

		$loading-anim: "#{$common}/bivrost-loading-anim.png";
		
		position: absolute;
		display: block;
		width: 50%;
		height: 50%;
		top: 0;
		left: 0;

		opacity: 1;
		-webkit-transition: opacity .5s; 
		transition: opacity .5s; 
		
		@keyframes bivrost-logo-anim {
			100% { background-position-y: image-height($loading-anim)*-1; }
		}

		div {
			$frames: 8;
			position: absolute;
			display: block;
			background: inline-image($loading-anim);
			width: image-width($loading-anim);
			height: image-height($loading-anim) / $frames;
			bottom: image-width($loading-anim)/-2;
			right: image-width($loading-anim)/-2;
			animation: bivrost-logo-anim 1s steps($frames) infinite;
		}
		
		&.bivrost-hidden { /*display: none;*/ opacity: 0; }
		
	}
	
	
	.bivrost-ui {
		position: absolute;
		left: 0;
		right: 0;
		height: $ui-height;
		@include themed {
			background: $ui-background;
		}
		cursor: default;

		bottom: 0;
		display: block;
		
		-webkit-transition: bottom $transition-time;
		transition: bottom $transition-time;
	
		input[type="range"]::-webkit-slider-thumb { 
			-webkit-transition: opacity 1s, background-size 1s; 
			transition: opacity 1s, background-size 1s; 
		}
		input[type="range"]::-moz-range-thumb { transition: opacity 1s, background-size 1s; }
		/*input[type="range"]::-ms-thumb { transition: opacity 1s, background-size 1s; }*/
		
		.bivrost-aligned {
			position: absolute;
			display: block;
			top: 0px;
			bottom: 0px;
		}
		.bivrost-left-aligned { left: 0px; }
		.bivrost-right-aligned { right: $button-margin; }
		
		
		.bivrost-button,
		.bivrost-status {
			position: relative;
			$h: bivrost-icon-sprite-height(back);
			$w: bivrost-icon-sprite-width(back);
			height: $h;
			display: inline-block;
			@include themed {
				color: $text-color;
			}
			margin: ($ui-height - $h)/2 0 0 $button-margin;
			
			line-height: $h;
			vertical-align: middle;
		}
		
		.bivrost-button {
			cursor: pointer;
			$w: bivrost-icon-sprite-width(back);
			width: $w;
		}
		
		
		.bivrost-volume {
			height: 88+22px;
			width: 36px;
			@include themed {
				background: inline-image("#{$skin}/bivrost-volume-background.png") top left no-repeat;
			}
			position: absolute;
			left: 0px;
			bottom: 36px;
			
			.bivrost-volume-tick {
				width: 36px;
				height: 7px;
				cursor: pointer;
				
				@include themed {
					&.bivrost-volume-tick-on { background: inline-image("#{$skin}/bivrost-volume-on.png") top left no-repeat; }
					&.bivrost-volume-tick-off { background: inline-image("#{$skin}/bivrost-volume-off.png") top left no-repeat; }
				}
				
				&:first-child { margin-top: 17px; }
			}
			
			
			-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
			-ms-transition: -ms-transform 0.5s, opacity 0.5s;
			transition: transform 0.5s, opacity 0.5s;
			
			-ms-transform-origin: 50% 130%;
			-webkit-transform-origin: 50% 130%;
			transform-origin: 50% 130%;
		
			&.bivrost-hidden { transform: scale(0); opacity: 0; }
		}
		
		
		.bivrost-range-background {			
			position: absolute;
			height: $range-size;
			@include themed {
				background: inline-image("#{$skin}/bivrost-range-background.png") repeat-x;
			}
			top: -$range-size / 2;
			left: 0px;
			right: 0px;
			
			.bivrost-range-foreground {
				top: 0px;
				left: 0px;
				bottom: 0px;
				height: 100%;
				width: 0%;
				@include themed {
					background: inline-image("#{$skin}/bivrost-range-foreground.png") repeat-x;
				}
			}
		}
		

		input[type="range"] {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			-webkit-appearance: none;
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
			width: 100%;
			height: $range-size;
			margin: 0;
			padding: 0;
			border: none;
			border-radius: 0px;
			background: transparent;
			/*box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;*/
			/*-webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;*/
			outline: none; /* no focus outline */
			
			&::-moz-range-track {
				border: inherit;
				background: transparent;
			}
			
			&::-ms-track {
				border: inherit;
				color: transparent; /* don't drawn vertical reference line */
				background: transparent;
			}
			
			&::-ms-fill-lower,
			&::-ms-fill-upper {
				background: transparent;
			}
			
			&::-ms-tooltip  {
				display: none;
			}
			
		}

		/* thumb */
		input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
			width: $range-size;
			height: $range-size;
			border: none;
			@include themed {
				background: inline-image("#{$skin}/bivrost-range-thumb.png") no-repeat center center;
			}
		}
		input[type="range"]::-moz-range-thumb {
			width: $range-size;
			height: $range-size;
			border: none;
			@include themed {
				background: inline-image("#{$skin}/bivrost-range-thumb.png") no-repeat center center;
			}
		}

		input[type="range"]::-ms-thumb {
			width: $range-size;
			height: $range-size;
			border: 0;
			@include themed {
				background: inline-image("#{$skin}/bivrost-range-thumb.png") no-repeat center center;
			}
			/*background: red;*/
		}
		
		
		&.bivrost-ui-stereo {
			$btn-margin: 6px;
			
			background: transparent;
			text-align: center;
			height: auto;
			padding-bottom: 16px;

			.bivrost-button-holder {
				@include themed {
					background: rgba($ui-background, 1.0);	// no alpha
				}
				display: inline-block;
				border-radius: 100%;
			}
			
			.bivrost-button {
				margin: $btn-margin;
			}
			
			&.bivrost-ui-stereo-vertical {
				text-align: left;
				top: 50%;
				padding-bottom: 0px;
				padding-left: 16px;

				.bivrost-button-holder {
					position: relative;
					transform: translateY(-50%);
				}
			}
		}

	}

	
	&.bivrost-hide-ui .bivrost-ui {
		bottom: - $ui-height;

		input[type="range"]::-webkit-slider-thumb { opacity: 0; background-size: 0 0; }
		input[type="range"]::-moz-range-thumb { opacity: 0; background-size: 0 0;  }
		input[type="range"]::-ms-thumb { opacity: 0; background-size: 0 0; }
	}
	
	
	.bivrost-logo {
		$logo: "#{$common}/bivrost-logo.png";
		position: absolute;
		top: 8px;
		right: 8px;
		width: image-width($logo);
		height: image-height($logo);
		background: inline-image($logo) center center no-repeat;
		transition: transform $transition-time, filter $transition-time, opacity $transition-time;
		-webkit-transition: -webkit-transform $transition-time, -webkit-filter $transition-time, opacity $transition-time;
		-webkit-transform-origin: 100% 0%;
		-webkit-filter: grayscale(0);
		transform: scale(0.5);
		transform-origin: 100% 0%;
		filter: grayscale(0);
		opacity: 1;
		cursor: pointer;
	}
	&.bivrost-hide-ui .bivrost-logo {
		-webkit-transform: scale(0.333);
		-webkit-filter: grayscale(1);
		transform: scale(0.333);
		filter: grayscale(1);
		opacity: 0.75;
	}
	
	
	.bivrost-bigplay {
		$playBig: "#{$common}/play-big.png";
		background: inline-image($playBig) no-repeat center center;
		cursor: pointer;
		position: absolute;
		width: image-width($playBig);
		height: image-height($playBig);
		left: 50%;
		top: 50%;
		margin-left: image-width($playBig)/-2;
		margin-top: image-height($playBig)/-2;
		
		&.bivrost-hidden {
			display: none;
		}
	}

	
	
	&:-webkit-full-screen {
		position: fixed;
		width: 100% !important;
		height: 100% !important;
		top: 0;
		background: none;
	}
	&:-ms-fullscreen {
		position: fixed;
		width: 100% !important;
		height: 100% !important;
		top: 0;
		background: none;
	}
	&.bivrost-ios-fullscreen {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
}


