June 7, 2018♦
EVR.Sound.Controls.Button.Volume.Deamplify = function(container)
{
EVR.Sound.Controls.Button.Volume.call(
this, container, ALIGN_LEFT, SOUND_DEAMPLIFY_ICON);
this.set_attributes();
this.append();
}
EVR.Sound.Controls.Button.Volume.Deamplify.prototype =
new EVR.Sound.Controls.Button.Volume;
EVR.Sound.Controls.Button.Volume.Deamplify.prototype.respond = function()
{
this.audio.decrease_volume();
EVR.Sound.Controls.Button.Volume.prototype.respond.call(this);
}
EVR.Sound.Controls.Button.Volume.Deamplify.prototype.update = function()
{
if (this.audio.volume <= 0)
{
this.focused_opacity = this.unfocused_opacity;
}
else
{
this.focused_opacity = SOUND_CONTROLS_FOUCUSED_OPACITY;
}
this.set_opacity();
}
EVR.Sound.Controls.Button.Volume.Deamplify.prototype.toString = function()
{
return "[object EVR.Sound.Controls.Button.Volume.Deamplify]";
}
EVR.include("sound/controls/button/volume/Amplify.js");
EVR.include("sound/controls/button/volume/Deamplify.js");
EVR.Sound.Controls.Button.Volume = function(container, alignment, icon)
{
EVR.Sound.Controls.Button.call(this, container, alignment);
this.icon = icon;
this.disable_selection();
}
EVR.Sound.Controls.Button.Volume.prototype = new EVR.Sound.Controls.Button;
EVR.Sound.Controls.Button.Volume.prototype.disable_selection = function()
{
if (!!this.element)
{
var element = this.element;
element.onselectstart = function() { return false };
element.onmousedown = function() { return false };
}
}
EVR.Sound.Controls.Button.Volume.prototype.set_attributes = function()
{
this.set_color(SOUND_BUTTON_BACKGROUND);
this.set_proportions(SOUND_BUTTON_WIDTH, SOUND_BUTTON_HEIGHT);
this.set_text();
this.css.cursor = "default";
}
EVR.Sound.Controls.Button.Volume.prototype.set_text = function()
{
var font = SOUND_CONTROLS_FONT_FAMILY;
var color = SOUND_CONTROLS_FONT_COLOR;
var size = SOUND_CONTROLS_FONT_SIZE;
EVR.Sound.Controls.Button.prototype.set_text.call(
this, this.icon, font, color, size);
}
EVR.Sound.Controls.Button.Volume.prototype.toString = function()
{
return "[object EVR.Sound.Controls.Button.Volume]";
}
EVR.Sound.Controls.Button.Volume.Amplify = function(container)
{
EVR.Sound.Controls.Button.Volume.call(
this, container, ALIGN_RIGHT, SOUND_AMPLIFY_ICON);
this.set_attributes();
this.append();
}
EVR.Sound.Controls.Button.Volume.Amplify.prototype =
new EVR.Sound.Controls.Button.Volume;
EVR.Sound.Controls.Button.Volume.Amplify.prototype.respond = function()
{
this.audio.increase_volume();
EVR.Sound.Controls.Button.Volume.prototype.respond.call(this);
}
EVR.Sound.Controls.Button.Volume.Amplify.prototype.update = function()
{
if (this.audio.volume >= 1)
{
this.focused_opacity = this.unfocused_opacity;
}
else
{
this.focused_opacity = SOUND_CONTROLS_FOUCUSED_OPACITY;
}
this.set_opacity();
}
EVR.Sound.Controls.Button.Volume.Amplify.prototype.toString = function()
{
return "[object EVR.Sound.Controls.Button.Volume.Amplify]";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>-</title>
<style type="text/css">
img
{
width: 480px;
margin: 30px;
}
</style>
</head>
<body>
<?php
foreach (glob("*.png") as $ii => $file)
{
echo "\t<img src=\"$file\" alt=\"$ii\" />\n";
}
?>
</body>
</html>
var HEIGHT_RATIO = .375;
var STRIPE_HEIGHT = .7;
var STRIPE_PALETTE = ["#AA8ADE", "#916D10", "#F88C37"];
var STRIPE_DURATION = 420;
var CRAWL_STEP = .02;
var CRAWL_FRAME_DURATION = 150;
var DINING_HEIGHT = .2;
var TITLE_MIN_HEIGHT = 100;
var GLYPH_HEIGHT = .2;
var GLYPH_WIDTH = .008;
var GLYPH_LETTER_RATIO = .5;
var GLYPH_SHADOW_OFFSET = .75;
var TITLE_PALETTE = ["#d00000", "#b0b0b0", "#0000d0"];
var TITLE_FLASH_FRAME_DURATION = 880;
var TITLE_SHADOW_BRIGHTNESS = 60;
var TITLE_TEXT_BRIGHTNESS = 45;
BH = function()
{
this.stripes_palette = STRIPE_PALETTE;
this.stripes_shift = false;
this.title_palette = TITLE_PALETTE;
this.title_center_index = 0;
this.setEventHandlers();
this.setChildren();
this.convertTitle();
this.arrange();
this.startFlash();
this.startCrawl();
this.startTitleFlash();
}
BH.prototype.setEventHandlers = function()
{
var current = this;
window.onresize = function() { current.arrange() };
}
BH.prototype.setChildren = function()
{
this.harvester = document.getElementById("harvester");
this.cabinet = document.getElementById("cabinet");
this.feeder = document.getElementById("feeder");
this.menu = document.getElementById("menu");
this.blueprint = document.getElementById("blueprint");
this.stripes = document.getElementById("stripes");
this.crawl_right = document.getElementById("crawl-right");
this.crawl_left = document.getElementById("crawl-left");
this.dining = document.getElementById("dining");
this.marquee = document.getElementById("marquee");
this.title = document.getElementById("title");
}
BH.prototype.convertTitle = function()
{
var title = this.title;
var text = title.innerHTML;
title.innerHTML = "";
var ch, glyph;
for (var ii = 0; ii < text.length; ii++)
{
ch = text.charAt(ii);
if (ch != " " && ch != "\n" && ch != "\t")
{
foreground = document.createElement("span");
foreground.className = "foreground";
foreground.style.zIndex = 1;
title.appendChild(foreground);
background = document.createElement("span");
background.innerHTML = ch;
background.className = "background";
background.style.zIndex = 0;
title.appendChild(background);
}
}
this.glyphs = title.getElementsByTagName("span");
}
BH.prototype.arrange = function()
{
this.clearStripes();
var harvester = this.harvester;
var harvester_w = harvester.clientWidth;
var height = this.formatPx(harvester_w * HEIGHT_RATIO);
harvester.style.height = height;
var cabinet = this.cabinet;
var feeder = this.feeder;
var menu = this.menu;
cabinet.style.height = height;
feeder.style.height = height;
menu.style.height = height;
var cabinet_w = cabinet.clientWidth;
feeder.style.width = this.formatPx(harvester_w - cabinet_w - menu.clientWidth);
feeder.style.left = this.formatPx(cabinet_w);
cabinet.getElementsByTagName("img")[0].height = cabinet.clientHeight;
menu.getElementsByTagName("img")[0].height = menu.clientHeight;
var win_h = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
var marquee = this.marquee;
this.arrangeFeeder();
this.arrangeTitle();
this.addStripes();
}
BH.prototype.arrangeFeeder = function()
{
var feeder = this.feeder;
var images = feeder.getElementsByTagName("img");
var range = feeder.clientHeight;
var y, image;
for (var ii = 0; ii < images.length; ii++)
{
image = images[ii];
image.style.top = this.formatPx(parseInt((range - image.clientHeight) / 2));
if (image.id == "crawl-left")
{
var length = image.clientWidth;
image.style.left = this.formatPx(-length);
this.crawl_length = length;
this.crawl_step = parseInt(CRAWL_STEP * length);
}
else
{
image.style.left = this.formatPx(0);
}
}
}
BH.prototype.arrangeTitle = function()
{
var title = this.title;
var range_x = title.clientWidth;
var width = parseInt(GLYPH_WIDTH * range_x);
this.resizeTitle();
var range_y = title.clientHeight;
var height = parseInt(GLYPH_HEIGHT * range_y);
var shadow_offset = parseInt(GLYPH_SHADOW_OFFSET * width);
var y = parseInt((range_y - height) / 2 - shadow_offset / 2);
var glyphs = this.glyphs;
title.style.fontSize = this.formatPx(GLYPH_LETTER_RATIO * height);
var glyph_count = glyphs.length / 2;
var width_all = width * glyph_count;
var margin = (range_x - width_all) / (glyph_count + 1);
var x = margin;
var foreground, background, color;
for (var ii = 0; ii < glyphs.length; ii += 2)
{
foreground = glyphs[ii];
background = glyphs[ii + 1];
foreground.style.height = this.formatPx(height);
background.style.height = this.formatPx(height);
foreground.style.lineHeight = this.formatPx(height);
background.style.lineHeight = this.formatPx(height);
foreground.style.top = this.formatPx(y);
background.style.top = this.formatPx(y + shadow_offset);
foreground.style.width = this.formatPx(width);
background.style.width = this.formatPx(width);
foreground.style.left = this.formatPx(x);
background.style.left = this.formatPx(x - shadow_offset);
x += margin + width;
}
}
BH.prototype.resizeTitle = function()
{
var title = this.title;
var available = this.getWindowHeight() - this.marquee.offsetHeight - this.harvester.offsetHeight;
var min_height = TITLE_MIN_HEIGHT;
if (available > min_height)
{
title.style.height = this.formatPx(available);
}
else
{
title.style.height = this.formatPx(min_height);
}
}
BH.prototype.getWindowHeight = function()
{
if (typeof(window.innerHeight) != "undefined")
{
return window.innerHeight;
}
return document.documentElement.clientHeight;
}
BH.prototype.clearStripes = function()
{
var stripes = this.stripes;
while (stripes.firstChild)
{
stripes.removeChild(stripes.firstChild);
}
}
BH.prototype.formatPx = function(measurement)
{
return parseInt(measurement) + "px";
}
BH.prototype.addStripes = function()
{
this.clearStripes();
var stripes = this.stripes;
var bound = this.cabinet.clientHeight;
var height = parseInt(bound * STRIPE_HEIGHT);
var sum = 0;
var stripe;
while (sum < bound)
{
stripe = document.createElement("div");
stripe.innerHTML = " ";
stripe.style.height = this.formatPx(height);
stripes.appendChild(stripe);
sum += height;
}
}
BH.prototype.startFlash = function()
{
var current = this;
window.setInterval(
function() {
current.setStripeColors();
}, STRIPE_DURATION);
}
BH.prototype.setStripeColors = function()
{
var stripes = this.stripes.getElementsByTagName("div");
var palette = this.stripes_palette;
var palette_ii = this.stripes_shift;
var color;
for (var ii = 0; ii < stripes.length; ii++)
{
color = palette[palette_ii % palette.length];
stripes[ii].style.background = color;
palette_ii++;
}
this.stripes_shift = !this.stripes_shift;
}
BH.prototype.startCrawl = function()
{
var current = this;
window.setInterval(
function() {
current.crawl();
}, CRAWL_FRAME_DURATION);
}
BH.prototype.crawl = function()
{
var right = this.crawl_right;
var left = this.crawl_left;
var length = this.crawl_length;
var step = this.crawl_step;
var right_x = parseInt(right.style.left) + step;
var left_x = parseInt(left.style.left) + step;
if (right_x >= length)
{
right_x = 0;
left_x = -length;
}
right.style.left = this.formatPx(right_x);
left.style.left = this.formatPx(left_x);
}
BH.prototype.startTitleFlash = function()
{
var current = this;
window.setInterval(
function() {
current.flashTitle();
}, TITLE_FLASH_FRAME_DURATION);
}
BH.prototype.flashTitle = function()
{
var glyphs = this.glyphs;
var glyph_count = glyphs.length / 2;
var start = parseInt(glyph_count / 2) - 1;
var center = start + 1;
var palette = this.title_palette;
var palette_ii = this.incrementIndex(this.title_center_index, palette);
this.title_center_index = palette_ii;
var color, shadow, text_color;
for (var ii = 0; ii <= start; ii++)
{
color = new Color(palette[palette_ii]);
shadow = new Color(color.getString());
text_color = new Color(color.getString());
shadow.changeBrightness(TITLE_SHADOW_BRIGHTNESS);
text_color.changeBrightness(TITLE_TEXT_BRIGHTNESS);
glyphs[ii * 2].style.backgroundColor = color.getString();
glyphs[ii * 2 + 1].style.backgroundColor = shadow.getString();
glyphs[ii * 2 + 1].style.color = text_color.getString();
glyphs[(glyph_count - ii - 1) * 2].style.backgroundColor = color.getString();
glyphs[(glyph_count - ii - 1) * 2 + 1].style.backgroundColor = shadow.getString();
glyphs[(glyph_count - ii - 1) * 2 + 1].style.color = text_color.getString();
palette_ii = this.incrementIndex(palette_ii, palette);
}
color = new Color(palette[palette_ii]);
shadow = new Color(color.getString());
text_color = new Color(color.getString());
shadow.changeBrightness(TITLE_SHADOW_BRIGHTNESS);
text_color.changeBrightness(TITLE_TEXT_BRIGHTNESS);
glyphs[center * 2].style.backgroundColor = color.getString();
glyphs[center * 2 + 1].style.backgroundColor = shadow.getString();
glyphs[center * 2 + 1].style.color = text_color.getString();
palette_ii = this.incrementIndex(palette_ii, palette);
}
BH.prototype.incrementIndex = function(index, list)
{
index += 1;
if (index >= list.length)
{
index = 0;
}
return index;
}
window.onload = function() { new BH() };
