//
var _ViewerportWidth = 0;
var _ViewerportHeight = 0;
// 
var _BannerWidth = 795;
var _FlyOutWidth = 30;
var _StandbyOffset = 300;
var _IntervalTime = 12000;
// banner positions
var _LeftStandbyX = -_BannerWidth - _StandbyOffset;
var _LeftFlyoutX = _FlyOutWidth - _BannerWidth;
var _CenterFlyoutX = 0;
var _RightFlyoutX = 0;
var _RightStandbyX = 0;
var _SelectedImageIndex = 0;
var _IsInit = true;

// IN CODE
// var _CarouselMatrix = [-1, 0, 1, 2, 3, 4, 5, 6]
// IN CODE
// _BoxArray = ['box1', 'box2', 'box3', 'box4', 'box5', 'box6', 'box7', 'box8'];

var _Animations = [];

function OnResize() {
    if (!_IsInit) {
        if (t != null) {
            clearTimeout(t);
        }
        for (i = 0; i < _ImageArray.length; i++) {
            $get(_ImageArray[i]).style.visibility = 'hidden';
        }
    }
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
        _ViewerportWidth = window.innerWidth,
                _ViewerportHeight = window.innerHeight
    }
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    else if (typeof document.documentElement != 'undefined'
                && typeof document.documentElement.clientWidth !=
                'undefined' && document.documentElement.clientWidth != 0) {
        _ViewerportWidth = document.documentElement.clientWidth,
                _ViewerportHeight = document.documentElement.clientHeight
    }
    // older versions of IE
    else {
        _ViewerportWidth = document.getElementsByTagName('body')[0].clientWidth,
                _ViewerportHeight = document.getElementsByTagName('body')[0].clientHeight
    }
    _ViewerportWidth = document.getElementsByTagName('body')[0].clientWidth;
    //
    // recalc the positions of the banners
    //
    _CenterFlyoutX = Math.round(_ViewerportWidth / 2 - _BannerWidth / 2);
    _RightFlyoutX = _ViewerportWidth - _FlyOutWidth;
    _RightStandbyX = _ViewerportWidth + _StandbyOffset;
    //
    // reset the banner positions
    //
    if (_CarouselMatrix[0] != -1) {
        $get(_ImageArray[_CarouselMatrix[0]]).style.left = _LeftStandbyX + 'px';
    }
    $get(_ImageArray[_CarouselMatrix[1]]).style.left = _CenterFlyoutX + 'px';
    $get(_ImageArray[_CarouselMatrix[2]]).style.left = _RightFlyoutX + 'px';
    // place all remaining images in "standby" position
    for (i = 3; i < _ImageArray.length; i++) {
        $get(_ImageArray[_CarouselMatrix[i]]).style.left = _RightStandbyX + 'px';
    }
    // restart the timer, if necessary
    if (_IsInit) {
        // if init, we need to set the last image to the standby position
        $get(_ImageArray[_ImageArray.length - 1]).style.left = _RightStandbyX + 'px';
        _IsInit = false;
    } else {
        if (t != null) {
            t = setTimeout("ScrollLeft()", _IntervalTime);
        }
    }
    // display the images
    for (i = 0; i < 3; i++) {
        if (_CarouselMatrix[i] != -1)
        {
            $get(_ImageArray[_CarouselMatrix[i]]).style.visibility = 'visible';
        }
    }
}

function ScrollRight() {
    var img;
    // remove the existing animations
    _Animations = [];
    if (_CarouselMatrix[0] == -1) {
        // Standby Flyout
        img = $get(_ImageArray[_ImageArray.length - 2]);
        // move the image to the standby left position
        img.style.left = _LeftStandbyX + 'px';
        img.style.visibility = 'visible';
        AddAnimation(img, _LeftFlyoutX, false);
        // Left Flyout
        img = $get(_ImageArray[_ImageArray.length - 1]);
        img.style.left = _LeftStandbyX + 'px';
        img.style.visibility = 'visible';
        AddAnimation(img, _CenterFlyoutX, false);
        // Center Image
        img = $get(_ImageArray[0]);
        img.style.left = _LeftStandbyX + 'px';
        img.style.visibility = 'visible';
        AddAnimation(img, _RightFlyoutX, false);
        // Right Flyout
        img = $get(_ImageArray[1]);
        AddAnimation(img, _RightStandbyX, false);
    } else {
        // Standby Flyout
        img = $get(_ImageArray[_CarouselMatrix[_CarouselMatrix.length - 1]]);
        // move the image to the standby left position
        img.style.left = _LeftStandbyX + 'px';
        img.style.visibility = 'visible';
        AddAnimation(img, _LeftFlyoutX, false);
        // Left Flyout
        img = $get(_ImageArray[_CarouselMatrix[0]]);
        AddAnimation(img, _CenterFlyoutX, false);
        // Center Image
        img = $get(_ImageArray[_CarouselMatrix[1]]);
        AddAnimation(img, _RightFlyoutX, false);
        // Right Flyout
        img = $get(_ImageArray[_CarouselMatrix[2]]);
        AddAnimation(img, _RightStandbyX, false);
    }
    //
    UpdateMatrixOnMove(_SelectedImageIndex - 1)
    UpdateLinkBoxes();
    // Start the Animation
    StartAnimation();
}

