// JavaScript Document

/* ********************************************************************
* GreyWyvern's Buffered Text-fade Effect - v2.2a
* - A bit of Javascript for handling intelligent fading of text
* - Copyright 2006 - Licenced for free distribution under the BSDL
*   - http://www.opensource.org/licenses/bsd-license.php
*
*   This program is licenced under the BSDL and may be distributed far
* and wide, anywhere on the planet and beyond (maybe!)  If you happen
* to get a kick out of this script, please drop me a note at:
* wyvern@greywyvern.com and tell me where you gave it a good home and
* plenty of bytes to eat, hmmm? :)  I'd be eternally grateful.
*
* Description:
*   A complete recode of the original fade in and out javascript I
* wrote with many improvements.  The buffer system now works almost
* flawlessly, and making fade effects is much easier for the javascript
* beginner.  Just fill in the messages and assign the onmouseover and
* onmouseout attributes with the appropriate fade function!  It also
* helps *me* out by allowing the instruction manual (below) to be much
* simpler to write ;)
*
* Changelog:
*  2.2a - Code optimization accumulation release
*       - No need to upgrade from 2.2 if it works for you
*
*  2.2 - Licence changed from GPL to BSDL
*
*  2.1 - The script would cancel two fade commands if one was a fade in
*        and one was a fade out of the same fade target and message.
*        I added some extra code to cancel the opposite case: two
*        commands where one is a fade out and the other is a fade in of
*        the same message.
*      - If the fade trigger element contained text within an HTML
*        element, a quick mouseover/mouseout or mouseout/mouseover pair
*        of events would be triggered if you moused-out of the text,
*        while staying within the trigger element.  I added a new
*        timeout to catch this set of events.
*
* Support:
*   Opera 7.x  - Perfectly
*   IE 6       - Perfectly
*   IE 5.5     - Perfectly
*   IE 5.01    - Fails
*   Mozilla    - Flickers slightly
*   Firefox    - Flickers slightly
*
*
* I) Setting Up
*   Copy the javascript from this page into an external .js file or
* into the <script> tag of your own HTML page.  This shouldn't be that
* difficult, but you wouldn't believe the kind of mail I get about
* this!  Just do it, okay?  Jeez.
*
* a) The Fade Object
*   After that's done we need to create a fade object.  We do this by
* calling the fadeObj function with a number of arguments.  We'll use
* the default example included in the script: fader[0].  You can delete
* the fader[1] lines if you like.
*
* fader[0] = new fadeObj(0, 'fade0', 'dddddd', '000000', 20, 20, true);
*
*   We'll go through the arguments in order.
*
*   The first argument (0), is the same number you give to the fader
* variable.  So if your fader object is fader[78], the first argument
* would be 78.
*
*   Next is the id of the HTML tag which will be displaying the fading
* effect.  Usually you'll want to apply some height and width styles to
* this element, since it starts out with no text by default and will
* probably be collapsed.  You don't want it jumping around when the
* script writes new text to it.
*
*   The next two values are hexidecimal colour values, WITHOUT the
* preceding #.  The first value is the starting colour, or the colour
* the text is before it fades in.  The second value is the ending
* colour, or the colour the text will be when it finishes fading in.
*
*   After this comes two speed integers, the first for fade-in speed,
* the second for fade-out.  The speed of the fade will increase the
* smaller these numbers get.  At a value of one there is no visible
* fade effect; the text will just "appear".
*   Essentially what these numbers are is the number of "steps" the
* script must take to complete the fade.  With a value of 20 like in
* the example above, there will be 20 colour changes before the text
* is fully faded-in or faded-out.
*
*   The final argument is very important.  It tells the script if there
* is a default block of text you'd like to display in the fade element.
* If set to true, the value of the message[0] will be faded-in if there
* are no more fade commands in the queue.  Once another fade is
* triggered, the default text will fade out first before the new text
* fades in.
*   If set to false, the script will erase the text in the fade element
* if there are no more fade commands left in the queue, leaving it
* completely blank.
*
*
* b) The Fade Messages
*   After setting up our fade object, all we need to do now is write
* out all of the messages which will be displayed in this element.
* Remember that this script only affects text and including images or
* links won't work.
*
*   Messages are included in the message[] array.  Simply assign each
* message a number, like so:
*
* fader[0].message[1] = "Fade text, message one.";
*
*   Each fade object can have as many messages as you want, and be in
* any numerical order.  You can even skip numbers, but note that if you
* use the fade() pointed at a message number which doesn't exist, you
* will get an error.
*
*   As mentioned above, if your fade object has a default message
* specified, it will use the message text from message[0].  Specifying
* a default message and not including a message[0] will cause an error.
*
*
* II) The Events
*   Fades can be triggered by any DOM event, but most likely you'll be
* using mouseover and mouseout events.  I used those events as examples
* below.
*
*   To trigger a fade, you use the fade() function which takes a few
* important arguments:
*
* Example: onmouseover="fade(0, 1, true);"
* 
*   The first argument is the number of the fade object this command is
* targetting.  In this case, it's been pointed at fader[0].
*
*   The second is the message this command refers to.  This one has
* been associated with message[1] of fader[0].
*
*   Lastly, the final argument indicates the direction of the fade.
* true = fade in, false = fade out.
*
*   Examine the working example script to see how these events were
* placed on the <td> elements below.
*
*
* III) Tips
*   - If you give your fade object a default message, it won't appear
* until after the first mouseover event is triggered.  To rectify this
* you can add an onload event to the <body> tag which triggers the
* default message: <body onload="fade(0, 0, true);"> where the first
* argument is, of course, the number of the desired fade object.
*
*   - All the text in each message[] variable MUST be on one line in
* the code.  That means this:
*
*   fader[0].message[1] = "Fader zero,
* message one";
*
* ... is not allowed!  The text should wrap automatically when it's
* displayed on your HTML page, but you can force line breaks with the
* <br> tag.
*
*   - If you're placing the fading text on a background, make the
* starting colour an average sample of the background instead of just
* black or white.  This will enhance the "disappearing" effect.
*
*   - The script can only fade text, but can accept non-graphical HTML
* tags like <p>, <table> (no borders), <strong> and <em>.  Use these
* tags to add structure and simple text-effects to your fades.
*
*   - To have links fade along with with the surrounding text, apply
* the CSS style: color:inherit !important; to all links within the fade
* text messages.
*
* *********************************************************************
* That's it!  Isn't that amazing!?! :)
*
* If you have any problems with this script, don't hesitate to email me
* at wyvern@greywyvern.com and I'll be happy to answer your matter-of-
* life-and-death questions!  Cheers!
* ****************************************************************** */

