CC-3360 : Timeline Css

adding Css to timeline.

airtime_mvc/application/forms/ShowBuilder.php

@@ -76,7 +76,7 @@ class Application_Form_ShowBuilder extends Zend_Form_SubForm
 
         // add a select to choose a show.
         $showSelect = new Zend_Form_Element_Select("sb_show_filter");
-        $showSelect->setLabel("Filter By Show:");
+        $showSelect->setLabel("Show:");
         $showSelect->setMultiOptions($this->getShowNames());
         $showSelect->setValue(null);
         $showSelect->setDecorators(array('ViewHelper'));
@@ -84,7 +84,7 @@ class Application_Form_ShowBuilder extends Zend_Form_SubForm
 
         if ($user->getType() === 'H') {
             $myShows = new Zend_Form_Element_Checkbox('sb_my_shows');
-            $myShows->setLabel('All My Shows')
+            $myShows->setLabel('All My Shows:')
                     ->setDecorators(array('ViewHelper'));
             $this->addElement($myShows);
         }

airtime_mvc/application/layouts/scripts/builder.phtml

@@ -25,8 +25,8 @@
 </div>
 
 <div class="wrapper">
-	<div id="library_content" class="tabs ui-widget ui-widget-content block-shadow alpha-block padded" style="display:none"><?php echo $this->layout()->library ?></div>
+	<div id="library_content" class="lib-content tabs ui-widget ui-widget-content block-shadow alpha-block padded" style="display:none"><?php echo $this->layout()->library ?></div>
-	<div id="show_builder" class="ui-widget ui-widget-content block-shadow omega-block padded"><?php echo $this->layout()->builder ?></div>
+	<div id="show_builder" class="sb-content ui-widget ui-widget-content block-shadow omega-block padded"><?php echo $this->layout()->builder ?></div>
 </div>
 
 <?php echo $this->layout()->dialog ?>

airtime_mvc/application/models/Schedule.php

