From ccbe4f1998a86aec30be5971d3336d6774cff35e Mon Sep 17 00:00:00 2001
From: Naomi Aro <naomiaro@gmail.com>
Date: Thu, 17 May 2012 16:20:40 +0200
Subject: [PATCH 1/3] CC-3420 : Custom UI for jplayer from CC-3395

creating new stylesheet for our audio previews based from jplayer blue monday.
---
 .../controllers/AudiopreviewController.php    |   6 +-
 .../scripts/audiopreview/audio-preview.phtml  |  61 +-
 .../skin/jplayer.airtime.audio.preview.css    | 521 ++++++++++++++++++
 3 files changed, 561 insertions(+), 27 deletions(-)
 create mode 100644 airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css

diff --git a/airtime_mvc/application/controllers/AudiopreviewController.php b/airtime_mvc/application/controllers/AudiopreviewController.php
index efb14b7e4..4aaf07ee5 100644
--- a/airtime_mvc/application/controllers/AudiopreviewController.php
+++ b/airtime_mvc/application/controllers/AudiopreviewController.php
@@ -32,7 +32,7 @@ class AudiopreviewController extends Zend_Controller_Action
 
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/audiopreview/preview_jplayer.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/jplayer.playlist.min.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
-        $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css?'.$CC_CONFIG['airtime_version']);
+        $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.airtime.audio.preview.css?'.$CC_CONFIG['airtime_version']);
         $this->_helper->layout->setLayout('audioPlayer');
 
         $logo = Application_Model_Preference::GetStationLogo();
@@ -66,7 +66,7 @@ class AudiopreviewController extends Zend_Controller_Action
 
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/audiopreview/preview_jplayer.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/jplayer.playlist.min.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
-        $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css?'.$CC_CONFIG['airtime_version']);
+        $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.airtime.audio.preview.css?'.$CC_CONFIG['airtime_version']);
         $this->_helper->layout->setLayout('audioPlayer');
 
         $logo = Application_Model_Preference::GetStationLogo();
@@ -137,7 +137,7 @@ class AudiopreviewController extends Zend_Controller_Action
 
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/audiopreview/preview_jplayer.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/jplayer.playlist.min.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
-        $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css?'.$CC_CONFIG['airtime_version']);
+        $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.airtime.audio.preview.css?'.$CC_CONFIG['airtime_version']);
         $this->_helper->layout->setLayout('audioPlayer');
 
         $logo = Application_Model_Preference::GetStationLogo();
diff --git a/airtime_mvc/application/views/scripts/audiopreview/audio-preview.phtml b/airtime_mvc/application/views/scripts/audiopreview/audio-preview.phtml
index 8eae5cb58..d5d1b2dc4 100644
--- a/airtime_mvc/application/views/scripts/audiopreview/audio-preview.phtml
+++ b/airtime_mvc/application/views/scripts/audiopreview/audio-preview.phtml
@@ -1,6 +1,5 @@
 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
 <div id="jp_container_1" class="jp-audio">
-<span class='testing'></span>
 <?php if (isset($this->playlistID)): ?>
     <span class='playlistID'><?php echo "$this->playlistID" ?></span>
     <span class='playlistIndex'><?php echo "$this->playlistIndex" ?></span>
@@ -15,33 +14,47 @@
     <div class="jp-type-playlist">
         <div class="jp-gui jp-interface">
             <ul class="jp-controls">
-                <li><a href="" class="jp-previous" tabindex="1">previous</a></li>
-                <li><a href="" class="jp-play" tabindex="1">play</a></li>
-                <li><a href="" class="jp-pause" tabindex="1">pause</a></li>
-                <li><a href="" class="jp-next" tabindex="1">next</a></li>
-                <li><a href="" class="jp-stop" tabindex="1">stop</a></li>
-                <li><a href="" class="jp-mute" tabindex="1" title="mute">mute</a></li>
-                <li><a href="" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
-                <li><a href="" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
+                <li class="ui-state-default ui-corner-all jp-previous">
+                    <span class="ui-icon ui-icon-seek-prev" tabindex="1">previous</span>
+                </li>
+                <li class="ui-state-default ui-corner-all jp-play">
+                    <span class="ui-icon ui-icon-play" tabindex="1">play</span>
+                </li>
+                <li class="ui-state-default ui-corner-all jp-pause">
+                    <span class="ui-icon ui-icon-pause" tabindex="1">pause</span>
+                </li>
+                <li class="ui-state-default ui-corner-all jp-next">
+                    <span class="ui-icon ui-icon-seek-next" tabindex="1">next</span>
+                </li>
+                <li class="ui-state-default ui-corner-all jp-stop">
+                    <span class="ui-icon ui-icon-stop" tabindex="1">stop</span>
+                </li>
             </ul>
