Make skin also ready for 576p & 720p part 2

3 files changed, 241 insertions, 82 deletions

diff --git a/javascript/main.js b/javascript/main.js
index 47e87f3..292aad3 100644
--- a/javascript/main.js
+++ b/javascript/main.js
@@ -785,7 +785,7 @@ function onKeyDown(event) {
 			if (lang_prio_dyn.length > 1) {
 				is.setObject("cfg.media.audio.languagepriority",lang_prio_dyn[audio_dyn] + "," + lang_prio[audio],is.STORAGE_PERMANENT);
 				osdlang.style.opacity = 1;
-				osdlang.innerHTML = "<img src='unmute.png'> " + lang_prio_dyn[audio_dyn] + " ";
+				osdlang.innerHTML = "<pre class=osdvolume" + cssres[css_nr][Set_Res] + ">" + "<img src='unmute.png'> " + lang_prio_dyn[audio_dyn] + " </pre>";
 				setTimeout("osdlang.style.opacity = 0; ", 3000);
 			}
 		}
@@ -915,7 +915,7 @@ function onKeyDown(event) {
 		showOSD();
 	        GetEPG(currChan);
 		updateOSDtime(currChan);
-		osdepg.innerHTML = "<p>" + EPG[0][7][currChan] + "</p>\n<p>" + EPG[1][7][currChan] + "</p>";
+		osdepg.innerHTML = "<pre class=osdepg" + cssres[css_nr][Set_Res] + ">" + EPG[0][7][currChan] + "\n" + EPG[1][7][currChan] + "</pre>";
 //		showOSD();
 		} else {
 			CheckChannel(Change);
@@ -1347,7 +1347,7 @@ function showVolume() {
 	if (osdVolumetimeout) {
 		clearTimeout(osdVolumetimeout);
 	}
-	osdvolume.innerHTML = Lang[1] + " : " + Volume + "% \n\uE007" + (new Array(Volume)).join("\uE008") + (new Array(100 - Volume)).join("\uE009") + "\uE00A";
+	osdvolume.innerHTML = "<pre class=osdvolume" + cssres[css_nr][Set_Res] + ">" + Lang[1] + " : " + Volume + "% \n\uE007" + (new Array(Volume)).join("\uE008") + (new Array(100 - Volume)).join("\uE009") + "\uE00A";
 	osdvolume.style.opacity = 1;
 	osdVolumetimeout = setTimeout("osdvolume.style.opacity = 0;", ShowOsdTime);
 }
@@ -1380,15 +1380,15 @@ function OSDchannr(channr) {
 }
 
 function OSDhtml(){
-    osdtime.innerHTML = result;
+    osdtime.innerHTML = "<span class=osdtime" + cssres[css_nr][Set_Res] + ">" + result + "</span>";
 	if (ShowSource == 1) {
-	    osdname.innerHTML = channels[currChan].split("-")[0] + "\uE003" + Left(channelsnames[currChan],30);
+	    osdname.innerHTML = "<span class=osdname" + cssres[css_nr][Set_Res] + ">" + channels[currChan].split("-")[0] + "\uE003" + Left(channelsnames[currChan],30) + "</span>";
 	} else {
-	    osdname.innerHTML = Left(channelsnames[currChan],30);
+	    osdname.innerHTML = "<span class=osdname" + cssres[css_nr][Set_Res] + ">" + Left(channelsnames[currChan],30) + "</span>";
 	}
-    osdepg.innerHTML = "<p>" + EPG[0][7][currChan] + "</p>\n<p>" + EPG[1][7][currChan] + "</p>";
-    osdepginfo.innerHTML =  "<p class=epg_head>" + currChan + "\uE003" + channelsnames[currChan] + "</p><p class=epg_avinfo>" + AvInfo[currChan] + "</p><p class=epg_title>" + EPG[0][7][currChan] + EPG[0][9][currChan] + EPG[0][8][currChan] + "</p>\n<p class=epg_info>" + EPG[0][4][currChan] + "</p>\n<p>" + Left(EPG[0][5][currChan],750) + "</p></center>";
-    osdepginfonext.innerHTML =  "<p class=epg_head>"  + currChan + "\uE003" + channelsnames[currChan] + "</p><p class=epg_title>" +  EPG[1][7][currChan] + EPG[1][9][currChan] + EPG[1][8][currChan] + "</p>\n<p class=epg_info>" + EPG[1][4][currChan] + "</p>\n<p>" + Left(EPG[1][5][currChan],750) + "</p></center>";
+    osdepg.innerHTML = "<pre class=osdepg" + cssres[css_nr][Set_Res] + ">" + EPG[0][7][currChan] + "\n" + EPG[1][7][currChan] + "</pre>";
+    osdepginfo.innerHTML =  "<p class=epg_head>" + currChan + "\uE003" + channelsnames[currChan] + "</p><p class=epg_avinfo>" + AvInfo[currChan] + "</p><p class=epg_title>" + EPG[0][7][currChan] + EPG[0][9][currChan] + EPG[0][8][currChan] + "</p>\n<p class=epg_info>" + EPG[0][4][currChan] + "</p>\n<p class=epg_info_long>" + Left(EPG[0][5][currChan],750) + "</p>";
+    osdepginfonext.innerHTML =  "<p class=epg_head>"  + currChan + "\uE003" + channelsnames[currChan] + "</p><p class=epg_title>" +  EPG[1][7][currChan] + EPG[1][9][currChan] + EPG[1][8][currChan] + "</p>\n<p class=epg_info>" + EPG[1][4][currChan] + "</p>\n<p class=epg_info_long>" + Left(EPG[1][5][currChan],750) + "</p>";
 }
 
 function updateOSDtime(timchan) {
@@ -1434,7 +1434,7 @@ if (!BackGroundColor) { BackGroundColor = color_default;}
 		  }
 		  catch (e) {
 			    ProgName = "ERROR" ;
-			    BackGroundColor = "color_error";
+			    BackGroundColor = color_error;
 		  }
 	} else if(SwitchTimer == 3) {
 		ProgTime -= preRecTime;
@@ -1457,7 +1457,7 @@ if (!BackGroundColor) { BackGroundColor = color_default;}
 			    ss.setParameter(x, "Eventid", ProgEvID);
 		    } else {
 			    ProgName = "ERROR" ;
-			    BackGroundColor = "color_error";
+			    BackGroundColor = color_error;
 		    }
 		  } catch (e) {
 		    alert(e);
@@ -1481,7 +1481,7 @@ if (!BackGroundColor) { BackGroundColor = color_default;}
 	}
 
 //	switchtimer.style.background = BackGroundColor;
