function ServicesPresentation(name) {
    var _this = this, _pointer = name, _items = [];
    var _groupIndex = 0, _serviceIndex = 0;
    var _progress = 0;
    var _itemWidth = 900;
    var _itemLeft = 0;
    var _timer;
    var _currentLeftMargin = 0;
    var _client = '';
    var _introFrame = null;
    var _ie6 = false;

    this.$ = function(id) {
        return document.getElementById(id);
    }
    this.Add = function(obj) {
        _items.push(obj);
    }
    this.Client = function(client) {
        _client = client;
    }
    this.IntroSlide = function(image) {
        _introFrame = { image: image }
    }
    this.Init = function() {
        setTimeout(
            function() {
                try {
                    _items = eval('new Object(' + getServerData('../data.aspx?c=getservicespresentation&id=' + _client, false) + ');');
                } catch (e) {
                    _items = [];
                }
                _this.FirstLoad();
            }
        , 10)
    }
    this.IncrementProgress = function() {
        var bar = _this.$(_pointer + '_ProgressBar');
        var region = _this.$(_pointer + '_ProgressRegion');
        var track = _this.$(_pointer + '_TrackContent');
        var intro = _this.$(_pointer + '_Intro');
        
        _progress++;
        width = region.offsetWidth * (_progress / _items.length);
        bar.style.width = width + 'px';

        if (_progress == _items.length) {
            region.style.display = 'none';
            
            if(!_introFrame)
                track.style.display = 'block';
            else
                intro.style.display = 'block';
        }
    }
    this.AnimateIntro = function() {
        var track = _this.$(_pointer + '_TrackContent');
        var intro = _this.$(_pointer + '_Intro');

        track.style.display = 'block';
        intro.style.display = 'none';
        _this.AnimateOpacity(track, 1, 1, 0, 100, 15);
        _introFrame = null;
    }
    this.AnimateOpacity = function(item, speed, delay, from, to, increment) {
        if (_ie6) {
            SetOpacity(item, to);
            return;
        }

        setTimeout(
            function() {
                var _from = from;
                var interval = setInterval(
                    function() {
                        if (from < to) {
                            _from += increment;
                            if (_from > to)
                                _from = to;
                        } else {
                            _from -= increment;
                            if (_from < to)
                                _from = to;
                        }

                        SetOpacity(item, _from);

                        if (_from == to)
                            clearInterval(interval);
                    }
                    , speed);
            }
        , delay);
    }
    this.AdvanceRight = function() {
        _serviceIndex++;

        if (_serviceIndex >= _items[_groupIndex].Items.length) {
            _serviceIndex = 0;
            _groupIndex++;

            if (_groupIndex >= _items.length)
                _groupIndex = 0;
        }

        _this.UpdateGroups();
        _this.SlideCanvas(_this.GetCurrentServicesIndex());

        if (_introFrame)
            _this.AnimateIntro();
    }
    this.AdvanceLeft = function() {
        _serviceIndex--;

        if (_serviceIndex < 0) {
            _groupIndex--;

            if (_groupIndex < 0)
                _groupIndex = _items.length - 1;

            _serviceIndex = _items[_groupIndex].Items.length - 1;
        }

        _this.UpdateGroups();
        _this.SlideCanvas(_this.GetCurrentServicesIndex());

        if (_introFrame)
            _this.AnimateIntro();
    }
    this.AdvanceTo = function(groupIndex, serviceIndex) {
        var index = _this.GetServiceIndex(groupIndex, serviceIndex);

        _groupIndex = groupIndex;
        _serviceIndex = serviceIndex;

        _this.SlideCanvas(index);
        _this.UpdateGroups();

        if (_introFrame)
            _this.AnimateIntro();
    }
    this.GetMaxServicesCount = function() {
        var count = 0;
        
        for (var i = 0; i < _items.length; i++) {
            count += _items[i].Items.length;
        }
        
        return count;
    }
    this.GetServiceIndex = function(groupIndex, serviceIndex) {
        var index = 0;
        
        for (var i = 0; i < _items.length; i++) {
            if (i < groupIndex) {
                index += _items[i].Items.length;
            } else {
                index += serviceIndex;
                break;
            }
        }
        
        return index;
    }
    this.GetCurrentServicesIndex = function() {
        var index = 0;

        for (var i = 0; i < _items.length; i++) {
            if (i < _groupIndex) {
                index += _items[i].Items.length;
            } else {
                index += _serviceIndex;
                break;
            }
        }

        return index;
    }
    this.GetLeftMarginFromIndex = function(index) {
        return -(parseInt(_itemWidth * index));
    }
    this.SlideCanvas = function(index) {
        var leftMargin = _this.GetLeftMarginFromIndex(index);
        var track = _this.$(_pointer + '_TrackContent');
        var pad, ease;
        var time = 15;
        var easeInThreshold = .65;
        var temp = _currentLeftMargin;
        var startMargin = temp;
        var progress = 0;
        
        if(_ie6) {
            track.style.marginLeft = leftMargin + 'px';
            _currentLeftMargin = leftMargin;
            return;
        }

        clearInterval(_timer);

        if (temp > leftMargin) {
            pad = (temp - leftMargin) / time;

            _timer = setInterval(
                function() {
                    if (progress > easeInThreshold) { //Ease In code.
                        if (ease == null)
                            ease = temp;
                        temp -= Math.ceil(pad * (((ease - temp) / (ease - leftMargin) - 1) * -1));
                    } else {
                        temp -= pad;
                    }

                    if (temp <= leftMargin)
                        temp = leftMargin;

                    track.style.marginLeft = temp + 'px';
                    _currentLeftMargin = temp;
                    progress = (startMargin - temp) / (startMargin - leftMargin);

                    if (temp == leftMargin)
                        clearInterval(_timer);
                }
            , time);
        } else {
            pad = (leftMargin - temp) / time;

            _timer = setInterval(
                function() {
                    if (progress > easeInThreshold) { //Ease In code.
                        if (ease == null)
                            ease = temp;
                        temp += Math.ceil(pad * (((ease - temp) / (ease - leftMargin) - 1) * -1));
                    } else {
                        temp += pad;
                    }

                    if (temp >= leftMargin)
                        temp = leftMargin;

                    track.style.marginLeft = temp + 'px';
                    _currentLeftMargin = temp;
                    progress = (startMargin - temp) / (startMargin - leftMargin);

                    if (temp == leftMargin)
                        clearInterval(_timer);
                }
            , time);
        }
    }
    this.UpdateGroups = function() {
        var s = '';
        for (var i = 0; i < _items.length; i++) {
            var group = _items[i];
            s += '  <div class="item">';
            s += '   <div class="title">' + group.Name + '</div>';

            for (var j = 0; j < group.Items.length; j++) {
                var item = group.Items[j];
                
                if(_groupIndex == i && _serviceIndex == j)
                    s += '   <div class="service">' + item.Name + '</div>';
                else
                    s += '   <div class="service"><a href="javascript:void(0)" onclick="' + _pointer +'.AdvanceTo(' + i + ', ' + j + ')">' + item.Name + '</a></div>';
            }

            s += '  </div>';
        }
        _this.$(_pointer + '_Groups').innerHTML = s;
    }
    this.SwitchToFilter = function(img) {
        img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='crop')";
        img.onload = function() { img.style.visibility = 'visible'; };
        img.src = '../images/spacer.gif';
    }
    this.FirstLoad = function() {
        var s = '', leftMargin = 0, width = 0;
        var method = '', style = '';

        if (_ie6) {
            method = _pointer + '.SwitchToFilter(this); ';
            style = 'style="visibility: hidden;" ';
        }

        s += '<div class="progress" id="' + _pointer + '_ProgressRegion">';
        s += '  <div class="bar" id="' + _pointer + '_ProgressBar"></div>';
        s += '</div>';

        if (_introFrame) {
            s += '<div class="intro" id="' + _pointer + '_Intro">';
            s += '<img ' + style + ' src="' + _client + '/' + _introFrame.image + '" onerror="' + _pointer + '.IncrementProgress(); " onload="' + _pointer + '.IncrementProgress(); ' + method + '" />';
            s += '</div>';

            _serviceIndex = -1;
        }
        s += '<div class="track" id="' + _pointer + '_TrackContent">';

        for (var i = 0; i < _items.length; i++) {
            var group = _items[i];

            for (var j = 0; j < group.Items.length; j++) {
                var service = group.Items[j];

                s += '<div class="item" style="width: ' + _itemWidth + 'px;" id="' + _pointer + '_Item_' + i + '">';
                s += '<img ' + style + ' src="' + _client + '/' + service.Image + '" onerror="' + _pointer + '.IncrementProgress(); " onload="' + _pointer + '.IncrementProgress(); ' + method + '" />';
                s += '</div>';

                width += _itemWidth;
            }
        }

        s += '</div>';
        _this.$(_pointer + '_Track').innerHTML = s;

        var content = _this.$(_pointer + '_TrackContent');

        content.style.width = width + 'px';

        _this.UpdateGroups();

    }
    this.SetElements = function() {
        document.onkeyup = function(e) {
            e = (e) ? e : ((window.event) ? event : null);
            if (e) {
                switch (e.keyCode) {
                    case 37:
                        _this.AdvanceLeft();
                        break;
                    case 39:
                        _this.AdvanceRight();
                        break;
                }

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

        if (navigator.appName == 'Microsoft Internet Explorer' && navigator.userAgent.indexOf('Opera', 0) == -1) {
            var key = 'MSIE ', _userAgent = navigator.userAgent, _rightSide = _userAgent.substring(_userAgent.indexOf(key) + key.length), _versionNumber = _rightSide.substring(0, _rightSide.indexOf('.'));
            if (_versionNumber == 6)
                _ie6 = true;
        }

        s += '<div class="servicespresentation">';
        s += '  <div class="slider">';
        s += '    <div class="left">';
        s += '      <a href="javascript:void(0);" class="arrow" onclick="' + _pointer + '.AdvanceLeft();"></a>';
        s += '    </div>';
        s += '    <div class="center" id="' + _pointer + '_Track">';
        s += '    </div>';
        s += '    <div class="right">';
        s += '      <a href="javascript:void(0);" class="arrow" onclick="' + _pointer + '.AdvanceRight();"></a>';
        s += '    </div>';
        s += '  </div>';
        s += '  <div class="lists" id="' + _pointer + '_Groups">';
        s += '  </div>';
        s += '</div>';

        document.write(s);

        _this.SetElements();

        _this.Init();
    }

}