//We wrap all the code in an object so that it doesn't interfere with any other code
var scroller = {
  init:   function() {
    //collect the variables
    var listitems = document.getElementById("graphic-menu-content").getElementsByTagName("li").length;
    scroller.docW = listitems * 138 + (listitems-1) * 8;
    document.getElementById("graphic-menu-content").style.width = scroller.docW + "px";
    scroller.contW = document.getElementById("graphic-menu-container").offsetWidth;
    scroller.scrollAreaW = document.getElementById("graphic-menu-scrollarea").offsetWidth;
      
    //calculate width of scroller and resize the scroller div
    //(however, we make sure that it isn't too small for long pages)
    scroller.scrollW = (scroller.contW * scroller.scrollAreaW) / scroller.docW;
    if(scroller.scrollW < 15) scroller.scrollW = 15;
    if(scroller.scrollW > scroller.scrollAreaW) scroller.scrollW = scroller.scrollAreaW;
    document.getElementById("graphic-menu-scrollbar").style.width = Math.round(scroller.scrollW) + "px";
    
    //what is the effective scroll distance once the scoller's width has been taken into account
    scroller.scrollDist = Math.round(scroller.scrollAreaW-scroller.scrollW);
    
    //make the scroller div draggable
    Drag.init(document.getElementById("graphic-menu-scrollbar"),null,0,scroller.scrollDist, 0, 0);
    
    //add ondrag function
    document.getElementById("graphic-menu-scrollbar").onDrag = function (x,y) {
      var scrollX = parseInt(document.getElementById("graphic-menu-scrollbar").style.left);
      var docX = 0 - (scrollX * (scroller.docW - scroller.contW) / scroller.scrollDist);
      document.getElementById("graphic-menu-content").style.left = docX + "px";
    }
  }  
}

/*
function arrowRight(){
	var newX = parseInt(document.getElementById("graphic-menu-content").style.left);
	if(newX)
	{
		newX -= 146;
	}else
	{
		newX = -146;
	}
	document.getElementById("graphic-menu-content").style.left = newX + "px";
	var newScroll = newX
	document.getElementById("graphic-menu-scrollbar").style.left = 
}
*/