-	switchtimer.innerHTML = "<pre class=" + BackGroundColor + ">" + Lang[2] + Left(ProgName,30) + "\n" + Lang[3] + channelsnames[currChan] + "\n" + x + "</pre>";
+	switchtimer.innerHTML = "<pre class=" + BackGroundColor + cssres[css_nr][Set_Res] + ">" + Lang[2] + Left(ProgName,30) + "\n" + Lang[3] + channelsnames[currChan] + "\n" + x + "</pre>";
 	setOSDtimer();
 
 	switchtimer.style.opacity = 1;
@@ -1504,16 +1504,15 @@ function setOSDtimer() {
 		var th = tijd.getHours();
 		th=addzero(th);
 		tm=addzero(tm);
-		osdtimer.innerHTML = "<p class=osdtimer>" + th + ":" + tm + "</p>";
+		osdtimer.innerHTML = "<p class=osdtimer" + cssres[css_nr][Set_Res] + ">" + th + ":" + tm + "</p>";
 		SetLed(0,2,1);
 		switchicon = "\uE00C";
-		osdca.innerHTML = CAicon + switchicon + RECicon;
 		} else {
 		osdtimer.innerHTML = " ";
 		SetLed(0,0,0);
 		switchicon = '\uE003';
-		osdca.innerHTML = CAicon + switchicon + RECicon;
 		}
+	osdca.innerHTML = "<span class=osdca" + cssres[css_nr][Set_Res] + ">" + CAicon + switchicon + RECicon + "</span>";
 }
 
 // Left n characters of str
@@ -1634,7 +1633,7 @@ function GetEPG(epgchan)
 		CAicon = Radioicon;
 	}
 