-            <div class="jp-progress">
-                <div class="jp-seek-bar">
-                    <div class="jp-play-bar"></div>
+            <div class="jp-time-block">
+                <div class="jp-progress">
+                    <div class="jp-seek-bar">
+                        <div class="jp-play-bar"></div>
+                    </div>
+                </div>
+                <div class="jp-time-holder">
+                    <div class="jp-current-time"></div>
+                    <div class="jp-duration"></div>
                 </div>
             </div>
-            <div class="jp-volume-bar">
-                <div class="jp-volume-bar-value"></div>
+            <div class="jp-volume-block">
+                <div class="jp-mute">
+                    <span class="ui-icon" tabindex="1" title="mute">mute</span>
+                </div>
+                <div class="jp-unmute">
+                    <span class="ui-icon" tabindex="1" title="unmute">unmute</span>
+                </div> 
+                <div class="jp-volume-bar">
+                    <div class="jp-volume-bar-value"></div>
+                </div>
+                <div class="jp-volume-max">
+                    <span class="ui-icon" tabindex="1" title="max volume">max volume</span>
+                </div>
             </div>
-            <div class="jp-time-holder">
-                <div class="jp-current-time"></div>
-                <div class="jp-duration"></div>
-            </div>
-            <ul class="jp-toggles">
-                <li><a href="" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
-                <li><a href="" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
-                <li><a href="" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
-                <li><a href="" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
-            </ul>
         </div>
         <div class="jp-playlist">
             <ul>