function ScrollLeft() {
    var img;
    // remove the existing animations
    _Animations = [];
    // Left Flyout
    if (_CarouselMatrix[0] > -1) {
        img = $get(_ImageArray[_CarouselMatrix[0]]);
        AddAnimation(img, _LeftStandbyX, true);
    }
    // Center Image
    img = $get(_ImageArray[_CarouselMatrix[1]]);
    AddAnimation(img, _LeftFlyoutX, false);
    // Right Flyout
    img = $get(_ImageArray[_CarouselMatrix[2]]);
    AddAnimation(img, _CenterFlyoutX, false);
    // Standby Flyout
    img = $get(_ImageArray[_CarouselMatrix[3]]);
    img.style.visibility = 'visible';
    AddAnimation(img, _RightFlyoutX, false);
    //
    UpdateMatrixOnMove(_SelectedImageIndex + 1)
    UpdateLinkBoxes();
    // Start the Animation
    StartAnimation();
}

function MoveLeft(newIndex) {
    // remove the existing animations
    _Animations = [];
    if (newIndex != _SelectedImageIndex) {   
        if (newIndex - _SelectedImageIndex == 1) {
            ScrollLeft();
        } else if (_SelectedImageIndex == 0 && newIndex == _ImageArray.length - 1) {
            // handle the "edge" situation where moving left would be more efficient
            ScrollRight();
        } else {
            var img;
            // set initial positions
            var leftOffset = _ViewerportWidth - _FlyOutWidth + _BannerWidth + _StandbyOffset;
            var counter = _SelectedImageIndex + 2
            for (i = _SelectedImageIndex + 2; i <= newIndex + 2; i++) {
                img = $get(_ImageArray[counter])
                img.style.left = leftOffset;
                img.style.visibility = 'visible';
                leftOffset += _BannerWidth + _StandbyOffset;
                if (counter == _ImageArray.length - 1) {
                    counter = 0;
                } else {
                    counter++;
                }
            }
            // calc final positions and add animations
            for (i = newIndex + 2; i > _SelectedImageIndex - 2; i--) {
                counter--;
                if (counter == -1) {
                    counter = _ImageArray.length - 1;
                }
                if (i == newIndex + 2) {
                    img = $get(_ImageArray[counter]);
                    AddAnimation(img, _RightStandbyX, false);
                } else if (i == newIndex + 1) {
                    img = $get(_ImageArray[counter]);
                    AddAnimation(img, _RightFlyoutX, false);
                } else if (i == newIndex) {
                    img = $get(_ImageArray[counter]);
                    AddAnimation(img, _CenterFlyoutX, false);
                } else if (i == newIndex - 1) {
                    img = $get(_ImageArray[counter]);
                    AddAnimation(img, _LeftFlyoutX, false);                
                } 
                else {
                    img = $get(_ImageArray[counter]);
                    AddAnimation(img, _LeftStandbyX, true);
                }
            }
            StartAnimation();
            UpdateMatrixOnMove(newIndex);   
            UpdateLinkBoxes();
        }
    }
}

function MoveRight(newIndex) {
    // remove the existing animations
    _Animations = [];
    if (newIndex != _SelectedImageIndex) {
        if (_SelectedImageIndex - newIndex == 1) {
            ScrollRight();
        } else if (newIndex == 0 && _SelectedImageIndex == _ImageArray.length - 1) {
            // handle the "edge" situation where moving left would be more efficient
            ScrollLeft();
        } else {
            // set initial positions
            var leftOffset = -_ViewerportWidth + _FlyOutWidth - _StandbyOffset - _BannerWidth;
            var counter = _SelectedImageIndex - 2
            var img;
            for (i = _SelectedImageIndex - 2; i >= newIndex - 1; i--) {
                img = $get(_ImageArray[counter])
                img.style.left = leftOffset;
                img.style.visibility = 'visible';
                leftOffset -= (_BannerWidth + _StandbyOffset);
                if (counter == 0) {
                    counter = _ImageArray.length - 1;
                } else {
                    counter--;
                }
            }
            // calc final positions and add animations
            for (i = 0; i < (_SelectedImageIndex - newIndex) + 3; i++) {
                counter++;
                if (counter == _ImageArray.length) {
                    counter = 0;
                }
                if (i == 0) {
                    img = $get(_ImageArray[counter]);
                    AddAnimation(img, _LeftFlyoutX, false);
                } else if (i == 1) {
                    img = $get(_ImageArray[counter]);
                    AddAnimation(img, _CenterFlyoutX, false);
                } else if (i == 2)
                {
                    img = $get(_ImageArray[counter]);
                    AddAnimation(img, _RightFlyoutX, false);
                } else {
                    img = $get(_ImageArray[counter]);
                    AddAnimation(img, _RightStandbyX, false);
                }
            }
            StartAnimation();
            UpdateMatrixOnMove(newIndex);
            UpdateLinkBoxes();
        }
    }
}