-		osdca.innerHTML = CAicon + switchicon + RECicon;
+	osdca.innerHTML = "<span class=osdca" + cssres[css_nr][Set_Res] + ">" + CAicon + switchicon + RECicon + "</span>";
 
 	if (event.name)	{
 	 events = eitCache.getEvents(eitService, (Math.round(new Date().getTime()/1000.0)), 2000000000);
@@ -2377,7 +2376,7 @@ function onKeyMenu(keyCode) {
 		setTimeout("ShowTimerInfo();",100);
 	} else 	if (menu == 7) {
 		// Show info SearchTimers
-	       	osdepginfo.innerHTML = SearchTimer[timerID] ;
+	       	osdepginfo.innerHTML = "<pre class=epgtimerinfo>" + SearchTimer[timerID] + "</pre>";
 		osdepginfo.style.opacity = 1 - osdepginfo.style.opacity;
 	} else if (menu == 10) {
 		if (protChn[ChanGroup] !== 1 && ChanGroup !== Fav_group) {
@@ -3246,7 +3245,7 @@ function ShowSearchTimerInfo() {
 
 	  }
 
-       	osdepginfo.innerHTML = "<pre class=mainhead" + cssres[css_nr][Set_Res] + ">" + searchtimersSearch[timerID] + "\n </pre><pre>" + info1 + "</pre>" ;
+       	osdepginfo.innerHTML = "<pre class=mainhead" + cssres[css_nr][Set_Res] + ">" + searchtimersSearch[timerID] + "\n " + info1 + "</pre>" ;
 
 }
 
@@ -3609,7 +3608,7 @@ if (DelisOK) {
 	if (lang_prio_dyn.length > 1) {
 		is.setObject("cfg.media.audio.languagepriority",lang_prio_dyn[audio_dyn] + "," + lang_prio[audio],is.STORAGE_PERMANENT);
 		osdlang.style.opacity = 1;
-		osdlang.innerHTML = "<img src='unmute.png'> " + lang_prio_dyn[audio_dyn] + " ";
+		osdlang.innerHTML = "<pre class=osdvolume" + cssres[css_nr][Set_Res] + ">" + "<img src='unmute.png'> " + lang_prio_dyn[audio_dyn] + " </pre>";
 		setTimeout("osdlang.style.opacity = 0; ", 3000);
 	}
 	break;
@@ -4011,13 +4010,13 @@ try {
 	}
 	if (nrMedia!==0) { getRecOK = 1; } else {
 	getRecOK = 0;
-	medialist.innerHTML = "<h1 class=mainmenu" + cssres[css_nr][Set_Res] + ">" + Lang[38] + "</center><pre>\n\n\n" + Lang[37] + "</pre></h1>";
+	medialist.innerHTML = "<h1 class=mainmenu" + cssres[css_nr][Set_Res] + ">" + Lang[38] + "<pre>\n\n\n" + Lang[37] + "</pre></h1>";
 	}
 
   } catch(e) {
     alert("Get Recordings problem: " + e);
 	getRecOK = 0;
-	medialist.innerHTML = "<h1 class=mainmenu" + cssres[css_nr][Set_Res] + ">" + Lang[38] + "</center><pre>\n\n\n" + Lang[39] + "</pre></h1>";
+	medialist.innerHTML = "<h1 class=mainmenu" + cssres[css_nr][Set_Res] + ">" + Lang[38] + "<pre>\n\n\n" + Lang[39] + "</pre></h1>";
   }
 }
 
@@ -4572,7 +4571,7 @@ try {
   } catch(e) {
     alert("Get EPG problem: " + e);
 	getRecOK = 0;
-	medialist.innerHTML = "<h1 class=mainmenu" + cssres[css_nr][Set_Res] + ">" + Lang[50] + "</center><pre>\n\n\n" + Lang[51] + "</pre></h1>";
+	medialist.innerHTML = "<h1 class=mainmenu" + cssres[css_nr][Set_Res] + ">" + Lang[50] + "<pre>\n\n\n" + Lang[51] + "</pre></h1>";
   }
 }
 