/* ***** Begin: GreyWyvern's Buffered Text-fade Effect - v2.2a ***** */
var fader = new Array(), fadeQ = new Array();
var RGB = new Array(256), k = 0, hex = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
for (var i = 0; i < 16; i++) for (var j = 0; j < 16; j++) RGB[k++] = hex[i] + hex[j];

function fadeObj(number, id, colOff, colOn, spdIn, spdOut, def) {
  this.number = number;
  this.id = id;
  this.colOff = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
  this.colOn = [parseInt(colOn.substr(0, 2), 16), parseInt(colOn.substr(2, 2), 16), parseInt(colOn.substr(4, 2), 16)];
  this.colNow = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
  this.spdIn = spdIn;
  this.spdOut = spdOut;
  this.def = def;
  this.direction = false;
  this.active = false;
  this.message = new Array();
  this.messageNow = 0;
}

function fadeCmd(number, message, direction) {
  this.number = number;
  this.message = message;
  this.direction = direction;
}

function fade(number, message, direction) {
  if (fader[number].def && fader[number].messageNow == 0 && fader[number].direction) {
    fadeQ[fadeQ.length] = new fadeCmd(number, 0, false);
    fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
    message = 0;
    direction = false;
  } else fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
  setTimeout(function() { fadeBegin(number); }, 20);
}

function fadeBegin(number) {
  for (var x = 0; x < fadeQ.length; x++) {
    for (var y = x + 1; y < fadeQ.length; y++) {
      if (fadeQ[x].number == fadeQ[y].number && fadeQ[x].message == fadeQ[y].message && fadeQ[x].direction != fadeQ[y].direction) {
        fadeQ.splice(x, 1);
        fadeQ.splice(y - 1, 1);
      }
    }
  }
  if (!fader[number].active) {
    for (var x = 0; x < fadeQ.length; x++) {
      if (fadeQ[x].number == number && fadeQ[x].direction != fader[number].direction) {
        var del = fadeQ.splice(x, 1);
        setTimeout(function() { fadeEng(number, del[0].message, del[0].direction); }, 0);
        break;
      }
    }
  }
}

function fadeEng(number, message, direction) {
  if (!fader[number].active) {
    fader[number].active = true;
    fader[number].direction = direction;
    fader[number].messageNow = message;
    document.getElementById(fader[number].id).innerHTML = fader[number].message[message];
  }
  var iniCol = (direction) ? fader[number].colOff : fader[number].colOn;
  var endCol = (direction) ? fader[number].colOn : fader[number].colOff;
  var incCol = fader[number].colNow;
  var spd = (direction) ? fader[number].spdIn : fader[number].spdOut;
  for (var x = 0; x < 3; x++) {
    var incr = (endCol[x] - iniCol[x]) / spd;
    incCol[x] = (incr < 0) ? Math.max(incCol[x] + incr, endCol[x]) : Math.min(incCol[x] + incr, endCol[x]);
  }
  document.getElementById(fader[number].id).style.color = "#" + RGB[parseInt(incCol[0])] + RGB[parseInt(incCol[1])] + RGB[parseInt(incCol[2])];
  if (incCol[0] == endCol[0] && incCol[1] == endCol[1] && incCol[2] == endCol[2]) {
    fader[number].active = false;
    for (var x = 0; x < fadeQ.length; x++) {
      if (fadeQ[x].number == number) {
        var del = fadeQ.splice(x, 1);
        setTimeout(function() { fadeEng(number, del[0].message, del[0].direction); }, 0);
        return false;
      }
    }
    if (!direction) {
      if (fader[number].def) {
        setTimeout(function() { fadeEng(number, 0, true); }, 0);
      } else document.getElementById(fader[number].id).innerHTML = "&nbsp;";
    }
  } else setTimeout(function() { fadeEng(number, message, direction); }, 0);
}
/* ***** End: GreyWyvern's Buffered Text-fade Effect - v2.2a ******* */








