var id = setInterval(onOff, 5000);

var TimeToFade = 1000.0;

var eid = 'thingsWeTreatText';
var imageId = 'headerImageBlock';

var conditionsArray = ['child wellness', 'pain management', 'low back pain', 'spinal adjustment', 'carpal tunnel', 'sports injuries', 'foot pain', 'shin splints', 'disc herniations', 'ear infections', 'fevers', 'auto injuries', 'traction devices', 'family wellness', 'spinal alignment', 'our clinic', 'our satisfied customers', 'headaches', 'joint pain', 'massage'];
var imagesArray = ['drtkids.gif', 'drchart.jpg', 'Lower back pain.jpg', 'Neckkid.jpg', 'Carpal Tunnel.jpg', 'Shoulder Injury or Sports Massage.jpg', 'Sports Injuries.jpg', 'Knee Massage or Shin Splints.jpg', 'disc herniation.jpg', 'ear infections.jpg', 'FeverPicture.jpg', 'CarAccident.jpg', 'MarkPatientWall.jpg', 'Family Wellness.jpg', 'MarkPatientBack.jpg', 'ClinicOutside.jpg', 'HannaHat.jpg','Headaches.jpg', 'Ankle Pain.jpg', 'massage.jpg'];

var counter = 0;
var imageCounter = 0;

function onOff() {
    fade();
    fadeImage();

    setTimeout(updateAndFade, TimeToFade);
    setTimeout(updateImageAndFade, TimeToFade);
}

function updateImageAndFade() {
    var element = document.getElementById(imageId);

    if (imageCounter >= imagesArray.length) {
        imageCounter = 0;
    }

    element.firstChild.src = "http://dynamicchiros.com/images/frontpage/" + imagesArray[imageCounter++];

    fadeImage(imageId);
}

function fadeImage() {
    var element = document.getElementById(imageId);

    if (element == null) {
        return;
    }

    if (element.FadeState == null) {
        if (element.style.opacity == null || element.style.opacity == '' || element.style.opacity == '1') {
            element.FadeState = 2;
        }
        else {
            element.FadeState = -2;
        }
    }

    if (element.FadeState == 1 || element.FadeState == -1) {
        element.FadeState = element.FadeState == 1 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
    }
    else {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade;
        setTimeout("animateImageFade(" + new Date().getTime()
        + ",'" + imageId + "')", 33);
    }
}

function animateImageFade(lastTick, elementId) {
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(elementId);

    if (element.FadeTimeLeft <= elapsedTicks) {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';
        element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;
        return;
    }

    element.FadeTimeLeft -= elapsedTicks;
    var newOpVal = element.FadeTimeLeft / TimeToFade;
    if (element.FadeState == 1)
        newOpVal = 1 - newOpVal;

    element.style.opacity = newOpVal;
    element.style.filter =
      'alpha(opacity = ' + (newOpVal * 100) + ')';

    setTimeout("animateImageFade(" + curTick
      + ",'" + elementId + "')", 33);
}

function updateAndFade() {
    var element = document.getElementById(eid);

    if (counter >= conditionsArray.length) {
        counter = 0;
    }

    element.firstChild.nodeValue = conditionsArray[counter++];

    fade();
}

function fade() {
    var element = document.getElementById(eid);

    if (element == null) {
        return;
    }

    if (element.FadeState == null) {
        if (element.style.opacity == null || element.style.opacity == '' || element.style.opacity == '1') {
            element.FadeState = 2;
        }
        else {
            element.FadeState = -2;
        }
    }

    if (element.FadeState == 1 || element.FadeState == -1) {
        element.FadeState = element.FadeState == 1 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
    }
    else {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade;
        setTimeout("animateFade(" + new Date().getTime()
        + ",'" + eid + "')", 33);
    }
}

function animateFade(lastTick, elementId) {
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(elementId);

    if (element.FadeTimeLeft <= elapsedTicks) {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';
        element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;
        return;
    }

    element.FadeTimeLeft -= elapsedTicks;
    var newOpVal = element.FadeTimeLeft / TimeToFade;
    if (element.FadeState == 1)
        newOpVal = 1 - newOpVal;

    element.style.opacity = newOpVal;
    element.style.filter =
      'alpha(opacity = ' + (newOpVal * 100) + ')';

    setTimeout("animateFade(" + curTick
      + ",'" + elementId + "')", 33);
}