function UpdateMatrixOnMove(newIndex) {
    if (newIndex == _ImageArray.length || newIndex == 0) {
        _CarouselMatrix[0] = _ImageArray.length - 1;
        newIndex = 0;
        _SelectedImageIndex = newIndex;
    } else if (newIndex == -1) {
        _CarouselMatrix[0] = _ImageArray.length - 2;
        newIndex = _ImageArray.length - 1;
        _SelectedImageIndex = _ImageArray.length - 1;
    }
    else {
        _CarouselMatrix[0] = newIndex - 1;
        _SelectedImageIndex = newIndex;
    }
    var counter = newIndex;
    for (i = 1; i < _ImageArray.length; i++) {
        _CarouselMatrix[i] = counter;
        if (counter == _ImageArray.length - 1) {
            counter = 0;
        } else {
            counter++;
        }
    }

    var str;
    str = ''

    //    alert('>>>>>>>' + _ImageArray.length)

    for (i = 0; i < _ImageArray.length; i++) {
        str = str + _CarouselMatrix[i] + ' ';
    }
   // alert(str);


}

function UpdateLinkBoxes() {
    for (i = 0; i < _BoxArray.length; i++) {
        $get(_BoxArray[i]).className = 'bannerLinkDiv';
    }
    $get(_BoxArray[_SelectedImageIndex]).className = 'bannerSelectedLinkDiv';
}

// ***************** ANIMATION

var _Running_Animations = 0;

function AddAnimation(img, finalPosition, resetOnComplete) {
    //
    _Running_Animations++;
    img.onclick = null;
    img.style.cursor = '';
    if (resetOnComplete) {
        _Animations.push(new Animation({
            control: img,
            from: parseInt(img.style.left),
            to: finalPosition,
            ontween: MoveBanner,
            oncomplete: ResetPosition
        }));
    } else {
        _Animations.push(new Animation({
            control: img,
            from: parseInt(img.style.left),
            to: finalPosition,
            ontween: MoveBanner,
            oncomplete: AddOnClick
        }));
    }
}

function MoveBanner(o, value) {
    o.style.left = value + 'px';
}

function AddOnClick(o) {
    CheckAnimationCount();
    o.style.cursor = 'pointer';
    o.onclick = function () { OnBannerClick(o) };
}

function ResetPosition(o) {
    CheckAnimationCount();
    o.style.visibility = 'hidden';
    o.style.left = _RightStandbyX + 'px';
}

function CheckAnimationCount() {
    _Running_Animations--;
    if (_Running_Animations == 0) {
        if (t != null) {
            t = setTimeout("ScrollLeft()", _IntervalTime);
        }
    }
}

function OnBannerClick(sender) {
    // stop the next scroll
    if (t != null) {
        clearTimeout(t);
    }
    if (sender.id == _ImageArray[_CarouselMatrix[0]]) {
        // left flyout
        ScrollRight();
    } else if (sender.id == _ImageArray[_CarouselMatrix[1]]) {
        // center;
        var url = sender.getAttribute('navigateUrl');
        if (url.indexOf('http://') > -1) {
            OpenWindow(url);
        } else {
            window.location = url
        }
    } else if (sender.id == _ImageArray[_CarouselMatrix[2]]) {
        // right flyout
        ScrollLeft();
    }
}

var _IsRunning = true;

function StartAnimation() {
    if (_Animations.length > 0) {
        for (i = 0; i < _Animations.length; i++) {
            _Animations[i].start();
        }
    }
}

function ChangeBannerImage(sender, index) {
    if (index != _SelectedImageIndex) {
        if (t != 'undefined') {
            clearTimeout(t);
        }
        if (index > _SelectedImageIndex) {
            MoveLeft(index);
        } else {
            MoveRight(index);
        }
    }
}

window.onresize = OnResize;
window.onload = OnResize;


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

var _BannerImageCount = 0;

// wait until all the "startup" images have downloaded
function LoadBannerImages() {
    _BannerImageCount = _BannerImages.length;
    for (i = 0; i < _BannerImages.length; i++) {
        objImage = new Image();
        objImage.onLoad = imagesLoaded();
        objImage.src = _BannerImages[i];
    }
}

function imagesLoaded() {
    _BannerImageCount--;
    if (_BannerImageCount == 0) {
        // Signal the banner rotator it's ok to start;
        BannerImagesComplete();
    }
}

var t;

var _StartupImagesComplete = false;
var _BannerImagesComplete = false;

function StartupImagesComplete() {
    _StartupImagesComplete = true;
    CheckStartup();
}

function BannerImagesComplete() {
    _BannerImagesComplete = true;
    CheckStartup();
}

function CheckStartup() {
    if (_StartupImagesComplete && _BannerImagesComplete) {
        BeginScroll();
    }
}