var scrollerLeft = {

  init:   function() {
    
	scrollerLeft.docH = document.getElementById("gallery").offsetWidth;
	scrollerLeft.docToScroll = document.getElementById("gallery");
	scrollerLeft.docToScroll.style.left = "0px";
	scrollerLeft.contH = document.getElementById("c_gallery").offsetWidth;
	scrollerLeft.gutter = document.getElementById("g_scrollbar");
	debug("content_left: scrollerLeft.docH: " + scrollerLeft.docH);
	
   // debug("content_left_scrollable: scrollerLeft.docH: " + scrollerLeft.docH);
   // scrollerLeft.contH = scrollerLeft.contH -20;
    debug("content_left_scrollable: scrollerLeft.contH: " + scrollerLeft.contH);

	
    
    
    //alert("Scroll");
    //scroller.contH = document.getElementById("content_right_container").offsetHeight;
    scrollerLeft.scrollAreaH = document.getElementById("g_scrollbar").offsetWidth;
    //calculate height of scroller and resize the scroller div
    //(however, we make sure that it isn't to small for long pages)
    scrollerLeft.scrollH = (scrollerLeft.contH * scrollerLeft.scrollAreaH) / scrollerLeft.docH;
    
    if(scrollerLeft.scrollH < 30) scrollerLeft.scrollH = 30;
    
    // Check if we need scrollbars at all
    if(scrollerLeft.docH < scrollerLeft.contH)
    {
    
    	// Remove scrollbars and try to widen content column
    	//document.getElementById("scrollbar_handle_left").style.display = "none";
		document.getElementById("c_scrollbar").style.display = "none";
		//document.getElementById("content_left").style.width = "235px"
    	//document.getElementById("scrollbar_groove_left").style.display = "none";
    
    }
    else
    {
    	
    	scrollerLeft.handleSize = Math.round(scrollerLeft.scrollH);
    	scrollerLeft.viewPortSize = scrollerLeft.contH;
	    document.getElementById("h_scrollbar").style.width = scrollerLeft.handleSize + "px";
	    debug("Setting scroll handle to: " + document.getElementById("h_scrollbar").style.width);
	    //what is the effective scroll distance once the scoller's height has been taken into account
	    scrollerLeft.scrollDist = Math.round(scrollerLeft.scrollAreaH - scrollerLeft.scrollH);
	    
	    //make the scroller div draggable
	    Drag.init(document.getElementById("h_scrollbar"),null,0,scrollerLeft.scrollDist,0,0);
	    document.getElementById("h_scrollbar").onmouseover = function () {
	    	
	    	//document.getElementById("scrollHandle").style.backgroundColor = "Red";
	/*
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#C50505"', 12);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#D90404"', 24);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#EB0202"', 36);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#F80101"', 48);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#FF0000"', 64);
	*/	    	
	
				//document.getElementById("h_scrollbar").style.cursor = "pointer";
	    }
	    
	    document.getElementById("h_scrollbar").onmouseout = function () {
	/*	    	
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#F80101"', 25);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#EB0202"', 50);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#D90404"', 75);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#C50505"', 125);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#b10707"', 150);
	*/	    	
	
				//document.getElementById("intro").style.cursor = "default";
	    }
	    
	    document.getElementById("h_scrollbar").onmousemove = function () {
	/*	    
		    	this.style.backgroundColor = "#FF0000"
	*/	    	
	   	}
	    //add ondrag function
	    document.getElementById("h_scrollbar").onDrag = function (x,y) {
	      var scrollY = parseInt(document.getElementById("h_scrollbar").style.left);
	      var docY = 0 - (scrollY * (scrollerLeft.docH - scrollerLeft.contH) / scrollerLeft.scrollDist);
	      
	      
	      scrollerLeft.docToScroll.style.left = docY + "px";
	      //document.getElementById("intro").style.cursor = "pointer";
	      //debug(scrollerLeft.docToScroll.id + ": " + docY + "px")
	
	      	
	    }
	    
	    scrollerLeft.gutter.onclick = function(e) {
	    	
	    	var relX = e.pageX - parseInt(document.getElementById("c_scrollbar").offsetLeft);
	    	var scrollXMin = parseInt(document.getElementById("h_scrollbar").style.left);
	    	var scrollXMax = scrollXMin + parseInt(document.getElementById("h_scrollbar").offsetWidth);
	    	
	    	//debug(parseInt(scrollerLeft.docToScroll.style.left) + scrollerLeft.contH + "px");
	    	
	    	if(relX < scrollXMin)
	    	{
	    		
	    		//debug(relX + " " + scrollXMin + " " + scrollXMax);
	    		if((scrollXMin - scrollerLeft.handleSize) < 0)
	    		{
	    			
	    			scrollerLeft.docToScroll.style.left = 0;
	    			document.getElementById("h_scrollbar").style.left = 0;
	    		
	    		}
	    		else
	    		{
	    			
	    			scrollerLeft.docToScroll.style.left = parseInt(scrollerLeft.docToScroll.style.left) + scrollerLeft.contH + "px";
	    			document.getElementById("h_scrollbar").style.left = scrollXMin - scrollerLeft.handleSize + "px";
	    			
	    		}
	    	}
	    	else if(relX > scrollXMax)
	    	{
	    		
	    		//scrollerLeft.docToScroll.style.left
	    		if((scrollXMin + (scrollerLeft.handleSize * 2)) > parseInt(document.getElementById("c_scrollbar").offsetWidth))
	    		{
	    			scrollerLeft.docToScroll.style.left = scrollerLeft.contH - scrollerLeft.docH + "px";
	    			document.getElementById("h_scrollbar").style.left = parseInt(document.getElementById("c_scrollbar").offsetWidth) - scrollerLeft.handleSize + "px";
	    			//debug((scrollXMin + scrollerLeft.handleSize) + " " + parseInt(document.getElementById("c_scrollbar").offsetWidth));
	    		}
	    		else
	    		{
	    			scrollerLeft.docToScroll.style.left = parseInt(scrollerLeft.docToScroll.style.left) - scrollerLeft.contH + "px";
	    			document.getElementById("h_scrollbar").style.left = scrollXMin + scrollerLeft.handleSize + "px";
	    		}
	    	}
	    		    	
	    }
    
	}
    
  }
  
}

