/***********************
    SCROLLBAR CREATION
************************/
// Global variables
var scrollEngaged = false;
var scrollEnabled = true;
var scrollInterval;
var scrollBar;
var SCROLL_INTERVAL = 100;

// Utility to retrieve effective style property
function getElementStyle(elemID, IEStyleAttr, CSSStyleAttr) {
    var elem = document.getElementById(elemID);
    if (elem.currentStyle) {
        return elem.currentStyle[IEStyleAttr];
    } else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, "");
        return compStyle.getPropertyValue(CSSStyleAttr);
    }
    return "";
}

// Scrollbar constructor function
function scrollBar(scrollpaneID, contentID) {
    // one-time evaluations for use by other scroll bar manipulations	
    this.scrollPane = document.getElementById(scrollpaneID);
    this.contentPane = document.getElementById(contentID);
    
    // create quirks object whose default (CSS-compatible) values
    // are zero; pertinent values for quirks mode filled in later	
    this.quirks = {on:false, contentPadding:0};
    if (navigator.appName == "Microsoft Internet Explorer" && 
        navigator.userAgent.indexOf("Win") != -1 && 
        (typeof document.compatMode == "undefined" || 
        document.compatMode == "BackCompat")) {
        this.quirks.on = true;
        this.quirks.contentPadding = parseInt(getElementStyle(contentID, 
        "padding", "padding"));
     }

    // scrollWrapper defines "page" region color and 3-D borders
    this.scrollWrapper = document.getElementById("scrollWrapper");
    this.thumb = document.getElementById("thumb");
    this.thumb.alt = "Scroll Button";
    this.thumb.style.position = "absolute";
    this.thumb.style.top = 0 + "px";
    this.thumb.style.left = 0 + "px";
    
    // Define region to limit dragging of thumb button
    var dragZoneRight = this.thumb.width;
    var dragZoneBottom = parseInt(getElementStyle(this.scrollWrapper.id, "height", "height"));
    this.dragZone = {left:0, top:0, right:dragZoneRight, bottom:dragZoneBottom}

    // configure event processing
    var scrollUp = document.getElementById("lineup");
    var scrollDown = document.getElementById("linedown");
    
    this.scrollWrapper.onmousedown = handleScrollClick;
    scrollUp.onmousedown = handleScrollClick;
    scrollDown.onmousedown = handleScrollClick;
    
    this.scrollWrapper.onmouseup = handleScrollStop;
    scrollUp.onmouseup = handleScrollStop;
    scrollDown.onmouseup = handleScrollStop;
    
    this.scrollWrapper.oncontextmenu = blockEvent;
    scrollUp.oncontextmenu = blockEvent;
    scrollDown.oncontextmenu = blockEvent;
    
    this.scrollWrapper.ondrag = blockEvent;
    scrollUp.ondrag = blockEvent;
    scrollDown.ondrag = blockEvent;
}

/***************************
    EVENT HANDLER FUNCTIONS
****************************/
// onmouse up handler
function handleScrollStop() {
	if(!scrollEnabled)
	{
		return;
	}	
	//alert("handelScrollStop() called");
    scrollEngaged = false;
    clearInterval(scrollInterval);
}

// Prevent Mac context menu while holding down mouse button
function blockEvent(evt) {
	if(!scrollEnabled)
	{
		return;
	}
    evt = (evt) ? evt : event;
    evt.cancelBubble = true;
    return false;
}

// click event handler
function handleScrollClick(evt) {
	if(!scrollEnabled)
	{
		return;
	}
    var fontSize;
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    target = (target.nodeType == 3) ? target.parentNode : target;
    fontSize = parseInt(getElementStyle(scrollBar.contentPane.id, "fontSize", "font-size"));
    
    switch (target.className) {
        case "lineup" :
        	//alert("scroll up button clicked - scrolling content by " + parseInt(fontSize));
            scrollEngaged = true;
            scrollBy(parseInt(fontSize));
            scrollInterval = setInterval("scrollBy(" + parseInt(fontSize) + ")", SCROLL_INTERVAL);
            evt.cancelBubble = true;
            return false;
            break;
        case "linedown" :
            scrollEngaged = true;
            scrollBy(-(parseInt(fontSize)));
            scrollInterval = setInterval("scrollBy(-" + parseInt(fontSize) + ")", SCROLL_INTERVAL);
            evt.cancelBubble = true;
            return false;
            break;
        case "scrollWrapper" :
            scrollEngaged = true;
            var evtY = (evt.offsetY) ? evt.offsetY : ((evt.layerY) ? evt.layerY : -1);
            var scrollpaneHeight = parseInt(getElementStyle(scrollBar.scrollPane.id, "height", "height"));

            if (evtY >= 0) {
                var pageSize = scrollpaneHeight - fontSize;
                var thumb = scrollBar.thumb;
                //alert("evtY = " + evtY + "\npageSize = " + pageSize + "\nthumb.top = " + thumbElemStyle.top + "\nthumbHeight = " + scrollBar.thumbHeight);
                // set value negative to push document upward
                if (evtY > (parseInt(thumb.style.top) + thumb.height)) {
                    pageSize = -pageSize;
                }
                //alert("pageSize = " + pageSize);
                scrollBy(pageSize);
                scrollInterval = setInterval("scrollBy(" + pageSize + ")", SCROLL_INTERVAL);
                evt.cancelBubble = true;
                return false;
            }
    }
    return false;
}