@@ -358,7 +358,7 @@ class Application_Model_Schedule {
         $sql = "SELECT DISTINCT
 
         showt.name AS show_name, showt.color AS show_color,
-        showt.background_color AS show_background_colour, showt.id AS show_id,
+        showt.background_color AS show_background_color, showt.id AS show_id,
 
         si.starts AS si_starts, si.ends AS si_ends, si.time_filled AS si_time_filled,
         si.record AS si_record, si.rebroadcast AS si_rebroadcast, si.id AS si_id, si.last_scheduled AS si_last_scheduled,

airtime_mvc/application/models/ShowBuilder.php

@@ -18,8 +18,6 @@ class Application_Model_ShowBuilder {
     private $contentDT;
     private $epoch_now;
    
-    private $hasCurrent;
-
     private $defaultRowArray = array(
         "header" => false,
         "footer" => false,
@@ -38,7 +36,8 @@ class Application_Model_ShowBuilder {
         "cueout" => "",
         "fadein" => "",
         "fadeout" => "",
-        "current" => false,
+        "color" => "", //in hex without the '#' sign.
+        "backgroundColor"=> "", //in hex without the '#' sign.
     );
 
     /*
@@ -53,8 +52,6 @@ class Application_Model_ShowBuilder {
         $this->user = Application_Model_User::GetCurrentUser();
         $this->opts = $p_opts;
         $this->epoch_now = time();
-        
-        $this->hasCurrent = false;
     }
 
     //check to see if this row should be editable.
@@ -78,6 +75,23 @@ class Application_Model_ShowBuilder {
         }
     }
     
+    private function getItemColor($p_item, &$row) {
+        $defaultColor = "ffffff";
+        $defaultBackground = "3366cc";
+        
+        $color = $p_item["show_color"];
+        if ($color === '') {
+            $color = $defaultColor;
+        }
+        $backgroundColor = $p_item["show_background_color"];
+        if ($backgroundColor === '') {
+            $backgroundColor = $defaultBackground;
+        }
+        
+        $row["color"] = $color;
+        $row["backgroundColor"] = $backgroundColor;
+    }
+
     //information about whether a track is inside|boundary|outside a show.
     private function getItemStatus($p_item, &$row) {
 
@@ -96,14 +110,42 @@ class Application_Model_ShowBuilder {
         $row["timestamp"] = $ts;
     }
     
-    private function isCurrent($p_epochItemStart, $p_epochItemEnd, &$row) {
+    /*
+     * marks a row's status.
+     * 0 = past
+     * 1 = current
+     * 2 = future
+     */
+    private function getScheduledStatus($p_epochItemStart, $p_epochItemEnd, &$row) {
         
-        if ($this->epoch_now >= $p_epochItemStart && $this->epoch_now < $p_epochItemEnd) {
+        if ($row["footer"] === true && $this->epoch_now > $p_epochItemStart && $this->epoch_now > $p_epochItemEnd) {
-            $row["current"] = true;
+            $row["scheduled"] = 0;
+        }
+        else if ($row["footer"] === true && $this->epoch_now < $p_epochItemEnd) {
+            $row["scheduled"] = 2;
+        }
+        else if ($row["header"] === true && $this->epoch_now > $p_epochItemStart) {
+            $row["scheduled"] = 0;
+        }
+        else if ($row["header"] === true && $this->epoch_now < $p_epochItemEnd) {
+            $row["scheduled"] = 2;
+        }
+        
+        //item is in the past.
+        else if ($this->epoch_now > $p_epochItemEnd) {
+            $row["scheduled"] = 0;
+        }
+        
+        //item is the currently scheduled item.
+        else if ($this->epoch_now >= $p_epochItemStart && $this->epoch_now < $p_epochItemEnd) {
+            $row["scheduled"] = 1;
             //how many seconds the view should wait to redraw itself.
             $row["refresh"] = $p_epochItemEnd - $this->epoch_now;
+        }
         
-            $this->hasCurrent = true;
+        //item is in the future.
+        else if ($this->epoch_now < $p_epochItemStart) {
+            $row["scheduled"] = 2;
         }
     }
 
@@ -111,13 +153,15 @@ class Application_Model_ShowBuilder {
 
         $row = $this->defaultRowArray;
         $this->isAllowed($p_item, $row);
-        Logging::log("making header for show id ".$p_item["show_id"]);
         $this->getRowTimestamp($p_item, $row);
+        $this->getItemColor($p_item, &$row);
 
         $showStartDT = new DateTime($p_item["si_starts"], new DateTimeZone("UTC"));
         $showStartDT->setTimezone(new DateTimeZone($this->timezone));
+        $startsEpoch = intval($showStartDT->format("U"));
         $showEndDT = new DateTime($p_item["si_ends"], new DateTimeZone("UTC"));
         $showEndDT->setTimezone(new DateTimeZone($this->timezone));
+        $endsEpoch = intval($showEndDT->format("U"));
 
         $row["header"] = true;
         $row["starts"] = $showStartDT->format("Y-m-d H:i");
@@ -128,6 +172,8 @@ class Application_Model_ShowBuilder {
         $row["instance"] = intval($p_item["si_id"]);
         $row["image"] = '';
         
+        $this->getScheduledStatus($startsEpoch, $endsEpoch, $row);
+
         $this->contentDT = $showStartDT;
 
         return $row;
@@ -136,6 +182,7 @@ class Application_Model_ShowBuilder {
     private function makeScheduledItemRow($p_item) {
         $row = $this->defaultRowArray;
 
+        $this->getItemColor($p_item, &$row);
         $this->getRowTimestamp($p_item, $row);
         $this->isAllowed($p_item, $row);
 
@@ -154,7 +201,7 @@ class Application_Model_ShowBuilder {
             $showEndEpoch = intval($showEndDT->format("U"));
 
             //don't want an overbooked item to stay marked as current.
-            $this->isCurrent($startsEpoch, min($endsEpoch, $showEndEpoch), $row);
+            $this->getScheduledStatus($startsEpoch, min($endsEpoch, $showEndEpoch), $row);
 
             $row["id"] = intval($p_item["sched_id"]);
             $row["image"] = '<img src="/css/images/icon_audioclip.png">';
@@ -208,6 +255,16 @@ class Application_Model_ShowBuilder {
         $timeFilled = new TimeFilledFormatter($runtime);
         $row["fRuntime"] = $timeFilled->format();
         $row["image"] = '';
+        
+        $showStartDT = new DateTime($p_item["si_starts"], new DateTimeZone("UTC"));
+        $showStartDT->setTimezone(new DateTimeZone($this->timezone));
+        $startsEpoch = intval($showStartDT->format("U"));
+        $showEndDT = new DateTime($p_item["si_ends"], new DateTimeZone("UTC"));
+        $showEndDT->setTimezone(new DateTimeZone($this->timezone));
+        $endsEpoch = intval($showEndDT->format("U"));
+        
+        $this->getScheduledStatus($startsEpoch, $endsEpoch, $row);
+        
         return $row;
     }
 
@@ -298,9 +355,6 @@ class Application_Model_ShowBuilder {
             $display_items[] = $this->makeFooterRow($scheduled_items[count($scheduled_items)-1]);
         }
         
-        if (!$this->hasCurrent) {
-        }
-
         return $display_items;
     }
 }

airtime_mvc/application/views/scripts/form/showbuilder.phtml

@@ -8,6 +8,13 @@
     <input type="button" id="sb_edit" class="ui-button ui-state-default sb-edit" value="Add Files"></input>
 </div>
 <div class="sb-advanced-options">
+    <fieldset class="padded display_field toggle push-down-8 closed">
+        <legend style="cursor: pointer;">
+        	<span class="ui-icon ui-icon-triangle-2-n-s"></span>
+        Filter By Show:
+        </legend>
+        
+        <div class="sb-options-form">
             <label><?php echo $this->element->getElement('sb_show_filter')->getLabel() ?></label>
             <?php echo $this->element->getElement('sb_show_filter') ?>
         
@@ -16,3 +23,5 @@
             <?php echo $this->element->getElement('sb_my_shows'); ?>
             <?php endif;?>
         </div>
+    </fieldset>   
+</div>

airtime_mvc/application/views/scripts/showbuilder/builderDialog.phtml

@@ -1,9 +1,9 @@
 <div class="wrapper">
-    <div id="library_content" class="tabs ui-widget ui-widget-content block-shadow alpha-block padded">
+    <div id="library_content" class="lib-content tabs ui-widget ui-widget-content block-shadow alpha-block padded">
         <div id="import_status" style="display:none">File import in progress...</div>
         <table id="library_display" cellpadding="0" cellspacing="0" class="datatable"></table>
     </div>
-    <div id="show_builder" class="ui-widget ui-widget-content block-shadow omega-block padded">
+    <div id="show_builder" class="sb-content ui-widget ui-widget-content block-shadow omega-block padded">
         <table id="show_builder_table" cellpadding="0" cellspacing="0" class="datatable"></table>
     </div>
 </div>

airtime_mvc/public/css/media_library.css

@@ -9,6 +9,10 @@
     table-layout:fixed;
 }
 
+#library_display th {
+        text-align: left;
+}
+
 #library_content #library_display {
 	width:100%;
 }
@@ -90,3 +94,26 @@ td.library_bitrate {
 	vertical-align: middle;
 	padding-left: 5px;
 }
+
+
+.file_type {
+	width:16px;
+	height:13px;
+	display:block;
+	background-image: url(images/filetype_icons.png);
+	background-repeat:no-repeat;
+	}
+	.file_type.audioclip {
+		background-position: 0 0;
+		}
+		a.file_type.audioclip:hover {
+			background-position: 0 -15px;
+			}
+	.file_type.playlist {
+		background-position: -20px 0;
+		}
+		a.file_type.playlist:hover {
+			background-position: -20px -15px;
+			}
+
+

airtime_mvc/public/css/playlist_builder.css

@@ -93,9 +93,6 @@
 .ui-state-active .spl_artist, .ui-state-active .spl_offset {
     color: #606060 !important;
 }
-/*#spl_editor {
-	height: 50px;
-}*/
 
 #spl_editor > div > span {
 /*	display: inline-block;

airtime_mvc/public/css/showbuilder.css

@@ -1,71 +1,211 @@
 @CHARSET "UTF-8";
 
-#show_builder {
+.sb-content {
-    width:95%;
+    overflow: hidden;	
+}
+
+.sb-content .dataTables_scrolling {
     overflow: auto;
 }
 
-#show_builder_table th {
+.sb-content .dataTables_wrapper {
+	margin-left: -16px;
+}
+
+.sb-padded {
+	/*
+	the padding is needed here so that the cursor arrows with a negative margin are displayable.
+	*/
+	padding-left: 16px;
+}
+
+.sb-content fieldset legend {
+    font-size: 13px;
+    white-space: nowrap;
+    width: 110px;
+}
+
+.sb-content fieldset label {
+    padding: 2px;
+    font-size: 12px;
+}
+
+.sb-content fieldset select {
+	margin-right: 10px;
+}
+
+.sb-content input[type="checkbox"] {
+	position: relative;
+	top: 3px;
+}
+
+.sb-content fieldset.closed {
+	border-width: 1px 0 0;
+    margin-bottom: -16px;
+    margin-left:1px;
+}
+
+.sb-content fieldset.closed .sb-options-form {
+	display: none;
+}
+
+.sb-content th {
 	text-align: left;
 }
 
-#show_builder input.input_text {
+.sb-content input.input_text {
     width:100px;
 }
 
 table.datatable tr.cursor-selected-row td, table.datatable tr.cursor-selected-row th {
-    border-bottom: 2px solid #db0000 !important;
+    border-bottom: 1px solid rgba(215, 0, 0, 1) !important;
 }
 .innerWrapper {
     position:relative;
     width:100%;
 }
 .marker {
-    position:absolute;
+    background: url(images/tl-arrow.png) no-repeat scroll 3px 4px;
-    bottom:-10px;
+    bottom: -14px;
-    left:-14px;
-    width:9px;
-    height:9px;
-    background:url(images/tl-arrow.png) no-repeat 0 0;
     display: block;
+    height: 9px;
+    left: -17px;
+    padding: 4px 0 4px 3px;
+    position: absolute;
+    width: 9px;
+    background-color: rgba(70, 70, 70, 0.35);
+    border-radius: 2px 0 0 2px;
+	cursor:pointer;
+}
+.marker:hover {
+	background-color: rgba(70, 70, 70, 0.95);
+	border-radius: 2px 0 0 2px;
 }
 tr.cursor-selected-row .marker {
-    background-position: 0 -15px;
+    background-color: rgba(215, 0, 0, 1);
 }
 
-.sb-boundry {
+.sb-content .sb-past {
-    background-color:#e66a31;
+	opacity: .6;
 }
 
-.sb-over {
+.sb-boundry td.sb-image, 
-    background-color:#ff3030;
+.sb-boundry td.sb-starts, 
+.sb-boundry td.sb-ends,
+.sb-boundry td.sb-length, 
+.sb-boundry td.sb-title, 
+.sb-boundry td.sb-creator, 
+.sb-boundry td.sb-album,
+.sb-boundry td.sb-cue-in, 
+.sb-boundry td.sb-cue-out, 
+.sb-boundry td.sb-fade-in, 
+.sb-boundry td.sb-fade-out {
+    background-color: rgba(230, 106, 49, 0.5);
 }
 
-.sb-now-playing {
+.sb-over td.sb-image,
-    background-color:#17eb25 !important;
+.sb-over td.sb-starts, 
+.sb-over td.sb-ends,
+.sb-over td.sb-length, 
+.sb-over td.sb-title, 
+.sb-over td.sb-creator, 
+.sb-over td.sb-album,
+.sb-over td.sb-cue-in, 
+.sb-over td.sb-cue-out, 
+.sb-over td.sb-fade-in, 
+.sb-over td.sb-fade-out {
+    background-color: rgba(255, 0, 0, 0.5);
 }
 
+.sb-now-playing td {
+    background-color: rgba(23, 235, 37, 1) !important;
+}
+
+.sb-content.padded {
+	padding: 8px 8px 8px 16px;
+}
+
+table.datatable tr.sb-header.odd td, table.datatable tr.sb-header.even td,
+table.datatable tr.sb-header.odd:hover td, table.datatable tr.sb-header.even:hover td{
+    background: -moz-linear-gradient(top, #a4a4a4 0, #bcbcbc 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a4a4a4), color-stop(100%, #bcbcbc));
+	background: linear-gradient(top, #a4a4a4 0, #bcbcbc 100%);
+	border-top-color:#6b6a6a !important;
+}
+
+.sb-content tr:last-child td {
+	border-bottom-width: 1px !important;
+    border-bottom-color:#6b6a6a !important;	
+}
+
+.sb-content table th.ui-state-default {
+    background: -moz-linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b2b2b2), color-stop(100%, #a2a2a2));
+	background: linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
+    border: 1px solid #8F8F8F;
+    color: #363636;
+}
+
+.sb-content input.ui-button {
+    padding: 3px 1em;
+}	
+.color-box {
+	position:absolute;
+	top:-5px;
+	bottom:-5px;
+	left:-5px;
+	width:27px;
+	background: rgba(140, 2, 140, 1);
+}
+
+.show-title, .show-time {
+	display:inline-block;
+	font-size:13px;
+}
+.show-title {
+	font-weight: bold;
+	margin: 0 8px;
+}
+.show-time {
+	font-size:12px;
+	color: #363636;
+	margin: 0 5px;
+}
+		
+.push-right {
+	float:right;
+	margin-right:5px;
+}
+
+/*
+* keep the dialog css at the bottom so it can override previous rules if needed.
+*/
+
 .ui-dialog .wrapper {
     margin: 0;
     padding: 10px 0 0 0;
     overflow: hidden;
 }
 
-.ui-dialog #library_content {
+.ui-dialog .lib_content {
     margin: 0 10px 10px 0;
     overflow: auto;
     min-height: 0;
 }
 
-.ui-dialog #show_builder {
+.ui-dialog .sb-content {
     margin: 0 0 10px 0;
     overflow: auto;   
 }
 
-.ui-dialog .padded {
+.ui-dialog .lib_content .padded {
     padding: 5px 10px 5px 8px;
 }
 
+.ui-dialog .sb_content .padded {
+    padding: 5px 10px 5px 16px;
+}
+
 .ui-dialog .ui-buttonset {
     margin-right: 0 !important;
 }

airtime_mvc/public/css/styles.css

@@ -305,7 +305,6 @@ select {
     margin:0;
     padding:6px 0 0;
 }
-	
 .on-air-info {
 	height:26px;
 	border:1px solid #242424;
@@ -2205,7 +2204,7 @@ dd .info-text-small {
 	line-height:140%;
 }
 
-.stream-config dd input[type="text"] {
+.stream-config input[type="text"] {
     /*width:98.5%;*/
 	min-width:152px;
 }
@@ -2219,6 +2218,9 @@ dd .info-text-small {
 .simple-formblock .display_field dd {
 	min-width:68%;
 }
+.stream-config dd input[id$=port] {
+    width:152px;
+}
 
 dt.block-display.info-block {
     width: auto;
@@ -2412,6 +2414,7 @@ tfoot tr th	{
 .statustable ul	{
 	margin:4px 0;
 	padding:0;
+	list-style-type: none;
 }
 .statustable ul li	{
 	background:#bbb;
@@ -2653,3 +2656,35 @@ dd .stream-status {
     padding: 5px;
 }
 	
+.pull-left {
+	float:left;
+}
+.pull-right {
+	float:right;
+}
+.push-down-8 {
+	margin-top:8px !important
+}
+.push-down-12 {
+	margin-top:12px !important
+}
+.push-down-16 {
+	margin-top:16px !important
+}
+.close-round {
+	display:block;
+	float:right;
+	height:18px;
+	width:18px;
+	background:url(images/round_delete.png) no-repeat 0 0;
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	margin: 3px 0 0 10px;
+	}
+	.close-round:hover {
+		background-position:0 -18px;
+		}
+	.close-round:active {
+		background-position:0 -36px;
+		}

airtime_mvc/public/js/airtime/schedule/schedule.js

@@ -104,7 +104,7 @@ function buildScheduleDialog (json) {
 		width = Math.floor(viewport.width * 0.96),
 		fnServer = AIRTIME.showbuilder.fnServerData,
 		//subtract padding in pixels
-		widgetWidth = width - 50,
+		widgetWidth = width - 60,
 		libWidth = Math.floor(widgetWidth * 0.5),
 		builderWidth = Math.floor(widgetWidth * 0.5),
 		libLength,
@@ -112,11 +112,11 @@ function buildScheduleDialog (json) {
 		libFilter;
 	
 	dialog.find("#library_content")
-		.height(height - 110)
+		.height(height - 115)
 		.width(libWidth);
 	
 	dialog.find("#show_builder")
-		.height(height - 110)
+		.height(height - 115)
 		.width(builderWidth);
 	
 	dialog.dialog({
@@ -141,9 +141,13 @@ function buildScheduleDialog (json) {
 	AIRTIME.library.libraryInit();
 	AIRTIME.showbuilder.builderDataTable();
 	
-	dialog.find(".dataTables_scrolling")
+	//set max heights of datatables.
+	dialog.find(".lib-content .dataTables_scrolling")
 		.css("max-height", height - 110 - 155);
 	
+	dialog.find(".sb-content .dataTables_scrolling")
+		.css("max-height", height - 110 - 60);
+	
 	dialog.dialog('open');
 	
 	//calculate dynamically width for the library search input.

airtime_mvc/public/js/airtime/showbuilder/builder.js

@@ -128,18 +128,18 @@ var AIRTIME = (function(AIRTIME){
 		
 		oTable = tableDiv.dataTable( {
 			"aoColumns": [
-		    /* checkbox */ {"mDataProp": "allowed", "sTitle": "<input type='checkbox' name='sb_cb_all'>", "sWidth": "15px", "sClass": "sb_checkbox"},
+		    /* checkbox */ {"mDataProp": "allowed", "sTitle": "<input type='checkbox' name='sb_cb_all'>", "sWidth": "15px", "sClass": "sb-checkbox"},
-            /* Type */ {"mDataProp": "image", "sTitle": "", "sClass": "library_image", "sWidth": "25px", "bVisible": true},
+            /* Type */ {"mDataProp": "image", "sTitle": "", "sClass": "library_image sb-image", "sWidth": "25px", "bVisible": true},
-	        /* starts */{"mDataProp": "starts", "sTitle": "Start"},
+	        /* starts */{"mDataProp": "starts", "sTitle": "Start", "sClass": "sb-starts"},
-	        /* ends */{"mDataProp": "ends", "sTitle": "End"},
+	        /* ends */{"mDataProp": "ends", "sTitle": "End", "sClass": "sb-ends"},
-	        /* runtime */{"mDataProp": "runtime", "sTitle": "Duration", "sClass": "library_length"},
+	        /* runtime */{"mDataProp": "runtime", "sTitle": "Duration", "sClass": "library_length sb-length"},
-	        /* title */{"mDataProp": "title", "sTitle": "Title"},
+	        /* title */{"mDataProp": "title", "sTitle": "Title", "sClass": "sb-title"},
-	        /* creator */{"mDataProp": "creator", "sTitle": "Creator"},
+	        /* creator */{"mDataProp": "creator", "sTitle": "Creator", "sClass": "sb-creator"},
-	        /* album */{"mDataProp": "album", "sTitle": "Album"},
+	        /* album */{"mDataProp": "album", "sTitle": "Album", "sClass": "sb-album"},
-	        /* cue in */{"mDataProp": "cuein", "sTitle": "Cue In", "bVisible": false},
+	        /* cue in */{"mDataProp": "cuein", "sTitle": "Cue In", "bVisible": false, "sClass": "sb-cue-in"},
-	        /* cue out */{"mDataProp": "cueout", "sTitle": "Cue Out", "bVisible": false},
+	        /* cue out */{"mDataProp": "cueout", "sTitle": "Cue Out", "bVisible": false, "sClass": "sb-cue-out"},
-	        /* fade in */{"mDataProp": "fadein", "sTitle": "Fade In", "bVisible": false},
+	        /* fade in */{"mDataProp": "fadein", "sTitle": "Fade In", "bVisible": false, "sClass": "sb-fade-in"},
-	        /* fade out */{"mDataProp": "fadeout", "sTitle": "Fade Out", "bVisible": false}
+	        /* fade out */{"mDataProp": "fadeout", "sTitle": "Fade Out", "bVisible": false, "sClass": "sb-fade-out"}
 	        ],
 	        
 	        "bJQueryUI": true,
@@ -213,10 +213,13 @@ var AIRTIME = (function(AIRTIME){
 					sSeparatorHTML,
 					fnPrepareSeparatorRow,
 					node,
-					cl="";
+					cl="",
+					//background-color to imitate calendar color.
+					r,g,b,a,
+					$nRow = $(nRow);
 				
                 //call the context menu so we can prevent the event from propagating.
-                $(nRow).find('td:not(.sb_checkbox)').click(function(e){
+                $(nRow).find('td:not(.sb-checkbox)').click(function(e){
                     
                     $(this).contextMenu({x: e.pageX, y: e.pageY});
                     
@@ -226,9 +229,12 @@ var AIRTIME = (function(AIRTIME){
 				//save some info for reordering purposes.
 				$(nRow).data({"aData": aData});
 				
-				if (aData.current === true) {
+				if (aData.scheduled === 1) {
 					$(nRow).addClass("sb-now-playing");
 				}
+				else if (aData.scheduled === 0) {
+					$(nRow).addClass("sb-past");
+				}
 				
 				if (aData.allowed !== true) {
 					$(nRow).addClass("sb-not-allowed");
@@ -266,10 +272,13 @@ var AIRTIME = (function(AIRTIME){
                 });
             
 				if (aData.header === true) {
+					node = nRow.children[0];
+					node.innerHTML = '';
 					cl = 'sb-header';
 					
-					sSeparatorHTML = '<span>'+aData.title+'</span><span>'+aData.starts+'</span><span>'+aData.ends+'</span>';
+					sSeparatorHTML = '<span class="show-title">'+aData.title+'</span>';
-					fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
+					sSeparatorHTML += '<span class="push-right"><span class="show-time">'+aData.starts+'</span>-<span class="show-time">'+aData.ends+'</span></span>';
+					fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
 				}
 				else if (aData.footer === true) {
 					node = nRow.children[0];
@@ -289,18 +298,22 @@ var AIRTIME = (function(AIRTIME){
 					fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
 				}
 				else if (aData.empty === true) {
+					node = nRow.children[0];
+					node.innerHTML = '';
 					
 					sSeparatorHTML = '<span>Show Empty</span>';
 					cl = cl + " sb-empty odd";
 					
-					fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
+					fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
 				}
 				else if (aData.record === true) {
+					node = nRow.children[0];
+					node.innerHTML = '';
 					
 					sSeparatorHTML = '<span>Recording From Line In</span>';
 					cl = cl + " sb-record odd";
 					
-					fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
+					fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
 				}
 				else {
 					
@@ -312,6 +325,27 @@ var AIRTIME = (function(AIRTIME){
 						node.innerHTML = '';
 					}
 				}
+				
+				//add the show colour to the leftmost td
+                if (aData.footer !== true) {
+                	
+                	if ($nRow.hasClass('sb-header')) {
+                		a = 1;
+                	}
+                	else if ($nRow.hasClass('odd')) {
+                		a = 0.3;
+                	}
+                	else if ($nRow.hasClass('even')) {
+                		a = 0.4;
+                	}
+                	
+                	//convert from hex to rgb.
+                	r = parseInt((aData.backgroundColor).substring(0,2), 16);
+                	g = parseInt((aData.backgroundColor).substring(2,4), 16);
+                	b = parseInt((aData.backgroundColor).substring(4,6), 16);
+                	
+                	$nRow.find('td.sb-checkbox').css('background', 'rgba('+r+', '+g+', '+b+', '+a+')');
+                }
 			},
 			"fnDrawCallback": function(oSettings, json) {
 				var wrapperDiv,
@@ -440,7 +474,7 @@ var AIRTIME = (function(AIRTIME){
 			},
 			
 	        // R = ColReorderResize, C = ColVis, T = TableTools
-	        "sDom": 'Rr<"H"CT>t',
+	        "sDom": 'Rr<"sb-padded"<"H"CT>><"dataTables_scrolling sb-padded"t>',
 	        
 	        "sAjaxDataProp": "schedule",
 			"sAjaxSource": "/showbuilder/builder-feed"	
@@ -641,7 +675,7 @@ var AIRTIME = (function(AIRTIME){
 		
 		//begin context menu initialization.
         $.contextMenu({
-            selector: '#show_builder_table td:not(.sb_checkbox)',
+            selector: '#show_builder_table td:not(.sb-checkbox)',
             trigger: "left",
             ignoreRightClick: true,
             

airtime_mvc/public/js/airtime/showbuilder/main_builder.js

@@ -1,23 +1,36 @@
 $(document).ready(function(){
 	
 	var viewport = AIRTIME.utilities.findViewportDimensions(),
-		lib = $("#library_content"),
+		$lib = $("#library_content"),
-		builder = $("#show_builder"),
+		$libWrapper,
+		$builder = $("#show_builder"),
 		widgetHeight = viewport.height - 185,
-		screenWidth = Math.floor(viewport.width - 110),
+		screenWidth = Math.floor(viewport.width - 120),
 		oBaseDatePickerSettings,
 		oBaseTimePickerSettings,
 		oRange,
 		dateStartId = "#sb_date_start",
 		timeStartId = "#sb_time_start",
 		dateEndId = "#sb_date_end",
-		timeEndId = "#sb_time_end";
+		timeEndId = "#sb_time_end",
+		$toggleLib = $('<input />', {
+			"class": "ui-button ui-state-default sb-edit",
+			"id": "sb_edit",
+			"type": "button",
+			"value": "Add Files"
+		}),
+		$libClose = $('<a />', {
+			"class": "close-round",
+			"href": "#",
+			"id": "sb_lib_close"
+		});
 	
 	//set the heights of the main widgets.
-	lib.height(widgetHeight);
+	$lib.height(widgetHeight);
 	
 	//builder takes all the screen on first load
-	builder.height(widgetHeight)
+	$builder
+		.height(widgetHeight)
 		.width(screenWidth);
 	
 	oBaseDatePickerSettings = {
@@ -34,12 +47,24 @@ $(document).ready(function(){
 		defaultTime: '0:00'
 	};
 	
-	builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
+	$builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
-	builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
+	$builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
-	builder.find(dateEndId).datepicker(oBaseDatePickerSettings);
+	$builder.find(dateEndId).datepicker(oBaseDatePickerSettings);
-	builder.find(timeEndId).timepicker(oBaseTimePickerSettings);
+	$builder.find(timeEndId).timepicker(oBaseTimePickerSettings);
 	
-	$("#sb_submit").click(function(ev){
+	oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);	
+	AIRTIME.showbuilder.fnServerData.start = oRange.start;
+	AIRTIME.showbuilder.fnServerData.end = oRange.end;
+	
+	AIRTIME.library.libraryInit();
+	AIRTIME.showbuilder.builderDataTable();
+	
+	$libWrapper = $lib.find("#library_display_wrapper");
+	$libWrapper.prepend($libClose);
+	
+	$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 110);
+	
+	$builder.on("click", "#sb_submit", function(ev){
 		var fn,
 			oRange,
 			op,
@@ -67,44 +92,69 @@ $(document).ready(function(){
 		oTable.fnDraw();
 	});
 	
-	$("#sb_edit").click(function(ev){
+	$builder.on("click","#sb_edit", function(ev){
-		var $button = $(this),
+		var schedTable = $("#show_builder_table").dataTable();
-			$lib = $("#library_content"),
-			$builder = $("#show_builder"),
-			schedTable = $("#show_builder_table").dataTable();
-		
-		if ($button.hasClass("sb-edit")) {
 		
 		//reset timestamp to redraw the cursors.
 		AIRTIME.showbuilder.resetTimestamp();
 		
-			$lib.show();
+		$lib.show()
-			$lib.width(Math.floor(screenWidth * 0.5));
+			.width(Math.floor(screenWidth * 0.5));
-			$builder.width(Math.floor(screenWidth * 0.5));
 		
-			$button.removeClass("sb-edit");
+		$builder.width(Math.floor(screenWidth * 0.5))
-			$button.addClass("sb-finish-edit");
+			.find("#sb_edit")
-			$button.val("Close Library");
+				.remove()
-		}
+				.end();
-		else if ($button.hasClass("sb-finish-edit")) {
-			
-			$lib.hide();
-			$builder.width(screenWidth);
-			
-			$button.removeClass("sb-finish-edit");
-			$button.addClass("sb-edit");
-			$button.val("Add Files");
-		}
 		
 		schedTable.fnDraw();	
 	});
 	
-	oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);	
+	$lib.on("click", "#sb_lib_close", function(ev) {
-	AIRTIME.showbuilder.fnServerData.start = oRange.start;
+		var schedTable = $("#show_builder_table").dataTable();
-	AIRTIME.showbuilder.fnServerData.end = oRange.end;
 
-	AIRTIME.library.libraryInit();
+		$lib.hide();
-	AIRTIME.showbuilder.builderDataTable();
+		$builder.width(screenWidth)
+			.find(".sb-timerange")
+				.append($toggleLib)
+				.end();
+		
+		schedTable.fnDraw();
+	});
+	
+	$builder.find('legend').click(function(ev, item){
+		
+		$fs = $(this).parents('fieldset');
+		
+		if ($fs.hasClass("closed")) {
+    
+        	$fs.removeClass("closed");
+        	$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 150);
+        }
+        else {
+        	$fs.addClass("closed");
+        	
+        	//set defaults for the options.
+        	$fs.find('select').val(0);
+        	$fs.find('input[type="checkbox"]').attr("checked", false);
+        	$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 110);
+        }
+	});
+	
+	//set click event for all my shows checkbox.
+	$builder.on("click", "#sb_my_shows", function(ev) {
+		
+		if ($(this).is(':checked')) {
+			$(ev.delegateTarget).find('#sb_show_filter').val(0);
+		}	
+	});
+	
+	//set select event for choosing a show.
+	$builder.on("change", '#sb_show_filter', function(ev) {
+		
+		if ($(this).val() !== 0) {
+			$(ev.delegateTarget).find('#sb_my_shows').attr("checked", false);
+		}
+	});
 	
 	//check if the timeline viewed needs updating.
 	setInterval(function(){