////////////////////////////////////////////////////////////////////////////
	// Global objects
	var browser = new Browser();
	var dragObj = new Object();
	var dragBox, dragImage, dragImageDiv;
	dragObj.zIndex = 0;
	dragBox = null;
	dragImage = null;
	dragImageDiv = null;
	var pageState = "DEFAULT";
	
	function Browser() {

		var ua, s, i;

		this.isIE    = false;
		this.isNS    = false;
		this.version = null;

		ua = navigator.userAgent;

		s = "MSIE";
		if ((i = ua.indexOf(s)) >= 0) {
			this.isIE = true;
			this.version = parseFloat(ua.substr(i + s.length));
			return;
		}

		s = "Netscape6/";
		if ((i = ua.indexOf(s)) >= 0) {
			this.isNS = true;
			this.version = parseFloat(ua.substr(i + s.length));
			return;
		}

		// Treat any other "Gecko" browser as NS 6.1.
		s = "Gecko";
		if ((i = ua.indexOf(s)) >= 0) {
			this.isNS = true;
			this.version = 6.1;
			return;
		}
	}
	////////////////////////////////////////////////////////////////////////////////

	function dragStart(event) 
	{
		if (pageState == "DEFAULT")
		{
			var el;
			var x, y;

			dragObj.elNode = document.getElementById("page_area");
			dragObj.elNode.className = "grabbing";
			
			// Get cursor position with respect to the page.
			if (browser.isIE) {
				x = window.event.clientX + document.documentElement.scrollLeft
					+ document.body.scrollLeft;
				y = window.event.clientY + document.documentElement.scrollTop
					+ document.body.scrollTop;
			}
			if (browser.isNS) {
				x = event.clientX + window.scrollX;
				y = event.clientY + window.scrollY;
			}
		
			// Save starting positions of cursor and element.
		
			dragObj.cursorStartX = x;
			dragObj.cursorStartY = y;
			dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
			dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);
			
			if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
			if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
		
			// Update element's z-index.
		
			dragObj.elNode.style.zIndex = ++dragObj.zIndex;
		
			// Capture mousemove and mouseup events on the page.
		
			if (browser.isIE) {
				document.attachEvent("onmousemove", dragGo);
				document.attachEvent("onmouseup",   dragStop);
				window.event.cancelBubble = true;
				window.event.returnValue = false;
			}
			if (browser.isNS) {
				document.addEventListener("mousemove", dragGo,   true);
				document.addEventListener("mouseup",   dragStop, true);
				event.preventDefault();
			}
		}
	}
	////////////////////////////////////////////////////////////////////////////////

	function dragGo(event) {

		var x, y;
		
		if(dragBox == null || dragImageDiv == null)
		{
			dragBox = document.getElementById("spread_pages");
			dragImageDiv = document.getElementById("page_area");
		}
		
		imageWidth = dragImageDiv.style.width.substring(0, dragImageDiv.style.width.length - 2);
		boxWidth = dragBox.style.width.substring(0, dragBox.style.width.length - 2);
		imageHeight = dragImageDiv.style.height.substring(0, dragImageDiv.style.height.length - 2);;
		boxHeight = dragBox.style.height.substring(0, dragBox.style.height.length - 2);

		// Get cursor position with respect to the page.

		if (browser.isIE) {
			x = window.event.clientX + document.documentElement.scrollLeft
				+ document.body.scrollLeft;
			y = window.event.clientY + document.documentElement.scrollTop
				+ document.body.scrollTop;
		}
		if (browser.isNS) {
		x = event.clientX + window.scrollX;
			y = event.clientY + window.scrollY;
		}

		// Move drag element by the same amount the cursor has moved.

		leftPos = (dragObj.elStartLeft + x - dragObj.cursorStartX);
		topPos = (dragObj.elStartTop  + y - dragObj.cursorStartY);
		
		if(leftPos < -1 * (imageWidth - boxWidth))
			leftPos = -1 * (imageWidth - boxWidth);
		else if(leftPos > 0)
			leftPos = 0;

		if(topPos < -1 * (imageHeight - boxHeight))
			topPos = -1 * (imageHeight - boxHeight);
		else if(topPos > 0)
			topPos = 0;
			

		dragObj.elNode.style.left = leftPos + "px";
		dragObj.elNode.style.top = topPos + "px";
		
		if (browser.isIE) {
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}
		if (browser.isNS)
			event.preventDefault();
	}
	////////////////////////////////////////////////////////////////////////////////

	function dragStop(event) {

	
		dragObj.elNode = document.getElementById("page_area");
		dragObj.elNode.className = "";

		// Stop capturing mousemove and mouseup events.
		if (browser.isIE) {
			document.detachEvent("onmousemove", dragGo);
			document.detachEvent("onmouseup",   dragStop);
		}
		if (browser.isNS) {
			document.removeEventListener("mousemove", dragGo,   true);
			document.removeEventListener("mouseup",   dragStop, true);
		}
	}