﻿function ImageSlideShow(name) {
    var _this = this, _pointer = name, _items = [];
    var _serviceIndex = 0;
    var _progress = 0;
    var _itemWidth = 600;
    var _itemLeft = 0;
    var _timer = null;
    var _currentLeftMargin = 0;
    var _client = '';
    var _autoScrollTimer = null;
    var _autoScrollTime = null;
    var _autoScrollDirection = 'right';
    var _ie6 = false;

    this.$ = function(id) {
        return document.getElementById(id);
    }
    this.AutoScrollTime = function(time) {
        _autoScrollTime = time;
    }
    this.Add = function(obj) {
        _items.push(obj);
    }
    this.IncrementProgress = function() {
        var bar = _this.$(_pointer + '_ProgressBar');
        var region = _this.$(_pointer + '_ProgressRegion');
        var track = _this.$(_pointer + '_TrackContent');

        _progress++;
        width = region.offsetWidth * (_progress / _items.length);
        bar.style.width = width + 'px';

        if (_progress == _items.length) {
            region.style.display = 'none';
            track.style.display = 'block';
            _this.SetAutoScrollTimer(_autoScrollDirection);
        }
    }
    this.SetAutoScrollTimer = function(direction) {
        if (direction != null)
            _autoScrollDirection = direction;    
    
        if (_autoScrollTime != null) {
            clearInterval(_autoScrollTimer);
            _autoScrollTimer = setInterval(
                function() {
                    if (_autoScrollDirection == 'right')
                        _this.AdvanceRight();
                    else
                        _this.AdvanceLeft();
                }
            , _autoScrollTime);
        }
    }
    this.AdvanceRight = function() {
        _serviceIndex++;
        _this.SetAutoScrollTimer('right');

        if (_serviceIndex >= _items.length)
            _serviceIndex = 0;

        _this.SlideCanvas(_serviceIndex);
    }
    this.AdvanceLeft = function() {
        _serviceIndex--;
        _this.SetAutoScrollTimer('left');

        if (_serviceIndex < 0)
            _serviceIndex = _items.length - 1;

        _this.SlideCanvas(_serviceIndex);
    }
    this.AdvanceTo = function(serviceIndex) {
        _serviceIndex = serviceIndex;
        _this.SlideCanvas(serviceIndex);
    }
    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.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>';

        s += '<div class="track" id="' + _pointer + '_TrackContent">';

        for (var i = 0; i < _items.length; i++) {
            s += '<div class="item" style="width: ' + _itemWidth + 'px;" id="' + _pointer + '_Item_' + i + '">';
            s += '<img ' + style + ' src="' + _items[i].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.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="imageslideshow">';
        s += '  <div class="slider" id="' + _pointer + '_Track">';
        s += '  </div>';
        s += '</div>';

        document.write(s);

        _this.SetElements();

        _this.FirstLoad();
    }
}