Post by sineG yuG lareneG on Jul 27, 2012 6:16:29 GMT -5
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Live Feed</title>
<link rel="stylesheet" type="text/css" href="feed.css" />
<script src="script/prototype.js" type="text/javascript"></script>
<script src="script/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<div class="main">
<div id="silo" class="overlay silo"></div>
<img id="overlay1" class="main" src="images/silo-b1.png" alt="" style="display: none;" />
<img id="overlay2" class="main" src="images/silo-b2.png" alt="" style="display: none;" />
<img id="overlay3" class="main" src="images/silo-b3.png" alt="" style="display: none;" />
<img id="overlay4" class="main" src="images/silo-b4.png" alt="" style="display: none;" />
<img id="overlay5" class="main" src="images/silo-b5.png" alt="" style="display: none;" />
<img id="overlay6" class="main" src="images/silo-b6.png" alt="" style="display: none;" />
<img id="overlay7" class="main" src="images/silo-b7.png" alt="" style="display: none;" />
<img id="overlay0" class="main" src="images/silo-dark.png" alt="" style="display: none;" />
<div id="static" class="overlay static"></div>
<div id="camera" class="camera">CAM 06</div>
<div id="timestamp" class="timestamp">---</div>
<img class="main" src="images/feed.png" alt="Live Feed" />
</div>
<script src="script/feed.js" type="text/javascript"></script>
</body>
</html>
function formatDateTime(ms) {
var date = new Date(ms);
var str = '';
str += date.getFullYear();
str += '-';
if (date.getMonth() < 9) str += '0';
str += (date.getMonth() + 1);
str += '-';
if (date.getDate() < 10) str += '0';
str += date.getDate();
str += ' ';
if (date.getHours() < 10) str += '0';
str += date.getHours();
str += ':';
if (date.getMinutes() < 10) str += '0';
str += date.getMinutes();
str += ':';
if (date.getSeconds() < 10) str += '0';
str += date.getSeconds();
return str;
}
function formatTimer(seconds) {
var minutes = Math.floor(seconds / 60);
seconds = seconds % 60;
var hours = Math.floor(minutes / 60)
minutes = minutes % 60;
var text = '';
if (hours > 0) {
text += hours;
text += ':';
}
text += minutes < 10 ? '0' + minutes : minutes;
text += ':';
text += seconds < 10 ? '0' + seconds : seconds;
return text;
}
var alt = true;
function tick() {
var ms = new Date().getTime();
var elem = $('timestamp');
elem.innerHTML = formatDateTime(ms);
}
function staticTick() {
var ms = new Date().getTime();
var pos = -Math.floor(Math.random() * 2700);
var elem = $('static');
elem.style.backgroundPosition = '' + pos + 'px 0';
staticId = setTimeout('staticTick()', 50);
}
function animTick() {
var elem = $('silo');
var pos = alt ? -300 : 0;
elem.style.backgroundPosition = '' + pos + 'px 0';
alt = alt ? false : true;
}
var interruptId = 0;
var overlay = 0;
function interruptIn() {
Effect.Appear('overlay0', {
duration: 0.50,
afterFinish: function() {
setTimeout('interruptOut()', 125 + Math.floor(Math.random() * 125));
}
});
}
function interruptOut() {
var elem;
if (overlay > 0) {
elem = $('overlay' + overlay);
elem.style.display = 'none';
overlay = 0;
} else {
var val = Math.floor(Math.random() * 1400);
//if (val > 900) overlay = 1;
if (val > 1200) overlay = 1;
else if (val > 1000) overlay = 2;
else if (val > 800) overlay = 3;
else if (val > 600) overlay = 4;
else if (val > 400) overlay = 5;
else if (val > 200) overlay = 6;
else overlay = 7;
elem = $('overlay' + overlay);
elem.style.display = 'block';
}
Effect.Fade('overlay0', {
duration: 2.00,
afterFinish: function() {
var interval = overlay > 0 ? Math.floor(Math.random() * 10000) : (10000 + Math.floor(Math.random() * 50000));
interruptId = setTimeout('interruptIn()', interval);
}
});
}
tick();
var tickId = setInterval('tick()', 1000);
var staticId = setTimeout('staticTick()', 50);
var animId = setInterval('animTick()', 1234);
interruptId = setTimeout('interruptIn()', 5000+Math.floor(Math.random() * 5000));
<head>
<title>Live Feed</title>
<link rel="stylesheet" type="text/css" href="feed.css" />
<script src="script/prototype.js" type="text/javascript"></script>
<script src="script/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<div class="main">
<div id="silo" class="overlay silo"></div>
<img id="overlay1" class="main" src="images/silo-b1.png" alt="" style="display: none;" />
<img id="overlay2" class="main" src="images/silo-b2.png" alt="" style="display: none;" />
<img id="overlay3" class="main" src="images/silo-b3.png" alt="" style="display: none;" />
<img id="overlay4" class="main" src="images/silo-b4.png" alt="" style="display: none;" />
<img id="overlay5" class="main" src="images/silo-b5.png" alt="" style="display: none;" />
<img id="overlay6" class="main" src="images/silo-b6.png" alt="" style="display: none;" />
<img id="overlay7" class="main" src="images/silo-b7.png" alt="" style="display: none;" />
<img id="overlay0" class="main" src="images/silo-dark.png" alt="" style="display: none;" />
<div id="static" class="overlay static"></div>
<div id="camera" class="camera">CAM 06</div>
<div id="timestamp" class="timestamp">---</div>
<img class="main" src="images/feed.png" alt="Live Feed" />
</div>
<script src="script/feed.js" type="text/javascript"></script>
</body>
</html>
function formatDateTime(ms) {
var date = new Date(ms);
var str = '';
str += date.getFullYear();
str += '-';
if (date.getMonth() < 9) str += '0';
str += (date.getMonth() + 1);
str += '-';
if (date.getDate() < 10) str += '0';
str += date.getDate();
str += ' ';
if (date.getHours() < 10) str += '0';
str += date.getHours();
str += ':';
if (date.getMinutes() < 10) str += '0';
str += date.getMinutes();
str += ':';
if (date.getSeconds() < 10) str += '0';
str += date.getSeconds();
return str;
}
function formatTimer(seconds) {
var minutes = Math.floor(seconds / 60);
seconds = seconds % 60;
var hours = Math.floor(minutes / 60)
minutes = minutes % 60;
var text = '';
if (hours > 0) {
text += hours;
text += ':';
}
text += minutes < 10 ? '0' + minutes : minutes;
text += ':';
text += seconds < 10 ? '0' + seconds : seconds;
return text;
}
var alt = true;
function tick() {
var ms = new Date().getTime();
var elem = $('timestamp');
elem.innerHTML = formatDateTime(ms);
}
function staticTick() {
var ms = new Date().getTime();
var pos = -Math.floor(Math.random() * 2700);
var elem = $('static');
elem.style.backgroundPosition = '' + pos + 'px 0';
staticId = setTimeout('staticTick()', 50);
}
function animTick() {
var elem = $('silo');
var pos = alt ? -300 : 0;
elem.style.backgroundPosition = '' + pos + 'px 0';
alt = alt ? false : true;
}
var interruptId = 0;
var overlay = 0;
function interruptIn() {
Effect.Appear('overlay0', {
duration: 0.50,
afterFinish: function() {
setTimeout('interruptOut()', 125 + Math.floor(Math.random() * 125));
}
});
}
function interruptOut() {
var elem;
if (overlay > 0) {
elem = $('overlay' + overlay);
elem.style.display = 'none';
overlay = 0;
} else {
var val = Math.floor(Math.random() * 1400);
//if (val > 900) overlay = 1;
if (val > 1200) overlay = 1;
else if (val > 1000) overlay = 2;
else if (val > 800) overlay = 3;
else if (val > 600) overlay = 4;
else if (val > 400) overlay = 5;
else if (val > 200) overlay = 6;
else overlay = 7;
elem = $('overlay' + overlay);
elem.style.display = 'block';
}
Effect.Fade('overlay0', {
duration: 2.00,
afterFinish: function() {
var interval = overlay > 0 ? Math.floor(Math.random() * 10000) : (10000 + Math.floor(Math.random() * 50000));
interruptId = setTimeout('interruptIn()', interval);
}
});
}
tick();
var tickId = setInterval('tick()', 1000);
var staticId = setTimeout('staticTick()', 50);
var animId = setInterval('animTick()', 1234);
interruptId = setTimeout('interruptIn()', 5000+Math.floor(Math.random() * 5000));