1<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%> 2<html> 3<head> 4 <%@ include file="head.jsp" %> 5 <%@ include file="jquery.jsp" %> 6 <link rel="alternate" type="application/rss+xml" title="Madsonic Podcast" href="podcast.view?suffix=.rss"> 7 8 <script type="application/javascript"> 9 10 function toggleLeftBar(show) { 11 var width = show ? 270 : 52; 12 $("#left").stop(); 13 $("#left").animate({"width": width}); 14 } 15 16 function toggleLeftPanel(show) { 17 var width = show ? ${model.leftframeSize} : 0; 18 $("#leftPanel").stop(); 19 $("#leftPanel").animate({"width": width}); 20 } 21 22 function setPlayQueueHeight(height) { 23 $("#playQueue").stop(); 24 $("#playQueue").animate({"height": height}, {step: updateSize}); 25 } 26 27 function setRightPanelWidth(width) { 28 $("#right").stop(); 29 $("#right").animate({"width": width}, {step: updateSize}); 30 } 31 32 function setSidePanelWidth(width) { 33 $("#sidePanel").stop(); 34 $("#sidePanel").animate({"width": width}, {step: updateSize}); 35 } 36 37 // Work-around for quirky iframe layout issue. 38 function updateSize(playQueueHeight) { 39 var w = $(window).width() - $("#left").width() - $("#leftPanel").width() - $("#right").width() - $("#sidePanel").width() - 1; 40 var h = $(window).height() - playQueueHeight - 1; 41 $("#main").width(w); 42 } 43 44 function init() { 45 updateSize($("#playQueue").height()); 46 $(window).resize(function () { 47 updateSize($("#playQueue").height()); 48 }); 49 } 50 51 </script> 52 53 <style type="text/css"> 54 #page { 55 display: -webkit-box; 56 display: -moz-box; 57 display: -ms-flexbox; 58 display: -webkit-flex; 59 display: flex; 60 flex-direction: column; 61 width: 100%; 62 height: 100%; 63 } 64 65 #content { 66 display: -webkit-box; 67 display: -moz-box; 68 display: -ms-flexbox; 69 display: -webkit-flex; 70 display:flex; 71 width: 100%; 72 height: 100%; 73 -webkit-box-flex: 1; 74 -moz-box-flex: 1; 75 -ms-flex: 1; 76 -webkit-flex: 1; 77 flex-grow: 1; 78 } 79 80 #left { 81 width: ${model.showLeftBar ? 270 : 52}px; 82 height: 100%; 83 } 84 85 #leftPanel { 86 width: 0px; 87 height: 100%; 88 } 89 90 #main { 91 -webkit-box-flex: 1; 92 -moz-box-flex: 1; 93 -ms-flex: 1; 94 -webkit-flex: 1; 95 display: flex; 96 flex-grow: 1; 97 min-height: 100%; 98 } 99 100 #right { 101 width: ${model.showRightPanel ? 300 : 0}px; 102 height: 100%; 103 } 104 105 #sidePanel { 106 width: ${model.showSidePanel ? 300 : 0}px; 107 height: 100%; 108 } 109 110 #playQueue { 111 width:100%; 112 height: 95px; 113 z-index: 100; 114 border-top: 1px solid rgba(0, 0, 0, 0.1); 115 } 116 </style> 117</head> 118<body class="bgcolor2 nospace" onload="init()"> 119<div class="page bgcolor2 nospace" id="page" name="page"> 120 <div id="content" name="content"> 121 <iframe src="left.view" id="left" name="left" class="bgcolor2 nospace"></iframe> 122 <iframe src="leftPanel.view" id="leftPanel" name="leftPanel" class="bgcolor2 nospace"></iframe> 123 <iframe src="home.view?listType=${model.listType}" id="main" name="main" allowfullscreen class="bgcolor1 nospace"></iframe> 124 <iframe src="right.view" id="right" name="right" class="bgcolor2 nospace"></iframe> 125 <iframe src="nowListening.view" id="sidePanel" name="sidePanel" class="bgcolor2 nospace"></iframe> 126 </div> 127 <iframe src="playQueue.view" id="playQueue" name="playQueue" class="bgcolor2 nospace"></iframe> 128</div> 129</body> 130</html>