content_total_width = document.getElementById("content").offsetWidth;
content_window_width = 530;
content_left = 300;
scrollbar_width = 514;
if (content_total_width>content_window_width) {
        scrollsquare_width = Math.round((content_window_width*scrollbar_width)/content_total_width);
        document.getElementById('scrollsquare').style.width = scrollsquare_width+"px";
        document.getElementById('scrollsquare').style.height = 5+"px";
        move_increment = Math.round((scrollbar_width-scrollsquare_width)/5);
}




dragging = false;
count = 0;
start_square_left = false;
start_cursor_x = false;
cursor_x = false;
scroll_direction =0;


function start_scroll(dir) {
        if (content_total_width<=content_window_width) {
                return false;
        }
        scroll_direction = dir;
        scroll();
}

function set(squarex) {
        ratio = squarex/(scrollbar_width-scrollsquare_width);
        contentx = content_left - Math.round((content_total_width-content_window_width)*ratio);
       if (squarex<0) {
                squarex = 0;
                contentx = content_left;
        }

        if (squarex>(scrollbar_width-scrollsquare_width)) {
                squarex = scrollbar_width-scrollsquare_width;
                contentx = content_window_width+content_left-content_total_width;
        }
        document.getElementById("scrollsquare").style.left = squarex+"px";

        document.getElementById("content").style.left = contentx+"px";
        document.getElementById("content").style.clip = "rect(0px "+(content_left-contentx+content_window_width)+"px 450px "+(content_left-contentx)+"px)";
}

function scroll() {
        if (scroll_direction == 0) {
                return;
        }
        moved = document.getElementById("scrollsquare").offsetLeft + (move_increment*scroll_direction);
        set(moved);
        st = setTimeout("scroll()", 100);
}


function start_drag() {
        start_cursor_x = cursor_x;
        dragging = true;
        start_square_left = document.getElementById("scrollsquare").offsetLeft;
}

function drag(e) {
        if (!e) {
                e = window.event;
        }
        if (e.pageX) {
                cursor_x = e.pageX;
        } else if (e.clientX) {
                cursor_x = e.clientX;
        }

        if (!dragging) {
                return;
        }

        square_change = (cursor_x-start_cursor_x);
        square_left =  start_square_left + square_change;

        set(square_left);
		
		// prevent text selection in IE
        document.onselectstart = function () { return false; };
        
        // prevent text selection (except IE)
        return false;
}

function clear_drag() {
        dragging = false;
        scroll_direction = 0;
        start_cursor_x = false
}
if (content_total_width>content_window_width) {
        document.onmousemove = drag;
        document.onmousedown = drag;
        document.onmouseup = clear_drag;
}