diff --git a/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css b/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css
new file mode 100644
index 000000000..9fca01d98
--- /dev/null
+++ b/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css
@@ -0,0 +1,521 @@
+@CHARSET "UTF-8";
+
+/* Used to hide non-ui fields **/
+span.audioFileID {
+    display:none; 
+}
+span.audioFileTitle {
+    display:none; 
+}
+span.audioFileArtist {
+    display:none; 
+}
+span.playlistID {
+    display:none; 
+}
+span.playlistIndex {
+    display:none; 
+}
+span.showID {
+    display:none; 
+}
+span.showIndex {
+    display:none; 
+}
+
+div.jp-audio,
+div.jp-video {
+
+	/* Edit the font-size to counteract inherited font sizing.
+	 * Eg. 1.25em = 1 / 0.8em
+	 */
+
+	font-size:1em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */
+
+	font-family:Verdana, Arial, sans-serif;
+	line-height:1.6;
+	color: #666;
+	border:1px solid #009be3;
+	background-color:#eee;
+	position:relative;
+}
+
+div.jp-audio {
+	width:420px;
+}
+div.jp-video-270p {
+	width:480px;
+}
+div.jp-video-360p {
+	width:640px;
+}
+
+div.jp-interface {
+	position: relative;
+    background-color: #3D3D3D;
+    background: -moz-linear-gradient(top, #6E6E6E 0, #3a3a3a 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6E6E6E), color-stop(100%, #3a3a3a));
+    width: 100%;
+    border-top: 1px solid #5a5a5a;
+    border-bottom: 1px solid #1a1a1a;
+}
+
+div.jp-audio div.jp-type-single div.jp-interface {
+	height:80px;
+}
+div.jp-audio div.jp-type-playlist div.jp-interface {
+	height:80px;
+}
+
+/* @group CONTROLS */
+
+div.jp-interface ul.jp-controls {
+	float: left;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    position: relative;
+    top: 30px;
+    left: 10px;
+}
+
+div.jp-interface ul.jp-controls li {
+	list-style-type: none;
+    float: left;
+    padding: 1px 2px;
+    margin-right: 5px;
+}
+
+div.jp-interface ul.jp-controls li.jp-play,
+div.jp-interface ul.jp-controls li.jp-pause {
+	padding: 6px 7px;
+	margin-top: -5px;
+}
+
+div.jp-mute span {
+    background: url("jplayer.png") 0 -90px no-repeat;
+}
+div.jp-mute span:hover {
+    background: url("jplayer.png") -30px -90px no-repeat;
+}
+
+div.jp-unmute span {
+    background: url("jplayer.png") -60px -90px no-repeat;
+}
+div.jp-unmute span:hover {
+    background: url("jplayer.png") -90px -90px no-repeat;
+}
+
+div.jp-volume-max span {
+    background: url("jplayer.png") 0 -112px no-repeat;
+}
+div.jp-volume-max span:hover {
+    background: url("jplayer.png") -30px -112px no-repeat;
+}
+
+
+/* @end */
+
+/* @group progress bar */
+
+div.jp-time-block {
+	position: absolute;
+    top: 32px;
+    left: 145px;
+}
+
+div.jp-progress {
+	overflow:hidden;
+	background-color: #ddd;
+}
+div.jp-audio div.jp-progress {
+	height: 10px;
+	border-color: #262526 #262526 #5E5E5E;
+    border-style: solid;
+    border-width: 1px;
+}
+/*
+div.jp-audio div.jp-type-single div.jp-progress {
+	left:110px;
+	width:186px;
+}
+*/
+div.jp-audio div.jp-type-playlist div.jp-progress {
+	width: 170px;
+}
+
+div.jp-seek-bar {
+	background-color: #393939;
+	width:0px;
+	height:100%;
+	cursor: pointer;
+}
+div.jp-play-bar {
+	background-color: #FF6F01;
+	width:0px;
+	height:100%;
+}
+
+/* The seeking class is added/removed inside jPlayer */
+div.jp-seeking-bg {
+	background: url("pbar-ani.gif");
+}
+
+/* @end */
+
+/* @group volume controls */
+
+li.jp-mute,
+li.jp-unmute,
+li.jp-volume-max {
+    margin-top: 2px;
+}
+
+div.jp-mute span,
+div.jp-unmute span,
+div.jp-volume-max span{
+	width: 17px;
+	height: 16px;
+}
+
+/*
+div.jp-audio div.jp-type-single a.jp-mute,
+div.jp-audio div.jp-type-single a.jp-unmute {
+	margin-left: 210px;	
+}
+*/
+
+div.jp-volume-block {
+	position: absolute;
+	top: 35px;
+    left: 350px;
+    width: 120px;
+}
+
+div.jp-mute,
+div.jp-unmute,
+div.jp-volume-bar,
+div.jp-volume-max {
+	float: left;
+	cursor: pointer;
+}
+
+div.jp-volume-bar {
+	position: absolute;
+	overflow:hidden;
+	background-color: #393939;
+	width: 50px;
+	height:5px;
+	cursor: pointer;
+	margin-left: 20px;
+	margin-top: 2px;
+}
+div.jp-audio div.jp-volume-bar {
+	border-color: #262526 #262526 #5E5E5E;
+    border-style: solid;
+    border-width: 1px;
+}
+
+div.jp-volume-bar-value {
+	background-color: #FF6F01;
+	width:0px;
+	height:5px;
+}
+
+div.jp-volume-max {
+	margin-left: 60px;
+}
+
+/* @end */
+
+/* @group current time and duration */
+
+div.jp-current-time,
+div.jp-duration {
+	width: 60px;
+	font-size: 1em;
+	font-family: Arial,Helvetica,sans-serif;
+}
+div.jp-current-time {
+	float: left;
+	display: inline;
+	color: #FF6F01;
+}
+div.jp-duration {
+	float: right;
+	display: inline;
+	text-align: right;
+	color: #9B9B9B;
+}
+
+/* @end */
+
+/* @group playlist */
+
+div.jp-title {
+	font-weight:bold;
+	text-align:center;
+}
+
+div.jp-title,
+div.jp-playlist {
+	width:100%;
+	background-color:#ccc;
+	border-top:1px solid #009be3;
+}
+div.jp-type-single div.jp-title,
+div.jp-type-playlist div.jp-title,
+div.jp-type-single div.jp-playlist {
+	border-top:none;
+}
+div.jp-title ul,
+div.jp-playlist ul {
+	list-style-type:none;
+	margin:0;
+	padding:0 20px;
+	font-size:.72em;
+}
+
+div.jp-title li {
+	padding:5px 0;
+	font-weight:bold;
+}
+div.jp-playlist li {
+	padding:5px 0 4px 20px;
+	border-bottom:1px solid #eee;
+}
+
+div.jp-playlist li div {
+	display:inline;
+}
+
+/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */
+
+div.jp-type-playlist div.jp-playlist li:last-child {
+	padding:5px 0 5px 20px;
+	border-bottom:none;
+}
+div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
+	list-style-type:square;
+	list-style-position:inside;
+	padding-left:7px;
+}
+div.jp-type-playlist div.jp-playlist a {
+	color: #333;
+	text-decoration: none;
+}
+div.jp-type-playlist div.jp-playlist a:hover {
+	color:#0d88c1;
+}
+div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
+	color:#0d88c1;
+}
+
+div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
+	float:right;
+	display:inline;
+	text-align:right;
+	margin-right:10px;
+	font-weight:bold;
+	color:#666;
+}
+div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
+	color:#0d88c1;
+}
+div.jp-type-playlist div.jp-playlist span.jp-free-media {
+	float:right;
+	display:inline;
+	text-align:right;
+	margin-right:10px;
+}
+div.jp-type-playlist div.jp-playlist span.jp-free-media a{
+	color:#666;
+}
+div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
+	color:#0d88c1;
+}
+span.jp-artist {
+	font-size:.8em;
+	color:#666;
+}
+
+/* @end */
+
+div.jp-video-play {
+	position:absolute;
+	top:0;
+	left:0;
+	width:100%;
+	cursor:pointer;
+	background-color:rgba(0,0,0,0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
+}
+div.jp-video-270p div.jp-video-play {
+	height:270px;
+}
+div.jp-video-360p div.jp-video-play {
+	height:360px;
+}
+div.jp-video-full div.jp-video-play {
+	height:100%;
+	z-index:1000;
+}
+a.jp-video-play-icon {
+	position:relative;
+	display:block;
+	width: 112px;
+	height: 100px;
+
+	margin-left:-56px;
+	margin-top:-50px;
+	left:50%;
+	top:50%;
+
+	background: url("jplayer.blue.monday.video.play.png") 0 0 no-repeat;
+	text-indent:-9999px;
+}
+div.jp-video-play:hover a.jp-video-play-icon {
+	background: url("jplayer.blue.monday.video.play.png") 0 -100px no-repeat;
+}
+
+
+
+
+
+div.jp-jplayer audio,
+div.jp-jplayer {
+	width:0px;
+	height:0px;
+}
+
+div.jp-jplayer {
+	background-color: #000000;
+}
+
+
+
+
+
+/* @group TOGGLES */
+
+/* The audio toggles are nested inside jp-time-holder */
+
+ul.jp-toggles {
+	list-style-type:none;
+	padding:0;
+	margin:0 auto;
+	overflow:hidden;
+}
+
+div.jp-audio .jp-type-single ul.jp-toggles {
+	width:25px;
+}
+div.jp-audio .jp-type-playlist ul.jp-toggles {
+	width:55px;
+	margin: 0;
+	position: absolute;
+	left: 325px;
+	top: 50px;
+}
+
+div.jp-video ul.jp-toggles {
+	margin-top:10px;
+	width:100px;
+}
+
+ul.jp-toggles li {
+	display:block;
+	float:right;
+}
+
+ul.jp-toggles li a {
+	display:block;
+	width:25px;
+	height:18px;
+	text-indent:-9999px;
+	line-height:100%; /* need this for IE6 */
+}
+
+a.jp-full-screen {
+	background: url("jplayer.blue.monday.jpg") 0 -310px no-repeat;
+	margin-left: 20px;
+}
+
+a.jp-full-screen:hover {
+	background: url("jplayer.blue.monday.jpg") -30px -310px no-repeat;
+}
+
+a.jp-restore-screen {
+	background: url("jplayer.blue.monday.jpg") -60px -310px no-repeat;
+	margin-left: 20px;
+}
+
+a.jp-restore-screen:hover {
+	background: url("jplayer.blue.monday.jpg") -90px -310px no-repeat;
+}
+
+a.jp-repeat {
+	background: url("jplayer.blue.monday.jpg") 0 -290px no-repeat;
+}
+
+a.jp-repeat:hover {
+	background: url("jplayer.blue.monday.jpg") -30px -290px no-repeat;
+}
+
+a.jp-repeat-off {
+	background: url("jplayer.blue.monday.jpg") -60px -290px no-repeat;
+}
+
+a.jp-repeat-off:hover {
+	background: url("jplayer.blue.monday.jpg") -90px -290px no-repeat;
+}
+
+a.jp-shuffle {
+	background: url("jplayer.blue.monday.jpg") 0 -270px no-repeat;
+	margin-left: 5px;
+}
+
+a.jp-shuffle:hover {
+	background: url("jplayer.blue.monday.jpg") -30px -270px no-repeat;
+}
+
+a.jp-shuffle-off {
+	background: url("jplayer.blue.monday.jpg") -60px -270px no-repeat;
+	margin-left: 5px;
+}
+
+a.jp-shuffle-off:hover {
+	background: url("jplayer.blue.monday.jpg") -90px -270px no-repeat;
+}
+
+
+/* @end */
+
+/* @group NO SOLUTION error feedback */
+
+.jp-no-solution {
+	position:absolute;
+	width:390px;
+	margin-left:-202px;
+	left:50%;
+	top: 10px;
+
+	padding:5px;
+	font-size:.8em;
+	background-color:#eee;
+	border:2px solid #009be3;
+	color:#000;
+	display:none;
+}
+
+.jp-no-solution a {
+	color:#000;
+}
+
+.jp-no-solution span {
+	font-size:1em;
+	display:block;
+	text-align:center;
+	font-weight:bold;
+}
+
+/* @end */

From 8abb57c402959cb9be1b7b59cfbe8870b6343951 Mon Sep 17 00:00:00 2001
From: denise <denise@denise-DX4860.(none)>
Date: Thu, 17 May 2012 11:23:24 -0400
Subject: [PATCH 2/3] CC-3842: Next scheduled show gets registered as next
 scheduled song

- removed case where light stays on for first 5 seconds of track
- also removed function calls no longer in use (notifySongStart(), and notifyShowStart())
- removed nowplayingdatagrid.js since it is no longer in use
---
 .../public/js/airtime/dashboard/dashboard.js  |  16 +-
 .../airtime/nowplaying/nowplayingdatagrid.js  | 213 ------------------
 2 files changed, 3 insertions(+), 226 deletions(-)
 delete mode 100644 airtime_mvc/public/js/airtime/nowplaying/nowplayingdatagrid.js

diff --git a/airtime_mvc/public/js/airtime/dashboard/dashboard.js b/airtime_mvc/public/js/airtime/dashboard/dashboard.js
index 759f458a4..7e0770bc0 100644
--- a/airtime_mvc/public/js/airtime/dashboard/dashboard.js
+++ b/airtime_mvc/public/js/airtime/dashboard/dashboard.js
@@ -48,20 +48,12 @@ function secondsTimer(){
 function newSongStart(){
     nextSongPrepare = true;
     currentSong = nextSong;
-    nextSong = null;
-
-    if (typeof notifySongStart == "function")   
-        notifySongStart();
-    
+    nextSong = null;   
 }
 
 function nextShowStart(){
     nextShowPrepare = true;
     currentShow[0] = nextShow.shift();
-
-    //call function in nowplayingdatagrid.js
-    if (typeof notifyShowStart == "function")
-        notifyShowStart(currentShow[0]);
 }
 
 /* Called every "uiUpdateInterval" mseconds. */
@@ -78,18 +70,16 @@ function updateProgressBarValue(){
     $('#progress-show').attr("style", "width:"+showPercentDone+"%");
 
     var songPercentDone = 0;
-    var songElapsedTime = 0;
     var scheduled_play_div = $("#scheduled_play_div");
     var scheduled_play_line_to_switch = scheduled_play_div.parent().find(".line-to-switch");
     
-    if (currentSong !== null){
+    if (currentSong !== null){	
         songPercentDone = (estimatedSchedulePosixTime - currentSong.songStartPosixTime)/currentSong.songLengthMs*100;
-        songElapsedTime = estimatedSchedulePosixTime - currentSong.songStartPosixTime;
         if (songPercentDone < 0 || songPercentDone > 100){
             songPercentDone = 0;        
             currentSong = null;
         } else {
-            if ( (currentSong.media_item_played == true && currentShow.length > 0) || songElapsedTime < 5000 ){
+            if (currentSong.media_item_played == true && currentShow.length > 0) {
                 scheduled_play_line_to_switch.attr("class", "line-to-switch on");
                 scheduled_play_div.addClass("ready");
                 scheduled_play_source = true;
diff --git a/airtime_mvc/public/js/airtime/nowplaying/nowplayingdatagrid.js b/airtime_mvc/public/js/airtime/nowplaying/nowplayingdatagrid.js
deleted file mode 100644
index 2eea84acb..000000000
--- a/airtime_mvc/public/js/airtime/nowplaying/nowplayingdatagrid.js
+++ /dev/null
@@ -1,213 +0,0 @@
-var datagridData = null;
-var currentShowInstanceID = -1;
-
-function getDateText(obj){
-	var str = obj.aData[ obj.iDataColumn ].toString();
-	datetime = str.split(" ");
-    if (datetime.length == 2)
-        return datetime[0];
-	return str;
-}
-
-function getTimeText(obj){
-	var str = obj.aData[ obj.iDataColumn ].toString();
-	datetime = str.split(" ");
-    if (datetime.length == 2)
-        return changeTimePrecision(datetime[1]);
-	return str;
-}
-
-function changeTimePrecisionInit(obj){
-	var str = obj.aData[ obj.iDataColumn ].toString();
-	return changeTimePrecision(str);
-}
-
-function changeTimePrecision(str){
-    
-    var temp = str.split(".")
-    if (temp.length == 2){
-        if (temp[1].length > 2)
-            return temp[0]+"."+temp[1].substr(0, 2);
-    }
-    return str;
-}
-
-function notifySongStart(){
-	for (var i=0; i<datagridData.rows.length; i++){
-		if (datagridData.rows[i][0] == "c")
-			datagridData.rows[i][0] = "p";
-		if (datagridData.rows[i][0] == "n"){
-			datagridData.rows[i][0] = "c";
-			break;
-		}
-	}
-	
-	updateDataTable();
-}
-
-function notifyShowStart(show){
-	currentShowInstanceID = show.instance_id;
-	updateDataTable();
-}
-
-function statusColumn(obj) {
-    var sReturn = obj.aData[ obj.iDataColumn ];
-    if ( sReturn == "x" ) {
-        sReturn = '<img class="info-icon" src="/css/images/icon_overlap.png" width="51" height="15" alt="" />';
-    }
-    
-    return sReturn;
-}
-
-var columns = [{"sTitle": "type", "bVisible":false},
-    {"sTitle":"Date"},
-    {"sTitle":"Start"},
-    {"sTitle":"End"},
-    {"sTitle":"Duration"},
-    {"sTitle":"Title"},
-    {"sTitle":"Creator"},
-    {"sTitle":"Album"},
-    {"sTitle":"Playlist"},
-    {"sTitle":"Show"},
-    {"sTitle":"Status", "fnRender":statusColumn}];
-
-function getDateString(){
-    var date0 = $("#datepicker").datepicker("getDate");
-    return (date0.getFullYear() + "-" + (parseInt(date0.getMonth())+1) + "-" + date0.getDate());
-}
-
-function getAjaxUrl(){
-    var url = "/Nowplaying/get-data-grid-data/format/json/view/"+viewType;
-    
-    if (viewType == "day"){
-      url +=  "/date/" + getDateString();
-    }
-    
-    return url;
-}
-
-function updateDataTable(){
-    var table = $('#nowplayingtable').dataTable();
-
-    //Check if datagridData has been initialized since this update
-    //function can be called before ajax call has been returned.
-    if (datagridData != null){
-        table.fnClearTable(false);
-        table.fnAddData(datagridData.rows, false);
-        table.fnDraw(true);
-    }
-}
-
-function getData(){
-       $.ajax({ url: getAjaxUrl(), dataType:"json", success:function(data){
-		datagridData = data.entries;
-        if (datagridData.currentShow.length > 0)
-            currentShowInstanceID = datagridData.currentShow[0].instance_id;
-        updateDataTable();
-	  }});   
-}
-
-function init2(){	        
-      getData();
-
-      setTimeout(init2, 5000);
-}
-
-function redirect(url){
-    document.location.href = url;
-}
-
-function createDataGrid(){
-    	
-	columns[1]["fnRender"] = getDateText;
-	columns[2]["fnRender"] = getTimeText;
-	columns[3]["fnRender"] = getTimeText;
-	columns[4]["fnRender"] = changeTimePrecisionInit;
-
-	$('#nowplayingtable').dataTable( {
-		"bSort" : false,
-		"bJQueryUI": true,
-		"bFilter": false,
-		"bInfo": false,
-		"bLengthChange": false,
-        "bPaginate": false,
-		"aoColumns": columns,
-		"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
-            //if (aData[aData.length-2] == currentShowInstanceID)
-            //    $(nRow).addClass("playing-list");
-            if (aData[0].indexOf("c") != -1)
-				$(nRow).attr("class", "playing-song");
-			return nRow;
-		},
-        "fnDrawCallback": function(oSettings){
-            //check if there are any rows to display
-            if (oSettings.aiDisplay.length == 0)
-                return;
-
-            var nTrs = $('#nowplayingtable tbody tr');
-            var iColspan = nTrs[0].getElementsByTagName('td').length;
-
-            for (var i=0; i<nTrs.length; i++){
-                
-                var iDisplayIndex = oSettings._iDisplayStart + i;
-                var sType = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex]]._aData[0];
-
-                if ( sType.indexOf("h") != -1 ){
-					//show header row found 
-					
-                    var showName = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex]]._aData[4];
-                    var startTime = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex]]._aData[2];
-                    var endTime = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex]]._aData[3];
-
-                    var nGroup = document.createElement('tr');
-                    var nCell = document.createElement('td');
-                    nCell.colSpan = iColspan;
-                    nCell.className = "group";
-                    nCell.innerHTML = showName + ": " + startTime + " - " + endTime;
-                    nGroup.appendChild(nCell);
-                    nTrs[i].parentNode.replaceChild(nGroup, nTrs[i]);
-                } else if ( sType.indexOf("g") != -1 ){
-                    //gap row found
-                    var gapTime = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex]]._aData[4];
-                    var nGroup = document.createElement('tr');
-                    var nCell = document.createElement('td');
-                    nCell.colSpan = iColspan;
-                    nCell.className = "gap";
-                    nCell.innerHTML = "Gap until show end: " + gapTime;
-                    nGroup.appendChild(nCell);
-                    nTrs[i].parentNode.replaceChild(nGroup, nTrs[i]);                   
-                } else if ( sType.indexOf("r") != -1 ){
-                    //gap row found
-                    var showName = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex]]._aData[4];
-                    
-                    var nGroup = document.createElement('tr');
-                    var nCell = document.createElement('td');
-                    nCell.colSpan = iColspan;
-                    nCell.className = "record";
-                    nCell.innerHTML = "Recording show \"" + showName + "\"";
-                    nGroup.appendChild(nCell);
-                    nTrs[i].parentNode.replaceChild(nGroup, nTrs[i]);                   
-                }
-            }
-            
-        },
-        "bAutoWidth":false
-	} );
-}
-
-$(document).ready(function() {
-    
-    createDataGrid();
-    if (viewType == "day"){
-        $('#now_view').click(function(){redirect('/Nowplaying/index')});
-        
-        $("#datepicker").datepicker({
-            onSelect: function(dateText, inst) 
-                { getData();}});
-        $("#datepicker").datepicker("setDate", adjustDateToServerDate(new Date(), timezoneOffset));
-    } else {
-        $('#day_view').click(function(){redirect('/Nowplaying/day-view')});
-    }
-
-    init2();
-});