/* *****
 * The code below describes how to make a throbbing or automatic fade
 * sequence of messages.  The throbFade function is called repeatedly
 * which controls what commands are sent to the fade engine, rather
 * than using mouseovers.
 *
 * Notes:
 * - A global array throbStep is used to keep track of where each
 *   animation is currently in the sequence.
 * - The list of messages defined in the fader *must* start at zero (0)
 *   and count upwards without skipping any integers.
 * - The third line of the throbFade() function controls how fast
 *   commands get sent to the fade engine.  It waits only 100 milli-
 *   seconds when fading out, but 4000 milliseconds (4 seconds) when
 *   fading in; this means the message will remain visible for about 4
 *   seconds before fading out again.
 *
 * Other types of fade animation are possible simply by designing
 * different ways to control the fade-ins and fade-outs!
 */
var throbStep = new Array();
function throbFade(item) {
  if (!throbStep[item]) throbStep[item] = 0;
  fade(item, Math.floor(throbStep[item] / 2), (throbStep[item] % 2) ? false : true);
  setTimeout(function() { throbFade(item); }, (throbStep[item] % 2) ? 100 : 6000);
  if (++throbStep[item] > fader[item].message.length * 2 - 1) throbStep[item] = 0;
}

fader[2] = new fadeObj(2, 'fade2', 'bbbbbb', '000000', 15, 15, false);
fader[2].message[0] = "\"...how inspiring.\" - Orhan McMillan, Baton Rouge, LA";
fader[2].message[1] = "\"...amazed at his insights and life affirming messages.\" - Anita Bogk, Milwaukee, WI";
fader[2].message[2] = "\"...had no idea you were so prolific.\" - Garry Phillips, Pensacola, FL";
fader[2].message[3] = "\"...a very good writer.\" - Rev. Andre Papineau, Milwaukee, WI";
fader[2].message[4] = "\"His words touch my heart deeply.\" - Cynthia McCray, Baton Rouge, LA";
fader[2].message[5] = "\"What a heart of gold and sincere.  He would give you the clothes off his back if you needed.  I love Nick's spirit, generosity and passion!!!!\" - Donna Ganier, Baton Rouge, LA";
fader[2].message[6] = "\"His messages hit home runs!\" - Marion Verhaalen, SSSF, Milwaukee, WI";
fader[2].message[7] = "\"Last night I took a lot of what you said and put it into motion with my three girls and this morning with our Confirmation Class. It was a start and with time hopefully I will get better. Again, it was a very enjoyable day that just seem to go by too fast. Thank you.\" - Rochelle Edwards Mobile, AL ";
fader[2].message[8] = "\"After you've known him for 15 minutes, it feels like you've known him your whole life. He is warm and compassionate but will challenge people to recognize their problems for what they are. He's not full of the psycho-babble that the airways are filled with. He's a great gift.\" - Mary Durusau, Baton Rouge, LA";
fader[2].message[9] = "\"...wonderful and diverse lessons and contemplations. . . so honest and authentic.\" - Darlene Montgomery, Toronto, Canada";
fader[2].message[10] = "\"A Lebanese Catholic from Baton Rouge Louisiana!... Now that's a recipe for joy! Put that together with Dr. Abraham's insight and expertise!...Now those are definitely...'Resources for Living Well'!\" - Charles Michel, New York City, NY";
fader[2].message[11] = "\". . . provides inspirations, challenges and wisdom that challenges me to think outside my comfort zone.\" - Robin Harvey, PhD, Perth, Australia";
fader[2].message[12] = "\"He has a peaceful way of viewing things.\" - Roselyn Davis, Cedar Falls, IA";
fader[2].message[13] = "\"The session was fantastic.  Is there anyway to have him again for a 'part 2'?  He was so inspirational and just what I needed yesterday.\" - Merrill Ingram, Baton Rouge, LA";
fader[2].message[14] = "\"I loved the training session last night! Abraham is addictive! Truly genuine and entrancing. I am still thinking about the many insights he had into life.\" - Chriss Florkiewicz";
setTimeout(function() { throbFade(2); }, 1000);


/* ***** End: GreyWyvern's Buffered Text-fade Effect - v2.2a ******* */