<!--  
Music player with hidden controls

Little tribute to one of my favourite albums
http://digital.berryweight.com/album/music-for-imaginary-movies

Streaming via Soundcloud
-->

<section class="wrapper">

	<article class="music-container">

		<div class="controls">
			<input type="radio" name="controls" id="btn-play">
			<label for="btn-play" class="lbl-btn-play"><span></span></label>

			<input type="radio" name="controls" id="btn-pause">
			<label for="btn-pause" class="lbl-btn-pause"><span></span></label>

			<label class="lbl-btn-reset"><span></span></label>
		</div>

		<div class="cover">
			<div class="static-card">
				<img src="http://f1.bcbits.com/img/a1312167393_16.jpg" alt="">
			</div>
			<div class="flip-card">
				<img src="http://f1.bcbits.com/img/a1312167393_16.jpg" alt="">
			</div>
		</div>
	</article>

	<p class="info">Hover/Click on album cover to show controls</p>

</section>

@import "compass";

$animtime: .5s;
$ease: cubic-bezier(.45,0,.55,1);

html {
	width: 100%;
	height: 100%;
}
body {
	width: 100%;
	 height: 100%;
	background-color: #76736e;
	@include filter-gradient(#76736e, #323230, horizontal);
	@include background-image(radial-gradient(center, ellipse cover,  #76736e 1%,#323230 100%));

}

.wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.music-container {
	display: flex;
	position: relative;
	width: 400px;
	height: 400px;
	box-shadow: 0px 40px 26px -10px rgba(0,0,0,0.49);

	.flip-card {
		transform: rotateY(0);
	}

	.no-touch &:hover,
	&.is-hovering {
		.flip-card {
			transform: rotateY(-60deg);
		}
	}
}

.cover {
	position: absolute;
	width: 100%;
	height: 100%;
	perspective-origin: 50% 50%;
	perspective: 1200px;
	pointer-events: none;


	img{
		height: 100%;
	}

	.flip-card,
	.static-card {
		position: absolute;
		width: 50%;
		height: calc(100% - 14px);
		overflow: hidden;
		border: 7px solid #fff;
	}

	.static-card {
		border-right: none;
	}

	.flip-card {
		border-left: none;
		margin-left: 50%;
		transform-origin: 0% 50%;
		transition: transform $animtime $ease;


		&:before {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			top:0;
			right: -20px;
			box-shadow: 29px 0px 52px 6px rgba(186,186,186,1);
		}

		img {
			position: absolute;
			background-color: #fff;
			right: 0;
		}
	}

}

.controls {
    position: absolute;
    right: 0;
    width: 20%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;

	&:after {
		position: absolute;
		content: '';
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
	    box-shadow: inset 20px 0px 37px -10px rgba(0,0,0,0.75);
	    pointer-events: none;
	    transition: width $animtime $ease;
	}

    input[type="radio"] {
    	position: absolute;
    	left:-1000px;
    }

    label {
	    flex-grow: 1;
    	display: block;
    	width: 100%;
		  border-top: 1px #e6e6e6 solid;
	  	border-bottom: 1px #9c9c9c solid;
	    box-sizing: border-box;
	    cursor: pointer;
			background-color: #dcdcdc;
			@include filter-gradient(#dcdcdc, #f8f8f6, horizontal);
			@include background-image(linear-gradient(left bottom, #dcdcdc 0%,#f8f8f6 100%));


    	span {
			background-repeat: no-repeat;
		    background-position: 16px 42px;
		    width: 80px;
		    height: 125px;
    		display: block;
    		pointer-events: none;
    	}
    }

    input:checked+label,
		label:active {
    	background-color: #BCBCBC; // Old browsers
			@include filter-gradient(#d5d5d5, #f8f8f6, vertical); // IE6-9
			@include background-image(linear-gradient(top, #d5d5d5 0%,#f8f8f6 100%));
			box-shadow: inset 0px 0px 10px 5px rgba(120,120,120,0.2);
			border: 1px solid #fff;
    }

    .lbl-btn-play span {
			background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABP0lEQVRoQ+2YwW3DMAxFX4ZNT7knE7QrNB0iWSKZIZ2g9/aYS4oPxECPpUSKFkCdZEAW+Pit729vmHxsJq+fAshWsBQoBTo7UI9QZwO7by8FgBOwA76629mwgYcCD+AbOABHQNfDhhfAUvAFeAFuowi8AVT3HXgDXp/zUJYIgKVgqbAFrpEEkQCqW+dB52IP/ESARAMsNcuh5FRnb4hRAEvdAnC13NEAAnG13AwAV8vNBHCx3GyAbstdC0Cz5a4JoMlyC8Axfeqt/f5Mtf9+a69FgebclA2g5KrUqvSquXlkAujbQWn101z1nxsyABQllE4/PM7PaIBpw9y0cbrJGi1nIvIRarbGbIBua8wEcLHGDABXaxwNMP2vRUvD3Nd6uJB7UZYNC8DSrYi1pUBEVy17lgKWbkWsLQUiumrZ8xeQiV4xsW8UvQAAAABJRU5ErkJggg==");
    }
    .lbl-btn-pause span {
			background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAsElEQVRoQ+2YSw6AIAxEh9vqifS2utAF0YgtpBCS57raz0wHxqTJnzR5/aKB0QiCAAg0TgAKNQ6w+fUaBI5C1lXS/lPVImkrxLhqcgXfSWkABDL+QaHHMrLEku+CCYWg0PtEc7HCFcxBdk2Aq0TOOiiECqFCfk+EH8AP4Ae+9wY/gB8wqCoyiowio8jo2J+7BqHqF1LjyPpVZ8hEA4YhhYaAQOh4DR8HAcOQQkOmR+AEspRaMYlt9skAAAAASUVORK5CYII=");
    }
    .lbl-btn-reset span {
			background-size: 42px 42px;
			background-position: 22px 42px;
			background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEAklEQVRoQ+3Zd+i2YxQH8M9rlZVSJJEyQmZSZiS7SJS9MqKQlS1EKCt7lKJk/sEfkhEZ2SN7ZKSsvyQze/V9u5+3n7vrfu7xPK+3X/3On899ru853+uc61znXM88s1zmzXL/zRFY1BGci8Bsj8C62BXbYH2shuUqUj/gM7yP5/EwPp824SEptAQOxgnYvIdD/1RErsf9+KvH2kbVvgT2wLVYc0Lj7+AkPDUhTucyuixuwmGTGpyxPhG5Dmfg96G4XSKwCh7FJkONtKx7Bnvj2yH4bQTi/LNYuyP43/iJ+ZHNYW7DH8G+hp3wfUc7C9TGGVimOnSbtoC+hLvxND6ckQ5LY0PsiEOwQQvO49i97+EeR+A2HDHG6Ks4pSLZZeP2xFVYZ4zyRbigC9hIp4lAdiJ1u0kuxfl9dwuJaorB4Q3Af1al+a2uJEoEFscHY3bq+MqJrjZKepfj9AaAJ7BzV/ASgVxSdzYAZOfP7Qreoncf9mvQ2RovdrFTIpBDuUVhcSrFlgPSpsmPFao2Y9WCQjbw0CEEUi4/bli4bY8D28V2dI7GrQXlH7ESfmsDqkcg+X1DYVGislUb2IDvS+HLytn68pyDnIexUieQen5gYcWJSBO2MOQWHFsAPg8XtxmsE3gDpYtrI7zbBjbw+wG4p7A2vx3Uhlkn8A1WrC1K25tb9Y82sJbv22PJgk4uttwNdcldcHLh91+RlJ4vdQLpCutG0mTVSQ3hsj/uQu6ZoZIONlG5d1EQiM3cMXdgsYEMzkQuwQXyf6bQyGjaiPRZfUkkzVIl/yNdD/HGyBQ1LTmqqv9d2+0HsU/pEu1aRjP+ZXqapqR03txhZngFO+DnkvE6geNwY0Hx5aqNmCaBYDVdnCM7n1Z2v24yXCewFj5pUN6ums6mTSKl8uoCaEp6mrqPxhks5eALDW3D61WTl5592nIarpgBmlqfSS6+jJUSgdTZ1OuSXIaz2kAHfj8badczV++LB7rgNA007yGvbiVZmH1Rpry86F3TxfnoNJWxXfDYGJCE+xz0Taflq/bgSvzS1cm+Z2Cknz49/XqTvIlTO76uZaOSFrlF18Aj2GsK/dXYd5s0cM9hs5adyuFO55hnwszSo3qdd6F0senrM13V35YyUua8JecHS9tNuHJFYtxTSN14UiNNV14g2iRRPqZNaWgKjdaFRELeFomhfhyJ24cubovACDfplFEzxqYlmTMuwYWTpFFXAiOnd6t6oj4pVSKc1iT/L+SlYyLpSyDGMpBkbo4DpeeXJodyLp6savxDE3k9Y/EQAjNtp7LkL6Y8uayH1ZFan17/O3yBt2f8xfTVtBwf4UxKYNr+9MabI9B7y6a8YC4CU97Q3nCzPgL/AjMxrTHE4jFOAAAAAElFTkSuQmCC");
    }
}

.info {
	font-style: italic;
	color: #dddd80;
	margin-top: 70px;
}

// DOM
var context = document.querySelector('.music-container');
var controls = document.querySelector('.controls');

//CONST
var CLIENTID = 'd438c4a17e1716c6db0c5fbefc2c8876';

// VARS
var audioPlayer;

// Init Soundcloud Widget
SC.initialize({
	client_id: CLIENTID,
	redirectURI: 'http://localhost:9001'
});

SC.stream('tracks/1326276').then(function(player) {
	audioPlayer = player;
	init();
});

function toggleHover() {
	context.classList.toggle('is-hovering');
}

// FN
function handleControlsClick(e) {
	var trgt = e.target;
	if (trgt.nodeName !== 'LABEL' && !audioPlayer) {
		return;
	}

	switch (trgt.className) {
		case 'lbl-btn-play':
			audioPlayer.play();
			break;
		case 'lbl-btn-pause':
			audioPlayer.pause();
			break;
		case 'lbl-btn-reset':
			audioPlayer.seek(0);
			audioPlayer.play();
			break;
		default:
			return false;
	}
}

function init() {
	context.classList.add('is-hovering');

	setTimeout(function() {
		controls.querySelector('input#btn-play').checked = true;
		audioPlayer.play();
	}, 1000);
	setTimeout(function() {
		context.classList.remove('is-hovering');
	}, 4000);

	controls.addEventListener('click', handleControlsClick);

	if (Modernizr.touch) {
		context.addEventListener('click', toggleHover);
	}
}