var scrollerVert = {

  init:   function() {
    
	scrollerVert.docH = document.getElementById("bio").offsetHeight;
	scrollerVert.docToScroll = document.getElementById("bio");
	scrollerVert.contH = document.getElementById("c_bio").offsetHeight;
	debug("content_left: scrollerVert.docH: " + scrollerVert.docH);
	    
   // debug("content_left_scrollable: scrollerVert.docH: " + scrollerVert.docH);
   // scrollerVert.contH = scrollerVert.contH -20;
    debug("content_left_scrollable: scrollerVert.contH: " + scrollerVert.contH);

	
    
    
    //alert("Scroll");
    //scroller.contH = document.getElementById("content_right_container").offsetHeight;
    scrollerVert.scrollAreaH = document.getElementById("bg_scrollbar").offsetHeight;
    //calculate height of scroller and resize the scroller div
    //(however, we make sure that it isn't to small for long pages)
    scrollerVert.scrollH = (scrollerVert.contH * scrollerVert.scrollAreaH) / scrollerVert.docH;
    
    if(scrollerVert.scrollH < 30) scrollerVert.scrollH = 30;
    
    // Check if we need scrollbars at all
    if(scrollerVert.docH < scrollerVert.contH)
    {
    
    	// Remove scrollbars and try to widen content column
    	//document.getElementById("scrollbar_handle_left").style.display = "none";
		document.getElementById("bc_scrollbar").style.display = "none";
		//document.getElementById("content_left").style.width = "235px"
    	//document.getElementById("scrollbar_groove_left").style.display = "none";
    
    }
    else
    {
    	
	    document.getElementById("bh_scrollbar").style.height = Math.round(scrollerVert.scrollH) + "px";
	    debug("Setting scroll handle to: " + document.getElementById("bh_scrollbar").style.height);
	    //what is the effective scroll distance once the scoller's height has been taken into account
	    scrollerVert.scrollDist = Math.round(scrollerVert.scrollAreaH - scrollerVert.scrollH);
	    
	    //make the scroller div draggable
	    Drag.init(document.getElementById("bh_scrollbar"),null,0,0,0,scrollerVert.scrollDist);
	    document.getElementById("bh_scrollbar").onmouseover = function () {
	    	
	    	//document.getElementById("scrollHandle").style.backgroundColor = "Red";
	/*
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#C50505"', 12);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#D90404"', 24);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#EB0202"', 36);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#F80101"', 48);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#FF0000"', 64);
	*/	    	
	    }
	    
	    document.getElementById("bh_scrollbar").onmouseout = function () {
	/*	    	
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#F80101"', 25);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#EB0202"', 50);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#D90404"', 75);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#C50505"', 125);
		    	setTimeout('document.getElementById("scrollbar_handle_left").style.backgroundColor = "#b10707"', 150);
	*/	    	
	    }
	    
	    document.getElementById("bh_scrollbar").onmousemove = function () {
	/*	    
		    	this.style.backgroundColor = "#FF0000"
	*/	    	
	   	}
	    //add ondrag function
	    document.getElementById("bh_scrollbar").onDrag = function (x,y) {
	      var scrollY = parseInt(document.getElementById("bh_scrollbar").style.top);
	      var docY = 0 - (scrollY * (scrollerVert.docH - scrollerVert.contH) / scrollerVert.scrollDist);
	      
	      scrollerVert.docToScroll.style.top = docY + "px";
	      //debug(scrollerVert.docToScroll.id + ": " + docY + "px")
	
	      	
	    }
    
	}
    
  }
  
}