@@ -4626,7 +4625,7 @@ function getSchedule(schchan){
 	} else {
 	getRecOK = 0;
 
-	medialist.innerHTML = "<h1 class=mainmenu" + cssres[css_nr][Set_Res] + ">" + Lang[11] + "</center><pre>\n\n\n" + Lang[52] + "</pre></h1>";
+	medialist.innerHTML = "<h1 class=mainmenu" + cssres[css_nr][Set_Res] + ">" + Lang[11] + "<pre>\n\n\n" + Lang[52] + "</pre></h1>";
 
 	if (experimental) {
 	medialist.innerHTML += "<img src='experimental/" + channels[schchan] + ".jpg' style='width:100%; position:absolute; left:0%; top:-11%;'>";
@@ -4635,7 +4634,7 @@ function getSchedule(schchan){
 	}
   } catch(e) {
 	getRecOK = 0;
-	medialist.innerHTML = "<h1 class=mainmenu" + cssres[css_nr][Set_Res] + ">" + Lang[11] + "</center><pre>\n\n\n" + Lang[53] + "</pre></h1>";
+	medialist.innerHTML = "<h1 class=mainmenu" + cssres[css_nr][Set_Res] + ">" + Lang[11] + "<pre>\n\n\n" + Lang[53] + "</pre></h1>";
   }
 
 }
@@ -4882,13 +4881,13 @@ if (get_recordings == 1) {
 	var x = (Number(recDura[currMed])/60).toFixed(0);
 	if (pos/60 > x) { x = (pos/60).toFixed(0);}
 	date_time();
-	osdmediatime.innerHTML = result;
+	osdmediatime.innerHTML = "<span class=osdtime" + cssres[css_nr][Set_Res] + ">" + result + "</span>";
 	date_time_rec();
 	osdmedia.innerHTML = "<pre class=media" + cssres[css_nr][Set_Res] + "> \n  " + (pos/60).toFixed(0) + " / " + x + "  " + Left(recTitl[currMed],40) + "\n  " + pos4 + "\n " + result + " </pre>";
 } else if ( get_recordings == 2) {
 	var pos = position + (mediaPlayer.getPosition()/1000);
 	date_time();
-	osdmediatime.innerHTML = result;
+	osdmediatime.innerHTML = "<span class=osdtime" + cssres[css_nr][Set_Res] + ">" + result + "</span>";
 	osdmedia.innerHTML = "<pre class=media" + cssres[css_nr][Set_Res] + "> \n  " + (pos/60).toFixed(0) + " \n " + Left(recTitl[currMed],40) + "\n  \n " + recStrt[currMed] + " </pre>";
 }
 }
@@ -4902,7 +4901,7 @@ function ShowInfo() {
 				+ "\n </p><p class=epg_avinfo>" + AvInfo[currMed] 
 				+ "</p><p class=epg_title> " + result + "\n " 
 				+ "???" + Lang[54]
-				+ "</p><p class=epg_info> Sorry STREAMDEV-plugin : " + Lang[37] + "</p></center>";
+				+ "</p><p class=epg_info> Sorry STREAMDEV-plugin : " + Lang[37] + "</p>";
   } else {
         date = new Date(Number(recStrt[currMed])*1000);
         year = date.getFullYear();
@@ -4920,11 +4919,11 @@ function ShowInfo() {
 					+ "</p><p class=epg_avinfo>" + AvInfo[currMed] 
 					+ "</p><p class=epg_title> " + result + "\n " 
 					+ (recDura[currMed] / 60).toFixed(0) + Lang[54] + "\n " + recChan[currMed] + "  "
-					+ "\n </p><p class=epg_info>" + Left(recDesc[currMed],750) + "</p></center>";
+					+ "\n </p><p class=epg_info_long>" + Left(recDesc[currMed],750) + "</p>";
 	} else {
 		//info for non-vdr recordings
 	       	osdepginfo.innerHTML = "<p class=epg_head>" + Left(recTitl[currMed],60) 
-					+ "\n </p><p class=epg_avinfo>" + AvInfo[currMed] + " " + "\n \n </p></center>";
+					+ "\n </p><p class=epg_avinfo>" + AvInfo[currMed] + " " + "\n \n </p>";
 	}
   }
 }
diff --git a/javascript/settings2.js b/javascript/settings2.js
index c173f7a..3aa5a91 100644
--- a/javascript/settings2.js
+++ b/javascript/settings2.js
@@ -138,7 +138,7 @@ function showChannelList() {
 	}
 	htmlstring = htmlstring + "</table>";
 	channellist.innerHTML = htmlstring;
