/// <reference path="Controls.js" />
/// <reference path="../../lib/jquery-1.4.2.min.js" />

Controls.HorisontalScroll = function (id) {
    var _thisRef = this;
    var _startX = 0;
    var _startY = 0;
    var _offsetX = 0;
    var _offsetY = 0;
    var _dragElement;
    var _oldZIndex = 0;
    var _sender;
    var _deltaX = 0;
    var _deltaY = 0;
    var _mouseMoveStart = true;

    function _getSelf() {
        return $("#" + _thisRef.id);
    }

    function _getScrollHtml() {
        var scrStr = '<table id="hScroll" cellpadding="0" cellspacing="0" style="width:' + _getSelf().css('width') + ';"><tr style="height:16px;">';
        scrStr += '<td class="scrLeftBtn" style="width:16px;">&nbsp';
        scrStr += '</td><td id="scrRegion"><div style="position:absolute;"><div id="scrollBtn" class="scrollBtn" style="position:relative; height:16px;">';
        scrStr += '<table class="scrollBtn" cellpadding="0" cellspacing="0"  width="100%"><tr class="scrollBtn" style="height:16px;"><td class="scrollBtn" id="bullet-left">&nbsp</td><td class="scrollBtn" id="bullet-middle">&nbsp</td><td class="scrollBtn" id="bullet-right">&nbsp</td></tr></table>'
        scrStr += '</div></div>&nbsp</td><td class="scrRightBtn" style="width:16px;">&nbsp</td></tr></table>';
        return scrStr;
    }

    function OnMouseDown(e) {

        if (e == null)
            e = window.event;
        var target = e.target != null ? e.target : e.srcElement;
        if ((e.button == 1 && window.event != null || e.button == 0) && (target.className == 'scrollBtn' || target.className == 'scrollBtn')) {
            _sender = target.id;
            _startX = e.clientX;
            _startY = e.clientY;
            _offsetX = parseInt(target.style.left);
            _offsetY = parseInt(target.style.top);
            _deltaX = _startX - _offsetX;
            _deltaY = _startY - _offsetY;
            _oldZIndex = target.style.zIndex;
            target.style.zIndex = 10000;
            _dragElement = target;
            document.onmousemove = OnMouseMove;
            document.onmouseup = OnMouseUp;
            document.body.focus();
            document.onselectstart = function () { return false; };
            target.ondragstart = function () { return false; };
            return false;
        }
    }


    var IsbeginScroll = true;
    var IsbeginScroll2 = true;
    var cursorOffset = 0;
    var a = 0;

    function OnMouseMove(e) {
        if (e == null) var e = window.event;
        var X = (e.clientX);
        var Y = (e.clientY);

        if (IsbeginScroll) {
            cursorOffset = X;
            a = parseInt($("#scrollBtn").css('margin-left'));
            IsbeginScroll = false;
        }
        var width = X - _offsetX;
        var height = Y - _offsetY;
        if (_mouseMoveStart) {
            _deltaX = width;
            _deltaY = height;
            _mouseMoveStart = false;
        }
        _getSelf().scrollLeft((200 * (a + (X - cursorOffset)) * _getSelf().find('div').width()) / (_getSelf().width() * $('#scrRegion').width()));
        $('#scrollBtn').css('margin-left', ($('#scrRegion').width() * (_getSelf().scrollLeft() / 10) * (_getSelf().width() / _getSelf().find('div').width()) / 20 + 'px'));
        IsbeginScroll2 = false;
    }

    function OnMouseUp() {
        IsbeginScroll = true;
        IsbeginScroll2 = true;
        document.onmousemove = null;
        document.onmouseup = null;
    }



    this.id = id;

    this.hasScrolling = function () {
        _getSelf().scrollLeft(1);
        return _getSelf().scrollLeft() > 0
    }

    this.init = function () {
        if (this.hasScrolling()) {
            $('body').append(_getScrollHtml());
            $('#hScroll').insertAfter(_getSelf());
            $('td.scrLeftBtn').mousedown(function () {
                _getSelf().scrollLeft(_getSelf().scrollLeft() - 10);
                $('#scrollBtn').css('margin-left', ($('#scrRegion').width() * (_getSelf().scrollLeft() / 10) * (_getSelf().width() / _getSelf().find('div').width()) / 20 + 'px'));
            });

            $('td.scrRightBtn').mousedown(function () {
                _getSelf().scrollLeft(_getSelf().scrollLeft() + 10);
                $('#scrollBtn').css('margin-left', ($('#scrRegion').width() * (_getSelf().scrollLeft() / 10) * (_getSelf().width() / _getSelf().find('div').width()) / 20 + 'px'));
            });

            $('#scrollBtn').width($('#scrRegion').width() * (_getSelf().width() / _getSelf().find('div').width()));
            _getSelf().scroll(function () {
                $('#scrollBtn').css('margin-left', ($('#scrRegion').width() * (_getSelf().scrollLeft() / 10) * (_getSelf().width() / _getSelf().find('div').width()) / 20 + 'px'));
            });

            $(document).mousedown(OnMouseDown);

            $('#scrollBtn').css('margin-left', ($('#scrRegion').width() * (_getSelf().scrollLeft() / 10) * (_getSelf().width() / _getSelf().find('div').width()) / 20 + 'px'));
        }
    }

    this.init();
}