// Fade Widget
//
// Copyright Dalbrook Limited 2006
//
// Fades button rollover effects in and out
//
// To use:
//
// 1. Include this script:
//
//
// 2. Initialise the system:
//
//
// 3. In your CSS define the 'fading' class with RGB color values matching the 'start' values in the script
// a.fading {
// display: block;
// color: #0000FF;
// background-color: #CCCCFF;
// width: 130px;
// height: 30px;
// }
//
// 4. Assign buttons to that class and give them unique ids
//
//
// On initialisation the system scans the document for anchor links and attaches events to them.
// It also 'disables' the button relating to the active page (i.e. self)
// On mouseover / mouseout the event handlers smoothly transition from 'off' to 'on' state colors
var timerInterval = 10;
var colorStepsUp = 15;
var colorStepsDown = 30;
var fadeClass = 'fading';
var buttons = [];
var colors = [];
colors['R'] = [];
colors['R']['foregroundStart'] = 0x00;
colors['R']['foregroundEnd'] = 0xFF;
colors['R']['backgroundStart'] = 0xCC;
colors['R']['backgroundEnd'] = 0x00;
colors['G'] = [];
colors['G']['foregroundStart'] = 0x00;
colors['G']['foregroundEnd'] = 0x00;
colors['G']['backgroundStart'] = 0xCC;
colors['G']['backgroundEnd'] = 0xFF;
colors['B'] = [];
colors['B']['foregroundStart'] = 0xFF;
colors['B']['foregroundEnd'] = 0x00;
colors['B']['backgroundStart'] = 0xFF;
colors['B']['backgroundEnd'] = 0xFF;
var disabledForeground = '#FFFF00';
var disabledBackground = '#4488FF';
var fadeTimer = null;
function fadeWidget(bodyId) {
if (!document.getElementsByTagName) {
return false; // Abandon hope if antique browser
}
var links = document.getElementsByTagName('a');
var thisLink;
var didSomething = false;
var buttonIds = [];
buttonIds['index'] = 'home_button';
buttonIds['functions'] = 'functions_button';
buttonIds['contactus'] = 'contactus_button';
buttonIds['menus'] = 'menus_button';
var thisButtonId = buttonIds[bodyId];
var buttonElement = document.getElementById(thisButtonId);
if (buttonElement) {
buttonElement.style.color=disabledForeground;
buttonElement.style.backgroundColor=disabledBackground;
// can't disable in Firefox; and it looks funny in IE, so don't bother
// buttonElement.disabled = true;
}
for (var i=0; i thisStepMax) {
buttons[thisId]['fading'] = false;
return true;
}
buttons[thisId]['step'] = thisStep;
var thisStyle = buttons[thisId]['object'].style;
buttons[thisId]['RF'] = Math.ceil (buttons[thisId]['RFS'] + (((buttons[thisId]['RFE'] - buttons[thisId]['RFS']) / thisStepMax) * thisStep));
buttons[thisId]['GF'] = Math.ceil (buttons[thisId]['GFS'] + (((buttons[thisId]['GFE'] - buttons[thisId]['GFS']) / thisStepMax) * thisStep));
buttons[thisId]['BF'] = Math.ceil (buttons[thisId]['BFS'] + (((buttons[thisId]['BFE'] - buttons[thisId]['BFS']) / thisStepMax) * thisStep));
buttons[thisId]['RB'] = Math.ceil (buttons[thisId]['RBS'] + (((buttons[thisId]['RBE'] - buttons[thisId]['RBS']) / thisStepMax) * thisStep));
buttons[thisId]['GB'] = Math.ceil (buttons[thisId]['GBS'] + (((buttons[thisId]['GBE'] - buttons[thisId]['GBS']) / thisStepMax) * thisStep));
buttons[thisId]['BB'] = Math.ceil (buttons[thisId]['BBS'] + (((buttons[thisId]['BBE'] - buttons[thisId]['BBS']) / thisStepMax) * thisStep));
var foregroundColor = makeColor (buttons[thisId]['RF'], buttons[thisId]['GF'], buttons[thisId]['BF']);
var backgroundColor = makeColor (buttons[thisId]['RB'], buttons[thisId]['GB'], buttons[thisId]['BB']);
thisStyle.color = foregroundColor;
thisStyle.backgroundColor = backgroundColor;
return true;
}
function makeColor(r,g,b) {
var result
var rt = "00" + r.toString(16) + "00";
rt = rt.slice(-4,-2);
var gt = "00" + g.toString(16) + "00";
gt = gt.slice(-4,-2);
var bt = "00" + b.toString(16) + "00";
bt = bt.slice(-4,-2);
result = "#" + rt + gt + bt;
return result;
}
function fadeInOut(evt, direction) {
var thisButton = null;
if (evt.srcElement) {
thisButton = evt.srcElement; // IE
} else if (evt.currentTarget) {
thisButton = evt.currentTarget; // Firefox
} else return false; // Ancient browser. Give up
var thisId = thisButton.id;
if (buttons[thisId] == undefined) {
buttons[thisId] = [];
buttons[thisId]['object'] = thisButton;
}
buttons[thisId]['fading'] = true;
buttons[thisId]['step'] = 0;
if (direction == 'in') {
buttons[thisId]['stepMax'] = colorStepsUp;
var fs = 'foregroundStart';
var bs = 'backgroundStart';
var fe = 'foregroundEnd';
var be = 'backgroundEnd';
} else {
buttons[thisId]['stepMax'] = colorStepsDown;
var fs = 'foregroundEnd';
var bs = 'backgroundEnd';
var fe = 'foregroundStart';
var be = 'backgroundStart';
}
buttons[thisId]['RFS'] = colors['R'][fs];
buttons[thisId]['GFS'] = colors['G'][fs];
buttons[thisId]['BFS'] = colors['B'][fs];
buttons[thisId]['RBS'] = colors['R'][bs];
buttons[thisId]['GBS'] = colors['G'][bs];
buttons[thisId]['BBS'] = colors['B'][bs];
buttons[thisId]['RFE'] = colors['R'][fe];
buttons[thisId]['GFE'] = colors['G'][fe];
buttons[thisId]['BFE'] = colors['B'][fe];
buttons[thisId]['RBE'] = colors['R'][be];
buttons[thisId]['GBE'] = colors['G'][be];
buttons[thisId]['BBE'] = colors['B'][be];
if (fadeTimer == null) {
fadeTimer = setInterval('doFading()', timerInterval);
}
return true;
}
function fadein(evt) {
return fadeInOut(evt,'in');
}
function fadeout(evt) {
return fadeInOut(evt,'out');
}