// =============================================================
var posx = 0;
var posy = 0;
var moveScroller = false;
var moveVerticalScroller = false;
var mouseMoveScroller = true;
function detectMousePosition(e) {
	if (!e) var e = window.event;
	if (e.pageX || e.pageY){
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	//var inposx = document.getElementById("posx");
	//var inposy = document.getElementById("posy");
	//inposx.value = posx;
	//inposy.value = posy;
	
	if(moveScroller){
		var scrollbar = document.getElementById("scrollbar");
		var poster = document.getElementById("poster");
		var poster_holder = document.getElementById("poster_holder");
		var poster_content = document.getElementById("poster_content");
		
		var poster_size = parseInt(poster.style.width);
		var offset_unit = parseFloat((poster_size-778)/733);
		
		var repos = posx-25;
		var lxpos = repos-25;
		
		if(repos > 758){
			repos = 758;
			lxpos = 733;
		}
		if(repos < 25){
			repos = 25;
			lxpos = 0;
		}
		var offset_x = parseInt(lxpos * offset_unit);
		
		poster_holder.style.marginLeft = "-" + offset_x + "px";
		scrollbar.style.left = repos + "px";
		poster_content.blur();
		scrollbar.focus();
	}
	
	if(moveVerticalScroller){
		var scrollbar2 = document.getElementById("scrollbar2");
		var textContent = document.getElementById("textContent");
		var text_size = textContent.clientHeight;
		var offset_unit = parseFloat((text_size-400)/400);
		
		var repos = posy-178-25;
		var lxpos = repos-25;
		if(repos > 405){
			repos = 405;
			lxpos = 385;
		}
		if(repos < 0){
			repos = 0;
			lxpos = 0;
		}
		var offset_y = parseInt(lxpos * offset_unit);
		textContent.style.marginTop = "-" + offset_y + "px";
		scrollbar2.style.top = repos + "px";
		scrollbar2.focus();
		//inposy.value = offset_y;
	}
}


document.onmousemove = detectMousePosition;
document.onmouseup = function(){
	if(moveVerticalScroller){
		var scrollbar2 = document.getElementById("scrollbar2");	
		if(scrollbar2){ scrollbar2.focus(); }
	}
	if(moveScroller){
		var scrollbar = document.getElementById("scrollbar");	
		if(scrollbar){ scrollbar.focus(); }
	}
	moveScroller = false; moveVerticalScroller = false;
};

function mouseScrollerEvent(){
	var article = document.getElementById("article");	
	if(!article) return false;
	article.onscroll = function(e){}
}

function middleMouseButton(e) {
	var rightclick;
	if (!e) var e = window.event;
	if (e.which) rightclick = (e.which == 3);
	else if (e.button) rightclick = (e.button == 2);
}

// Horizontal Scrollbar
var mouseSlidingTimer = null;
function scrollBarEvent(){
	var scrollbar = document.getElementById("scrollbar");
	var poster_holder = document.getElementById("poster_holder");
	var poster = document.getElementById("poster");
	var poster_content = document.getElementById("poster_content");
	if(!scrollbar) return false;
	if(!poster_holder) return false;
	if(!poster) return false;
	
	poster_content.onselectstart = function() {return false;}
	
	scrollbar.onmousedown = function(){
		moveScroller = true;
		this.focus();
	}
	poster_holder.onmouseover = function(){
		mouseSlidingTimer = setTimeout("moveLeftRight()", 20);
	}
	poster_holder.onmouseout = function(){
		clearTimeout(mouseSlidingTimer);
	}
	
	var ind_poster = poster.getElementsByTagName("div");
	for(var i=0; i<ind_poster.length; i++){
		
		ind_poster[i].onmouseover = function(){
			var poster_content = document.getElementById("poster_content");
			var url_text = document.getElementById("url_text");
			
			if(this.className == "poster_text"){
				if(this.id){
					//poster_content.src = url_text.innerHTML + "img/" + this.id + ".jpg";
					poster_content.style.background = "url('" + url_text.innerHTML + "img/" + this.id + ".jpg') top left no-repeat";
					//poster_content.style.backgroundImage = url_text.innerHTML + "img/" + this.id + ".jpg";
				}
			}
		}
	}
}

function moveLeftRight(){
	var scrollbar = document.getElementById("scrollbar");
	var poster = document.getElementById("poster");
	var poster_holder = document.getElementById("poster_holder");
	if(!scrollbar) return false;
	if(!poster) return false;
	if(!poster_holder) return false;
	
	var poster_size = parseInt(poster.style.width);
	var offset_unit = parseFloat((poster_size-778)/733);
	
	// Make sure it is within the listener
	if(posx > 25 && posx < 800){
		if(posy > 178 && posy < 472){
			
			// Scroll to left
			if(posx < 413){
				var offset_x = Math.abs(parseInt(poster_holder.style.marginLeft)) - 1;
				scroller_offset_x = parseInt(offset_x/offset_unit) + 25;
				if(offset_x > 0){
					poster_holder.style.marginLeft = "-" + offset_x + "px";
					scrollbar.style.left = scroller_offset_x + "px";
				}
			
			// Scroll to right	
			}else{
				var offset_x = Math.abs(parseInt(poster_holder.style.marginLeft)) + 1;
				scroller_offset_x = parseInt(offset_x/offset_unit) + 25;
				if(offset_x < (poster_size-778)){
					poster_holder.style.marginLeft = "-" + offset_x + "px";
					scrollbar.style.left = scroller_offset_x + "px";
				}
			}

		}
	}
	clearTimeout(mouseSlidingTimer);
	mouseSlidingTimer = setTimeout("moveLeftRight()",20);
}

// Vertical Scrollbar
function scrollBarEvent2(){
	var scrollbar2 = document.getElementById("scrollbar2");
	var textContent = document.getElementById("textContent");
	if(!scrollbar2) return false;
	
	scrollbar2.onmousedown = function(){
		moveVerticalScroller = true;
		this.focus();
	}
	//textContent.onselectstart = function() {return false;}
}

function subMenuEvent(){
	var nav = document.getElementById("nav");
	if(!nav) return false;
	
	var aTags = nav.getElementsByTagName("a");
	for(var i=0; i<aTags.length; i++){
		aTags[i].onmouseover = function(){
			var sub_nav1 = document.getElementById("sub_nav1");
			var sub_nav2 = document.getElementById("sub_nav2");
			var sub_nav3 = document.getElementById("sub_nav3");
			sub_nav1.style.display = "none";
			sub_nav2.style.display = "none";
			sub_nav3.style.display = "none";
			
			if(this.parentNode.id == "projects"){
				sub_nav1.style.display = "block";
			}
			if(this.parentNode.id == "works"){
				sub_nav2.style.display = "block";
			}
			if(this.parentNode.id == "articles"){
				sub_nav3.style.display = "block";
			}
		}
	}
}


/** This is high-level function.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {
	
	// down
	if (delta < 0){
		var scrollbar2 = document.getElementById("scrollbar2");
		if(!scrollbar2) return false;
		var textContent = document.getElementById("textContent");
		var text_size = textContent.clientHeight;
		var offset_unit = parseFloat((text_size-400)/400);
		
		var offset_y = Math.abs(parseInt(textContent.style.marginTop)) + 20;
		var scroller_offset_y = parseInt(offset_y/offset_unit);

		if(offset_y < (text_size-375)){
			textContent.style.marginTop = "-" + offset_y + "px";
			scrollbar2.style.top = scroller_offset_y + "px";
		}
		
	// up
	}else{
		var scrollbar2 = document.getElementById("scrollbar2");
		if(!scrollbar2) return false;
		var textContent = document.getElementById("textContent");
		var text_size = textContent.clientHeight;
		var offset_unit = parseFloat((text_size-400)/400);
		
		var offset_y = Math.abs(parseInt(textContent.style.marginTop)) - 20;
		var scroller_offset_y = parseInt(offset_y/offset_unit);
		
		if(offset_y > -1){
			textContent.style.marginTop = "-" + offset_y + "px";
			scrollbar2.style.top = scroller_offset_y + "px";
		}
	}
}

/** Event handler for mouse wheel event.
 */
function wheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
                /** In Opera 9, delta differs in sign as compared to IE.
                 */
                if (window.opera)
                        delta = -delta;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}

/** Initialization code. 
 * If you use your own event management code, change it as required.
 */
if (window.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;


addLoadEvent(scrollBarEvent);
addLoadEvent(scrollBarEvent2);
addLoadEvent(mouseScrollerEvent);
addLoadEvent(subMenuEvent);