main();

//var width = 400;
var width = 500;
var height = 20;
var canvas;
var context;
var endings = ['people.','clients.','consumers.','patients.','friends.','world.'];
var endingsIndex = 0;
var textSize = 13;
var fontFamilyItalic = 'italic 13px Verdana';
var fontFamilyItalicBold = 'bold italic 13px Verdana';
var fontStyles = ['#000000','#111111','#222222','#333333','#444444','#555555','#666666','#777777','#888888','#999999','#AAAAAA','#BBBBBB','#CCCCCC','#DDDDDD','#EEEEEE','#FFFFFF'];
var fontStyleIndex = 16;
//var baseText = 'Connecting you to your ';
var baseText = 'Reinventing the way you connect... to your ';
var baseTextWidth;
var textFade = 1;
var fullBlackCount = 0;
var fullBlackLimit = 9;

function main() { window.addEventListener('load', eventWindowLoaded, false); }

function eventWindowLoaded() {
    canvas = document.getElementById('slogan-end');
    context = canvas.getContext('2d');
    context.font = fontFamilyItalic;
    baseTextWidth = context.measureText(baseText).width;
    
    draw();
    setInterval("draw()", 47);
}

function draw() {
    // clear canvas for redraw
    context.clearRect(0, 0, width, height);
    
    //draw base of slogan
    context.fillStyle = fontStyles[0];
    context.font = fontFamilyItalic;
    context.fillText(baseText, 3, textSize + (height - textSize - 2) / 2);
    
    //draw fading ending word
    word = endings[endingsIndex];
    context.fillStyle = fontStyles[fontStyleIndex - 1];
    context.font = fontFamilyItalicBold;
    context.fillText(word, 3 + baseTextWidth, textSize + (height - textSize - 2) / 2);
    
    // some looping logic
    if(textFade == 0) { //fade out
        if(fontStyleIndex < fontStyles.length) {
            fontStyleIndex++;
        } else {
            if(endingsIndex < endings.length - 1) {
                endingsIndex++;
            } else {
                endingsIndex = 0;
            }    
            textFade = 1;
        }
    } else { //fade in
        if(fontStyleIndex == 1) {
            if(fullBlackCount < fullBlackLimit) {
                fullBlackCount++;
            } else {
                fullBlackCount = 0;
                fontStyleIndex--;
            }
        } else if(fontStyleIndex > 1) {
            fontStyleIndex--;
        } else {
            textFade = 0;
        }
    }
}