// Activate scroll of inner content
function scrollBy(px) {
    var contentPane = scrollBar.contentPane;
    var contentTop = parseInt(getElementStyle(contentPane.id, "top", "top"));
    var contentHeight = contentPane.scrollHeight;
    var scrollPaneHeight = parseInt(getElementStyle(scrollBar.scrollPane.id, "height", "height"));
    
    //alert("contentTop = " + contentTop + "\ncontentHeight = " + contentHeight + "\nheight = " + scrollPaneHeight + "\npx = " + px + "\nquirksPadding: " + scrollBar.quirks.contentPadding);
    if (scrollEngaged && contentTop + px >= -contentHeight + scrollPaneHeight && contentTop + px <= 0) {
    	//alert("branch 1 followed");
        shiftBy(contentPane, 0, px);
        updateThumb();
    } else if (contentTop + px < -contentHeight + scrollPaneHeight) {
    	//alert("branch 2 followed");
    	//alert("contentHeight: " + contentHeight + "\nscrollPaneHeight: " + scrollPaneHeight + "\nquirksPadding: " + scrollBar.quirks.contentPadding);
        shiftTo(contentPane, 0, -contentHeight + scrollPaneHeight);
        updateThumb();
        clearInterval(scrollInterval);
    } else if (contentTop + px > 0) {
    	//alert("branch 3 followed");
        shiftTo(contentPane, 0, 0);
        updateThumb();
        clearInterval(scrollInterval);
    } else {
    	//alert("branch 4 followed");
        clearInterval(scrollInterval);
    }
}

/**********************
    SCROLLBAR TRACKING
***********************/

// Position thumb after scrolling by arrow/page region
function updateThumb() {
    var scrollWrapperHeight = 
    	parseInt(getElementStyle(scrollBar.scrollWrapper.id, "height", "height"));
    var barLength = scrollWrapperHeight - scrollBar.thumb.height;
    var docElem = scrollBar.contentPane;
    var docTop = Math.abs(parseInt(docElem.style.top));
    var scrollPaneHeight = parseInt(getElementStyle(scrollBar.scrollPane.id, "height", "height"));
    var contentHeight = scrollBar.contentPane.scrollHeight;
    var scrollFactor = docTop/(contentHeight - scrollPaneHeight);
    shiftTo(scrollBar.thumb, 0, Math.round(barLength * scrollFactor));
}

// Position content per thumb location
function updateScroll() {
    var scrollWrapperHeight = 
    	parseInt(getElementStyle(scrollBar.scrollWrapper.id, "height", "height"));
    var thumbHeight = scrollBar.thumb.height;
    var wellTop = 0;
    var wellBottom = scrollWrapperHeight - thumbHeight;
    var wellSize = wellBottom - wellTop;
    var thumbTop = parseInt(getElementStyle(scrollBar.thumb.id, "top", "top"));
    var scrollFactor = thumbTop/wellSize;
    var contentHeight = scrollBar.contentPane.scrollHeight;
    var scrollPaneHeight = parseInt(getElementStyle(scrollBar.scrollPane.id, "height", "height"));
    //alert("calling scrollTo with arguments:\nobjectToScroll: " + String(scrollBar.contentPane.id) +
    //	"\nx: 0\ny: " + -(Math.round((contentHeight - scrollPaneHeight) * 
    //   scrollFactor)));
    shiftTo(scrollBar.contentPane.id, 0, -(Math.round((contentHeight - scrollPaneHeight) * 
        scrollFactor)));
}
/*******************
   ELEMENT DRAGGING
********************/
// Global holds reference to selected element
var selectedObj;
// Globals hold location of click relative to element
var offsetX, offsetY;
//var zone = {left:0, top:0, right:11, bottom:272};

