function animateBanner(currentDiv) {
    var imageHolder = document.getElementById("imageHolder" + currentDiv);
    imageHolder.style.zIndex = currentDiv;
    imageHolder.style.top = -150+'px';
    var i = -150;
    var anim;
    function animate() {
        if (i < 0) {
            i++;
            imageHolder.style.top = i + 'px';

            anim = setTimeout(animate, 9);
        }
        else {
            clearTimeout(anim);
        }
    }

    animate();
}

function quickShow(currentDiv) {
    var imageHolder = document.getElementById("imageHolder" + currentDiv);
    imageHolder.style.zIndex = currentDiv;
    imageHolder.style.top = '0px';

}
    function setImage(imageListVar, currentImg, divId) {
        var bannerHolder = document.getElementById('banner-holder');
        var imageHolder = document.createElement('div');
        imageHolder.setAttribute('id', 'imageHolder' + divId);
        imageHolder.id = 'imageHolder' + divId;
        imageHolder.setAttribute('style', 'top:-150px; position:absolute;width: 770px; height: 144px;');

        imageHolder.style.top = "-150px";
        imageHolder.style.position = "absolute";
        imageHolder.style.width = "770px";
        imageHolder.style.height = "144px";

        var imageHTML = '<img style="border: none;" src="' + imageListVar[currentImg][0] + '" alt=""  />';

        if (imageListVar[currentImg][1] != "") {
            imageHTML = '<a href="' + imageListVar[currentImg][1] + '" target="' + imageListVar[currentImg][2] + '">' + imageHTML + '</a>';
        }
        
        imageHolder.innerHTML = imageHTML;
        bannerHolder.appendChild(imageHolder);

        var currentdiv = divId;
        if (currentdiv > 120) {
            var imageHolderForDeleting = document.getElementById('imageHolder' + (divId - 20))

            bannerHolder.removeChild(imageHolderForDeleting);
        }

    }

    var bannerRotator = {
        imageList: null,
        currentImage: -1,
        currentDiv: 1,
        isMouseOver: false,
        timeout: null,
        divId: 100,
        selectedStyle: 'background-attachment: scroll;  ' +
            '  background-clip: border-box;    background-color: #fc6f4b !important;    background-image: none;    background-origin: padding-box; ' +
            '   background-position: 0 0;    background-repeat: repeat;    background-size: auto auto;    color: white;',
        init: function (data) {
            this.imageList = data.imageList;
            this.target = data.renderTo;
            this.interval = data.interval;

            // where the images will be rendered
            var imageContainer = document.createElement('div');
            imageContainer.setAttribute('id', 'banner-holder');
            imageContainer.id = 'banner-holder';

            imageContainer.setAttribute('style', 'position:relative; width:770px; height:150px; overflow:hidden; border: none;');
            imageContainer.style.cssText = 'position:relative; width:770px; height:150px; overflow:hidden; border: none;';

            document.getElementById(this.target).appendChild(imageContainer);

            document.getElementById('banner-holder').onmouseover = function () {
                bannerRotator.isMouseOver = true;
            };
            document.getElementById('banner-holder').onmouseout = function () {
                bannerRotator.isMouseOver = false;
            };

            var style = 'div#banner { } div#banner-pager {    margin-top: 5px;    text-align: center;} div#banner-pager a ' +
            '{    -moz-border-bottom-colors: none;    -moz-border-image: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;   ' +
            ' -moz-border-top-colors: none;    -moz-text-blink: none;    -moz-text-decoration-color: -moz-use-text-color;    -moz-text-decoration-line: none;' +
            '    -moz-text-decoration-style: solid;     border-left-color-ltr-source: physical;    border-left-color-rtl-source: physical;  ' +
            'border-left-style-ltr-source: physical;    border-left-style-rtl-source: physical;    border-left-style-value: solid;    ' +
            'border-left-width-ltr-source: physical;    border-left-width-rtl-source: physical;    border-left-width-value: 1px;   '
            + ' border-right-color-ltr-source: physical;    border-right-color-rtl-source: physical;     border-right-style-ltr-source: physical; ' +
            'background-color: #2e81ae;   border-right-style-rtl-source: physical;    border-right-style-value: solid;    border-right-width-ltr-source: physical;  '
            + '  border-right-width-rtl-source: physical;    border-right-width-value: 1px; color: white;    margin-left: 5px;    margin-right: 5px;    padding-bottom: 2px;   ' +
            ' padding-left: 5px;    padding-right: 5px;    padding-top: 2px;} * #banner-pager a.highlighted {    background-attachment: scroll;  ' +
            '  background-clip: border-box;    background-color: #fc6f4b !important;    background-image: none;    background-origin: padding-box; ' +
            '   background-position: 0 0;    background-repeat: repeat;    background-size: auto auto;    color: white; }';

            var styleNode = document.createElement('style');
            styleNode.setAttribute('type', 'text/css');
            if (!!(window.attachEvent && !window.opera)) {
                styleNode.styleSheet.cssText = style;
            } else {
                var styleText = document.createTextNode(style);
                styleNode.appendChild(styleText);
            }
            document.getElementById(this.target).appendChild(styleNode);

            var pager = document.createElement('div');
            pager.setAttribute('id', 'banner-pager');
            pager.id = "banner-pager";

            var newa = document.createElement('a');
            
            newa.setAttribute('href', "javascript:bannerRotator.showPrevImage();");
            newa.setAttribute('id', "navPrev");


            newa.innerHTML = '&lt;';
            pager.appendChild(newa);

            for (var i = 0; i < this.imageList.length; i++) {
                var newa = document.createElement('a');

                newa.setAttribute('href', "javascript:bannerRotator.showImage(" + i + ");");
                newa.setAttribute('id', "nav" + i);
                newa.innerHTML = (i + 1).toString();
                pager.appendChild(newa);
            }

            var newa = document.createElement('a');

            newa.setAttribute('href', "javascript:bannerRotator.showNextImage();");
            newa.setAttribute('id', "navNext");
            newa.innerHTML = '&gt;';
            pager.appendChild(newa);

            document.getElementById(this.target).appendChild(pager);
            currentDiv = 1;
            this.nextImage();
        },

        nextImage: function () {
            if (!bannerRotator.isMouseOver) {

                if (++this.currentImage > this.imageList.length - 1) {
                    this.currentImage = 0;
                }
                for (i = 0; i < this.imageList.length; i++) {
                    var nextButton = document.getElementById('nav' + i);
                    nextButton.setAttribute('class', '');
                    nextButton.style.cssText = "";
                }

                if (this.currentImage > -1) {
                    var nextButton = document.getElementById('nav' + this.currentImage);
                    nextButton.setAttribute('class', 'highlighted');
                    nextButton.style.cssText = bannerRotator.selectedStyle;
                }

                var result = this.currentDiv;
                setImage(this.imageList, this.currentImage, this.divId);
                animateBanner(this.divId);
                this.divId = ++this.divId;
                this.currentDiv = result;
            }

            this.timeout = setTimeout(function () {
                bannerRotator.nextImage();
            }, this.interval * 2000);
        },
        showNextImage: function () {
            if (!bannerRotator.isMouseOver) {
                if (++this.currentImage > this.imageList.length - 1) {
                    this.currentImage = 0;
                }
                for (i = 0; i < this.imageList.length; i++) {
                    var nextButton = document.getElementById('nav' + i);
                    //for normal browsers
                    nextButton.setAttribute('class', '');
                    //for internet explorer
                    nextButton.style.cssText = "";
                }

                if (this.currentImage > -1) {
                    var nextButton = document.getElementById('nav' + this.currentImage);
                    //for normal browsers
                    nextButton.setAttribute('class', 'highlighted');

                    //for internet explorer
                    nextButton.style.cssText = bannerRotator.selectedStyle;
                }
                var result = this.currentDiv;

                setImage(this.imageList, this.currentImage, this.divId);
                animateBanner(this.divId);
                this.divId = ++this.divId;
                this.currentDiv = result;

                clearTimeout(this.timeout);
            }
            this.timeout = setTimeout(function () {
                bannerRotator.nextImage();
            }, this.interval * 2000);
        },

        showPrevImage: function () {
            if (!bannerRotator.isMouseOver) {
                this.currentImage = this.currentImage - 1
                if (this.currentImage < 0)
                    this.currentImage = this.imageList.length - 1;


                for (i = 0; i < this.imageList.length; i++) {
                    var nextButton = document.getElementById('nav' + i);
                    //for normal browsers
                    nextButton.setAttribute('class', '');
                    //for internet explorer
                    nextButton.style.cssText = "";
                }
                if (this.currentImage > -1) {
                    var nextButton = document.getElementById('nav' + this.currentImage);
                    //for normal browsers
                    nextButton.setAttribute('class', 'highlighted');
                    //for internet explorer
                    nextButton.style.cssText = bannerRotator.selectedStyle;
                }
                var result = this.currentDiv;
                setImage(this.imageList, this.currentImage, this.divId);
                animateBanner(this.divId);
                this.divId = ++this.divId;
                this.currentDiv = result;
                clearTimeout(this.timeout);
            }
            this.timeout = setTimeout(function () {
                bannerRotator.nextImage();
            }, this.interval * 2000);
        },

        showImage: function (index) {
            if (this.timeout != null) {
                clearTimeout(this.timeout)
                this.timeout = null;
            }

            this.currentImage = index;
            if (this.currentImage > this.imageList.length - 1)
                this.currentImage = 0;

            for (i = 0; i < this.imageList.length; i++) {
                var nextButton = document.getElementById('nav' + i);
                //for normal browsers
                nextButton.setAttribute('class', '');
                //for internet explorer
                nextButton.style.cssText = "";
            }

            if (this.currentImage > -1) {
                var nextButton = document.getElementById('nav' + this.currentImage);
                //for normal browsers
                nextButton.setAttribute('class', 'highlighted');
                //for internet explorer
                nextButton.style.cssText = bannerRotator.selectedStyle;
            }

            var result = this.currentDiv;
            setImage(this.imageList, this.currentImage, this.divId);
            quickShow(this.divId);
            this.divId = ++this.divId;
            this.currentDiv = result;

            clearTimeout(this.timeout);
        }
    };