var cs_T = 0;
var cs_DownId = 'scrollDown';
var cs_UpId = 'scrollUp';
var cs_ContId = 'scrollcontent';
var cs_ScrollerId = 'slider';

var cs_ScrollType_Press = 'press';
var cs_ScrollType_Click = 'click';

var cs_Delta, cs_Interval, cs_Min, cs_Max, cs_ScrollMax, cs_Debug;
var cs_Down, cs_Up, cs_Cont, cs_Scroller;

var cs_DragObject = null;
//var cs_MouseOffset = null;
var cs_MouseStartY;
var cs_MouseStartPadding;
var cs_ObjY;

function WireUpScroller(conMin, contMax, scrollMax, delta, interval, scrollType, debug) {
    document.getElementById('scroller').innerHTML = '<table width="18" cellpadding="0" cellspacing="0"><tr><td><img src="images/pix_tran.gif" id="scrollUp" alt="Scroll Up" width="18" height="26" /></td></tr><tr style="height: 293px;"><td valign="top"><img src="images/slider_dark.gif" alt="Scroll" id="slider" width="18" height="70" /></td></tr><tr><td><img src="images/pix_tran.gif" id="scrollDown" alt="Scroll Down" width="18" height="26" /></td></tr></table>';

    /*
                                                    '<' + 'img src="images/pix_tran.gif" id="scrollUp" alt="Scroll Up" width="18" height="26" /' + '>' +
                                                    '<' + 'img src="images/slider_dark.gif" alt="Scroll" id="slider" width="18" height="70" /' + '>' +
                                                    '<' + 'img src="images/pix_tran.gif" id="scrollDown" alt="Scroll Down" width="18" height="26" /' + '>';
                                                    */
    cs_Delta = delta;
    cs_Interval = interval;
    cs_Min = conMin;
    cs_Max = contMax;
    cs_ScrollMax = scrollMax;
    
    cs_Debug = (debug ? true : false);

    cs_Down = document.getElementById(cs_DownId);
    cs_Up = document.getElementById(cs_UpId);
    cs_Scroller = document.getElementById(cs_ScrollerId);

    cs_Down.style.cursor = 'pointer';
    cs_Up.style.cursor = 'pointer';

    cs_Cont = document.getElementById(cs_ContId);
    if (scrollType == cs_ScrollType_Press) {
        cs_Down.onmousedown = cs_wireUpScrollDown;
        cs_Up.onmousedown = cs_wireUpScrollUp;
        cs_Down.onmouseup = cs_clearTimer;
        cs_Up.onmouseup = cs_clearTimer;
        cs_Down.onmouseout = cs_clearTimer;
        cs_Up.onmouseout = cs_clearTimer;
    } else {
        cs_Down.onmouseover = cs_wireUpScrollDown;
        cs_Up.onmouseover = cs_wireUpScrollUp;
        cs_Down.onmouseout = cs_clearTimer;
        cs_Up.onmouseout = cs_clearTimer;
    }

    makeDraggable(cs_Scroller);
    document.onmousemove = mouseMove;
    document.onmouseup = mouseUp;
}

function cs_clearTimer() {
    if (!isNaN(cs_T)) {
        clearInterval(cs_T);
    }
}
function cs_wireUpScrollDown() {
    cs_clearTimer();
    cs_T = setInterval('cs_scrollDown();', cs_Interval);
}
function cs_wireUpScrollUp() {
    cs_clearTimer();
    cs_T = setInterval('cs_scrollUp();', cs_Interval);
}

function cs_scrollDown() {
    var x = parseInt(cs_Cont.style.marginTop);
    if (!x || isNaN(x)) {
        x = 0;
    }
    if (x <= cs_Min) {
        clearInterval(cs_T);
        return;
    }
    cs_Cont.style.marginTop = x - cs_Delta + 'px';
    cs_Scroller.style.marginTop = Math.round((x - cs_Delta) / cs_Min * cs_ScrollMax) + 'px';
    //trace('New Min : ' + (x - cs_Delta));
}
function cs_scrollUp() {
    var x = parseInt(cs_Cont.style.marginTop);
    if (!x || isNaN(x)) {
        x = 0;
    }
    if (x >= cs_Max) {
        clearInterval(cs_T);
        return;
    }
    cs_Cont.style.marginTop = x + cs_Delta + 'px';
    cs_Scroller.style.marginTop = Math.round((x + cs_Delta) / cs_Min * cs_ScrollMax) + 'px';
    //trace('New Max : ' + (x + cs_Delta));
}

function getMouseOffset(target, ev) {
    ev = ev || window.event;
    
    var docPos = getPosition(target);
    var mousePos = mouseCoords(ev);
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e) {
    var left = 0;
    var top = 0;

    while (e.offsetParent) {
        left += e.offsetLeft;
        top += e.offsetTop;
        e = e.offsetParent;
    }
    left += e.offsetLeft;
    top += e.offsetTop;
    
    return {x:left, y:top};
}

function mouseCoords(ev) {
    ev = ev || window.event;
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}


function mouseMove(ev){ 
    ev           = ev || window.event; 
    var mousePos = mouseCoords(ev);

    if (cs_DragObject) {
        var Dif = cs_MouseStartY - cs_ObjY;
        var newMg = (mousePos.y - cs_MouseStartY) + cs_MouseStartPadding;
        
        if (newMg <= 0) {
            newMg = 0;
        } else if (newMg >= cs_ScrollMax) {
            newMg = cs_ScrollMax;
        }
        cs_DragObject.style.marginTop = newMg + 'px';
        cs_Cont.style.marginTop = Math.round((newMg / cs_ScrollMax) * cs_Min) + 'px';
        return false; 
    } 
}
function mouseUp() {
    //alert('up');
    cs_DragObject = null; 
}

function makeDraggable(item) {
    if (!item) {
        return;
    }
    item.onmousedown = function(ev) {
        //alert('down');
        cs_DragObject = this;
        cs_ObjY = item.y;
        cs_MouseStartY = mouseCoords(ev).y;
        cs_MouseStartPadding = parseInt(cs_DragObject.style.marginTop, 10);
        if (!cs_MouseStartPadding) cs_MouseStartPadding = 0;
        item.onmouseup = mouseUp;
        //cs_MouseOffset = getMouseOffset(this, ev);
        return false;
    }
    //item.onmouseup = mouseUp();
}
function trace(obj) {
    console.log(obj);
}