/**
 * Drag.js: drag the bk visuals chart
 *
 * 
 * This implementation works with both the DOM Level 2 event model and the
 * IE event model.
 * 
 * Arguments:
 *
 *   elementToDrag:  the element that received the mousedown event or
 *     some containing element. It must be absolutely positioned.  Its 
 *     style.left and style.top values will be changed based on the user's
 *     drag.
 *
 *   event: the Event object for the mousedown event.
 **/
function drag(elementToDrag, event) {
	// first if the drag instructions are still showing, hide them
	if (dragtextshowing == true){
		document.getElementById("clickndrag").style.visibility = 'hidden';
		dragtextshowing = false;	
	}


    // The mouse position (in window coordinates)
    // at which the drag begins 
    var startX = event.clientX, startY = event.clientY;    

    // The original position (in document coordinates) of the
    // element that is going to be dragged.  Since elementToDrag is 
    // absolutely positioned, we assume that its offsetParent is the
    // document body.
    var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

    // Even though the coordinates are computed in different 
    // coordinate systems, we can still compute the difference between them
    // and use it in the moveHandler() function.  This works because
    // the scrollbar position never changes during the drag.
    var deltaX = startX - origX, deltaY = startY - origY;

    // Register the event handlers that will respond to the mousemove events
    // and the mouseup event that follow this mousedown event.  
    if (document.addEventListener) {  // DOM Level 2 event model
        // Register capturing event handlers
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) {  // IE 5+ Event Model
        // In the IE event model, we capture events by calling
        // setCapture() on the element to capture them.
        elementToDrag.setCapture();
        elementToDrag.attachEvent("onmousemove", moveHandler);
        elementToDrag.attachEvent("onmouseup", upHandler);
        // Treat loss of mouse capture as a mouseup event
        elementToDrag.attachEvent("onlosecapture", upHandler);
    }
    else {  // IE 4 Event Model
        // In IE 4 we can't use attachEvent() or setCapture(), so we set
        // event handlers directly on the document object and hope that the
        // mouse events we need will bubble up.  
        var oldmovehandler = document.onmousemove; // used by upHandler() 
        var olduphandler = document.onmouseup;
        document.onmousemove = moveHandler;
        document.onmouseup = upHandler;
    }

    // We've handled this event. Don't let anybody else see it.  
    if (event.stopPropagation) event.stopPropagation();  // DOM Level 2
    else event.cancelBubble = true;                      // IE

    // Now prevent any default action.
    if (event.preventDefault) event.preventDefault();   // DOM Level 2
    else event.returnValue = false;                     // IE

    /**
     * This is the handler that captures mousemove events when an element
     * is being dragged. It is responsible for moving the element.
     **/
    function moveHandler(e) {
        if (!e) e = window.event;  // IE Event Model


	// Move the element to the current mouse position, adjusted as
        // necessary by the offset of the initial mouse-click.


	// don't move if window is already as far left or right as possible
	if ( (e.clientX - deltaX) > 0)
		elementToDrag.style.left = 0 + "px";
	else if ( (e.clientX - deltaX) < (1-(elementToDrag.width - Geometry.getViewportWidth()) ) )
		elementToDrag.style.left = 1-(elementToDrag.width - Geometry.getViewportWidth()) + "px";
	else
	        elementToDrag.style.left = (e.clientX - deltaX) + "px";


	// don't move if window is already as far up as possible
	if ( (e.clientY - deltaY) > 0) // image should now be back at top
		elementToDrag.style.top = 0 + "px";
	else if ( (e.clientY - deltaY) < (1-(elementToDrag.height - Geometry.getViewportHeight())) ) // image should now be at bottom edge
        	elementToDrag.style.top = (1-(elementToDrag.height - Geometry.getViewportHeight())) + "px";
	else
		elementToDrag.style.top = (e.clientY - deltaY) + "px";


	updateAreaMarker(); // update the nav_chart appropriately

        // And don't let anyone else see this event.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }

    /**
     * This is the handler that captures the final mouseup event that
     * occurs at the end of a drag.
     **/
    function upHandler(e) {
        if (!e) e = window.event;  // IE Event Model

        // Unregister the capturing event handlers.
        if (document.removeEventListener) {  // DOM event model
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
        }
        else if (document.detachEvent) {  // IE 5+ Event Model
            elementToDrag.detachEvent("onlosecapture", upHandler);
            elementToDrag.detachEvent("onmouseup", upHandler);
            elementToDrag.detachEvent("onmousemove", moveHandler);
            elementToDrag.releaseCapture();
        }
        else {  // IE 4 Event Model
            // Restore the original handlers, if any
            document.onmouseup = olduphandler;
            document.onmousemove = oldmovehandler;
        }

	elementToDrag.style.cursor = 'auto';

        // And don't let the event propagate any further.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }
}

function navDrag(event){
    // The mouse position (in window coordinates)
    // at which the drag begins 
    var startX = event.clientX, startY = event.clientY;    

alert(startX + ", " + startY);
return;
    // The original position (in document coordinates) of the
    // element that is going to be dragged.  Since elementToDrag is 
    // absolutely positioned, we assume that its offsetParent is the
    // document body.
    var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

    // Even though the coordinates are computed in different 
    // coordinate systems, we can still compute the difference between them
    // and use it in the moveHandler() function.  This works because
    // the scrollbar position never changes during the drag.
    var deltaX = startX - origX, deltaY = startY - origY;

    // Register the event handlers that will respond to the mousemove events
    // and the mouseup event that follow this mousedown event.  
    if (document.addEventListener) {  // DOM Level 2 event model
        // Register capturing event handlers
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) {  // IE 5+ Event Model
        // In the IE event model, we capture events by calling
        // setCapture() on the element to capture them.
        elementToDrag.setCapture();
        elementToDrag.attachEvent("onmousemove", moveHandler);
        elementToDrag.attachEvent("onmouseup", upHandler);
        // Treat loss of mouse capture as a mouseup event
        elementToDrag.attachEvent("onlosecapture", upHandler);
    }
    else {  // IE 4 Event Model
        // In IE 4 we can't use attachEvent() or setCapture(), so we set
        // event handlers directly on the document object and hope that the
        // mouse events we need will bubble up.  
        var oldmovehandler = document.onmousemove; // used by upHandler() 
        var olduphandler = document.onmouseup;
        document.onmousemove = moveHandler;
        document.onmouseup = upHandler;
    }

    // We've handled this event. Don't let anybody else see it.  
    if (event.stopPropagation) event.stopPropagation();  // DOM Level 2
    else event.cancelBubble = true;                      // IE

    // Now prevent any default action.
    if (event.preventDefault) event.preventDefault();   // DOM Level 2
    else event.returnValue = false;                     // IE

    /**
     * This is the handler that captures mousemove events when an element
     * is being dragged. It is responsible for moving the element.
     **/
    function moveHandler(e) {
        if (!e) e = window.event;  // IE Event Model


	// Move the element to the current mouse position, adjusted as
        // necessary by the offset of the initial mouse-click.


	// don't move if window is already as far left or right as possible
	if ( (e.clientX - deltaX) > 0)
		elementToDrag.style.left = 0 + "px";
	else if ( (e.clientX - deltaX) < (1-(elementToDrag.width - Geometry.getViewportWidth()) ) )
		elementToDrag.style.left = 1-(elementToDrag.width - Geometry.getViewportWidth()) + "px";
	else
	        elementToDrag.style.left = (e.clientX - deltaX) + "px";


	// don't move if window is already as far up as possible
	if ( (e.clientY - deltaY) > 0) // image should now be back at top
		elementToDrag.style.top = 0 + "px";
	else if ( (e.clientY - deltaY) < (1-(elementToDrag.height - Geometry.getViewportHeight())) ) // image should now be at bottom edge
        	elementToDrag.style.top = (1-(elementToDrag.height - Geometry.getViewportHeight())) + "px";
	else
		elementToDrag.style.top = (e.clientY - deltaY) + "px";


	updateAreaMarker(); // update the nav_chart appropriately

        // And don't let anyone else see this event.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }

    /**
     * This is the handler that captures the final mouseup event that
     * occurs at the end of a drag.
     **/
    function upHandler(e) {
        if (!e) e = window.event;  // IE Event Model

        // Unregister the capturing event handlers.
        if (document.removeEventListener) {  // DOM event model
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
        }
        else if (document.detachEvent) {  // IE 5+ Event Model
            elementToDrag.detachEvent("onlosecapture", upHandler);
            elementToDrag.detachEvent("onmouseup", upHandler);
            elementToDrag.detachEvent("onmousemove", moveHandler);
            elementToDrag.releaseCapture();
        }
        else {  // IE 4 Event Model
            // Restore the original handlers, if any
            document.onmouseup = olduphandler;
            document.onmousemove = oldmovehandler;
        }

	elementToDrag.style.cursor = 'auto';

        // And don't let the event propagate any further.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }

}


var zoomlevel = 100; //start zoomed in all the way
var origImgSize=0;

// Zoomin on request
function doZoom(elementToZoom){
	if (origImgSize==0)
		origImgSize = elementToZoom.width;

	var vpwidth = Geometry.getViewportWidth(); // this is the minimum zoom width

	elementToZoom.width = vpwidth + ((zoomlevel/100) * (origImgSize - vpwidth));


} // end function doZoom

function slide(elementToSlide, evt){

    // The mouse position (in window coordinates)
    // at which the slide begins 
    var startY = evt.clientY;    

    // The original position (in document coordinates) of the
    // element that is going to be dragged.  Since elementToDrag is 
    // absolutely positioned, we assume that its offsetParent is the
    // document body.
    var origY = elementToSlide.offsetTop;

    // Even though the coordinates are computed in different 
    // coordinate systems, we can still compute the difference between them
    // and use it in the moveHandler() function.  This works because
    // the scrollbar position never changes during the slide.
    var deltaY = startY - origY;

    // Register the event handlers that will respond to the mousemove events
    // and the mouseup event that follow this mousedown event.  
    if (document.addEventListener) {  // DOM Level 2 event model
        // Register capturing event handlers
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) {  // IE 5+ Event Model
        // In the IE event model, we capture events by calling
        // setCapture() on the element to capture them.
        elementToSlide.setCapture();
        elementToSlide.attachEvent("onmousemove", moveHandler);
        elementToSlide.attachEvent("onmouseup", upHandler);
        // Treat loss of mouse capture as a mouseup event
        elementToSlide.attachEvent("onlosecapture", upHandler);
    }
    else {  // IE 4 Event Model
        // In IE 4 we can't use attachEvent() or setCapture(), so we set
        // event handlers directly on the document object and hope that the
        // mouse events we need will bubble up.  
        var oldmovehandler = document.onmousemove; // used by upHandler() 
        var olduphandler = document.onmouseup;
        document.onmousemove = moveHandler;
        document.onmouseup = upHandler;
    }

    // We've handled this event. Don't let anybody else see it.  
    if (evt.stopPropagation) evt.stopPropagation();  // DOM Level 2
    else evt.cancelBubble = true;                      // IE

    // Now prevent any default action.
    if (evt.preventDefault) evt.preventDefault();   // DOM Level 2
    else evt.returnValue = false;                     // IE

    /**
     * This is the handler that captures mousemove events when an element
     * is being dragged. It is responsible for moving the element.
     **/
    function moveHandler(e) {
        if (!e) e = window.event;  // IE Event Model


	// Move the element to the current mouse position, adjusted as
        // necessary by the offset of the initial mouse-click.  For slider
	// we only allow vertical movement.

	// don't move if slider is already as far up as possible
	if ( (e.clientY - deltaY) < 50) // slider should now be back at top
		elementToSlide.style.top = 50 + "px";
	else if ( (e.clientY - deltaY) > 448 ) // slider should now be at bottom of zoom control
        	elementToSlide.style.top = 448 + "px";
	else
		elementToSlide.style.top = (e.clientY - deltaY) + "px";
	
	// now zoom the image appropriately as well
	zoomlevel = ((e.clientY - deltaY)-50)/4;
	doZoom(document.chart);

        // And don't let anyone else see this event.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }

    /**
     * This is the handler that captures the final mouseup event that
     * occurs at the end of a slide.
     **/
    function upHandler(e) {
        if (!e) e = window.event;  // IE Event Model

        // Unregister the capturing event handlers.
        if (document.removeEventListener) {  // DOM event model
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
        }
        else if (document.detachEvent) {  // IE 5+ Event Model
            elementToSlide.detachEvent("onlosecapture", upHandler);
            elementToSlide.detachEvent("onmouseup", upHandler);
            elementToSlide.detachEvent("onmousemove", moveHandler);
            elementToSlide.releaseCapture();
        }
        else {  // IE 4 Event Model
            // Restore the original handlers, if any
            document.onmouseup = olduphandler;
            document.onmousemove = oldmovehandler;
        }

        // And don't let the event propagate any further.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }

}

var percentWidthShown = 0;
var percentHeightShown = 0;

// sets the element at the right/bottom of viewport
function setpos(elementToSet, areaMarker, bigPicture){
	// set the nav_control_bar
	var controlBar = document.getElementById("nav_control_bar");
	var vpwidth=Geometry.getViewportWidth(), vpheight=Geometry.getViewportHeight();

	controlBar.style.left = vpwidth - elementToSet.width + "px";
	if (nav_chart_open)
		controlBar.style.top = vpheight - (elementToSet.height + 20) + "px"; // change to font height?
	else
		controlBar.style.top = (vpheight - 20) + "px"; // change to font height?

	// set left,top at viewportwidth-elmt.width,viewportheight-elmt.height
	elementToSet.style.left = vpwidth - elementToSet.width + "px";
	elementToSet.style.top = vpheight - elementToSet.height + "px";

	// draw the visible-area marker in the nav chart

	// how much of the big picture is shown?
	percentWidthShown = vpwidth/bigPicture.width;
	percentHeightShown = vpheight/bigPicture.height;

	areaMarker.style.left = elementToSet.style.left;
	areaMarker.style.top = elementToSet.style.top;

	areaMarker.style.width = elementToSet.width*percentWidthShown + "px";
	areaMarker.style.height = elementToSet.height*percentHeightShown + "px";
}

// update the navigation marker on the nav_chart
function updateAreaMarker(){

	var mrkr = document.getElementById("navMarker");
	var nvChrt = document.getElementById("nav_chart");

	// doc width/img.width gives percent scrolled into the big image
	mrkr.style.left = (parseInt(nvChrt.style.left) + nvChrt.width) - ((Geometry.getDocumentWidth()/document.getElementById("chart").width)*nvChrt.width) + "px";
	mrkr.style.top = (parseInt(nvChrt.style.top) + nvChrt.height) - ((Geometry.getDocumentHeight()/document.getElementById("chart").height)*nvChrt.height) + "px";	

	var bkleft, bktop, bkright, bkbottom;

	//bkleft = (parseInt(mrkr.style.left)+1) + "px";
	//bktop = (parseInt(mrkr.style.top)+1) + "px";
	//bkright = (parseInt(mrkr.style.width)+parseInt(nvChrt.style.left)-2) + "px";
	//bkbottom = (parseInt(mrkr.style.height)+parseInt(nvChrt.style.top)-2) + "px";

	//var cliprect = "rect(" + bktop + "," + bkright + "," + bkbottom + "," + bkleft + ")";

	//document.getElementById("navMarkerBkImage").style.clip=cliprect;

	//alert(document.getElementById("navMarkerBkImage").style.clip);
}

// double clicking in the nav window should re-center the chart on the doubleclick

function reCenterOnClick(chart, evt){

	// for convenience get the nav_chart object
	var navChart = document.getElementById("nav_chart");

    // The mouse position (in nav_chart coordinates)
    // at which the chart should be recentered
    var navX = evt.clientX, navY = evt.clientY;
	navX -= parseInt(navChart.style.left);
	navY -= parseInt(navChart.style.top);


	// Find the new left and top for the big chart based on the click in the small chart

	// first determine what the 'center' point should be in the big chart
	// (i.e. translate the nav chart click to big chart coordinates
	var percentX = navX/navChart.width, percentY = navY/navChart.height;

	var chartX = percentX*chart.width, chartY = percentY*chart.height;


	// now derive the new left, top for the big chart from new chart center point
	// we must set left and top enough below 0 to show the center point in the center of the screen
	var chartLeft = -(chartX - (Geometry.getViewportWidth()/2)); // subtract left edge from 0
	var chartTop = -(chartY - (Geometry.getViewportHeight()/2)); // subtract top edge from 0
	
	// now if either left/top are above 0 (chart should never be off to left or down), only go as far as 0
	if (chartLeft > 0) chartLeft = 0;
	if (chartTop > 0) chartTop = 0;

	// similarly don't let the new values be greater than that which shows the right corner of the chart
	// squarely in frame
	if (chartLeft < -(chart.width-Geometry.getViewportWidth()) ) chartLeft = -(chart.width-Geometry.getViewportWidth());
	if (chartTop < -(chart.height-Geometry.getViewportHeight()) ) chartTop = -(chart.height-Geometry.getViewportHeight());
	
	// finally set the new chart left and top
	chart.style.left = chartLeft + "px";
	chart.style.top = chartTop + "px";

	// oh and update the area marker on the nav_chart too
	updateAreaMarker();
}

var nav_chart_open = true;
var navChartHeight = 0;


function open_close_nav_chart(){
	var navchart = document.getElementById("nav_chart");
	var vpheight = Geometry.getViewportHeight();
	var controlbar = document.getElementById("nav_control_bar");

	if (nav_chart_open){
		// resize chart to nothing
		//navChartHeight = navchart.height;
		//navchart.height = 0;
		//navchart.style.top = (vpheight-1) + "px";
		controlbar.style.top = (vpheight-37) + "px";
		controlbar.innerHTML = "Click Here to Open Nav Chart";
		//controlbar.style.textDecoration = "none";
		document.getElementById("navMarker").style.visibility = "hidden";
		navchart.style.visibility = "hidden";
		nav_chart_open = false;
	}
	else{
		//navchart.height = navChartHeight;
		//navchart.style.top = (vpheight-navchart.height) + "px";
		controlbar.style.top = (vpheight-navchart.height-20) + "px";
		controlbar.innerHTML = "Click Here to Minimize Nav Chart";
		//controlbar.style.textDecoration = "none";
		navchart.style.visibility = "visible";
		nav_chart_open = true;
		document.getElementById("navMarker").style.visibility = "visible";
		updateAreaMarker();
	}
}

// set the positions of the menu items and such -- this should be done with one div tag that can move as a group
// but the stupid fucking browsers wont do it properly

function setMenuPositions(){

	// first establish the chart links positions
	var ch11link = document.getElementById("ch11");

	if (ch11link){
		ch11link.style.left = ((Geometry.getViewportWidth()/2) - (ch11link.clientWidth/2)) + "px";
		document.getElementById("ch7").style.left = (parseInt(ch11link.style.left) - document.getElementById("ch7").clientWidth) + "px";
		document.getElementById("ch13").style.left = (parseInt(ch11link.style.left) + ch11link.clientWidth) + "px";
	}

	
	// set the elements to be visible

	document.getElementById('ch7').style.visibility = 'visible';
	document.getElementById('ch11').style.visibility = 'visible';
	document.getElementById('ch13').style.visibility = 'visible';
	document.getElementById('navMarker').style.visibility = 'visible';
	document.getElementById('order').style.visibility = 'visible';
	document.getElementById('nav_chart').style.visibility = 'visible';
	document.getElementById('nav_control_bar').style.visibility = 'visible';
	document.getElementById('clickndrag').style.visibility = 'visible';


	document.getElementById('pleasewait').style.visibility = 'hidden';


}