// Set global reference to element being engaged and dragged
function setSelectedElem(evt) {
    var target = (evt.target) ? evt.target : evt.srcElement;
    target = (target.nodeType && target.nodeType == 3) ? target.parentNode : target;
    var thumbId = (target.id.indexOf("thumb") != -1) ? target.id : "";
    if (thumbId) {
        if (document.layers) {
            selectedObj = document.layers[thumbId];
        } else if (document.all) {
            selectedObj = document.all(thumbId);
        } else if (document.getElementById) {
            selectedObj = document.getElementById(thumbId);
        }
        setZIndex(selectedObj, 100);
        return;
    }
    selectedObj = null;
    return;
}

// Drag thumb only within scrollbar region
function dragIt(evt) {
//	if(!scrollEnabled)
//	{
//		return;
//	}
    evt = (evt) ? evt : event;
    var x, y, width, height;
    if (selectedObj) {
        if (evt.pageX) {
            x = evt.pageX - offsetX;
            //alert("evt.pageY = " + evt.pageY + ", offsetY = " + offsetY);
            y = evt.pageY - offsetY;
        } else if (evt.clientX || evt.clientY) {
            x = evt.clientX - offsetX;
            //alert("evt.clientY = " + evt.pageY + ", offsetY = " + offsetY);
            y = evt.clientY - offsetY;
        }
        var zone = scrollBar.dragZone;
        //alert("zone details:\nleft: " + zone.left + "\nright: " + zone.right + "\ntop: " + zone.top + "\nbottom: " + zone.bottom);
        width = scrollBar.thumb.width;
        height = scrollBar.thumb.height;
        //alert("before adjustments, x = " + x + ", y = " + y);
        x = (x < zone.left) ? zone.left : ((x + width > zone.right) ? zone.right - width : x);
        y = (y < zone.top) ? zone.top : ((y + height > zone.bottom) ? zone.bottom - height : y);
        shiftTo(selectedObj, x, y);
        updateScroll();
        evt.cancelBubble = true;
        return false;
    }
}

// Turn selected element on and set cursor offsets
function engage(evt) {
	if(!scrollEnabled)
	{
		return;
	}
    evt = (evt) ? evt : event;
    setSelectedElem(evt);
    if (selectedObj) {
        if (document.body && document.body.setCapture) {
            // engage event capture in IE/Win
            document.body.setCapture();
        }
        if (evt.pageX) {
            offsetX = evt.pageX - ((typeof selectedObj.offsetLeft != "undefined") ? 
                      selectedObj.offsetLeft : selectedObj.left);
            //alert("evt.pageY = " + evt.pageY + "\nselectedObj.offsetTop = " + selectedObj.offsetTop + 
            //		"\nselectedObj.top = " + selectedObj.top); 
            offsetY = evt.pageY - ((typeof selectedObj.offsetTop != "undefined") ? 
            			selectedObj.offsetTop : selectedObj.top);
            //alert("offsetY = " + offsetY);
        } else if (typeof evt.clientX != "undefined") {
            offsetX = evt.clientX - ((selectedObj.offsetLeft) ? 
                      selectedObj.offsetLeft : 0);
            offsetY = evt.clientY - ((selectedObj.offsetTop) ? 
                      selectedObj.offsetTop : 0);
        }
        return false;
    }
}

// Turn selected element off
function release(evt) {
	if(!scrollEnabled)
	{
		return;
	}
    if (selectedObj) {
        setZIndex(selectedObj, 0);
        if (document.body && document.body.releaseCapture) {
            // stop event capture in IE/Win
            document.body.releaseCapture();
        }
        selectedObj = null;
    }
}

// Assign event handlers used by both Navigator and IE
function initDrag() {
	//alert("initDrag() called");
    if (document.layers) {
        // turn on event capture for these events in NN4 event model
        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
        return;
    } else if (document.body & document.body.addEventListener) {
        // turn on event capture for these events in W3C DOM event model
    	document.addEventListener("mousedown", engage, true);
    	document.addEventListener("mousemove", dragIt, true);
    	document.addEventListener("mouseup", release, true);
    	document.addEventListener('DOMMouseScroll', wheel, true);
    	return;
    } else {
	  	document.onmousedown = engage;
	   	document.onmousemove = dragIt;
	   	document.onmouseup = release;
	   	document.onmousewheel = wheel;
	   	if (navigator.userAgent.indexOf('Gecko' ) != -1)
	   	{
	   		window.addEventListener('DOMMouseScroll', wheel, true);
	   	}
	    return;
    }
}

/**************************
   RENDER SCROLLABLE AREA
***************************/

