function Banner(name) {
    var _this = this;
    var _Data = [];
    var _Settings = { className: '', sourcePath: '', pointer: '', width: 0, speed: 5000, time: 3000 }; // the constructor - so we know what the Settings object looks like.
    var _SelectedIndex = 0;
    var _timer = 0;
    var _firstTime = true;

    this.Settings = function (o) {
        _Settings = o;
    }

    this.$$ = function (id) {
        return document.getElementById(id);
    }

    this.Select = function (index) {
        clearInterval(_timer);

        if (index >= _Data.length)
            index = 0;

        for (var i = 0; i < _Data.length; i++) {
            var o = _this.$$(_Settings.pointer + '_Dot_' + i);

            o.className = '';

            jQuery('#' + _Settings.pointer + '_Slide' + i).css({ 'z-index': 0 });
        }

        var o = _this.$$(_Settings.pointer + '_Dot_' + index);

        o.className = 'selected';

        var slideIndex = index - 1 < 0 ? _Data.length - 1 : index - 1;

        var oldSlide = jQuery('#' + _Settings.pointer + '_Slide' + slideIndex);
        var newSlide = jQuery('#' + _Settings.pointer + '_Slide' + index);

        newSlide.stop();
        oldSlide.stop();
        oldSlide.css({ 'z-index': 10 }).fadeTo(_Settings.speed, 0);
        newSlide.css({ 'z-index': 9 }).fadeTo(_Settings.speed, 1);

        _timer = setInterval(function () { _this.Select(index += 1); }, _Settings.time);
        
        _SelectedIndex = index;
    }

    this._GetHTML = function () {
        var s = '';
        
        s += '<div class="dots">';

        for (var i = 0; i < _Data.length; i++) {
            var index = _Data.length - 1 - i;
            var item = _Data[index];

            s += '<a href="javascript:void(0);" ';
            s += '  id="' + _Settings.pointer + '_Dot_' + index + '" ';
            s += '  title="' + item.Title + '" ';
            s += '  onclick="' + _Settings.pointer + '.Select(' + index + ');" ';
            s += '  ></a>';
        }

        s += '</div>';
        s += '<div class="track" id="' + _Settings.pointer + '_Track" style="width: ' + parseInt(_Settings.width * _Data.length) + 'px;">';

        for (var i = 0; i < _Data.length; i++) {
            var item = _Data[i];

            s += '<div class="cell" id="' + _Settings.pointer + '_Slide' + i + '"><img src="' + item.URL + '" /></div>';
        }

        s += '</div>';

        return s;
    }

    this._GetDataSource = function () {
        var o = {
            async: true,
            type: 'GET',
            url: _Settings.sourcePath,
            cache: false,
            data: '',
            error: function (msg) {
                alert('Fail');
            },
            success: function (msg) {
                try {
                    var items = eval('new Object(' + msg + ')');

                    if (items != null && items != undefined && items.length > 0) {
                        _Data = items;

                        var root = document.getElementById(_Settings.pointer + '_Root');

                        root.innerHTML = _this._GetHTML();

                        _this.Select(_SelectedIndex);

                    } else {
                        throw 'Datasource failed to load.';
                    }
                } catch (e) {
                    alert('Datasource failed to load.');
                }
            }
        };

        $.ajax(o);
    }

    this.Draw = function () {
        var s = '';

        s += '<div class="' + _Settings.className + '" id="' + _Settings.pointer + '_Root">Loading...</div>';

        document.write(s);

        _this._GetDataSource();
    }
}