-        chanlistepg.innerHTML = "<p class=epg>" + EPG[NowNext][1][currChan] + "</p><p class=list>" + Left(EPG[NowNext][4][currChan],250) + "</p>" ;
+        chanlistepg.innerHTML = "<p class=epg" + cssres[css_nr][Set_Res] + ">" + EPG[NowNext][1][currChan] + "</p><p class=list" + cssres[css_nr][Set_Res] + ">" + Left(EPG[NowNext][4][currChan],250) + "</p>" ;
 
 }
 
diff --git a/skins/blue.css b/skins/blue.css
index eccc35f..cefd169 100644
--- a/skins/blue.css
+++ b/skins/blue.css
@@ -53,6 +53,102 @@
 	font-size:81px;
 	}
 
+
+	.osdname576{
+	color		: black;
+	font-size:26px;
+	}
+
+	.osdname720{
+	color		: black;
+	font-size:34px;
+	}
+
+	.osdname1080{
+	color		: black;
+	font-size:51px;
+	}
+
+	.osdtime576 {
+		color		: white;
+		font-size:17px;
+		text-align: right;
+	}
+
+	.osdtime720 {
+		color		: white;
+		font-size:22px;
+		text-align: right;
+	}
+
+	.osdtime1080 {
+		color		: white;
+		font-size:35px;
+		text-align: right;
+	}
+
+	pre.osdlang576 {
+	color		:white;
+		font-size:16px;
+	}
+
+	pre.osdlang720 {
+	color		:white;
+		font-size:20px;
+	}
+
+	pre.osdlang1080 {
+	color		:white;
+		font-size:30px;
+	}
+
+
+
+	.osdca576 {
+		color		: black;
+		font-size:32px;
+	}
+
+	.osdca720 {
+		color		: black;
+		font-size:40px;
+	}
+
+	.osdca1080 {
+		color		: black;
+		font-size:60px;
+	}
+
+	pre.osdvolume576 {
+		color		: green;
+		font-size:35px;
+	}
+
+	pre.osdvolume720 {
+		color		: green;
+		font-size:44px;
+	}
+
+	pre.osdvolume1080 {
+		color		: green;
+		font-size:66px;
+	}
+
+
+	pre.osdepg576 {
+		color		: white;
+		font-size:18px;
+	}
+
+	pre.osdepg720 {
+		color		: white;
+		font-size:23px;
+	}
+	pre.osdepg1080 {
+		color		: white;
+		font-size:36px;
+	}
+
 	.notset {
 	color	:grey;
 	}
@@ -174,20 +270,71 @@
 	p.epg_info {
 	color:yellow;
 	text-align: center;
+	font-size:39px;
+	}
+
+	p.epg_info_long {
+	color:yellow;
+	text-align: center;
+	font-size:39px;
 	}
 
