/* ********************************************************************
* 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
* 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.
* */
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);
}

function throbFade() {
  fade(2, Math.floor(throbStep / 2), (throbStep % 2) ? false : true);
  setTimeout("throbFade();", (throbStep % 2) ? 100 : 15000);
  if (++throbStep > fader[2].message.length * 2 - 1) throbStep = 0;
}

fader[2] = new fadeObj(2, 'fade2', 'bbbbbb', '000000', 30, 30, false);
fader[2].message[0] = "\"Evergreen came to our house and gave us all the options we had and did not try to \"sell\" us the windows, rather let the product sell itself. It was this approach that sold us on the windows. … I would highly recommend Evergreen Door and Window to family, friends and neighbors.\"<br/><br/><b>B.C.B. - Orland Park, Illinois</b>";
fader[2].message[1] = "\"I have tried many other stores and Evergreen was the only place where someone actually offered me assistance.<br/>From the incredible customer service to the tidy window installers, it was a pleasure doing business with Evergreen Door and Windows!\"<br/><br/><b>M.J.C – Chicago, Illinois</b>";
fader[2].message[2] = "\"I have owned my own business for 40 years, so I understand good service and workmanship. This was the third time for me regarding window installation. Evergreen Door and Window has demonstrated professionalism in every sense of the word. I have and will continue to recommend you to the people I know.\"<br/><br/><b>P.M.M – Chicago, Illinois</b>";
fader[2].message[3] = "\"Very clean and accurate work. I already did recommend people to your company, I also told my friends to come out and look at the nice work you do.\"<br/><br/><b>V.C.C – Hickory Hills, Illinois</b>";
fader[2].message[4] = "\"After spending time pricing doors and inquiring about choices of same that are available at other places, I was disappointed in the lack of information and interest that these vendors were willing to provide. I randomly selected Evergreen Door and Window and am so pleased that I did.\"<br/><br/><b>M.L. – Evergreen Park, Illinois</b>";

var throbStep = 0;
setTimeout("throbFade();", 1000);