// Made by geeeet@ghtml.com
// Keep these two lines and you're free to use this code

// Touch me here :-)
var leftH = 22; // Height of left-arrow
var leftW = 22; // Width of left-arrow
var rightH = 22; // Height of right-arrow
var rightW = 22; // Width of right-arrow
var dragH = 22; // Height of scrollbar
var dragW = 297; // Width of scrollbar
var scrollW = 596; // Width of scrollbar
var speed = 4; // Scroll speed

// And now... go to the bottom of the page...

// Browser detection
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;

var mouseY; // Mouse Y position onclick
var mouseX; // Mouse X position onclick

var clickLeft = false; // If click on left-arrow
var clickRight = false; // If click on right-arrow
var clickDrag = false; // If click on scrollbar
var clickAbove = false; // If click above scrollbar
var clickBelow = false; // If click below scrollbar

var timer = setTimeout("",500); // Repeat variable
var leftL; // left-arrow X
var leftT; // left-arrow Y
var rightL; // Right-arrow X
var rightT; // Right-arrow Y
var dragL; // Scrollbar X
var dragT; // Scrollbar Y
var rulerL; // Ruler X
var rulerT; // Ruler Y
var contentT; // Content layer Y;
var contentW; // Content height
var fileprogressW; // Content clip height
var scrollLength; // Number of pixels scrollbar should move
var startY; // Keeps track of offset between mouse and span

// Mousedown
function down(e){
	if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
	getMouse(e);
	startX = (mouseX - dragL);
	// If click on left-arrow
	if(mouseX >= leftL && (mouseX <= (leftL + leftW)) && mouseY >= leftT && (mouseY <= (leftT + leftH))){
		clickLeft = true;
		return scrollLeft();
	}	
	// Else if click on right-arrow
	else if(mouseX >= rightL && (mouseX <= (rightL + rightW)) && mouseY >= rightT && (mouseY <= (rightT + rightH))){
		clickRight = true;
		return scrollRight();
	}
	// Else if click on scrollbar
	else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
		clickDrag = true;
		return false;
	}
	else if(mouseY >= dragT && (mouseY <= (dragT + dragH)) && mouseX >= rulerL && (mouseX <= (rulerL + scrollW))){
		// If click above drag
		if(mouseX < dragL){
			clickAbove = true;
			clickLeft = true;
			return scrollLeft();
		}
		// Else click below drag
		else{
			clickBelow = true;
			clickRight = true;
			return scrollRight();
		}
	}
	// If no scrolling is to take place
	else{
		return true;
	}
}

// Drag function
	function move(e){
	if(clickDrag && contentW > fileprogressW){
		
		getMouse(e);
		dragL = (mouseX - startX);
		
		if(dragL < (rulerL))
			dragL = rulerL;
		if(dragL > (rulerL + scrollW - dragW))
			dragL = (rulerL + scrollW - dragW);
		
		contentL = ((dragL - rulerL)*(1/scrollLength));
		contentL = eval('-' + contentL);

		moveTo();
		
		// So ie-pc doesn't select gifs
		if(ie4)
			return false;
	}
}

// Mouseup
function up(){
	clearTimeout(timer);
	// Resetting variables
	clickLeft = false;
	clickRight = false;
	clickDrag = false;
	clickAbove = false;
	clickBelow = false;
	return true;
}

// Reads content layer top
function getT(){
	if(dom)
		contentL = parseInt(document.getElementById("beispiele").style.left);
	else if(ie4)
		contentL = document.all.content.style.pixelLeft;
	else if(nn4)
		contentL = document.fileprogress.document.content.left;
	
	if(!contentL) contentL = 0;
}

// Reads mouse X and Y coordinates
function getMouse(e){
	if(ie4){
		mouseY = event.clientY + document.body.scrollTop;
		mouseX = event.clientX + document.body.scrollLeft;
	}
	else if(nn4 || dom){
		mouseY = e.pageY;
		mouseX = e.pageX;
	}
}

