Check server response of
Server response
NS records
Whois domain
200 OK - mdxfm.com
HTTP Status: 200
User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])
Date: Sat, 03 May 2025 11:55:35 GMT
Server: Apache
Last-Modified: Wed, 04 Dec 2019 03:50:27 GMT
Vary: Accept-Encoding
Content-Type: text/html
X-Varnish: 1652066197
Age: 0
Via: 1.1 webcache2 (Varnish/7.7)
ETag: W/"1bc7f-598d8b6a13d4d-gzip"
Accept-Ranges: bytes
Connection: keep-alive
Transfer-Encoding: chunked
HTTP Code 200 OK
200 status code is a standard successful HTTP server response. It means that the client’s request (e.g., from a browser) was successfully processed, and the server is delivering the requested data.
When is Code 200 used?
- When loading a web page
- When successfully receiving an API response
- When processing a form or another HTTP request
What does Code 200 mean for the user?
The user receives content without errors, and the page or application functions properly. If Code 200 is accompanied by data, the browser or program processes and displays it to the user.
GET / HTTP/1.1 Host: mdxfm.com Accept: */* User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index.html</title>
<style id="applicationStylesheet" type="text/css">
.mediaViewInfo {
--web-view-name: index.html;
--web-view-id: index_html;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
:root {
--web-view-ids: index_html;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
}
#index_html {
position: absolute;
background: #E5E5E5;
width: 1920px;
height: 2014px;
background-color: rgba(255,255,255,1);
overflow: hidden;
--web-view-name: index.html;
--web-view-id: index_html;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
#Shows {
position: absolute;
width: 1215px;
height: 1585px;
left: 494px;
top: 410.5px;
overflow: visible;
}
#Show_Details {
position: absolute;
width: 1215px;
height: 301px;
left: 0px;
top: 1284px;
overflow: visible;
}
#Image {
position: absolute;
width: 960px;
height: 300px;
left: 0px;
top: 0.5px;
overflow: visible;
}
.Rect {
width: 131px;
height: 563.368px;
position: absolute;
overflow: visible;
transform: translate(-494px, -1683.5px) matrix(1,0,0,1,732.6839,1619.3161) rotate(-90deg);
transform-origin: center;
}
#Day_Time {
position: absolute;
width: 97px;
height: 94px;
left: 38px;
top: 170.5px;
overflow: visible;
}
.Square {
position: absolute;
overflow: visible;
width: 97px;
height: 94px;
left: 0px;
top: 0px;
}
#Mon {
position: absolute;
left: 13px;
top: 18px;
overflow: hidden;
width: 73px;
height: 35px;
text-align: center;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(191,30,46,1);
}
#ID10_12 {
position: absolute;
left: 13px;
top: 53px;
overflow: hidden;
width: 73px;
height: 31px;
text-align: center;
font-family: Myriad Pro;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(191,30,46,1);
}
.Overlay_p {
width: 301px;
height: 373px;
position: absolute;
overflow: visible;
transform: translate(-494px, -1683.5px) matrix(1,0,0,1,1207.5,1647.5) rotate(90deg);
transform-origin: center;
}
#Lorem_ipsum_dolor_sit_amet__co {
position: absolute;
left: 158px;
top: 203.5px;
overflow: hidden;
width: 413px;
height: 74px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(255,255,255,1);
}
#Ella_and_Shawaz {
position: absolute;
left: 156px;
top: 170.5px;
overflow: visible;
width: 307px;
white-space: nowrap;
text-align: left;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(255,255,255,1);
}
#MC_Players {
position: absolute;
width: 491px;
height: 278px;
left: 724px;
top: 12.5px;
overflow: visible;
}
#MC_Player {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 0px;
overflow: visible;
}
#MC_Player_u {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 71px;
overflow: visible;
}
#MC_Player_v {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 142px;
overflow: visible;
}
#MC_Player_w {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 213px;
overflow: visible;
}
#Show_Details_x {
position: absolute;
width: 1215px;
height: 301px;
left: 0px;
top: 963px;
overflow: visible;
}
#Image_y {
position: absolute;
width: 960px;
height: 300px;
left: 0px;
top: 0.5px;
overflow: visible;
}
.Rect_z {
width: 131px;
height: 563.368px;
position: absolute;
overflow: visible;
transform: translate(-494px, -1362.5px) matrix(1,0,0,1,732.6839,1298.3161) rotate(-90deg);
transform-origin: center;
}
#Day_Time_ {
position: absolute;
width: 97px;
height: 94px;
left: 38px;
top: 170.5px;
overflow: visible;
}
.Square_ {
position: absolute;
overflow: visible;
width: 97px;
height: 94px;
left: 0px;
top: 0px;
}
#Mon_ {
position: absolute;
left: 13px;
top: 18px;
overflow: hidden;
width: 73px;
height: 35px;
text-align: center;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(191,30,46,1);
}
#ID10_12_ {
position: absolute;
left: 13px;
top: 53px;
overflow: hidden;
width: 73px;
height: 31px;
text-align: center;
font-family: Myriad Pro;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(191,30,46,1);
}
.Overlay_ba {
width: 301px;
height: 373px;
position: absolute;
overflow: visible;
transform: translate(-494px, -1362.5px) matrix(1,0,0,1,1207.5,1326.5) rotate(90deg);
transform-origin: center;
}
#Lorem_ipsum_dolor_sit_amet__co_ {
position: absolute;
left: 158px;
top: 203.5px;
overflow: hidden;
width: 413px;
height: 74px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(255,255,255,1);
}
#Ella_and_Shawaz_ {
position: absolute;
left: 156px;
top: 170.5px;
overflow: visible;
width: 192px;
white-space: nowrap;
text-align: left;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(255,255,255,1);
}
#MC_Players_ {
position: absolute;
width: 491px;
height: 278px;
left: 724px;
top: 12.5px;
overflow: visible;
}
#MC_Player_ {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 0px;
overflow: visible;
}
#MC_Player_ba {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 71px;
overflow: visible;
}
#MC_Player_bb {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 142px;
overflow: visible;
}
#MC_Player_bc {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 213px;
overflow: visible;
}
#Show_Details_bd {
position: absolute;
width: 1215px;
height: 301px;
left: 0px;
top: 642px;
overflow: visible;
}
#Image_be {
position: absolute;
width: 960px;
height: 300px;
left: 0px;
top: 0.5px;
overflow: visible;
}
.Rect_bf {
width: 131px;
height: 563.368px;
position: absolute;
overflow: visible;
transform: translate(-494px, -1041.5px) matrix(1,0,0,1,732.6839,977.3161) rotate(-90deg);
transform-origin: center;
}
#Day_Time_bg {
position: absolute;
width: 97px;
height: 94px;
left: 38px;
top: 170.5px;
overflow: visible;
}
.Square_bh {
position: absolute;
overflow: visible;
width: 97px;
height: 94px;
left: 0px;
top: 0px;
}
#Mon_bi {
position: absolute;
left: 13px;
top: 18px;
overflow: hidden;
width: 73px;
height: 35px;
text-align: center;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(191,30,46,1);
}
#ID10_12_bj {
position: absolute;
left: 13px;
top: 53px;
overflow: hidden;
width: 73px;
height: 31px;
text-align: center;
font-family: Myriad Pro;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(191,30,46,1);
}
.Overlay_bl {
width: 301px;
height: 373px;
position: absolute;
overflow: visible;
transform: translate(-494px, -1041.5px) matrix(1,0,0,1,1207.5,1005.5) rotate(90deg);
transform-origin: center;
}
#Lorem_ipsum_dolor_sit_amet__co_bm {
position: absolute;
left: 158px;
top: 203.5px;
overflow: hidden;
width: 413px;
height: 74px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(255,255,255,1);
}
#Ella_and_Shawaz_bn {
position: absolute;
left: 156px;
top: 170.5px;
overflow: visible;
width: 200px;
white-space: nowrap;
text-align: left;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(255,255,255,1);
}
#MC_Players_bo {
position: absolute;
width: 491px;
height: 278px;
left: 724px;
top: 12.5px;
overflow: visible;
}
#MC_Player_bp {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 0px;
overflow: visible;
}
#MC_Player_bq {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 71px;
overflow: visible;
}
#MC_Player_br {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 142px;
overflow: visible;
}
#MC_Player_bs {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 213px;
overflow: visible;
}
#Show_Details_bt {
position: absolute;
width: 1215px;
height: 301px;
left: 0px;
top: 321px;
overflow: visible;
}
#Image_bu {
position: absolute;
width: 960px;
height: 300px;
left: 0px;
top: 0.5px;
overflow: visible;
}
.Rect_bv {
width: 131px;
height: 563.368px;
position: absolute;
overflow: visible;
transform: translate(-494px, -720.5px) matrix(1,0,0,1,732.6839,656.3161) rotate(-90deg);
transform-origin: center;
}
#Day_Time_bw {
position: absolute;
width: 97px;
height: 94px;
left: 38px;
top: 170.5px;
overflow: visible;
}
.Square_bx {
position: absolute;
overflow: visible;
width: 97px;
height: 94px;
left: 0px;
top: 0px;
}
#Mon_by {
position: absolute;
left: 13px;
top: 18px;
overflow: hidden;
width: 73px;
height: 35px;
text-align: center;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(191,30,46,1);
}
#ID10_12_bz {
position: absolute;
left: 13px;
top: 53px;
overflow: hidden;
width: 73px;
height: 31px;
text-align: center;
font-family: Myriad Pro;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(191,30,46,1);
}
.Overlay_ca {
width: 301px;
height: 373px;
position: absolute;
overflow: visible;
transform: translate(-494px, -720.5px) matrix(1,0,0,1,1207.5,684.5) rotate(90deg);
transform-origin: center;
}
#Lorem_ipsum_dolor_sit_amet__co_b {
position: absolute;
left: 158px;
top: 203.5px;
overflow: hidden;
width: 413px;
height: 74px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(255,255,255,1);
}
#Ella_and_Shawaz_b {
position: absolute;
left: 156px;
top: 170.5px;
overflow: visible;
width: 367px;
white-space: nowrap;
text-align: left;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(255,255,255,1);
}
#MC_Players_b {
position: absolute;
width: 491px;
height: 278px;
left: 724px;
top: 12.5px;
overflow: visible;
}
#MC_Player_b {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 0px;
overflow: visible;
}
#MC_Player_ca {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 71px;
overflow: visible;
}
#MC_Player_cb {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 142px;
overflow: visible;
}
#MC_Player_cc {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 213px;
overflow: visible;
}
#Show_Details_b {
position: absolute;
width: 1215px;
height: 301px;
left: 0px;
top: 0px;
overflow: visible;
}
#Image_ca {
position: absolute;
width: 960px;
height: 300px;
left: 0px;
top: 0.5px;
overflow: visible;
}
.Rect_cb {
width: 131px;
height: 563.368px;
position: absolute;
overflow: visible;
transform: translate(-494px, -399.5px) matrix(1,0,0,1,732.6839,335.3161) rotate(-90deg);
transform-origin: center;
}
#Day_Time_cc {
position: absolute;
width: 97px;
height: 94px;
left: 38px;
top: 170.5px;
overflow: visible;
}
.Square_cd {
position: absolute;
overflow: visible;
width: 97px;
height: 94px;
left: 0px;
top: 0px;
}
#Mon_ce {
position: absolute;
left: 13px;
top: 18px;
overflow: hidden;
width: 73px;
height: 35px;
text-align: center;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(191,30,46,1);
}
#ID10_12_cf {
position: absolute;
left: 13px;
top: 53px;
overflow: hidden;
width: 73px;
height: 31px;
text-align: center;
font-family: Myriad Pro;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: rgba(191,30,46,1);
}
.Overlay_ch {
width: 301px;
height: 373px;
position: absolute;
overflow: visible;
transform: translate(-494px, -399.5px) matrix(1,0,0,1,1207.5,363.5) rotate(90deg);
transform-origin: center;
}
#Lorem_ipsum_dolor_sit_amet__co_ci {
position: absolute;
left: 158px;
top: 203.5px;
overflow: hidden;
width: 413px;
height: 74px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(255,255,255,1);
}
#Ella_and_Shawaz_cj {
position: absolute;
left: 156px;
top: 170.5px;
overflow: visible;
width: 250px;
white-space: nowrap;
text-align: left;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(255,255,255,1);
}
#MC_Players_ck {
position: absolute;
width: 491px;
height: 278px;
left: 724px;
top: 12.5px;
overflow: visible;
}
#MC_Player_cl {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 0px;
overflow: visible;
}
#MC_Player_cm {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 71px;
overflow: visible;
}
#MC_Player_cn {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 142px;
overflow: visible;
}
#MC_Player_co {
position: absolute;
width: 491px;
height: 65px;
left: 0px;
top: 213px;
overflow: visible;
}
#Banner_Left {
position: absolute;
width: 300px;
height: 2014px;
left: 180px;
top: 0px;
overflow: visible;
}
.Banner_Nav {
position: absolute;
overflow: visible;
width: 300px;
height: 2014px;
left: 0px;
top: 0px;
}
#Shows_Nav {
position: absolute;
width: 254px;
height: 844px;
left: 23px;
top: 410px;
overflow: visible;
}
#Live_Broadcast {
position: absolute;
left: 0px;
top: 0px;
overflow: visible;
width: 160px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Ella_and_Shawaz_ct {
position: absolute;
left: 0px;
top: 43px;
overflow: visible;
width: 175px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Guinness_and_Company {
position: absolute;
left: 0px;
top: 86px;
overflow: visible;
width: 255px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#DJ_Collective {
position: absolute;
left: 0px;
top: 129px;
overflow: visible;
width: 141px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Czech_it_out_ {
position: absolute;
left: 0px;
top: 172px;
overflow: visible;
width: 135px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Bardadi_Sabe_Conta {
position: absolute;
left: 0px;
top: 215px;
overflow: visible;
width: 215px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Waves {
position: absolute;
left: 0px;
top: 258px;
overflow: visible;
width: 71px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#The_JC_Hour {
position: absolute;
left: 0px;
top: 301px;
overflow: visible;
width: 134px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Dani___Barbs {
position: absolute;
left: 0px;
top: 344px;
overflow: visible;
width: 140px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Gifted___Growing {
position: absolute;
left: 0px;
top: 387px;
overflow: visible;
width: 182px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Tim___John {
position: absolute;
left: 0px;
top: 430px;
overflow: visible;
width: 120px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Rachael_s_Show {
position: absolute;
left: 0px;
top: 473px;
overflow: visible;
width: 171px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Scratch {
position: absolute;
left: 0px;
top: 516px;
overflow: visible;
width: 83px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Welcome_to_Afro {
position: absolute;
left: 0px;
top: 559px;
overflow: visible;
width: 178px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Beats___Beats {
position: absolute;
left: 0px;
top: 602px;
overflow: visible;
width: 151px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Soundboard {
position: absolute;
left: 0px;
top: 645px;
overflow: visible;
width: 132px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Pure_Jazz {
position: absolute;
left: 0px;
top: 688px;
overflow: visible;
width: 105px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#ID90s_Kidz {
position: absolute;
left: 0px;
top: 731px;
overflow: visible;
width: 92px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Latest_and_greatest {
position: absolute;
left: 0px;
top: 774px;
overflow: visible;
width: 207px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Hip_Hop_Soc {
position: absolute;
left: 0px;
top: 817px;
overflow: visible;
width: 136px;
white-space: nowrap;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 23px;
color: rgba(255,255,255,1);
}
#Timeline {
position: absolute;
width: 59.5px;
height: 1879.5px;
left: 1679.5px;
top: 204px;
overflow: visible;
}
.Line_1 {
overflow: visible;
position: absolute;
width: 2px;
height: 1866px;
left: 47px;
top: 13.5px;
transform: matrix(1,0,0,1,0,0);
}
.Ellipse_1 {
position: absolute;
overflow: visible;
width: 25px;
height: 25px;
left: 34.5px;
top: 0px;
}
.Ellipse_2 {
position: absolute;
overflow: visible;
width: 25px;
height: 25px;
left: 34.5px;
top: 345px;
}
.Ellipse_3 {
position: absolute;
overflow: visible;
width: 25px;
height: 25px;
left: 34.5px;
top: 666px;
}
.Ellipse_4 {
position: absolute;
overflow: visible;
width: 25px;
height: 25px;
left: 34.5px;
top: 987px;
}
.Ellipse_5 {
position: absolute;
overflow: visible;
width: 25px;
height: 25px;
left: 34.5px;
top: 1308px;
}
.Ellipse_6 {
position: absolute;
overflow: visible;
width: 25px;
height: 25px;
left: 34.5px;
top: 1629px;
}
.Line_2 {
overflow: visible;
position: absolute;
width: 35px;
height: 2px;
left: 0px;
top: 12.5px;
transform: matrix(1,0,0,1,0,0);
}
.Line_3 {
overflow: visible;
position: absolute;
width: 35px;
height: 2px;
left: 0px;
top: 357.5px;
transform: matrix(1,0,0,1,0,0);
}
.Line_4 {
overflow: visible;
position: absolute;
width: 35px;
height: 2px;
left: 0px;
top: 678.5px;
transform: matrix(1,0,0,1,0,0);
}
.Line_5 {
overflow: visible;
position: absolute;
width: 35px;
height: 2px;
left: 0px;
top: 999.5px;
transform: matrix(1,0,0,1,0,0);
}
.Line_6 {
overflow: visible;
position: absolute;
width: 35px;
height: 2px;
left: 0px;
top: 1320.5px;
transform: matrix(1,0,0,1,0,0);
}
.Line_7 {
overflow: visible;
position: absolute;
width: 35px;
height: 2px;
left: 0px;
top: 1641.5px;
transform: matrix(1,0,0,1,0,0);
}
#Banner_Top {
position: absolute;
width: 1920px;
height: 334.5px;
left: 0px;
top: 51px;
overflow: visible;
}
#Banner_Image {
position: absolute;
width: 960px;
height: 300px;
left: 480px;
top: 0px;
overflow: visible;
}
.Banner_Fold {
overflow: visible;
position: absolute;
width: 42px;
height: 28px;
transform: translate(0px, -40px) matrix(1,0,0,1,472.5,58.5) rotate(90deg);
transform-origin: center;
left: 0px;
top: 0px;
}
.Grey_BG {
filter: drop-shadow(-5px 5px 10px rgba(0, 0, 0, 0.161));
width: 300px;
height: 509px;
position: absolute;
overflow: visible;
transform: translate(0px, -40px) matrix(1,0,0,1,104.5,-30.5) rotate(-90deg);
transform-origin: center;
}
.Grey_Overlay_dv {
width: 300px;
height: 1440px;
position: absolute;
overflow: visible;
transform: translate(0px, -40px) matrix(1,0,0,1,1050,-530) rotate(270deg);
transform-origin: center;
}
#Logo {
position: absolute;
width: 174px;
height: 268px;
left: 243px;
top: 50px;
overflow: visible;
}
#MDX_FM_Logo {
position: absolute;
width: 174px;
height: 268px;
left: 0px;
top: 0px;
overflow: visible;
}
#Status {
position: absolute;
width: 1403.5px;
height: 93px;
left: 516.5px;
top: 241.5px;
overflow: visible;
}
.Rect_dz {
filter: drop-shadow(-5px 5px 10px rgba(0, 0, 0, 0.502));
width: 93px;
height: 1403.5px;
position: absolute;
overflow: visible;
transform: translate(-529.5px, -265.5px) matrix(1,0,0,1,1184.75,-389.75) rotate(-90deg);
transform-origin: center;
}
#Live_Now {
position: absolute;
left: 109.5px;
top: 10px;
overflow: visible;
width: 372px;
white-space: nowrap;
text-align: left;
font-family: Myriad Pro;
font-style: normal;
font-weight: bold;
font-size: 35px;
color: rgba(255,255,255,1);
line-height: 40px;
}
.Play_Btn {
overflow: visible;
position: absolute;
width: 52px;
height: 46px;
transform: translate(-529.5px, -265.5px) matrix(1,0,0,1,563,289) rotate(90deg);
transform-origin: center;
left: 0px;
top: 0px;
}
.Line_Description {
position: absolute;
overflow: visible;
width: 9px;
height: 199px;
left: 1264px;
top: 31px;
}
#Show_Description {
position: absolute;
left: 1286px;
top: 31px;
overflow: hidden;
width: 454px;
height: 199px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 25px;
color: rgba(0,0,0,1);
}
#Other_Sites {
position: absolute;
left: 1350px;
top: 13px;
overflow: visible;
width: 390px;
white-space: nowrap;
line-height: 30px;
margin-top: -5px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(64,64,65,1);
}
#Social_Media_Links {
position: absolute;
width: 309.408px;
height: 48.484px;
left: 1425px;
top: 313px;
overflow: visible;
}
.Icon_awesome_facebook_f {
overflow: visible;
position: absolute;
width: 25.967px;
height: 48.484px;
left: 0px;
top: 0px;
transform: matrix(1,0,0,1,0,0);
}
.Icon_awesome_twitter {
overflow: visible;
position: absolute;
width: 48.484px;
height: 39.378px;
left: 46px;
top: 5px;
transform: matrix(1,0,0,1,0,0);
}
.Icon_awesome_instagram {
overflow: visible;
position: absolute;
width: 42.447px;
height: 42.437px;
left: 115px;
top: 4px;
transform: matrix(1,0,0,1,0,0);
}
.Icon_awesome_youtube {
overflow: visible;
position: absolute;
width: 51.716px;
height: 36.363px;
left: 177px;
top: 7px;
transform: matrix(1,0,0,1,0,0);
}
.Icon_awesome_mixcloud {
overflow: visible;
position: absolute;
width: 60.408px;
height: 35.605px;
left: 249px;
top: 7px;
transform: matrix(1,0,0,1,0,0);
}
</style>
<script id="applicationScript">
///////////////////////////////////////
// INITIALIZATION
///////////////////////////////////////
/**
* Functionality for scaling, showing by media query, and navigation between multiple pages on a single page.
* Code subject to change.
**/
if (window.console==null) { window["console"] = { log : function() {} } }; // some browsers do not set console
var Application = function() {
// event constants
this.NAVIGATION_CHANGE = "viewChange";
this.VIEW_NOT_FOUND = "viewNotFound";
this.VIEW_CHANGE = "viewChange";
this.STATE_NOT_FOUND = "stateNotFound";
this.APPLICATION_COMPLETE = "applicationComplete";
this.SIZE_STATE_NAME = "data-is-view-scaled";
this.lastView = null;
this.lastState = null;
this.lastOverlay = null;
this.currentView = null;
this.currentState = null;
this.currentOverlay = null;
this.currentQuery = {index: 0, rule: null, mediaText: null, id: null};
this.inclusionQuery = "(min-width: 0px)";
this.exclusionQuery = "none and (min-width: 99999px)";
this.LastModifiedDateLabelName = "LastModifiedDateLabel";
this.viewScaleSliderId = "ViewScaleSliderInput";
this.pageRefreshedName = "showPageRefreshedNotification";
this.prefix = "--web-";
this.applicationStylesheet = null;
this.mediaQueryDictionary = {};
this.viewsDictionary = {};
this.addedViews = [];
this.views = {};
this.viewIds = [];
this.viewQueries = {};
this.numberOfViews = 0;
this.verticalPadding = 0;
this.horizontalPadding = 0;
this.stateName = null;
this.viewScale = 1;
this.viewLeft = 0;
this.viewTop = 0;
// view settings
this.showUpdateNotification = false;
this.showNavigationControls = false;
this.scaleViewsToFit = false;
this.scaleToFitOnDoubleClick = false;
this.actualSizeOnDoubleClick = false;
this.scaleViewsOnResize = false;
this.navigationOnKeypress = false;
this.showViewName = false;
this.enableDeepLinking = true;
this.refreshPageForChanges = false;
this.showRefreshNotifications = true;
// view controls
this.scaleViewSlider = null;
this.lastModifiedLabel = null;
this.supportsPopState = false; // window.history.pushState!=null;
this.initialized = false;
// refresh properties
this.refreshDuration = 250;
this.lastModifiedDate = null;
this.refreshRequest = null;
this.refreshInterval = null;
this.refreshContent = null;
this.refreshContentSize = null;
this.refreshCheckContent = false;
this.refreshCheckContentSize = false;
var self = this;
self.initialize = function(event) {
var view = self.getVisibleView();
if (view==null) view = self.getInitialView();
self.collectViews();
self.collectMediaQueries();
self.setViewOptions(view);
self.setViewVariables(view);
// sometimes the body size is 0 so we call this now and again later
if (self.initialized) {
window.addEventListener(self.NAVIGATION_CHANGE, self.viewChangeHandler);
window.addEventListener("keyup", self.keypressHandler);
window.addEventListener("keypress", self.keypressHandler);
window.addEventListener("resize", self.resizeHandler);
window.document.addEventListener("dblclick", self.doubleClickHandler);
if (self.supportsPopState) {
window.addEventListener('popstate', self.popStateHandler);
}
else {
window.addEventListener('hashchange', self.hashChangeHandler);
}
// we are ready to go
window.dispatchEvent(new Event(self.APPLICATION_COMPLETE));
}
if (self.initialized==false) {
if (self.showNavigationControls || (self.singlePageApplication && self.showByMediaQuery==false)) {
self.syncronizeViewToURL();
}
if (self.refreshPageForChanges) {
self.setupRefreshForChanges();
}
self.initialized = true;
}
if (self.scaleViewsToFit) {
self.viewScale = self.scaleViewToFit(view);
if (self.viewScale<0) {
setTimeout(self.scaleViewToFit, 500, view);
}
}
else if (view) {
self.viewScale = self.getViewScaleValue(view);
self.updateSliderValue(self.viewScale);
}
else {
// no view found
}
if (self.showUpdateNotification) {
self.showNotification();
}
//"addEventListener" in window ? null : window.addEventListener = window.attachEvent;
//"addEventListener" in document ? null : document.addEventListener = document.attachEvent;
}
///////////////////////////////////////
// AUTO REFRESH
///////////////////////////////////////
self.setupRefreshForChanges = function() {
self.refreshRequest = new XMLHttpRequest();
if (!self.refreshRequest) {
return false;
}
// get document start values immediately
self.requestRefreshUpdate();
}
/**
* Attempt to check the last modified date by the headers
* or the last modified property from the byte array (experimental)
**/
self.requestRefreshUpdate = function() {
var url = document.location.href;
var protocol = window.location.protocol;
var method;
try {
if (self.refreshCheckContentSize) {
self.refreshRequest.open('HEAD', url, true);
}
else if (self.refreshCheckContent) {
self.refreshContent = document.documentElement.outerHTML;
self.refreshRequest.open('GET', url, true);
self.refreshRequest.responseType = "text";
}
else {
// get page last modified date for the first call to compare to later
if (self.lastModifiedDate==null) {
// File system does not send headers in FF so get blob if possible
if (protocol=="file:") {
self.refreshRequest.open("GET", url, true);
self.refreshRequest.responseType = "blob";
}
else {
self.refreshRequest.open("HEAD", url, true);
self.refreshRequest.responseType = "blob";
}
self.refreshRequest.onload = self.refreshOnLoadOnceHandler;
// In some browsers (Chrome & Safari) this error occurs at send:
//
// Chrome - Access to XMLHttpRequest at 'file:///index.html' from origin 'null'
// has been blocked by CORS policy:
// Cross origin requests are only supported for protocol schemes:
// http, data, chrome, chrome-extension, https.
//
// Safari - XMLHttpRequest cannot load file:///Users/user/Public/index.html. Cross origin requests are only supported for HTTP.
//
// Solution is to run a local server, set local permissions or test in another browser
self.refreshRequest.send(null);
// In MS browsers the following behavior occurs possibly due to an AJAX call to check last modified date:
//
// DOM7011: The code on this page disabled back and forward caching.
// In Brave (Chrome) error when on the server
// index.js:221 HEAD https://www.example.com/ net::ERR_INSUFFICIENT_RESOURCES
// self.refreshRequest.send(null);
}
else {
self.refreshRequest = new XMLHttpRequest();
self.refreshRequest.onreadystatechange = self.refreshHandler;
self.refreshRequest.ontimeout = function() {
self.log("Couldn't find page to check for updates");
}
var method;
if (protocol=="file:") {
method = "GET";
}
else {
method = "HEAD";
}
//refreshRequest.open('HEAD', url, true);
self.refreshRequest.open(method, url, true);
self.refreshRequest.responseType = "blob";
self.refreshRequest.send(null);
}
}
}
catch (error) {
self.log("Refresh failed for the following reason:")
self.log(error);
}
}
self.refreshHandler = function() {
var contentSize;
try {
if (self.refreshRequest.readyState === XMLHttpRequest.DONE) {
if (self.refreshRequest.status === 2 ||
self.refreshRequest.status === 200) {
var pageChanged = false;
self.updateLastModifiedLabel();
if (self.refreshCheckContentSize) {
var lastModifiedHeader = self.refreshRequest.getResponseHeader("Last-Modified");
contentSize = self.refreshRequest.getResponseHeader("Content-Length");
//lastModifiedDate = refreshRequest.getResponseHeader("Last-Modified");
var headers = self.refreshRequest.getAllResponseHeaders();
var hasContentHeader = headers.indexOf("Content-Length")!=-1;
if (hasContentHeader) {
contentSize = self.refreshRequest.getResponseHeader("Content-Length");
// size has not been set yet
if (self.refreshContentSize==null) {
self.refreshContentSize = contentSize;
// exit and let interval call this method again
return;
}
if (contentSize!=self.refreshContentSize) {
pageChanged = true;
}
}
}
else if (self.refreshCheckContent) {
if (self.refreshRequest.responseText!=self.refreshContent) {
pageChanged = true;
}
}
else {
lastModifiedHeader = self.getLastModified(self.refreshRequest);
if (self.lastModifiedDate!=lastModifiedHeader) {
self.log("lastModifiedDate:" + self.lastModifiedDate + ",lastModifiedHeader:" +lastModifiedHeader);
pageChanged = true;
}
}
if (pageChanged) {
clearInterval(self.refreshInterval);
self.refreshUpdatedPage();
return;
}
}
else {
self.log('There was a problem with the request.');
}
}
}
catch( error ) {
//console.log('Caught Exception: ' + error);
}
}
self.refreshOnLoadOnceHandler = function(event) {
// get the last modified date
if (self.refreshRequest.response) {
self.lastModifiedDate = self.getLastModified(self.refreshRequest);
if (self.lastModifiedDate!=null) {
if (self.refreshInterval==null) {
self.refreshInterval = setInterval(self.requestRefreshUpdate, self.refreshDuration);
}
}
else {
self.log("Could not get last modified date from the server");
}
}
}
self.refreshUpdatedPage = function() {
if (self.showRefreshNotifications) {
var date = new Date().setTime((new Date().getTime()+10000));
document.cookie = encodeURIComponent(self.pageRefreshedName) + "=true" + "; max-age=6000;" + " path=/";
}
document.location.reload(true);
}
self.showNotification = function(duration) {
var notificationID = self.pageRefreshedName+"ID";
var notification = document.getElementById(notificationID);
if (duration==null) duration = 4000;
if (notification!=null) {return;}
notification = document.createElement("div");
notification.id = notificationID;
notification.textContent = "PAGE UPDATED";
var styleRule = ""
styleRule = "position: fixed; padding: 7px 16px 6px 16px; font-family: Arial, sans-serif; font-size: 10px; font-weight: bold; left: 50%;";
styleRule += "top: 20px; background-color: rgba(0,0,0,.5); border-radius: 12px; color:rgb(235, 235, 235); transition: all 2s linear;";
styleRule += "transform: translateX(-50%); letter-spacing: .5px; filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .1))";
notification.setAttribute("style", styleRule);
notification.className= "PageRefreshedClass";
document.body.appendChild(notification);
setTimeout(function() {
notification.style.opacity = "0";
notification.style.filter = "drop-shadow( 0px 0px 0px rgba(0,0,0, .5))";
setTimeout(function() {
notification.parentNode.removeChild(notification);
}, duration)
}, duration);
document.cookie = encodeURIComponent(self.pageRefreshedName) + "=; max-age=1; path=/";
}
/**
* Get the last modified date from the header
* or file object after request has been received
**/
self.getLastModified = function(request) {
var date;
// file protocol - FILE object with last modified property
if (request.response && request.response.lastModified) {
date = request.response.lastModified;
}
// http protocol - check headers
if (date==null) {
date = request.getResponseHeader("Last-Modified");
}
return date;
}
self.updateLastModifiedLabel = function() {
var labelValue = "";
if (self.lastModifiedLabel==null) {
self.lastModifiedLabel = document.getElementById("LastModifiedLabel");
}
if (self.lastModifiedLabel) {
var seconds = parseInt(((new Date().getTime() - Date.parse(document.lastModified)) / 1000 / 60) * 100 + "");
var minutes = 0;
var hours = 0;
if (seconds < 60) {
seconds = Math.floor(seconds/10)*10;
labelValue = seconds + " seconds";
}
else {
minutes = parseInt((seconds/60) + "");
if (minutes>60) {
hours = parseInt((seconds/60/60) +"");
labelValue += hours==1 ? " hour" : " hours";
}
else {
labelValue = minutes+"";
labelValue += minutes==1 ? " minute" : " minutes";
}
}
if (seconds<10) {
labelValue = "Updated now";
}
else {
labelValue = "Updated " + labelValue + " ago";
}
if (self.lastModifiedLabel.firstElementChild) {
self.lastModifiedLabel.firstElementChild.textContent = labelValue;
}
else if ("textContent" in self.lastModifiedLabel) {
self.lastModifiedLabel.textContent = labelValue;
}
}
}
self.getShortString = function(string, length) {
if (length==null) length = 30;
string = string!=null ? string.substr(0, length).replace(/\n/g, "") : "[String is null]";
return string;
}
self.getShortNumber = function(value, places) {
if (places==null || places<1) places = 4;
value = Math.round(value * Math.pow(10,places)) / Math.pow(10, places);
return value;
}
///////////////////////////////////////
// NAVIGATION CONTROLS
///////////////////////////////////////
self.updateViewLabel = function() {
var viewNavigationLabel = document.getElementById("ViewNavigationLabel");
var view = self.getVisibleView();
var viewIndex = view ? self.getViewIndex(view) : -1;
var viewName = view ? self.getViewPreferenceValue(view, self.prefix + "view-name") : null;
var viewId = view ? view.id : null;
if (viewNavigationLabel && view) {
if (viewName && viewName.indexOf('"')!=-1) {
viewName = viewName.replace(/"/g, "");
}
if (self.showViewName) {
viewNavigationLabel.textContent = viewName;
self.setTooltip(viewNavigationLabel, viewIndex + 1 + " of " + self.numberOfViews);
}
else {
viewNavigationLabel.textContent = viewIndex + 1 + " of " + self.numberOfViews;
self.setTooltip(viewNavigationLabel, viewName);
}
}
}
self.updateURL = function(view) {
view = view == null ? self.getVisibleView() : view;
var viewId = view ? view.id : null
var viewFragment = view ? "#"+ viewId : null;
if (viewId && self.viewIds.length>1 && self.enableDeepLinking) {
if (self.supportsPopState==false) {
self.setFragment(viewId);
}
else {
if (viewFragment!=window.location.hash) {
if (window.location.hash==null) {
window.history.replaceState({name:viewId}, null, viewFragment);
}
else {
window.history.pushState({name:viewId}, null, viewFragment);
}
}
}
}
}
self.setFragment = function(value) {
window.location.hash = "#" + value;
}
self.setTooltip = function(element, value) {
// setting the tooltip in edge causes a page crash on hover
if (/Edge/.test(navigator.userAgent)) { return; }
if ("title" in element) {
element.title = value;
}
}
self.getStylesheetRules = function(styleSheet) {
try {
if (styleSheet) return styleSheet.cssRules || styleSheet.rules;
return document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
}
catch (error) {
// ERRORS:
// SecurityError: The operation is insecure.
// Errors happen when script loads before stylesheet or loading an external css locally
// InvalidAccessError: A parameter or an operation is not supported by the underlying object
// Place script after stylesheet
console.log(error);
if (error.toString().indexOf("The operation is insecure")!=-1) {
console.log("Load the stylesheet before the script or load the stylesheet inline until it can be loaded on a server")
}
return [];
}
}
/**
* If single page application hide all of the views.
* @param {Number} selectedIndex if provided shows the view at index provided
**/
self.hideViews = function(selectedIndex, animation) {
var rules = self.getStylesheetRules();
var queryIndex = 0;
var numberOfRules = rules!=null ? rules.length : 0;
// loop through rules and hide media queries except selected
for (var i=0;i<numberOfRules;i++) {
var rule = rules[i];
if (rule.media!=null) {
if (queryIndex==selectedIndex) {
self.currentQuery.mediaText = rule.conditionText;
self.currentQuery.index = selectedIndex;
self.currentQuery.rule = rule;
self.enableMediaQuery(rule);
}
else {
if (animation) {
self.fadeOut(rule)
}
else {
self.disableMediaQuery(rule);
}
}
queryIndex++;
}
}
self.numberOfViews = queryIndex;
self.updateViewLabel();
self.updateURL();
self.dispatchViewChange();
var view = self.getVisibleView();
var viewIndex = view ? self.getViewIndex(view) : -1;
return viewIndex==selectedIndex ? view : null;
}
/**
* Hide view
* @param {Object} view element to hide
**/
self.hideView = function(view) {
var rule = view ? self.mediaQueryDictionary[view.id] : null;
if (rule) {
self.disableMediaQuery(rule);
}
}
/**
* Show the view by media query. Does not hide current views
* Sets view options by default
* @param {Object} view element to show
* @param {Boolean} setViewOptions sets view options if null or true
*/
self.showViewByMediaQuery = function(view, setViewOptions) {
var id = view ? view.id : null;
var query = id ? self.mediaQueryDictionary[id] : null;
var display = null;
setViewOptions = setViewOptions==null ? true : setViewOptions;
if (query) {
self.enableMediaQuery(query);
if (view && setViewOptions) self.setViewOptions(view);
if (view && setViewOptions) self.setViewVariables(view);
}
}
/**
* Show the view. Does not hide current views
*/
self.showView = function(view, setViewOptions) {
var id = view ? view.id : null;
var query = id ? self.mediaQueryDictionary[id] : null;
var display = null;
setViewOptions = setViewOptions==null ? true : setViewOptions;
if (query) {
self.enableMediaQuery(query);
if (view==null) view =self.getVisibleView();
if (view && setViewOptions) self.setViewOptions(view);
}
else if (id) {
display = window.getComputedStyle(view).getPropertyValue("display");
if (display=="" || display=="none") {
view.style.display = "block";
}
}
if (view) {
if (self.currentView!=null) {
self.lastView = self.currentView;
}
self.currentView = view;
}
}
self.showViewById = function(id, setViewOptions) {
var view = id ? self.getViewById(id) : null;
if (view) {
self.showView(view);
return;
}
self.log("View not found '" + id + "'");
}
/**
* Show overlay over view
* @param {String} id id of view
* @param {Number} x x location
* @param {Number} y y location
* @param {Event | HTMLElement} event event or html element with styles applied
*/
self.showOverlay = function(id, x, y, event) {
var view = id ? self.getViewById(id) : null;
var query = id ? self.mediaQueryDictionary[id] : null;
var centerHorizontally = false;
var centerVertically = false;
var display = null;
// get enter animation - event target must have css variables declared
if (event) {
var button = event.currentTarget || event; // can be event or htmlelement
var buttonComputedStyles = getComputedStyle(button);
var actionTargetValue = buttonComputedStyles.getPropertyValue(self.prefix+"action-target").trim();
var targetAnimation = buttonComputedStyles.getPropertyValue(self.prefix+"animation").trim();
var targetType = buttonComputedStyles.getPropertyValue(self.prefix+"action-type").trim();
var actionTarget = self.application ? null : self.getElement(actionTargetValue);
var actionTargetStyles = actionTarget ? actionTarget.style : null;
if (actionTargetStyles) {
actionTargetStyles.setProperty("animation", targetAnimation);
}
}
if (self.application==false || targetType=="page") {
document.location.href = "./" + actionTargetValue;
return;
}
if (query) {
self.enableMediaQuery(query);
}
else if (id) {
if (view==null) {
self.log("View not found, '"+ id + "'");
return;
}
display = window.getComputedStyle(view).getPropertyValue("display");
if (display=="" || display=="none") {
view.style.display = "block";
}
}
// do not set x or y position if centering
centerHorizontally = self.getViewPreferenceBoolean(view, self.prefix + "center-horizontally");
centerVertically = self.getViewPreferenceBoolean(view, self.prefix + "center-vertically");
if (view && centerHorizontally==false) {
view.style.left = x + "px";
}
if (view && centerVertically==false) {
view.style.top = y + "px";
}
self.currentOverlay = view;
}
self.goBack = function() {
if (self.currentOverlay) {
self.removeOverlay();
}
else if (self.lastView) {
self.goToView(self.lastView.id);
}
}
self.removeOverlay = function() {
var overlay = self.currentOverlay;
if (overlay) {
var style = overlay.style;
if (style.animation) {
self.reverseAnimation(overlay, true);
}
else {
self.setViewVariables(null, self.currentOverlay);
self.hideView(self.currentOverlay);
}
}
}
/**
* Reverse the animation and hide after
* @param {Object} target element with animation
* @param {Boolean} hide hide after animation ends
*/
self.reverseAnimation = function(target, hide) {
var lastAnimation = null;
var style = target.style;
style.animationPlayState = "paused";
lastAnimation = style.animation;
style.animation = null;
style.animationPlayState = "paused";
if (hide) {
target.addEventListener("animationend", self.animationEndHideHandler);
}
setTimeout(function() {
style.animation = lastAnimation;
style.animationPlayState = "paused";
style.animationDirection = "reverse";
style.animationPlayState = "running";
}, 30);
}
self.animationEndHandler = function(event) {
var target = event.currentTarget;
}
self.animationEndHideHandler = function(event) {
var target = event.currentTarget;
self.setViewVariables(null, target);
self.hideView(target);
target.removeEventListener("animationend", self.animationEndHideHandler);
}
self.animationEndShowHandler = function(event) {
var target = event.currentTarget;
target.removeEventListener("animationend", self.animationEndShowHandler);
}
self.setViewOptions = function(view) {
if (view) {
self.minimumScale = self.getViewPreferenceValue(view, self.prefix + "minimum-scale");
self.scaleViewsToFit = self.getViewPreferenceBoolean(view, self.prefix + "scale-to-fit");
self.scaleToFitType = self.getViewPreferenceValue(view, self.prefix + "scale-to-fit-type");
self.scaleToFitOnDoubleClick = self.getViewPreferenceBoolean(view, self.prefix + "scale-on-double-click");
self.actualSizeOnDoubleClick = self.getViewPreferenceBoolean(view, self.prefix + "actual-size-on-double-click");
self.scaleViewsOnResize = self.getViewPreferenceBoolean(view, self.prefix + "scale-on-resize");
self.enableScaleUp = self.getViewPreferenceBoolean(view, self.prefix + "enable-scale-up");
self.centerHorizontally = self.getViewPreferenceBoolean(view, self.prefix + "center-horizontally");
self.centerVertically = self.getViewPreferenceBoolean(view, self.prefix + "center-vertically");
self.navigationOnKeypress = self.getViewPreferenceBoolean(view, self.prefix + "navigate-on-keypress");
self.showViewName = self.getViewPreferenceBoolean(view, self.prefix + "show-view-name");
self.refreshPageForChanges = self.getViewPreferenceBoolean(view, self.prefix + "refresh-for-changes");
self.refreshPageForChangesInterval = self.getViewPreferenceValue(view, self.prefix + "refresh-interval");
self.showNavigationControls = self.getViewPreferenceBoolean(view, self.prefix + "show-navigation-controls");
self.scaleViewSlider = self.getViewPreferenceBoolean(view, self.prefix + "show-scale-controls");
self.enableDeepLinking = self.getViewPreferenceBoolean(view, self.prefix + "enable-deep-linking");
self.singlePageApplication = self.getViewPreferenceBoolean(view, self.prefix + "application");
self.showByMediaQuery = self.getViewPreferenceBoolean(view, self.prefix + "show-by-media-query");
self.showUpdateNotification = document.cookie!="" ? document.cookie.indexOf(self.pageRefreshedName)!=-1 : false;
self.imageComparisonDuration = self.getViewPreferenceValue(view, self.prefix + "image-comparison-duration");
self.supportAnimations = self.getViewPreferenceBoolean(view, self.prefix + "enable-animations", true);
if (self.scaleViewsToFit) {
var newScaleValue = self.scaleViewToFit(view);
if (newScaleValue<0) {
setTimeout(self.scaleViewToFit, 500, view);
}
}
else {
self.viewScale = self.getViewScaleValue(view);
self.updateSliderValue(self.viewScale);
}
if (self.imageComparisonDuration!=null) {
// todo
}
if (self.refreshPageForChangesInterval!=null) {
self.refreshDuration = Number(self.refreshPageForChangesInterval);
}
}
}
self.previousView = function(event) {
var rules = self.getStylesheetRules();
var view = self.getVisibleView()
var index = view ? self.getViewIndex(view) : -1;
var prevQueryIndex = index!=-1 ? index-1 : self.currentQuery.index-1;
var queryIndex = 0;
var numberOfRules = rules!=null ? rules.length : 0;
if (event) {
event.stopImmediatePropagation();
}
if (prevQueryIndex<0) {
return;
}
// loop through rules and hide media queries except selected
for (var i=0;i<numberOfRules;i++) {
var rule = rules[i];
if (rule.media!=null) {
if (queryIndex==prevQueryIndex) {
self.currentQuery.mediaText = rule.conditionText;
self.currentQuery.index = prevQueryIndex;
self.currentQuery.rule = rule;
self.enableMediaQuery(rule);
self.updateViewLabel();
self.updateURL();
self.dispatchViewChange();
}
else {
self.disableMediaQuery(rule);
}
queryIndex++;
}
}
}
self.nextView = function(event) {
var rules = self.getStylesheetRules();
var view = self.getVisibleView();
var index = view ? self.getViewIndex(view) : -1;
var nextQueryIndex = index!=-1 ? index+1 : self.currentQuery.index+1;
var queryIndex = 0;
var numberOfRules = rules!=null ? rules.length : 0;
var numberOfMediaQueries = self.getNumberOfMediaRules();
if (event) {
event.stopImmediatePropagation();
}
if (nextQueryIndex>=numberOfMediaQueries) {
return;
}
// loop through rules and hide media queries except selected
for (var i=0;i<numberOfRules;i++) {
var rule = rules[i];
if (rule.media!=null) {
if (queryIndex==nextQueryIndex) {
self.currentQuery.mediaText = rule.conditionText;
self.currentQuery.index = nextQueryIndex;
self.currentQuery.rule = rule;
self.enableMediaQuery(rule);
self.updateViewLabel();
self.updateURL();
self.dispatchViewChange();
}
else {
self.disableMediaQuery(rule);
}
queryIndex++;
}
}
}
/**
* Enables a view via media query
*/
self.enableMediaQuery = function(rule) {
try {
rule.media.mediaText = self.inclusionQuery;
}
catch(error) {
//self.log(error);
rule.conditionText = self.inclusionQuery;
}
}
self.disableMediaQuery = function(rule) {
try {
rule.media.mediaText = self.exclusionQuery;
}
catch(error) {
rule.conditionText = self.exclusionQuery;
}
}
self.dispatchViewChange = function() {
try {
var event = new Event(self.NAVIGATION_CHANGE);
window.dispatchEvent(event);
}
catch (error) {
// In IE 11: Object doesn't support this action
}
}
self.getNumberOfMediaRules = function() {
var rules = self.getStylesheetRules();
var numberOfRules = rules ? rules.length : 0;
var numberOfQueries = 0;
for (var i=0;i<numberOfRules;i++) {
if (rules[i].media!=null) { numberOfQueries++; }
}
return numberOfQueries;
}
/////////////////////////////////////////
// VIEW SCALE
/////////////////////////////////////////
self.sliderChangeHandler = function(event) {
var value = self.getShortNumber(event.currentTarget.value/100);
var view = self.getVisibleView();
self.setViewScaleValue(view, false, value, true);
}
self.updateSliderValue = function(scale) {
var slider = document.getElementById(self.viewScaleSliderId);
var tooltip = parseInt(scale * 100 + "") + "%";
var inputType;
var inputValue;
if (slider) {
inputValue = self.getShortNumber(scale * 100);
if (inputValue!=slider["value"]) {
slider["value"] = inputValue;
}
inputType = slider.getAttributeNS(null, "type");
if (inputType!="range") {
// input range is not supported
slider.style.display = "none";
}
self.setTooltip(slider, tooltip);
}
}
self.viewChangeHandler = function(event) {
var view = self.getVisibleView();
var matrix = view ? getComputedStyle(view).transform : null;
if (matrix) {
self.viewScale = self.getViewScaleValue(view);
var scaleNeededToFit = self.getViewFitToViewportScale(view);
var isViewLargerThanViewport = scaleNeededToFit<1;
// scale large view to fit if scale to fit is enabled
if (self.scaleViewsToFit) {
self.scaleViewToFit(view);
}
else {
self.updateSliderValue(self.viewScale);
}
}
}
self.getViewScaleValue = function(view) {
var matrix = getComputedStyle(view).transform;
if (matrix) {
var matrixArray = matrix.replace("matrix(", "").split(",");
var scaleX = parseFloat(matrixArray[0]);
var scaleY = parseFloat(matrixArray[3]);
var scale = Math.min(scaleX, scaleY);
}
return scale;
}
/**
* Scales view to scale.
* @param {Object} view view to scale. views are in views array
* @param {Boolean} scaleToFit set to true to scale to fit. set false to use desired scale value
* @param {Number} desiredScale scale to define. not used if scale to fit is false
* @param {Boolean} isSliderChange indicates if slider is callee
*/
self.setViewScaleValue = function(view, scaleToFit, desiredScale, isSliderChange) {
var enableScaleUp = self.enableScaleUp;
var scaleToFitType = self.scaleToFitType;
var minimumScale = self.minimumScale;
var hasMinimumScale = !isNaN(minimumScale) && minimumScale!=""
var scaleNeededToFit = self.getViewFitToViewportScale(view, enableScaleUp);
var scaleNeededToFitWidth = self.getViewFitToViewportWidthScale(view, enableScaleUp);
var scaleNeededToFitHeight = self.getViewFitToViewportHeightScale(view, enableScaleUp);
var scaleToFitFull = self.getViewFitToViewportScale(view, true);
var scaleToFitFullWidth = self.getViewFitToViewportWidthScale(view, true);
var scaleToFitFullHeight = self.getViewFitToViewportHeightScale(view, true);
var scaleToWidth = scaleToFitType=="width";
var scaleToHeight = scaleToFitType=="height";
var shrunkToFit = false;
var topPosition = null;
var leftPosition = null;
var translateY = null;
var translateX = null;
var transformValue = "";
var canCenterVertically = true;
var canCenterHorizontally = true;
//console.log("height:"+scaleNeededToFitHeight+",width:"+scaleNeededToFitWidth+",fit:"+scaleNeededToFit,"desired:"+desiredScale);
if (scaleToFit && isSliderChange!=true) {
if (scaleToFitType=="fit") {
desiredScale = scaleNeededToFit;
}
else if (scaleToFitType=="width") {
desiredScale = scaleNeededToFitWidth;
}
else if (scaleToFitType=="height") {
desiredScale = scaleNeededToFitHeight;
}
}
else {
if (isNaN(desiredScale)) {
desiredScale = 1;
}
}
self.updateSliderValue(desiredScale);
// scale to fit width
if (scaleToWidth && scaleToHeight==false) {
canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth;
canCenterHorizontally = scaleNeededToFitWidth>=1 && enableScaleUp==false;
if (isSliderChange) {
canCenterHorizontally = desiredScale<scaleToFitFullWidth;
}
else if (scaleToFit) {
desiredScale = scaleNeededToFitWidth;
}
if (hasMinimumScale) {
desiredScale = Math.max(desiredScale, Number(minimumScale));
}
//desiredScale = self.getShortNumber(desiredScale);
desiredScale = self.getShortNumber(desiredScale);
if (desiredScale>1 && (enableScaleUp || isSliderChange)) {
transformValue = "scale(" + desiredScale + ")";
}
else if (desiredScale>=1 && enableScaleUp==false) {
transformValue = "scale(" + 1 + ")";
}
else {
transformValue = "scale(" + desiredScale + ")";
}
if (self.centerVertically) {
if (canCenterVertically) {
translateY = "-50%";
topPosition = "50%";
}
else {
translateY = "0";
topPosition = "0";
}
if (view.style.top != topPosition) {
view.style.top = topPosition + "";
}
if (canCenterVertically) {
transformValue += " translateY(" + translateY+ ")";
}
}
if (self.centerHorizontally) {
if (canCenterHorizontally) {
translateX = "-50%";
leftPosition = "50%";
}
else {
translateX = "0";
leftPosition = "0";
}
if (view.style.left != leftPosition) {
view.style.left = leftPosition + "";
}
if (canCenterHorizontally) {
transformValue += " translateX(" + translateX+ ")";
}
}
view.style.transformOrigin = "0 0";
view.style.transform = transformValue;
self.viewScale = desiredScale;
self.viewLeft = leftPosition;
self.viewTop = topPosition;
return desiredScale;
}
// scale to fit height
if (scaleToHeight && scaleToWidth==false) {
//canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth;
//canCenterHorizontally = scaleNeededToFitHeight<=scaleNeededToFitWidth && enableScaleUp==false;
canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth;
canCenterHorizontally = scaleNeededToFitWidth>=1 && enableScaleUp==false;
if (isSliderChange) {
canCenterHorizontally = desiredScale<scaleToFitFullHeight;
}
else if (scaleToFit) {
desiredScale = scaleNeededToFitHeight;
}
if (hasMinimumScale) {
desiredScale = Math.max(desiredScale, Number(minimumScale));
}
desiredScale = self.getShortNumber(desiredScale);
if (desiredScale>1 && (enableScaleUp || isSliderChange)) {
transformValue = "scale(" + desiredScale + ")";
}
else if (desiredScale>=1 && enableScaleUp==false) {
transformValue = "scale(" + 1 + ")";
}
else {
transformValue = "scale(" + desiredScale + ")";
}
if (self.centerHorizontally) {
if (canCenterHorizontally) {
translateX = "-50%";
leftPosition = "50%";
}
else {
translateX = "0";
leftPosition = "0";
}
if (view.style.left != leftPosition) {
view.style.left = leftPosition + "";
}
if (canCenterHorizontally) {
transformValue += " translateX(" + translateX+ ")";
}
}
if (self.centerVertically) {
if (canCenterVertically) {
translateY = "-50%";
topPosition = "50%";
}
else {
translateY = "0";
topPosition = "0";
}
if (view.style.top != topPosition) {
view.style.top = topPosition + "";
}
if (canCenterVertically) {
transformValue += " translateY(" + translateY+ ")";
}
}
view.style.transformOrigin = "0 0";
view.style.transform = transformValue;
self.viewScale = desiredScale;
self.viewLeft = leftPosition;
self.viewTop = topPosition;
return scaleNeededToFitHeight;
}
if (scaleToFitType=="fit") {
//canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth;
//canCenterHorizontally = scaleNeededToFitWidth>=scaleNeededToFitHeight;
canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFit;
canCenterHorizontally = scaleNeededToFitWidth>=scaleNeededToFit;
if (hasMinimumScale) {
desiredScale = Math.max(desiredScale, Number(minimumScale));
}
desiredScale = self.getShortNumber(desiredScale);
if (isSliderChange || scaleToFit==false) {
canCenterVertically = scaleToFitFullHeight>=desiredScale;
canCenterHorizontally = desiredScale<scaleToFitFullWidth;
}
else if (scaleToFit) {
desiredScale = scaleNeededToFit;
}
transformValue = "scale(" + desiredScale + ")";
if (self.centerVertically) {
if (canCenterVertically) {
translateY = "-50%";
topPosition = "50%";
}
else {
translateY = "0";
topPosition = "0";
}
if (view.style.top != topPosition) {
view.style.top = topPosition + "";
}
if (canCenterVertically) {
transformValue += " translateY(" + translateY+ ")";
}
}
if (self.centerHorizontally) {
if (canCenterHorizontally) {
translateX = "-50%";
leftPosition = "50%";
}
else {
translateX = "0";
leftPosition = "0";
}
if (view.style.left != leftPosition) {
view.style.left = leftPosition + "";
}
if (canCenterHorizontally) {
transformValue += " translateX(" + translateX+ ")";
}
}
view.style.transformOrigin = "0 0";
view.style.transform = transformValue;
self.viewScale = desiredScale;
self.viewLeft = leftPosition;
self.viewTop = topPosition;
self.updateSliderValue(desiredScale);
return desiredScale;
}
}
self.getViewFitToViewportScale = function(view, scaleUp) {
var enableScaleUp = scaleUp;
var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var elementWidth = parseFloat(getComputedStyle(view, "style").width);
var elementHeight = parseFloat(getComputedStyle(view, "style").height);
var newScale = 1;
availableWidth -= self.horizontalPadding;
availableHeight -= self.verticalPadding;
if (enableScaleUp) {
newScale = Math.min(availableHeight/elementHeight, availableWidth/elementWidth);
}
else if (elementWidth > availableWidth || elementHeight > availableHeight) {
newScale = Math.min(availableHeight/elementHeight, availableWidth/elementWidth);
}
return newScale;
}
self.getViewFitToViewportWidthScale = function(view, scaleUp) {
var enableScaleUp = scaleUp;
var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var elementWidth = parseFloat(getComputedStyle(view, "style").width);
var newScale = 1;
availableWidth -= self.horizontalPadding;
if (enableScaleUp) {
newScale = availableWidth/elementWidth;
}
else if (elementWidth > availableWidth) {
newScale = availableWidth/elementWidth;
}
return newScale;
}
self.getViewFitToViewportHeightScale = function(view, scaleUp) {
var enableScaleUp = scaleUp;
var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var elementHeight = parseFloat(getComputedStyle(view, "style").height);
var newScale = 1;
availableHeight -= self.verticalPadding;
if (enableScaleUp) {
newScale = availableHeight/elementHeight;
}
else if (elementHeight > availableHeight) {
newScale = availableHeight/elementHeight;
}
return newScale;
}
self.keypressHandler = function(event) {
var rightKey = 39;
var leftKey = 37;
// listen for both events
if (event.type=="keypress") {
window.removeEventListener("keyup", self.keypressHandler);
}
else {
window.removeEventListener("keypress", self.keypressHandler);
}
if (self.showNavigationControls) {
if (self.navigationOnKeypress) {
if (event.keyCode==rightKey) {
self.nextView();
}
if (event.keyCode==leftKey) {
self.previousView();
}
}
}
else if (self.navigationOnKeypress) {
if (event.keyCode==rightKey) {
self.nextView();
}
if (event.keyCode==leftKey) {
self.previousView();
}
}
}
///////////////////////////////////
// GENERAL FUNCTIONS
///////////////////////////////////
self.getViewById = function(id) {
id = id ? id.replace("#", "") : "";
var view = self.viewIds.indexOf(id)!=-1 && self.getElement(id);
return view;
}
self.getViewIds = function() {
var viewIds = self.getViewPreferenceValue(document.body, self.prefix + "view-ids");
var viewId = null;
viewIds = viewIds!=null && viewIds!="" ? viewIds.split(",") : [];
if (viewIds.length==0) {
viewId = self.getViewPreferenceValue(document.body, self.prefix + "view-id");
viewIds = viewId ? [viewId] : [];
}
return viewIds;
}
self.getInitialViewId = function() {
var viewId = self.getViewPreferenceValue(document.body, self.prefix + "view-id");
return viewId;
}
self.getApplicationStylesheet = function() {
var stylesheetId = self.getViewPreferenceValue(document.body, self.prefix + "stylesheet-id");
self.applicationStylesheet = document.getElementById("applicationStylesheet");
return self.applicationStylesheet.sheet;
}
self.getVisibleView = function() {
var viewIds = self.getViewIds();
for (var i=0;i<viewIds.length;i++) {
var viewId = viewIds[i].replace(/[\#?\.?](.*)/, "$" + "1");
var view = self.getElement(viewId);
var postName = "_Class";
if (view==null && viewId && viewId.lastIndexOf(postName)!=-1) {
view = self.getElement(viewId.replace(postName, ""));
}
if (view) {
var display = getComputedStyle(view).display;
if (display=="block" || display=="flex") {
return view;
}
}
}
return null;
}
self.getInitialView = function() {
var viewId = self.getInitialViewId();
viewId = viewId.replace(/[\#?\.?](.*)/, "$" + "1");
var view = self.getElement(viewId);
var postName = "_Class";
if (view==null && viewId && viewId.lastIndexOf(postName)!=-1) {
view = self.getElement(viewId.replace(postName, ""));
}
return view;
}
self.getViewIndex = function(view) {
var viewIds = self.getViewIds();
var id = view ? view.id : null;
var index = id && viewIds ? viewIds.indexOf(id) : -1;
return index;
}
self.syncronizeViewToURL = function() {
var fragment = window.location.hash;
var view = self.getViewById(fragment);
var index = view ? self.getViewIndex(view) : 0;
if (index==-1) index = 0;
var currentView = self.hideViews(index);
if (self.supportsPopState && currentView) {
if (fragment==null) {
window.history.replaceState({name:currentView.id}, null, "#"+ currentView.id);
}
else {
window.history.pushState({name:currentView.id}, null, "#"+ currentView.id);
}
}
self.setViewVariables(view);
return view;
}
/**
* Set the currentView or currentOverlay properties and set the lastView or lastOverlay properties
*/
self.setViewVariables = function(view, overlay, parentView) {
if (view) {
if (self.currentView) {
self.lastView = self.currentView;
}
self.currentView = view;
}
if (overlay) {
if (self.currentOverlay) {
self.lastOverlay = self.currentOverlay;
}
self.currentOverlay = overlay;
}
}
self.getViewPreferenceBoolean = function(view, property, altValue) {
var computedStyle = window.getComputedStyle(view);
var value = computedStyle.getPropertyValue(property);
var type = typeof value;
if (value=="true" || (type=="string" && value.indexOf("true")!=-1)) {
return true;
}
else if (value=="" && arguments.length==3) {
return altValue;
}
return false;
}
self.getViewPreferenceValue = function(view, property, defaultValue) {
var value = window.getComputedStyle(view).getPropertyValue(property);
if (value===undefined) {
return defaultValue;
}
value = value.replace(/^[\s\"]*/, "");
value = value.replace(/[\s\"]*$/, "");
value = value.replace(/^[\s"]*(.*?)[\s"]*$/, function (match, capture) {
return capture;
});
return value;
}
self.getStyleRuleValue = function(cssRule, property) {
var value = cssRule ? cssRule.style.getPropertyValue(property) : null;
if (value===undefined) {
return null;
}
value = value.replace(/^[\s\"]*/, "");
value = value.replace(/[\s\"]*$/, "");
value = value.replace(/^[\s"]*(.*?)[\s"]*$/, function (match, capture) {
return capture;
});
return value;
}
self.getCSSPropertyValueForElement = function(id, property) {
var styleSheets = document.styleSheets;
var numOfStylesheets = styleSheets.length;
var values = [];
var selectorIDText = "#" + id;
var selectorClassText = "." + id + "_Class";
var value;
for(var i=0;i<numOfStylesheets;i++) {
var styleSheet = styleSheets[i];
var cssRules = self.getStylesheetRules(styleSheet);
var numOfCSSRules = cssRules.length;
var cssRule;
for (var j=0;j<numOfCSSRules;j++) {
cssRule = cssRules[j];
if (cssRule.media) {
var mediaRules = cssRule.cssRules;
var numOfMediaRules = mediaRules ? mediaRules.length : 0;
for(var k=0;k<numOfMediaRules;k++) {
var mediaRule = mediaRules[k];
if (mediaRule.selectorText==selectorIDText || mediaRule.selectorText==selectorClassText) {
if (mediaRule.style && property in mediaRule.style) {
value = mediaRule.style.getPropertyValue(property);
values.push(value);
}
}
}
}
else {
if (cssRule.selectorText==selectorIDText || cssRule.selectorText==selectorClassText) {
if (cssRule.style && property in cssRule.style) {
value = cssRule.style.getPropertyValue(property);
values.push(value);
}
}
}
}
}
return values.pop();
}
self.collectViews = function() {
var viewIds = self.getViewIds();
for (let index = 0; index < viewIds.length; index++) {
const id = viewIds[index];
const view = self.getViewById(id);
//view && view.addEventListener("animationend", self.animationEndHandler);
self.views[id] = view;
}
self.viewIds = viewIds;
}
self.collectMediaQueries = function() {
var viewIds = self.getViewIds();
var styleSheet = self.getApplicationStylesheet();
var cssRules = self.getStylesheetRules(styleSheet);
var numOfCSSRules = cssRules ? cssRules.length : 0;
var cssRule;
var id = viewIds.length ? viewIds[0]: ""; // single view
var selectorIDText = "#" + id;
var selectorClassText = "." + id + "_Class";
var viewsNotFound = viewIds.slice();
var viewsFound = [];
var selectorText = null;
var property = self.prefix + "view-id";
for (var j=0;j<numOfCSSRules;j++) {
cssRule = cssRules[j];
if (cssRule.media) {
var mediaRules = cssRule.cssRules;
var numOfMediaRules = mediaRules ? mediaRules.length : 0;
for(var k=0;k<numOfMediaRules;k++) {
var mediaRule = mediaRules[k];
var mediaId = null;
selectorText = mediaRule.selectorText;
if (selectorText==".mediaViewInfo") {
mediaId = self.getStyleRuleValue(mediaRule, property);
self.addView(mediaId, cssRule);
viewsFound.push(mediaId);
if (viewsNotFound.indexOf(mediaId)!=-1) {
viewsNotFound.splice(viewsNotFound.indexOf(mediaId));
}
break;
}
}
}
else {
selectorText = cssRule.selectorText.replace(/[#|\s|*]?/g, "");
if (viewIds.indexOf(selectorText)!=-1) {
self.addView(selectorText, cssRule);
if (viewsNotFound.indexOf(selectorText)!=-1) {
viewsNotFound.splice(viewsNotFound.indexOf(selectorText));
}
break;
}
}
}
if (viewsNotFound.length) {
console.log("Could not find the following views:" + viewsNotFound.join(",") + "");
console.log("Views found:" + viewsFound.join(",") + "");
}
}
/**
* Adds a view. A view object contains the id of the view and the style rule
* Use enableMediaQuery(rule) to enable
* An array of view names are in self.views array
*/
self.addView = function(name, cssRule, parentId) {
var state = {name:name, rule:cssRule, id:name, parentId:parentId};
self.addedViews.push(name);
self.viewsDictionary[name] = state;
self.mediaQueryDictionary[name] = cssRule;
}
self.hasView = function(name) {
if (self.addedViews.indexOf(name)!=-1) {
return true;
}
return false;
}
/**
* Go to view by id. Views are added in addView()
* @param {String} name id of view in current
* @param {String} parent id of parent view
* @param {Boolean} maintainPreviousState if true then do not hide other views
*/
self.goToView = function(name, maintainPreviousState, parent) {
var state = self.viewsDictionary[name];
if (state) {
if (maintainPreviousState==false || maintainPreviousState==null) {
self.hideViews();
}
self.enableMediaQuery(state.rule);
self.updateViewLabel();
self.updateURL();
}
else {
var event = new Event(self.STATE_NOT_FOUND);
self.stateName = name;
window.dispatchEvent(event);
}
}
/**
* Go to the view in the event targets CSS variable
*/
self.goToTargetView = function(event) {
var button = event.currentTarget;
var buttonComputedStyles = getComputedStyle(button);
var actionTargetValue = buttonComputedStyles.getPropertyValue(self.prefix+"action-target").trim();
var animation = buttonComputedStyles.getPropertyValue(self.prefix+"animation").trim();
var targetType = buttonComputedStyles.getPropertyValue(self.prefix+"action-type").trim();
var targetView = self.application ? null : self.getElement(actionTargetValue);
var actionTargetStyles = targetView ? targetView.style : null;
var state = self.viewsDictionary[actionTargetValue];
// navigate to page
if (self.application==false || targetType=="page") {
document.location.href = "./" + actionTargetValue;
return;
}
// if view is found
if (targetView) {
// add animation set in event target style declaration
if (animation && self.supportAnimations) {
self.crossFade(self.currentView, targetView, false, animation);
}
else {
self.setViewVariables(self.currentView);
self.hideViews();
self.enableMediaQuery(state.rule);
self.scaleViewIfNeeded(targetView);
self.updateViewLabel();
self.updateURL();
}
}
else {
var stateEvent = new Event(self.STATE_NOT_FOUND);
self.stateName = name;
window.dispatchEvent(stateEvent);
}
}
/**
* Cross fade between views
**/
self.crossFade = function(from, to, update, animation) {
var targetIndex = to.parentNode
var fromIndex = Array.prototype.slice.call(from.parentElement.children).indexOf(from);
var toIndex = Array.prototype.slice.call(to.parentElement.children).indexOf(to);
if (from.parentNode==to.parentNode) {
var reverse = self.getReverseAnimation(animation);
var duration = self.getAnimationDuration(animation, true);
// if target view is above (higher index)
// then fade in target view
// and after fade in then hide previous view instantly
if (fromIndex<toIndex) {
self.setElementAnimation(from, null);
self.setElementAnimation(to, null);
self.showViewByMediaQuery(to);
self.fadeIn(to, update, animation);
setTimeout(function() {
self.setElementAnimation(to, null);
self.setElementAnimation(from, null);
self.hideView(from);
self.updateURL();
self.setViewVariables(to);
self.updateViewLabel();
}, duration)
}
// if target view is on bottom
// then show target view instantly
// and fade out current view
else if (fromIndex>toIndex) {
self.setElementAnimation(to, null);
self.setElementAnimation(from, null);
self.showViewByMediaQuery(to);
self.fadeOut(from, update, reverse);
setTimeout(function() {
self.setElementAnimation(to, null);
self.setElementAnimation(from, null);
self.hideView(from);
self.updateURL();
}, duration)
}
}
}
self.fadeIn = function(element, update, animation) {
self.showViewByMediaQuery(element);
if (update) {
self.updateURL(element);
element.addEventListener("animationend", function(event) {
element.style.animation = null;
self.setViewVariables(element);
self.updateViewLabel();
element.removeEventListener("animationend", arguments.callee);
});
}
element.style.animation = animation;
}
self.fadeOutCurrentView = function(animation, update) {
if (self.currentView) {
self.fadeOut(self.currentView, update, animation);
}
if (self.currentOverlay) {
self.fadeOut(self.currentOverlay, update, animation);
}
}
self.fadeOut = function(element, update, animation) {
if (update) {
element.addEventListener("animationend", function(event) {
element.style.animation = null;
self.hideView(element);
element.removeEventListener("animationend", arguments.callee);
});
}
element.style.animationPlayState = "paused";
element.style.animation = animation;
element.style.animationPlayState = "running";
}
self.getReverseAnimation = function(animation) {
if (animation && animation.indexOf("reverse")==-1) {
animation += " reverse";
}
return animation;
}
self.getAnimationDuration = function(animation, inMilliseconds) {
var duration = 0;
var expression = /.+(\d\.\d)s.+/;
if (animation && animation.match(expression)) {
duration = animation.replace(expression, "$" + "1");
if (duration && inMilliseconds) duration = duration * 1000;
}
return duration;
}
self.setElementAnimation = function(element, animation, priority) {
element.style.setProperty("animation", animation, "important");
}
self.getElement = function(id) {
var elementId = id ? id.trim() : id;
var element = elementId ? document.getElementById(elementId) : null;
return element;
}
self.resizeHandler = function(event) {
self.scaleViewIfNeeded();
}
self.scaleViewIfNeeded = function(view) {
if (self.scaleViewsOnResize) {
if (view==null) {
view = self.getVisibleView();
}
var isViewScaled = view.getAttributeNS(null, self.SIZE_STATE_NAME)=="false" ? false : true;
if (isViewScaled) {
self.scaleViewToFit(view, true);
}
else {
self.scaleViewToActualSize(view);
}
}
}
self.preventDoubleClick = function(event) {
event.stopImmediatePropagation();
}
self.hashChangeHandler = function(event) {
var fragment = window.location.hash ? window.location.hash.replace("#", "") : "";
var view = self.getViewById(fragment);
if (view) {
self.hideViews();
self.showView(view);
self.setViewVariables(view);
self.updateViewLabel();
window.dispatchEvent(new Event(self.VIEW_CHANGE));
}
else {
window.dispatchEvent(new Event(self.VIEW_NOT_FOUND));
}
}
self.popStateHandler = function(event) {
var state = event.state;
var fragment = state ? state.name : window.location.hash;
var view = self.getViewById(fragment);
if (view) {
self.hideViews();
self.showView(view);
self.updateViewLabel();
}
else {
window.dispatchEvent(new Event(self.VIEW_NOT_FOUND));
}
}
self.doubleClickHandler = function(event) {
var view = self.getVisibleView();
var scaleValue = view ? self.getViewScaleValue(view) : 1;
var scaleNeededToFit = view ? self.getViewFitToViewportScale(view) : 1;
var scaleNeededToFitWidth = view ? self.getViewFitToViewportWidthScale(view) : 1;
var scaleNeededToFitHeight = view ? self.getViewFitToViewportHeightScale(view) : 1;
var scaleToFitType = self.scaleToFitType;
// Three scenarios
// - scale to fit on double click
// - set scale to actual size on double click
// - switch between scale to fit and actual page size
if (scaleToFitType=="width") {
scaleNeededToFit = scaleNeededToFitWidth;
}
else if (scaleToFitType=="height") {
scaleNeededToFit = scaleNeededToFitHeight;
}
// if scale and actual size enabled then switch between
if (self.scaleToFitOnDoubleClick && self.actualSizeOnDoubleClick) {
var isViewScaled = view.getAttributeNS(null, self.SIZE_STATE_NAME);
var isScaled = false;
// if scale is not 1 then view needs scaling
if (scaleNeededToFit!=1) {
// if current scale is at 1 it is at actual size
// scale it to fit
if (scaleValue==1) {
self.scaleViewToFit(view);
isScaled = true;
}
else {
// scale is not at 1 so switch to actual size
self.scaleViewToActualSize(view);
isScaled = false;
}
}
else {
// view is smaller than viewport
// so scale to fit() is scale actual size
// actual size and scaled size are the same
// but call scale to fit to retain centering
self.scaleViewToFit(view);
isScaled = false;
}
view.setAttributeNS(null, self.SIZE_STATE_NAME, isScaled+"");
isViewScaled = view.getAttributeNS(null, self.SIZE_STATE_NAME);
}
else if (self.scaleToFitOnDoubleClick) {
self.scaleViewToFit(view);
}
else if (self.actualSizeOnDoubleClick) {
self.scaleViewToActualSize(view);
}
}
self.scaleViewToFit = function(view) {
return self.setViewScaleValue(view, true);
}
self.scaleViewToActualSize = function(view) {
self.setViewScaleValue(view, false, 1);
}
self.onloadHandler = function(event) {
self.initialize();
}
self.getStackArray = function(error) {
var value = "";
if (error==null) {
try {
error = new Error("Stack");
}
catch (e) {
}
}
if ("stack" in error) {
value = error.stack;
var methods = value.split(/\n/g);
var newArray = methods ? methods.map(function (value, index, array) {
value = value.replace(/\@.*/,"");
return value;
}) : null;
if (newArray && newArray[0].includes("getStackTrace")) {
newArray.shift();
}
if (newArray && newArray[0].includes("getStackArray")) {
newArray.shift();
}
if (newArray && newArray[0]=="") {
newArray.shift();
}
return newArray;
}
return null;
}
self.log = function(value) {
console.log.apply(this, [value]);
}
// initialize on load
// sometimes the body size is 0 so we call this now and again later
window.addEventListener("load", self.onloadHandler);
window.document.addEventListener("DOMContentLoaded", self.onloadHandler);
}
window.application = new Application();
</script>
</head>
<body>
<div id="index_html">
<div style="position: absolute; z-index: 100; left: 520px; top: 0px; font-size: 25px; width: 700px; height: 80px; background-color: green; color: white; padding: 10px; font-family: sans-serif;">Site under construction, information is not yet accurate.<br>Visit <a href="https://www.mdxsu.com/groups/mdx-fm" style="color: white;">www.mdxsu.com/groups/mdx-fm</a> for more information.</div>
<div id="Shows">
<div id="Show_Details">
<img id="Image" src="Image.png" srcset="Image.png 1x, [email protected] 2x">
<svg class="Rect">
<rect fill="rgba(64,64,65,1)" id="Rect" rx="0" ry="0" x="0" y="0" width="131" height="563.368">
</rect>
</svg>
<div id="Day_Time">
<svg class="Square">
<rect fill="rgba(240,240,240,1)" id="Square" rx="0" ry="0" x="0" y="0" width="97" height="94">
</rect>
</svg>
<div id="Mon">
<span>Tue</span>
</div>
<div id="ID10_12">
<span>10-12</span>
</div>
</div>
<svg class="Overlay_p">
<linearGradient id="Overlay_p" spreadMethod="pad" x1="0.5" x2="0.5" y1="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="0.5123" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
</linearGradient>
<rect fill="url(#Overlay_p)" id="Overlay_p" rx="0" ry="0" x="0" y="0" width="301" height="373">
</rect>
</svg>
<div id="Lorem_ipsum_dolor_sit_amet__co">
<span>Lorem ipsum dolor sit amet, consectetur<br/>adipiscing elit. Curabitur lacinia libero<br/>ligula, non faucibus sapien ultrices eget…</span>
</div>
<div id="Ella_and_Shawaz">
<span>Bardadi Sabe Conta</span>
</div>
<div id="MC_Players">
<img id="MC_Player" src="MC_Player.png" srcset="MC_Player.png 1x, [email protected] 2x">
<img id="MC_Player_u" src="MC_Player_u.png" srcset="MC_Player_u.png 1x, [email protected] 2x">
<img id="MC_Player_v" src="MC_Player_v.png" srcset="MC_Player_v.png 1x, [email protected] 2x">
<img id="MC_Player_w" src="MC_Player_w.png" srcset="MC_Player_w.png 1x, [email protected] 2x">
</div>
</div>
<div id="Show_Details_x">
<img id="Image_y" src="Image_y.png" srcset="Image_y.png 1x, [email protected] 2x">
<svg class="Rect_z">
<rect fill="rgba(64,64,65,1)" id="Rect_z" rx="0" ry="0" x="0" y="0" width="131" height="563.368">
</rect>
</svg>
<div id="Day_Time_">
<svg class="Square_">
<rect fill="rgba(240,240,240,1)" id="Square_" rx="0" ry="0" x="0" y="0" width="97" height="94">
</rect>
</svg>
<div id="Mon_">
<span>Mon</span>
</div>
<div id="ID10_12_">
<span>18-20</span>
</div>
</div>
<svg class="Overlay_ba">
<linearGradient id="Overlay_ba" spreadMethod="pad" x1="0.5" x2="0.5" y1="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="0.5123" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
</linearGradient>
<rect fill="url(#Overlay_ba)" id="Overlay_ba" rx="0" ry="0" x="0" y="0" width="301" height="373">
</rect>
</svg>
<div id="Lorem_ipsum_dolor_sit_amet__co_">
<span>Lorem ipsum dolor sit amet, consectetur<br/>adipiscing elit. Curabitur lacinia libero<br/>ligula, non faucibus sapien ultrices eget…</span>
</div>
<div id="Ella_and_Shawaz_">
<span>Czech it out!</span>
</div>
<div id="MC_Players_">
<img id="MC_Player_" src="MC_Player_.png" srcset="MC_Player_.png 1x, [email protected] 2x">
<img id="MC_Player_ba" src="MC_Player_ba.png" srcset="MC_Player_ba.png 1x, [email protected] 2x">
<img id="MC_Player_bb" src="MC_Player_bb.png" srcset="MC_Player_bb.png 1x, [email protected] 2x">
<img id="MC_Player_bc" src="MC_Player_bc.png" srcset="MC_Player_bc.png 1x, [email protected] 2x">
</div>
</div>
<div id="Show_Details_bd">
<img id="Image_be" src="Image_be.png" srcset="Image_be.png 1x, [email protected] 2x">
<svg class="Rect_bf">
<rect fill="rgba(64,64,65,1)" id="Rect_bf" rx="0" ry="0" x="0" y="0" width="131" height="563.368">
</rect>
</svg>
<div id="Day_Time_bg">
<svg class="Square_bh">
<rect fill="rgba(240,240,240,1)" id="Square_bh" rx="0" ry="0" x="0" y="0" width="97" height="94">
</rect>
</svg>
<div id="Mon_bi">
<span>Mon</span>
</div>
<div id="ID10_12_bj">
<span>15-17</span>
</div>
</div>
<svg class="Overlay_bl">
<linearGradient id="Overlay_bl" spreadMethod="pad" x1="0.5" x2="0.5" y1="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="0.5123" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
</linearGradient>
<rect fill="url(#Overlay_bl)" id="Overlay_bl" rx="0" ry="0" x="0" y="0" width="301" height="373">
</rect>
</svg>
<div id="Lorem_ipsum_dolor_sit_amet__co_bm">
<span>Lorem ipsum dolor sit amet, consectetur<br/>adipiscing elit. Curabitur lacinia libero<br/>ligula, non faucibus sapien ultrices eget…</span>
</div>
<div id="Ella_and_Shawaz_bn">
<span>DJ Collective</span>
</div>
<div id="MC_Players_bo">
<img id="MC_Player_bp" src="MC_Player_bp.png" srcset="MC_Player_bp.png 1x, [email protected] 2x">
<img id="MC_Player_bq" src="MC_Player_bq.png" srcset="MC_Player_bq.png 1x, [email protected] 2x">
<img id="MC_Player_br" src="MC_Player_br.png" srcset="MC_Player_br.png 1x, [email protected] 2x">
<img id="MC_Player_bs" src="MC_Player_bs.png" srcset="MC_Player_bs.png 1x, [email protected] 2x">
</div>
</div>
<div id="Show_Details_bt">
<img id="Image_bu" src="Image_bu.png" srcset="Image_bu.png 1x, [email protected] 2x">
<svg class="Rect_bv">
<rect fill="rgba(64,64,65,1)" id="Rect_bv" rx="0" ry="0" x="0" y="0" width="131" height="563.368">
</rect>
</svg>
<div id="Day_Time_bw">
<svg class="Square_bx">
<rect fill="rgba(240,240,240,1)" id="Square_bx" rx="0" ry="0" x="0" y="0" width="97" height="94">
</rect>
</svg>
<div id="Mon_by">
<span>Mon</span>
</div>
<div id="ID10_12_bz">
<span>13-14</span>
</div>
</div>
<svg class="Overlay_ca">
<linearGradient id="Overlay_ca" spreadMethod="pad" x1="0.5" x2="0.5" y1="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="0.5123" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
</linearGradient>
<rect fill="url(#Overlay_ca)" id="Overlay_ca" rx="0" ry="0" x="0" y="0" width="301" height="373">
</rect>
</svg>
<div id="Lorem_ipsum_dolor_sit_amet__co_b">
<span>Lorem ipsum dolor sit amet, consectetur<br/>adipiscing elit. Curabitur lacinia libero<br/>ligula, non faucibus sapien ultrices eget…</span>
</div>
<div id="Ella_and_Shawaz_b">
<span>Guinness and Company</span>
</div>
<div id="MC_Players_b">
<img id="MC_Player_b" src="MC_Player_b.png" srcset="MC_Player_b.png 1x, [email protected] 2x">
<img id="MC_Player_ca" src="MC_Player_ca.png" srcset="MC_Player_ca.png 1x, [email protected] 2x">
<img id="MC_Player_cb" src="MC_Player_cb.png" srcset="MC_Player_cb.png 1x, [email protected] 2x">
<img id="MC_Player_cc" src="MC_Player_cc.png" srcset="MC_Player_cc.png 1x, [email protected] 2x">
</div>
</div>
<div id="Show_Details_b">
<img id="Image_ca" src="Image_ca.png" srcset="Image_ca.png 1x, [email protected] 2x">
<svg class="Rect_cb">
<rect fill="rgba(64,64,65,1)" id="Rect_cb" rx="0" ry="0" x="0" y="0" width="131" height="563.368">
</rect>
</svg>
<div id="Day_Time_cc">
<svg class="Square_cd">
<rect fill="rgba(240,240,240,1)" id="Square_cd" rx="0" ry="0" x="0" y="0" width="97" height="94">
</rect>
</svg>
<div id="Mon_ce">
<span>Mon</span>
</div>
<div id="ID10_12_cf">
<span>10-12</span>
</div>
</div>
<svg class="Overlay_ch">
<linearGradient id="Overlay_ch" spreadMethod="pad" x1="0.5" x2="0.5" y1="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="0.5123" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
</linearGradient>
<rect fill="url(#Overlay_ch)" id="Overlay_ch" rx="0" ry="0" x="0" y="0" width="301" height="373">
</rect>
</svg>
<div id="Lorem_ipsum_dolor_sit_amet__co_ci">
<span>Lorem ipsum dolor sit amet, consectetur<br/>adipiscing elit. Curabitur lacinia libero<br/>ligula, non faucibus sapien ultrices eget…</span>
</div>
<div id="Ella_and_Shawaz_cj">
<span>Ella and Shawaz</span>
</div>
<div id="MC_Players_ck">
<img id="MC_Player_cl" src="MC_Player_cl.png" srcset="MC_Player_cl.png 1x, [email protected] 2x">
<img id="MC_Player_cm" src="MC_Player_cm.png" srcset="MC_Player_cm.png 1x, [email protected] 2x">
<img id="MC_Player_cn" src="MC_Player_cn.png" srcset="MC_Player_cn.png 1x, [email protected] 2x">
<img id="MC_Player_co" src="MC_Player_co.png" srcset="MC_Player_co.png 1x, [email protected] 2x">
</div>
</div>
</div>
<div id="Banner_Left">
<svg class="Banner_Nav">
<rect fill="rgba(191,30,46,1)" id="Banner_Nav" rx="0" ry="0" x="0" y="0" width="300" height="2014">
</rect>
</svg>
<div id="Shows_Nav">
<div id="Live_Broadcast">
<span>Live Broadcast</span>
</div>
<div id="Ella_and_Shawaz_ct">
<span>Ella and Shawaz</span>
</div>
<div id="Guinness_and_Company">
<span>Guinness and Company</span>
</div>
<div id="DJ_Collective">
<span>DJ Collective</span>
</div>
<div id="Czech_it_out_">
<span>Czech it out!</span>
</div>
<div id="Bardadi_Sabe_Conta">
<span>Bardadi Sabe Conta</span>
</div>
<div id="Waves">
<span>Waves</span>
</div>
<div id="The_JC_Hour">
<span>The JC Hour</span>
</div>
<div id="Dani___Barbs">
<span>Dani & Barbs</span>
</div>
<div id="Gifted___Growing">
<span>Gifted & Growing</span>
</div>
<div id="Tim___John">
<span>Tim & John</span>
</div>
<div id="Rachael_s_Show">
<span>Rachael's Show</span>
</div>
<div id="Scratch">
<span>Scratch</span>
</div>
<div id="Welcome_to_Afro">
<span>Welcome to Afro</span>
</div>
<div id="Beats___Beats">
<span>Beats & Beats</span>
</div>
<div id="Soundboard">
<span>Soundboard</span>
</div>
<div id="Pure_Jazz">
<span>Pure Jazz</span>
</div>
<div id="ID90s_Kidz">
<span>90s Kidz</span>
</div>
<div id="Latest_and_greatest">
<span>Latest and greatest</span>
</div>
<div id="Hip_Hop_Soc">
<span>Hip Hop Soc</span>
</div>
</div>
</div>
<div id="Timeline">
<svg class="Line_1" viewBox="0 0 2 1866">
<path fill="transparent" stroke="rgba(255,10,10,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_1" d="M 0 0 L 0 1866">
</path>
</svg>
<svg class="Ellipse_1">
<ellipse fill="rgba(255,255,255,1)" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Ellipse_1" rx="12.5" ry="12.5" cx="12.5" cy="12.5">
</ellipse>
</svg>
<svg class="Ellipse_2">
<ellipse fill="rgba(255,255,255,1)" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Ellipse_2" rx="12.5" ry="12.5" cx="12.5" cy="12.5">
</ellipse>
</svg>
<svg class="Ellipse_3">
<ellipse fill="rgba(255,255,255,1)" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Ellipse_3" rx="12.5" ry="12.5" cx="12.5" cy="12.5">
</ellipse>
</svg>
<svg class="Ellipse_4">
<ellipse fill="rgba(255,255,255,1)" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Ellipse_4" rx="12.5" ry="12.5" cx="12.5" cy="12.5">
</ellipse>
</svg>
<svg class="Ellipse_5">
<ellipse fill="rgba(255,255,255,1)" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Ellipse_5" rx="12.5" ry="12.5" cx="12.5" cy="12.5">
</ellipse>
</svg>
<svg class="Ellipse_6">
<ellipse fill="rgba(255,255,255,1)" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Ellipse_6" rx="12.5" ry="12.5" cx="12.5" cy="12.5">
</ellipse>
</svg>
<svg class="Line_2" viewBox="0 0 35 2">
<path fill="transparent" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_2" d="M 35 0 L 0 0">
</path>
</svg>
<svg class="Line_3" viewBox="0 0 35 2">
<path fill="transparent" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_3" d="M 35 0 L 0 0">
</path>
</svg>
<svg class="Line_4" viewBox="0 0 35 2">
<path fill="transparent" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_4" d="M 35 0 L 0 0">
</path>
</svg>
<svg class="Line_5" viewBox="0 0 35 2">
<path fill="transparent" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_5" d="M 35 0 L 0 0">
</path>
</svg>
<svg class="Line_6" viewBox="0 0 35 2">
<path fill="transparent" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_6" d="M 35 0 L 0 0">
</path>
</svg>
<svg class="Line_7" viewBox="0 0 35 2">
<path fill="transparent" stroke="rgba(191,30,46,1)" stroke-width="2px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_7" d="M 35 0 L 0 0">
</path>
</svg>
</div>
<div id="Banner_Top">
<img id="Banner_Image" src="Banner_Image.png" srcset="Banner_Image.png 1x, [email protected] 2x">
<svg class="Banner_Fold" viewBox="0 0 42 28">
<path fill="rgba(172,172,172,1)" id="Banner_Fold" d="M 20.99999618530273 0 L 42 28 L 0 28 Z">
</path>
</svg>
<svg class="Grey_BG">
<rect fill="rgba(240,240,240,1)" id="Grey_BG" rx="0" ry="0" x="0" y="0" width="300" height="509">
</rect>
</svg>
<svg class="Grey_Overlay_dv">
<linearGradient id="Grey_Overlay_dv" spreadMethod="pad" x1="0.5" x2="0.5" y1="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity="0.098"></stop>
<stop offset="0.4631" stop-color="#fcfcfc" stop-opacity="0.2"></stop>
<stop offset="0.6305" stop-color="#fbfbfb" stop-opacity="1"></stop>
<stop offset="0.67" stop-color="#fafafa" stop-opacity="1"></stop>
<stop offset="1" stop-color="#f0f0f0" stop-opacity="1"></stop>
</linearGradient>
<rect fill="url(#Grey_Overlay_dv)" id="Grey_Overlay_dv" rx="0" ry="0" x="0" y="0" width="300" height="1440">
</rect>
</svg>
<div id="Logo" class="Logo">
<img id="MDX_FM_Logo" src="MDX_FM_Logo.png" srcset="MDX_FM_Logo.png 1x, [email protected] 2x">
</div>
<div id="Status">
<div class="Play_Btn_01">
<script src="https://embed.radio.co/player/d931834.js"></script>
</div>
<style>.Play_Btn_01{position: absolute; top: 15px; left: -100px; z-index: 100;}</style>
<svg class="Rect_dz">
<rect fill="rgba(191,30,46,1)" id="Rect_dz" rx="0" ry="0" x="0" y="0" width="93" height="1403.5">
</rect>
</svg>
<div id="Live_Now">
<span>Live Now: <div style="display:inline-block"><script src="https://embed.radio.co/embed/scd0b479c0/dj.js"></script></div></span><br><span style="font-family:Helvetica Neue;font-size:20px;">Playing: <div style="display:inline-block"><script src="https://embed.radio.co/embed/scd0b479c0/song.js"></script></div></span>
</div>
<!--<svg class="Play_Btn" viewBox="0 0 52 46">
<path fill="rgba(255,255,255,1)" id="Play_Btn" d="M 26 0 L 52 46 L 0 46 Z">
</path>
</svg>-->
</div>
<svg class="Line_Description">
<rect fill="rgba(191,30,46,1)" id="Line_Description" rx="0" ry="0" x="0" y="0" width="9" height="199">
</rect>
</svg>
<div id="Show_Description">
<span>As Middlesex's own radio station, MDX FM! provides a hub of promotion for societies and events on campus, whilst also representing a diverse range of radio shows.</span>
</div>
</div>
<div id="Other_Sites">
<span><a href="https://www.mdxstudentmedia.com/">Student Media</a> | <a href="https://www.mdxsu.com/groups/student-media-tv">MDX TV</a> | <a href="http://mdxecho.com/">MDX Newspaper</a></span>
</div>
<div id="Social_Media_Links">
<svg class="Icon_awesome_facebook_f" viewBox="42.919 0 25.967 48.484">
<path fill="rgba(255,255,255,1)" id="Icon_awesome_facebook_f" d="M 67.18428039550781 27.27207946777344 L 68.53083801269531 18.49766540527344 L 60.11153030395508 18.49766540527344 L 60.11153030395508 12.80367279052734 C 60.11153030395508 10.40316295623779 61.28763961791992 8.063255310058594 65.05838012695312 8.063255310058594 L 68.88594818115234 8.063255310058594 L 68.88594818115234 0.5927889347076416 C 68.88594818115234 0.5927889347076416 65.41253662109375 0 62.09159469604492 0 C 55.15805053710938 0 50.62596130371094 4.202551364898682 50.62596130371094 11.81032466888428 L 50.62596130371094 18.49766540527344 L 42.91875457763672 18.49766540527344 L 42.91875457763672 27.27207946777344 L 50.62596130371094 27.27207946777344 L 50.62596130371094 48.48368835449219 L 60.11153030395508 48.48368835449219 L 60.11153030395508 27.27207946777344 L 67.18428039550781 27.27207946777344 Z">
</path>
</svg>
<svg class="Icon_awesome_twitter" viewBox="0 90.154 48.484 39.378">
<path fill="rgba(255,255,255,1)" id="Icon_awesome_twitter" d="M 43.4998893737793 99.96728515625 C 43.53066253662109 100.39794921875 43.53066253662109 100.8287200927734 43.53066253662109 101.2593994140625 C 43.53066253662109 114.3954391479492 33.53251266479492 129.53125 15.25879287719727 129.53125 C 9.629002571105957 129.53125 4.3992018699646 127.9007110595703 -3.0517578125e-05 125.0705642700195 C 0.7998557686805725 125.1628036499023 1.568871855735779 125.1935729980469 2.399534225463867 125.1935729980469 C 7.044783592224121 125.1935729980469 11.32100868225098 123.6246643066406 14.73579406738281 120.9482269287109 C 10.36733722686768 120.8559036254883 6.706439018249512 117.9948959350586 5.44510555267334 114.0570983886719 C 6.060431003570557 114.1493301391602 6.675663471221924 114.2108840942383 7.321764469146729 114.2108840942383 C 8.213884353637695 114.2108840942383 9.106099128723145 114.0877838134766 9.936664581298828 113.8725357055664 C 5.38364839553833 112.9495468139648 1.968766927719116 108.950309753418 1.968766927719116 104.1203994750977 L 1.968766927719116 103.9973983764648 C 3.291557788848877 104.7357330322266 4.829872608184814 105.1971817016602 6.460231781005859 105.2586288452148 C 3.783780097961426 103.4743041992188 2.03031849861145 100.4287261962891 2.03031849861145 96.98316192626953 C 2.03031849861145 95.13737487792969 2.522446870803833 93.44537353515625 3.383885145187378 91.96870422363281 C 8.275341033935547 97.99838256835938 15.6279125213623 101.9360809326172 23.87250709533691 102.3668441772461 C 23.71872138977051 101.6285171508789 23.62639617919922 100.8594970703125 23.62639617919922 100.0903778076172 C 23.62639617919922 94.6143798828125 28.0564079284668 90.1536865234375 33.56309509277344 90.1536865234375 C 36.42410659790039 90.1536865234375 39.00823211669922 91.35347747802734 40.82333755493164 93.29158020019531 C 43.06902313232422 92.86091613769531 45.22247695922852 92.03025054931641 47.12990951538086 90.89202880859375 C 46.39148330688477 93.19935607910156 44.82258605957031 95.13747406005859 42.76144790649414 96.36793518066406 C 44.76112747192383 96.15268707275391 46.69923782348633 95.59881591796875 48.48348236083984 94.82981109619141 C 47.13010787963867 96.79859924316406 45.4379997253418 98.55207061767578 43.4998893737793 99.96727752685547 Z">
</path>
</svg>
<svg class="Icon_awesome_instagram" viewBox="-0.141 59.672 42.447 42.437">
<path fill="rgba(255,255,255,1)" id="Icon_awesome_instagram" d="M 21.08756446838379 70.01017761230469 C 15.06498241424561 70.01017761230469 10.2071418762207 74.86801147460938 10.2071418762207 80.89059448242188 C 10.2071418762207 86.91317749023438 15.06498241424561 91.77101135253906 21.08756446838379 91.77101135253906 C 27.11014938354492 91.77101135253906 31.96798896789551 86.91317749023438 31.96798896789551 80.89059448242188 C 31.96798896789551 74.86801147460938 27.11014938354492 70.01017761230469 21.08756446838379 70.01017761230469 Z M 21.08756446838379 87.96429443359375 C 17.19561195373535 87.96429443359375 14.0138692855835 84.79200744628906 14.0138692855835 80.89059448242188 C 14.0138692855835 76.98916625976562 17.18614387512207 73.81690216064453 21.08756446838379 73.81690216064453 C 24.98898887634277 73.81690216064453 28.16125869750977 76.98916625976562 28.16125869750977 80.89059448242188 C 28.16125869750977 84.79200744628906 24.97951507568359 87.96429443359375 21.08756446838379 87.96429443359375 Z M 34.95087432861328 69.56510925292969 C 34.95087432861328 70.97605895996094 33.81453323364258 72.10292816162109 32.41305160522461 72.10292816162109 C 31.00209808349609 72.10292816162109 29.87523460388184 70.96659088134766 29.87523460388184 69.56510925292969 C 29.87523460388184 68.16361999511719 31.01156997680664 67.02729034423828 32.41305160522461 67.02729034423828 C 33.81453323364258 67.02729034423828 34.95087432861328 68.16361999511719 34.95087432861328 69.56510925292969 Z M 42.15713882446289 72.14080810546875 C 41.99616241455078 68.74126434326172 41.21966934204102 65.72998046875 38.72919464111328 63.24897003173828 C 36.24818801879883 60.76797103881836 33.23689270019531 59.99147415161133 29.83735466003418 59.82102203369141 C 26.33365058898926 59.62216567993164 15.83200836181641 59.62216567993164 12.32830238342285 59.82102203369141 C 8.938232421875 59.98200607299805 5.926939487457275 60.75849914550781 3.436468362808228 63.23949813842773 C 0.9459969997406006 65.72050476074219 0.1789697259664536 68.73179626464844 0.00851922482252121 72.13133239746094 C -0.1903397142887115 75.63504028320312 -0.1903397142887115 86.13668823242188 0.00851922482252121 89.640380859375 C 0.1695002764463425 93.03993225097656 0.9459969997406006 96.05122375488281 3.436468362808228 98.5322265625 C 5.926939487457275 101.0132293701172 8.928763389587402 101.7897186279297 12.32830238342285 101.9601745605469 C 15.83200836181641 102.1590270996094 26.33365058898926 102.1590270996094 29.83735466003418 101.9601745605469 C 33.23689270019531 101.7991943359375 36.24818801879883 101.0226898193359 38.72919464111328 98.5322265625 C 41.21019744873047 96.05122375488281 41.98669815063477 93.03993225097656 42.15713882446289 89.640380859375 C 42.35599899291992 86.13668823242188 42.35599899291992 75.64450836181641 42.15713882446289 72.14080810546875 Z M 37.63073348999023 93.39976501464844 C 36.89211273193359 95.25578308105469 35.46222305297852 96.6856689453125 33.59673690795898 97.43376159667969 C 30.8032398223877 98.54168701171875 24.17461013793945 98.28602600097656 21.08756446838379 98.28602600097656 C 18.00051689147949 98.28602600097656 11.36241817474365 98.5322265625 8.578393936157227 97.43376159667969 C 6.722375869750977 96.69514465332031 5.292485237121582 95.2652587890625 4.544396877288818 93.39976501464844 C 3.436468362808228 90.60627746582031 3.692144393920898 83.97764587402344 3.692144393920898 80.89059448242188 C 3.692144393920898 77.80354309082031 3.445937395095825 71.16545104980469 4.544396877288818 68.38142395019531 C 5.283015251159668 66.52540588378906 6.712905883789062 65.09552001953125 8.578393936157227 64.34742736816406 C 11.37188625335693 63.23949813842773 18.00051689147949 63.49518203735352 21.08756446838379 63.49518203735352 C 24.17461013793945 63.49518203735352 30.81271171569824 63.24897003173828 33.59673690795898 64.34742736816406 C 35.45275497436523 65.08604431152344 36.88264083862305 66.51593780517578 37.63073348999023 68.38142395019531 C 38.7386589050293 71.17491912841797 38.48298645019531 77.80354309082031 38.48298645019531 80.89059448242188 C 38.48298645019531 83.97764587402344 38.7386589050293 90.61573791503906 37.63073348999023 93.39976501464844 Z">
</path>
</svg>
<svg class="Icon_awesome_youtube" viewBox="27.999 120 51.716 36.363">
<path fill="rgba(255,255,255,1)" id="Icon_awesome_youtube" d="M 78.63473510742188 125.6895446777344 C 78.03996276855469 123.4500122070312 76.28753662109375 121.6862258911133 74.0625 121.0876617431641 C 70.02944946289062 120 53.85738754272461 120 53.85738754272461 120 C 53.85738754272461 120 37.68541717529297 120 33.65227890014648 121.0876617431641 C 31.42723655700684 121.6863250732422 29.6748161315918 123.4500122070312 29.08003807067871 125.6895446777344 C 27.99938201904297 129.7488250732422 27.99938201904297 138.2181243896484 27.99938201904297 138.2181243896484 C 27.99938201904297 138.2181243896484 27.99938201904297 146.6874389648438 29.08003807067871 150.7467193603516 C 29.6748161315918 152.9862518310547 31.42723655700684 154.6765289306641 33.65227890014648 155.2751159667969 C 37.68541717529297 156.3627777099609 53.85738754272461 156.3627777099609 53.85738754272461 156.3627777099609 C 53.85738754272461 156.3627777099609 70.02935791015625 156.3627777099609 74.0625 155.2751159667969 C 76.28753662109375 154.6765289306641 78.03996276855469 152.9862518310547 78.63473510742188 150.7467193603516 C 79.71539306640625 146.6874389648438 79.71539306640625 138.2181243896484 79.71539306640625 138.2181243896484 C 79.71539306640625 138.2181243896484 79.71539306640625 129.7488250732422 78.63473510742188 125.6895446777344 Z M 48.56821441650391 145.9076232910156 L 48.56821441650391 130.5286254882812 L 62.0848388671875 138.2183074951172 L 48.56821441650391 145.9076232910156 Z">
</path>
</svg>
<svg class="Icon_awesome_mixcloud" viewBox="2.033 127.5 60.408 35.605">
<path fill="rgba(255,255,255,1)" id="Icon_awesome_mixcloud" d="M 42.12113571166992 141.8679504394531 C 41.33459854125977 133.8186950683594 34.51762008666992 127.5 26.25872230529785 127.5 C 19.41551399230957 127.5 13.35903072357178 131.9048156738281 11.18285179138184 138.3022155761719 C 6.017727375030518 139.0625 2.032500267028809 143.4935607910156 2.032500267028809 148.8684234619141 C 2.032500267028809 154.7677154541016 6.83049201965332 159.5657196044922 12.75601387023926 159.5657196044922 L 40.18093872070312 159.5657196044922 C 45.13621139526367 159.5657196044922 49.17399978637695 155.5542602539062 49.17399978637695 150.5987854003906 C 49.17399978637695 146.3251190185547 46.13259506225586 142.733154296875 42.12113571166992 141.8679504394531 Z M 40.18093872070312 155.5541687011719 L 12.75601387023926 155.5541687011719 C 9.05913257598877 155.5541687011719 6.043958187103271 152.5652160644531 6.043958187103271 148.8683319091797 C 6.043958187103271 145.1714477539062 9.05913257598877 142.1824951171875 12.75601387023926 142.1824951171875 C 14.53883171081543 142.1824951171875 16.21691703796387 142.8903503417969 17.47541046142578 144.14892578125 C 19.36580276489258 146.0393371582031 22.22274208068848 143.1804962158203 20.33329582214355 141.2910461425781 C 18.94365310668945 139.9276428222656 17.23943138122559 138.9838256835938 15.40415287017822 138.5118408203125 C 17.29189109802246 134.3168792724609 21.5394229888916 131.5114593505859 26.25881958007812 131.5114593505859 C 32.83972549438477 131.5114593505859 38.18836975097656 136.860107421875 38.18836975097656 143.4147644042969 C 38.18836975097656 144.6995849609375 37.97862243652344 145.9579925537109 37.58525848388672 147.1641235351562 C 36.7384033203125 149.7698364257812 40.62808609008789 150.8514404296875 41.38697052001953 148.422607421875 C 41.64917755126953 147.6360778808594 41.85892486572266 146.8233032226562 41.99008178710938 146.0105438232422 C 43.82535552978516 146.7184906005859 45.16253662109375 148.5012969970703 45.16253662109375 150.5987854003906 C 45.16253662109375 153.3255310058594 42.93390274047852 155.5541687011719 40.18093872070312 155.5541687011719 Z M 62.44073104858398 150.5987854003906 C 62.44073104858398 154.7676086425781 61.23461151123047 158.7790832519531 58.9273681640625 162.2137451171875 C 58.53409957885742 162.7906341552734 57.90485763549805 163.1051940917969 57.2493782043457 163.1051940917969 C 55.70424652099609 163.1051940917969 54.68059158325195 161.3224792480469 55.59762573242188 159.9851226806641 C 57.43289947509766 157.2059173583984 58.42927932739258 153.9547576904297 58.42927932739258 150.5987854003906 C 58.42927932739258 147.2427978515625 57.4329948425293 143.9916534423828 55.59762573242188 141.2386779785156 C 54.11516952514648 139.0767211914062 57.43100357055664 136.7653045654297 58.92737579345703 139.0101470947266 C 61.23470687866211 142.4184875488281 62.44073867797852 146.4300384521484 62.44073867797852 150.5987854003906 Z M 55.72877502441406 150.5987854003906 C 55.72877502441406 153.5878295898438 54.86354827880859 156.4718475341797 53.18555450439453 158.9626922607422 C 52.79228591918945 159.5394744873047 52.16303634643555 159.8278198242188 51.507568359375 159.8278198242188 C 49.87871932983398 159.8278198242188 48.94872283935547 158.0306091308594 49.85580062866211 156.7078247070312 C 51.08806228637695 154.8987731933594 51.71731567382812 152.8011932373047 51.71731567382812 150.5987854003906 C 51.71731567382812 148.422607421875 51.08806991577148 146.2988891601562 49.85580062866211 144.4898376464844 C 48.36331939697266 142.3131713867188 51.65576171875 140.0301818847656 53.18555450439453 142.2611999511719 C 54.86344909667969 144.7257080078125 55.72877502441406 147.6098327636719 55.72877502441406 150.5987854003906 Z">
</path>
</svg>
</div>
</div>
</body>
</html>
Whois info of domain
Domain Name: MDXFM.COM
Registry Domain ID: 2425424176_DOMAIN_COM-VRSN
Registrar WHOIS Server: whois.one.com
Registrar URL: http://www.one.com
Updated Date: 2024-08-01T05:59:54Z
Creation Date: 2019-08-21T11:52:34Z
Registry Expiry Date: 2025-08-21T11:52:34Z
Registrar: One.com A/S
Registrar IANA ID: 1462
Registrar Abuse Contact Email: [email protected]
Registrar Abuse Contact Phone: +45 44451220
Domain Status: ok https://icann.org/epp#ok
Name Server: NS01.ONE.COM
Name Server: NS02.ONE.COM
DNSSEC: signedDelegation
DNSSEC DS Data: 35426 13 2 FDC38BCDF3CFAE23FFF276BBAFFDCC4CD09EC0DB00837E31322827C84058D225
URL of the ICANN Whois Inaccuracy Complaint Form: https://www.icann.org/wicf/
>>> Last update of whois database: 2025-05-03T11:55:16Z <<<
For more information on Whois status codes, please visit https://icann.org/epp
NOTICE: The expiration date displayed in this record is the date the
TERMS OF USE: You are not authorized to access or query our Whois
by the following terms of use: You agree that you may use this Data only
to: (1) allow, enable, or otherwise support the transmission of mass