From 45ef2af142d05c1487ef94edb0223a2aeb2df219 Mon Sep 17 00:00:00 2001
From: Naomi Aro <naomiaro@gmail.com>
Date: Thu, 17 May 2012 17:53:01 +0200
Subject: [PATCH 3/3] CC-3420 : Custom UI for jplayer from CC-3395

---
 .../airtime/audiopreview/preview_jplayer.js   |  12 +-
 .../skin/jplayer.airtime.audio.preview.css    | 183 ++----------------
 2 files changed, 25 insertions(+), 170 deletions(-)

diff --git a/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js b/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js
index cfcbe2c86..71f053a8f 100644
--- a/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js
+++ b/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js
@@ -50,6 +50,14 @@ $(document).ready(function(){
     }else if (showID != "") {
         playAllShow(showID, showIndex);
     }
+    
+    $("#jp_container_1").on("mouseenter", "ul.jp-controls li", function(ev) {
+    	$(this).addClass("ui-state-hover");
+    });
+    
+    $("#jp_container_1").on("mouseleave", "ul.jp-controls li", function(ev) {
+    	$(this).removeClass("ui-state-hover");
+    });
 });
 
 /**
@@ -124,7 +132,7 @@ function buildplaylist(p_url, p_playIndex) {
         _playlist_jplayer.option("autoPlay", true);
         play(p_playIndex);
         
-        var height = Math.min(80 + (23 * total), 400);
+        var height = Math.min(90 + (26 * total), 400);
         window.innerWidth = 500;
         window.innerHeight = height;
         window.scrollbars = true;
@@ -171,5 +179,5 @@ function playOne(p_audioFileID) {
     _playlist_jplayer.play(0);
     
     window.innerWidth = 490;
-    window.innerHeight = 105;
+    window.innerHeight = 120;
 }
\ No newline at end of file
diff --git a/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css b/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css
index 9fca01d98..b40407a19 100644
--- a/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css
+++ b/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css
@@ -23,6 +23,8 @@ span.showIndex {
     display:none; 
 }
 
+/* End of non-ui fields **/
+
 div.jp-audio,
 div.jp-video {
 
@@ -32,12 +34,13 @@ div.jp-video {
 
 	font-size:1em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */
 
-	font-family:Verdana, Arial, sans-serif;
+	font-family: Arial,Helvetica,sans-serif;
 	line-height:1.6;
-	color: #666;
-	border:1px solid #009be3;
-	background-color:#eee;
+	color: #9B9B9B;
 	position:relative;
+	border-color: #262526 #262526 #5E5E5E;
+    border-style: solid;
+    border-width: 1px;
 }
 
 div.jp-audio {
@@ -126,7 +129,7 @@ div.jp-time-block {
 
 div.jp-progress {
 	overflow:hidden;
-	background-color: #ddd;
+	background-color: #393939;
 }
 div.jp-audio div.jp-progress {
 	height: 10px;
@@ -223,7 +226,7 @@ div.jp-volume-bar-value {
 }
 
 div.jp-volume-max {
-	margin-left: 60px;
+	margin-left: 65px;
 }
 
 /* @end */
@@ -234,7 +237,6 @@ div.jp-current-time,
 div.jp-duration {
 	width: 60px;
 	font-size: 1em;
-	font-family: Arial,Helvetica,sans-serif;
 }
 div.jp-current-time {
 	float: left;
@@ -260,8 +262,7 @@ div.jp-title {
 div.jp-title,
 div.jp-playlist {
 	width:100%;
-	background-color:#ccc;
-	border-top:1px solid #009be3;
+	background-color: #D8D8D8;
 }
 div.jp-type-single div.jp-title,
 div.jp-type-playlist div.jp-title,
@@ -273,7 +274,6 @@ div.jp-playlist ul {
 	list-style-type:none;
 	margin:0;
 	padding:0 20px;
-	font-size:.72em;
 }
 
 div.jp-title li {
@@ -296,8 +296,6 @@ div.jp-type-playlist div.jp-playlist li:last-child {
 	border-bottom:none;
 }
 div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
-	list-style-type:square;
-	list-style-position:inside;
 	padding-left:7px;
 }
 div.jp-type-playlist div.jp-playlist a {
@@ -305,50 +303,19 @@ div.jp-type-playlist div.jp-playlist a {
 	text-decoration: none;
 }
 div.jp-type-playlist div.jp-playlist a:hover {
-	color:#0d88c1;
+	color:#9B9B9B;
 }
 div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
-	color:#0d88c1;
-}
-
-div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
-	float:right;
-	display:inline;
-	text-align:right;
-	margin-right:10px;
-	font-weight:bold;
-	color:#666;
-}
-div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
-	color:#0d88c1;
-}
-div.jp-type-playlist div.jp-playlist span.jp-free-media {
-	float:right;
-	display:inline;
-	text-align:right;
-	margin-right:10px;
-}
-div.jp-type-playlist div.jp-playlist span.jp-free-media a{
-	color:#666;
-}
-div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
-	color:#0d88c1;
+	color: #FF6F01;
 }
 span.jp-artist {
-	font-size:.8em;
-	color:#666;
+	font-size: 90%;
+	color:#9B9B9B;
+	margin-left: 5px;
 }
 
 /* @end */
 
-div.jp-video-play {
-	position:absolute;
-	top:0;
-	left:0;
-	width:100%;
-	cursor:pointer;
-	background-color:rgba(0,0,0,0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
-}
 div.jp-video-270p div.jp-video-play {
 	height:270px;
 }
@@ -359,27 +326,6 @@ div.jp-video-full div.jp-video-play {
 	height:100%;
 	z-index:1000;
 }
-a.jp-video-play-icon {
-	position:relative;
-	display:block;
-	width: 112px;
-	height: 100px;
-
-	margin-left:-56px;
-	margin-top:-50px;
-	left:50%;
-	top:50%;
-
-	background: url("jplayer.blue.monday.video.play.png") 0 0 no-repeat;
-	text-indent:-9999px;
-}
-div.jp-video-play:hover a.jp-video-play-icon {
-	background: url("jplayer.blue.monday.video.play.png") 0 -100px no-repeat;
-}
-
-
-
-
 
 div.jp-jplayer audio,
 div.jp-jplayer {
@@ -391,105 +337,6 @@ div.jp-jplayer {
 	background-color: #000000;
 }
 
-
-
-
-
-/* @group TOGGLES */
-
-/* The audio toggles are nested inside jp-time-holder */
-
-ul.jp-toggles {
-	list-style-type:none;
-	padding:0;
-	margin:0 auto;
-	overflow:hidden;
-}
-
-div.jp-audio .jp-type-single ul.jp-toggles {
-	width:25px;
-}
-div.jp-audio .jp-type-playlist ul.jp-toggles {
-	width:55px;
-	margin: 0;
-	position: absolute;
-	left: 325px;
-	top: 50px;
-}
-
-div.jp-video ul.jp-toggles {
-	margin-top:10px;
-	width:100px;
-}
-
-ul.jp-toggles li {
-	display:block;
-	float:right;
-}
-
-ul.jp-toggles li a {
-	display:block;
-	width:25px;
-	height:18px;
-	text-indent:-9999px;
-	line-height:100%; /* need this for IE6 */
-}
-
-a.jp-full-screen {
-	background: url("jplayer.blue.monday.jpg") 0 -310px no-repeat;
-	margin-left: 20px;
-}
-
-a.jp-full-screen:hover {
-	background: url("jplayer.blue.monday.jpg") -30px -310px no-repeat;
-}
-
-a.jp-restore-screen {
-	background: url("jplayer.blue.monday.jpg") -60px -310px no-repeat;
-	margin-left: 20px;
-}
-
-a.jp-restore-screen:hover {
-	background: url("jplayer.blue.monday.jpg") -90px -310px no-repeat;
-}
-
-a.jp-repeat {
-	background: url("jplayer.blue.monday.jpg") 0 -290px no-repeat;
-}
-
-a.jp-repeat:hover {
-	background: url("jplayer.blue.monday.jpg") -30px -290px no-repeat;
-}
-
-a.jp-repeat-off {
-	background: url("jplayer.blue.monday.jpg") -60px -290px no-repeat;
-}
-
-a.jp-repeat-off:hover {
-	background: url("jplayer.blue.monday.jpg") -90px -290px no-repeat;
-}
-
-a.jp-shuffle {
-	background: url("jplayer.blue.monday.jpg") 0 -270px no-repeat;
-	margin-left: 5px;
-}
-
-a.jp-shuffle:hover {
-	background: url("jplayer.blue.monday.jpg") -30px -270px no-repeat;
-}
-
-a.jp-shuffle-off {
-	background: url("jplayer.blue.monday.jpg") -60px -270px no-repeat;
-	margin-left: 5px;
-}
-
-a.jp-shuffle-off:hover {
-	background: url("jplayer.blue.monday.jpg") -90px -270px no-repeat;
-}
-
-
-/* @end */
-
 /* @group NO SOLUTION error feedback */
 
 .jp-no-solution {