// Moves the layer
function moveTo(){
	if(dom) {
		document.getElementById("beispiele").style.left = contentL + "px";
		document.getElementById("drag").style.left = dragL + "px";
		document.getElementById("ruler").style.left = dragL + "px";
	}
	else if(ie4){
		document.all.content.style.left = contentL;
		document.all.ruler.style.left = dragL;
		document.all.drag.style.left = dragL;
	}
	else if(nn4){
		document.fileprogress.document.content.left = contentL;
		document.ruler.left = dragL;
		document.drag.left = dragL;
	}
}

// Scrolls left
function scrollLeft(){
	getT();
	
	if(clickAbove){
		if(dragL <= (mouseX-(dragW/2)))
			return up();
	}
	
	if(clickLeft){
		if(contentL < 0){
			dragL = dragL - (speed*scrollLength);
			
			if(dragL < (rulerL))
				dragL = rulerL;
				
			contentL = contentL + speed;
			if(contentL > 0)
				contentL = 0;
			
			moveTo();
			timer = setTimeout("scrollLeft()",25);
		}
	}
	return false;
}

// Scrolls right
function scrollRight(){
	getT();
	
	if(clickBelow){ 
		if(dragL >= (mouseX-(dragW/2)))
			return up();
	}

	if(clickRight){
		if(contentL > -(contentW - fileprogressW)){
			dragL = dragL + (speed*scrollLength);
			if(dragL > (rulerL + scrollW - dragW))
				dragL = (rulerL + scrollW - dragW);
			
			contentL = contentL - speed;
			if(contentL < -(contentW - fileprogressW))
				contentL = -(contentW - fileprogressW);
			
			moveTo();
			timer = setTimeout("scrollRight()",25);
		}
	}
	return false;
}

// reloads page to position the layers again
function reloadPage(){
	location.reload();
}

// Preload
function eventLoader(){
	if(dom){
		// Up-arrow X and Y variables
		leftL = parseInt(document.getElementById("up").style.left);
		leftT = parseInt(document.getElementById("up").style.top);

		// Down-arrow X and Y variables
		rightL = parseInt(document.getElementById("down").style.left);
		rightT = parseInt(document.getElementById("down").style.top);

		// Scrollbar X and Y variables
		dragL = parseInt(document.getElementById("drag").style.left);
		dragT = parseInt(document.getElementById("drag").style.top);

		// Ruler Y variable
		//rulerT = parseInt(document.getElementById("ruler").style.top);
		rulerL = parseInt(document.getElementById("ruler").style.left);

		// Width of content layer and clip layer
//		contentL = parseInt(document.getElementById("beispiele").style.left);
		contentW = parseInt(document.getElementById("beispiele").offsetWidth);

		fileprogressW = parseInt(document.getElementById("beispiel_container").offsetWidth);
//alert(contentW + " - " + fileprogressW);
	}
	else if(ie4){
		// Up-arrow X and Y variables
		leftL = document.all.up.style.pixelLeft;
		leftT = document.all.up.style.pixelTop;		
		// Down-arrow X and Y variables
		rightL = document.all.down.style.pixelLeft;
		rightT = document.all.down.style.pixelTop;
		// Scrollbar X and Y variables
		dragL = document.all.drag.style.pixelLeft;
		dragT = document.all.drag.style.pixelTop;		
		// Ruler Y variable
		rulerT = document.all.ruler.style.pixelTop;		
		// Height of content layer and clip layer
		contentW = parseInt(document.all.content.scrollWidth);
		fileprogressW = parseInt(document.all.fileprogress.style.width);
	}
	else if(nn4){
		// Up-arrow X and Y variables
		leftL = document.up.left;
		leftT = document.up.top;		
		// Down-arrow X and Y variables
		rightL = document.down.left;
		rightT = document.down.top;		
		// Scrollbar X and Y variables
		dragL = document.drag.left;
		dragT = document.drag.top;		
		// Ruler Y variable
		rulerT = document.ruler.top;
		// Height of content layer and clip layer
		contentW = document.fileprogress.document.content.clip.right;
		fileprogressW = document.fileprogress.clip.right;
	}
	// Number of pixels scrollbar should move
	scrollLength = ((scrollW-dragW)/(contentW-fileprogressW));
	// Initializes event capturing
	if(nn4){
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
		window.onresize = reloadPage;
	}
	document.onmousedown = down;
	document.onmousemove = move;
	document.onmouseup = up;
}

window.onload = function() { eventLoader(); }