var canDrag = false;
var shift_x;    


function get(id)
{
    return document.getElementById(id);
}


function drag(event)
{
    if (!event)
    {
        event = window.event;
    }
    
    canDrag = true;
    
    shift_x = event.clientY - parseInt(scroller.style.top);
    blockEvent(event);
	return false;
}

function move(event)
{
    if (!event)
    {
        event = window.event;
    }
    if (canDrag)
    {
        setPosition(event.clientY - shift_x);
		blockEvent(event);
	}
    return false;
}

function drop()
{
    canDrag = false; 
}

function setPosition(newPosition)
{
    if ( (newPosition <= scrollerTrackHeight - scrollerHeight) && (newPosition >= 0) )
    {
        scroller.style.top = newPosition + "px";
    }
    else if (newPosition > scrollerTrackHeight - scrollerHeight)
    {
        scroller.style.top = scrollerTrackHeight - scrollerHeight + "px";
    }
    else
    {
        scroller.style.top = 0 + "px";
    }
	object.style.marginTop = Math.round( parseInt(scroller.style.top)  * delta * (-1) ) + "px";
	return false;
}

function blockEvent(event)
{
    if (!event)
    {
        event = window.event;
    }
    if (event.stopPropagation) 
    {
        event.stopPropagation();
    }
    else 
    {
        event.cancelBubble = true;
    }
    if (event.preventDefault) 
    {
        event.preventDefault();
    }
    event.returnValue = false;
}

function wheel(event)
{
    var wheelDelta = 0;
    
    var step = 10;
    if (!event) 
    {
        event = window.event;
    }
    if (event.wheelDelta) 
    {
        wheelDelta = event.wheelDelta/120;
        
        if (window.opera)
        {
            wheelDelta = event.wheelDelta/40;
        }
    } 
    else if (event.detail) 
    {
        wheelDelta = -event.detail;
    }
    if (wheelDelta)
    {
        var i = (wheelDelta < 0) ? 1 : -1;
        var currentPosition = parseInt(scroller.style.top);               
        var newPosition = i*step + currentPosition;
        setPosition(newPosition); 
    }
    
    blockEvent(event);
}


var scroller;
var object;
var scrollerTrackHeight;
var objectHeight;
var objectTrackHeight;
var scrollerHeight;
var delta;

function init() {
	scroller = get('scroller');
	scrollerBar = get('scroll_line');
	object = get('object');
	content = get('area_out');

	scrollerTrackHeight = scrollerBar.offsetHeight;
	objectHeight = content.offsetHeight; 
	objectTrackHeight = object.offsetHeight; 
/*alert(objectTrackHeight);*/
	scrollerHeight = 10;
	scrollerHeight = (scrollerHeight > scrollerTrackHeight) ?  scrollerTrackHeight : scrollerHeight;
	scroller.style.height = scrollerHeight + "px";
	delta = objectTrackHeight / scrollerTrackHeight;

	scroller.onmousedown = drag;
	addEvent(window, 'mousemove', move);
	addEvent(window, 'mouseup', drop);

	// ie
	addEvent(document.body, 'mousemove', move);
	addEvent(document.body, 'mouseup', drop);

	if (content.addEventListener){
		content.addEventListener('DOMMouseScroll', wheel, false);
	}
	content.onmousewheel = wheel;
        img_b();


}

function addEvent(elm, evType, fn, useCapture) {
        if (elm.addEventListener) {
                elm.addEventListener(evType, fn, useCapture);
        return true;
        }
        else if (elm.attachEvent) {
                var r = elm.attachEvent('on' + evType, fn);
                return r;
        }
        else {
                elm['on' + evType] = fn;
        }
}

window.onload = init;
/*
var stop_f = 0;
	function moveTop(mouse){
		c = parseInt($("#object").css("margin-top"));
		if(c<0&&stop_f==0){
			stop_f=1;
			$("#object").css("marginTop", c+55+"px");stop_f=0;
		}
	}
	function moveBottom(mouse){
		c = parseInt($("#object").css("margin-top"));
		if(c>(-$("#object").height())+288){
			stop_f=1;
			$("#object").css("marginTop", c-55+"px");stop_f=0;
		}
	}
*/

		function moveTop() {
			$("#object").css("marginTop", 0);
			$("#scroller").css("top", 0);
		}
		function moveBottom() {
			q = -$("#object").height()+500;
			$("#object").css("marginTop", q);
			q = $("#scroll_line").height()-$("#scroller").height();
			$("#scroller").css("top", q);
		}