/* ********************************************************************

* 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:

* javascript@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 javascript@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 variable throbStep is used to keep track of where the

 *   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 second 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!

 */

function throbFade() {

  fade(0, Math.floor(throbStep / 2), (throbStep % 2) ? false : true);

  setTimeout("throbFade();", (throbStep % 2) ? 1000 : 6000);

  if (++throbStep > fader[0].message.length * 2 - 1) throbStep = 0;

}



fader[0] = new fadeObj(0, 'scroll', 'bbbbbb', '555555', 30, 30, false);

fader[0].message[0] = "<li value=\"2\"><b>Deal Completion:</b> Our Principals have unmatched deal experience and a proven track record of closing deals in this sector.</li>";

fader[0].message[1] = "<li value=\"3\"><b>Deal Assessment:</b> We have the ability to see value that may be missed by other private equity investors with less understanding of the sector and its growth characteristics.</li>";

fader[0].message[2] = "<li value=\"4\"><b>Deal Integration:</b> Working with our Operating Partners, we can quickly and effectively integrate new assets into our operating platforms.</li>";

fader[0].message[3] = "<li value=\"1\"><b>Deal Flow:</b> We are on the \"A\" list for auctions yet are able to tap into a pool of proprietary transactions for a substantial portion of our deal flow.</li>";



var throbStep = 0;

setTimeout("throbFade();", 3000);