Prepare for future minimized version of player

panikweb_templates/static/css/specifics.css

@@ -372,6 +372,16 @@ background-color:#ff6633; border-color:#fff;}
 #player-container.normal #player{
 	padding:5%;
 }
+#player-container.minimized{
+	width:auto;
+	border-width:0px 2px 2px 0 !important;
+	border-bottom-right-radius:1em;
+	-moz-border-bottom-right-radius:1em;
+	-webkit-border-bottom-right-radius:1em;
+}
+#player-container.minimized #player{
+	padding:0;
+}
 
 /*Playlist*/
 #Playlist{

panikweb_templates/static/js/specifics.js

@@ -100,6 +100,24 @@ $(function() {
 
 	var timer = null, 
 	interval = 5000;
+	/*
+	//TODO: mini icon version for player, (playpause only)
+	$('#togglePlayer').on('click',function(e) {
+		e.preventDefault();
+		if($(this).is('.icon-double-angle-left')){
+			$("#player").fadeOut('fast',function(){
+				$("#player-container").toggleClass('minimized');			
+				$('#togglePlayer').toggleClass('icon-double-angle-left icon-double-angle-right');
+			});			
+		}else{
+			$("#player").fadeIn('fast',function(){
+				$("#player-container").toggleClass('minimized');			
+				$('#togglePlayer').toggleClass('icon-double-angle-left icon-double-angle-right');
+			});	
+		}
+		return false;
+	});
+	*/
 	$('#WhatsOnAir').on('load',function(){
 		var WhatsOnAir = $(this);
 		$.getJSON('/onair.json', function(onair) {

panikweb_templates/templates/includes/player.html

 
 <div id="player-container" class="normal cf">
+	<button id="togglePlayer" class="hidden left huge icon-double-angle-left "></button>
 	<div id="player" class="wrapper cf">
 		<div id="audioPlayer" class="cf">
 			<div class="padded cf">