-	pre.color_switchtimer {
+
+	pre.color_switchtimer576 {
 	background		: #660066;
+	font-size:19px;
+	color		:white;
 	}
 
-	pre.color_default {
+	pre.color_switchtimer720 {
+	background		: #660066;
+	font-size:24px;
+	color		:white;
+	}
+
+	pre.color_switchtimer1080 {
+	background		: #660066;
+	font-size:36px;
+	color		:white;
+	}
+
+	pre.color_default576 {
 	background		: green;
+	font-size:19px;
+	color		:white;
 	}
 
-	pre.color_error {
+	pre.color_default720 {
+	background		: green;
+	font-size:24px;
+	color		:white;
+	}
+
+	pre.color_default1080 {
+	background		: green;
+	font-size:36px;
+	color		:white;
+	}
+
+	pre.color_error576 {
 	background		: red;
+	font-size:19px;
+	color		:white;
+	}
+
+	pre.color_error720 {
+	background		: red;
+	font-size:24px;
+	color		:white;
 	}
 
+	pre.color_error1080 {
+	background		: red;
+	font-size:36px;
+	color		:white;
+	}
+
+
 	h1.mainmenu576 {
 	font-size:35px;
 	color:white;
@@ -263,24 +410,56 @@
 	text-align: center;
 	}
 
-/*    */
-	p.epg {
-	font-size:36px;
+	p.epg576 {
+	font-size:19px;
 	color:black;
 	text-align: center;
 	}
 	
-	p.list {
-	font-size:34px;
+	p.epg720 {
+	font-size:24px;
+	color:black;
+	text-align: center;
+	}
+
+	p.epg1080 {
+	font-size:36px;
+	color:black;
+	text-align: center;
+	}
+
+	p.list576 {
+	font-size:18px;
 	color:black;
 	text-align: center;
 	}
 
-	p.osdtimer {
+	p.list720 {
+	font-size:23px;
+	color:black;
+	text-align: center;
+	}
+
+	p.list1080 {
 	font-size:34px;
 	color:black;
+	text-align: center;
 	}
 
+	p.osdtimer576 {
+	font-size:18px;
+	color:black;
+	}
+
+	p.osdtimer720 {
+	font-size:23px;
+	color:black;
+	}
+
+	p.osdtimer1080 {
+	font-size:34px;
+	color:black;
+	}
 
 	div#osdmain {
 	position		: absolute;
@@ -305,7 +484,7 @@
 	color			: black;
 	text-align: center;
 	}
-	
+
 	div#osdname {
 	z-index			: 505;
 		position	: absolute;
@@ -313,8 +492,6 @@
 		height		: 4%;
 		left		: 3%;
 		top 		: 20%;
-		color		: black;
-		font-size:51px;
 	}
 
 
@@ -332,20 +509,14 @@
 		width		: 42%;
 		right		: 5%;
 		top		: 7%;
-		color		: white;
-		font-size:35px;
-		text-align: right;
 	}
 
-	
 	div#osdepg {
 	z-index			: 505;
 		position	: absolute;
 		width		: 63%;
 		left		: 17%;
 		top		: 30%;
-		color		: white;
-		font-size:36px;
 	}
 	
 	div#osdca { 
@@ -354,11 +525,8 @@
 		width		: 5%;
 		left		: 75%;
 		top		: 20%;
-		color		: black;
-		font-size:60px;
 	}
 
-
 	div#channellist { 
 	z-index			: 400;
 		position	: absolute;
@@ -369,6 +537,8 @@
 	background		: #bbb;
 	}
 
+/*    */
+
 	div#colorkeys { 
 	z-index			: 401;
 		position	: absolute;
@@ -378,6 +548,26 @@
 		font-size:36px;
 	}
 
+/*    */
+
+	div#osdmediatime {
+	z-index			: 506;
+		position	: absolute;
+		width		: 42%;
+		right		: 15%;
+		top		: 63%;
+		color		: white;
+	}
+
+	div#osdlang {
+	width		:7%;
+	position	:absolute;
+	left		:76%;
+	top		:9%;
+	z-index		:515;
+	opacity		:0;
+	}
+
 	div#chanlistepg { 
 	z-index			: 402;
 		position	: absolute;
@@ -393,8 +583,6 @@
 		left		: 10%;
 		top		: 80%;
 		opacity		: 0;
-		color		: green;
-		font-size:66px;
 	}
 
 	div#osdmedia { 
@@ -408,19 +596,6 @@
 	background		: #3366ff;
 	}
 
-	div#osdmediatime {
-	z-index			: 506;
-		position	: absolute;
-		width		: 42%;
-		right		: 15%;
-		top		: 63%;
-		color		: white;
-		font-size:35px;
-		text-align: right;
-	}
-
-
-
 	div#schedule {
 	width		:50%;
 	height		:75%;
@@ -442,17 +617,6 @@
 	opacity		:0;
 	}
 
-	div#osdlang {
-	width		:7%;
-	position	:absolute;
-	left		:76%;
-	top		:9%;
-	z-index		:515;
-	opacity		:0;
-	color		:white;
-		font-size:30px;
-	}
-
 	div#mainmenu {
 	width		:80%;
 	position	:absolute;
@@ -485,9 +649,7 @@
 	z-index		:530;
 	opacity		:0;
 	-webkit-border-radius:25px;
-	color		:white;
-		font-size:36px;
-	background	:green;
+	background	:lightblue;
 	}
 
 	div#osdepginfo {
@@ -499,7 +661,6 @@
 	opacity		:0;
 	-webkit-border-radius:50px;
 	background		: #3366ff;
-		font-size:39px;
 	}
 
 	div#osdepginfonext {
@@ -511,6 +672,5 @@
 	opacity		:0;
 	-webkit-border-radius:50px;
 	background		: #3366ff;
-		font-size:39px;
 	}