iY = 0;
iX = 0;
iHoldX = 0;
iHoldY = 0;
iMove = 0;
iScrollTimer = 0;

function activateMove(event) {
    iHoldX = iX;
    iMove = 1;
    if (event.preventDefault) event.preventDefault();
}

function deactivateMove() {
    iMove = 0;
    return false;
}

function checkToDeactivate() {
    if (iX > iHoldX + 100 || iX < iHoldX - 100) {
        deactivateMove();
    }
}

function getCoords(e) {
    if (document.all) {
        iX = event.clientX + document.body.scrollLeft;        
        iY = event.clientY + document.body.scrollTop;
    }
    else {
        iX = e.pageX;
        iY = e.pageY;
    }
    
    if (iMove == 1) {
        iTop = iY - document.getElementById('scrollbarWindow').offsetTop - 20;
        if (iTop >= 10 && iTop <= 310) {
            var myImg = document.getElementById('img_slider');
            myImg.style.top = iTop + 'px';

            var myDiv = document.getElementById('scrollableWindow');
            iHeight = myDiv.scrollHeight - 360;
            iNewTop = ((iTop-10) / 300) * iHeight;

            if (iNewTop > (iHeight * 0.97))
                iNewTop = iHeight;
            else if (iNewTop < (iHeight * 0.03))
                iNewTop = 0;
            
            myDiv.scrollTop = iNewTop;

            checkToDeactivate();
        }
    }
}

function quickScroll(event) {

    iImgX = 0;
    iImgY = 0;

    if (event.offsetX)
    {
        iImgX = event.offsetX;
        iImgY = event.offsetY;
    }
    else 
    {
        iImgX = event.pageX - document.getElementById('scrollbarWindow').offsetLeft;
        iImgY = event.pageY - document.getElementById('scrollbarWindow').offsetTop;
    }
    
    iTop = iImgY;
    var myImg = document.getElementById('img_slider');
    oldTop = parseInt(myImg.style.top.replace('px',''));
    if (oldTop > iTop+60)
        iTop = oldTop - 60;
    else if (oldTop < iTop - 60)
        iTop = oldTop + 60;
        
    if (iTop < 10)
        iTop = 10;
    else if (iTop > 310)
        iTop = 310;            
    
    myImg.style.top = iTop + 'px';

    var myDiv = document.getElementById('scrollableWindow');
    iHeight = myDiv.scrollHeight - 360;
    iNewTop = ((iTop-10) / 300) * iHeight;

    if (iNewTop > (iHeight * 0.97))
        iNewTop = iHeight;
    else if (iNewTop < (iHeight * 0.03))
        iNewTop = 0;
    
    myDiv.scrollTop = iNewTop;
}

function setScrollPosition() {
    if (window.top.location.href.indexOf('#') > -1) {
        var myDiv = document.getElementById('scrollableWindow');
        iHeight = myDiv.scrollHeight - 360;
        iPos = myDiv.scrollTop;
        iSliderTop = (iPos / iHeight) * 300 + 10;
        if (iSliderTop < 10)
            iSliderTop = 10;
        else if (iSliderTop > 310)
            iSliderTop = 310;
        
        var myImg = document.getElementById('img_slider');
        myImg.style.top = iSliderTop + 'px';
    }
    clearTimeout(iScrollTimer);
}

function scrollTarget(){
    iScrollTimer = setTimeout(setScrollPosition, 50);
}

function checkScrollbar() {
    /*var myDiv = document.getElementById('scrollableWindow');
    iHeight = myDiv.scrollHeight - 360;
    if (iHeight > 0) {
        var myScrollbar = document.getElementById('scrollbarWindow');
        myScrollbar.style.display = 'block';
    }*/
}

window.onload = function() {
    var myDiv = document.getElementById('scrollableWindow');
    iHeight = myDiv.scrollHeight - 360;
    if (iHeight > 0) {
        var myScrollbar = document.getElementById('scrollbarWindow');
        myScrollbar.style.display = 'block';
    }
    
    document.onmousemove = getCoords;
    document.onmouseup = deactivateMove;
    iScrollTimer = setTimeout(setScrollPosition,100);
}