var HEADER_HEIGHT = 206; // Header and menubar
var FOOTER_HEIGHT = 46;
var RESERVED_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT;
var MIN_CONTENT_HEIGHT = 280;
var MIN_CONTENT_WIDTH = 500;
var CONTENT_PADDING = 50;

var NAVBAR_WIDTH = 142;
var SCROLLBAR_WIDTH = 54;
var SCROLLBAR_LEFT_LIMIT = 645;
var SCROLLBAR_METAL_HEIGHT = 42;
var SCROLLBAR_BUTTON_HEIGHT = 14;
var SCROLLBAR_CENTER = 6;
var RIGHT_MARGIN_WIDTH = 20;
var RESERVED_WIDTH = NAVBAR_WIDTH + SCROLLBAR_WIDTH;

function renderContentWindow()
{
	// Set overall page dimensions
	var windowHeight = getInsideWindowHeight();
	var windowWidth = getInsideWindowWidth() - RIGHT_MARGIN_WIDTH;
	
	var layoutStyle = getObject("layout");
	layoutStyle.height = windowHeight + "px";
	layoutStyle.width = windowWidth + "px";
	
	// Set content window dimensions
	var availableHeight = windowHeight - RESERVED_HEIGHT;
	availableHeight = (availableHeight < MIN_CONTENT_HEIGHT) ? MIN_CONTENT_HEIGHT : availableHeight;
	
	var availableWidth = windowWidth - RESERVED_WIDTH;
	availableWidth = (availableWidth < MIN_CONTENT_WIDTH) ? MIN_CONTENT_WIDTH : availableWidth;
	
	var contentWidth = isIE6CSS ? availableWidth - CONTENT_PADDING : availableWidth;
	
	//var scrollpane = getObject("scrollpane");
	var scrollpane = scrollBar.scrollPane;
	scrollpane.style.height = availableHeight + "px";
	scrollpane.style.width = availableWidth + "px";
	
	//var content = getObject("content");
	var contentPane = scrollBar.contentPane;
	contentPane.style.width = contentWidth + "px";
	
	// Set navbar dimensions
	var navbar = getObject("navbarbucket");
	navbar.height = availableHeight + "px";
	
	// Set content dimensions
	var scrollchannel = getObject("scrollchannel");
	scrollchannel.height = (availableHeight - SCROLLBAR_METAL_HEIGHT) + "px";
	
	//var scrollWrapper = getObject("scrollWrapper");
	var scrollWrapper = scrollBar.scrollWrapper;
	var x = windowWidth - SCROLLBAR_WIDTH + SCROLLBAR_CENTER;
	x = (x < SCROLLBAR_LEFT_LIMIT) ? SCROLLBAR_LEFT_LIMIT : x;
	scrollWrapper.style.left = x + "px";
	scrollWrapper.style.height = (availableHeight - (SCROLLBAR_BUTTON_HEIGHT * 2) - 4) + "px";
	
	var dragZoneBottom = parseInt(getElementStyle(scrollWrapper.id, "height", "height"));
	scrollBar.dragZone.bottom = dragZoneBottom;
	var thumbTop = parseInt(getElementStyle(scrollBar.thumb.id, "top", "top"));
	if(thumbTop > dragZoneBottom - scrollBar.thumb.height)
	{
		shiftTo(scrollBar.thumb, 0, dragZoneBottom - scrollBar.thumb.height);
	}
	
	// Adjust content to fall to bottom of scroll pane if necessary
	var contentTop = parseInt(getElementStyle(contentPane.id, "top", "top"));
	var contentHeight = contentPane.scrollHeight;
	if(contentTop + contentHeight < availableHeight)
	{
		contentPane.style.top = availableHeight - contentHeight + "px";
	}
	
	// check to see if top can be revised downward (i.e. bottom is off bottom of scrollpane)
	if(contentHeight <= availableHeight)
	{
		contentPane.style.top = "0px";
		scrollWrapper.style.visibility = "hidden";
		scrollEnabled = false;
	}
	else
	{
		scrollWrapper.style.visibility = "visible";
		scrollEnabled = true;
	}	
}

/*
	Code for handling scroll wheel events
*/
/** This is high-level function; REPLACE IT WITH YOUR CODE.
 * It must react to delta being more/less than zero.
 */
function handleMouseWheel(delta) {
	var tempScrollEngaged = scrollEngaged;
	scrollEngaged = true;
	if (delta < 0)
		scrollBy(-20);
	else
		scrollBy(20);
	scrollEngaged = tempScrollEngaged
}

function wheel(event) {
	if(!scrollEnabled)
	{
		return;
	}
	//alert("mouse wheel event passed to the wheel() function");
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handleMouseWheel(delta);
}