jitk_layout.js

esri的ArcGIS Server超级学习模板程序（for java）

//START APPLICATION SETTINGS
//There are no hard-coded size values outside of this block and the stylesheet.
//There should be no need to modify the code outside of this section. 

//EVERYTHING BUT THE MAP
var notMap = 340;

//EVERYTHING BUT THE SIDEBAR PANEL
var notPanel = 100;
var jitkHeaderHeight;

var jitkDefaultAccordionWidth = 300;

//SOME STARTING VALUE
var winH = 0;

//THE BOTTOM MARGIN OF THE PAGE
var bottomMargin = 5;

//STARTING VALUE FOR THE HEIGHT OF THE RESULTS BOX. THIS IS THE AREA THAT SCALES
var resultsBoxH = 176;

//THE HEIGHT OF OTHER RESULTS BOX CONTENT THAT DOESN'T SCALE (TABS, BORDER, MARGIN, ETC.)
//var resultsOtherH = 53;
var resultsOtherH = 23;

//MAP HEADER HEIGHT
var mapHeaderH = 30;

//INITIAL LEFT PANEL WIDTH
var leftPanel = 300;


//INCLUDES SCALE BAR AND CONTROLS TO THE RIGHT OF THE TOOLBAR
var toolbarW = 76;

//THE HEIGHT (INCLUDING MARGIN) OF A COLLAPSED accordion
var accordionHeight = 27;

//USE SMOOTHSWAP AND SMOOTHMODIFY FUNCTIONS 'true|false'
var useAnimation = 'false';

//USE DRAGGABLE BORDERS BETWEEN ACCORDIONS AND RESULTS 'true|false'
var useActiveBorders = 'true';


var overviewMapSpaceHeight = 235;

//HEIGHT OF THE OVERVIEW MAP ITSELF
var overviewMapHeight = 160;


var targ;

var jitkViewer_nonMapHeight = 141;
var jitkViewer_nonMapWidth = 372;
var jitkViewer_zeroSize = 0;
var jitkViewer_mapBorderWidth = 13;
var jitkViewer_resizeCounter = 0;
var jitkViewer_rightBuffer = 275; // Buffer to leave on right when sliding the toolbar right

// this global array is used to store the selected tab of any given task window
var jitkTaskWindowSelectedTabs = new Array();

//INITIALIZE SOME VARIABLES WE'LL NEED LATER
var leftItemsW = leftPanel + toolbarW;
var newMapHeight = 0;
var newHeight = resultsBoxH;
var v_startpos, v_diffpos=0;
var h_startpos, h_diffpos=0;
var v_allowed = false;
var h_allowed = false;
var showResults = true;
var iInitAccordianWidth = 0;
var init_leftPanel = leftPanel;
var init_overviewMapSpaceHeight = overviewMapSpaceHeight;

//ARE WE USING EXPLORER?
var isIE = navigator.appName.indexOf("Microsoft")!=-1;

// MG: remove flickering of background images that appears when hovering a link
try {
	document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}

//ABSTRACTED CONNECT EVENT FUNCTION FOR ANY BROWSER
function connectEvent(element, event, handler) {
	if (isIE) {
		element.attachEvent("on" + event, handler);
	} else {
		element.addEventListener(event, handler, false);
	}
}

//ABSTRACTED DISCONNECT EVENT FUNCTION FOR ANY BROWSER
function disconnectEvent(element, event, handler) {
	if (isIE) {
		element.detachEvent("on" + event, handler);
	} else {
		element.removeEventListener(event, handler, false);
	}
}	


function updateOV(ovWidth, actionOV) {
	
	var ovWdLeft = (leftPanel - ovWidth )/2;   
    if (ovWdLeft < 0) ovWdLeft = - ovWdLeft; 
    
   	if(actionOV!=null && actionOV == "reset") {
	   	document.getElementById("overviewMap").style.padding = "0px 0px";
	   	document.getElementById("overviewMapBox").style.padding = "5px 6px 5px 6px";
   	} else {
   		//document.getElementById("overviewMap").style.left = 5 + ovWdLeft  +  "px";
		//document.getElementById("overviewMap").style.width = "274px";
		document.getElementById("overviewMapBox").style.padding = "5px 6px 204px";
	
    }

            	
}

//
// Purpose: Resizes map width and height.
//
function jitkViewer_resizeMap(iWidth, iHeight) {
	var map = EsriControls.maps['map1'];
	
  	if (iWidth != map.bounds.width || iHeight != map.bounds.height) {
    	map.resize(iWidth, iHeight);
	}
}

//
// Purpose: Resize map width only.
//
function jitkViewer_resizeMapWidth(iWidth) {
	var map = EsriControls.maps['map1'];
	
  	if (iWidth != map.bounds.width) {
  		var iHeight = map.bounds.height;
    	map.resize(iWidth, iHeight);
	}
}



//
// Purpose: Resize map height only.
//
function jitkViewer_resizeMapHeight(iHeight) {
	var map = EsriControls.maps['map1'];
	
  	if (iHeight != map.bounds.height) {
  		var iWidth = map.bounds.width;
    	map.resize(iWidth, iHeight);
	}
}



//
// Purpose: Resizes map width and height.
//
function jitkViewer_addMapHeight(iHeightDiff) {
	var map = EsriControls.maps['map1'];
	
  	if (iHeightDiff != 0) {
  		var iHeight = map.bounds.height + iHeightDiff;
  		var iWidth = map.bounds.width;  	
    	map.resize(iWidth, iHeight);
	}
}

//
// Purpose: Add the following value to the map width.
//
function jitkViewer_addMapWidth(iWidthDiff) {
	var map = EsriControls.maps['map1'];
	
  	if (iWidthDiff != 0) {
  		var iHeight = map.bounds.height;
  		var iInitWidth = map.bounds.width + iWidthDiff;
    	map.resize(iInitWidth, iHeight);
	}
}

function hEndPos(p) {
	if (h_allowed) {
		h_allowed = false; 
		
		var sEndAccordianWidth = document.getElementById("accordions").style.width
		var iEndAccordianWidth = sEndAccordianWidth.substring(0, sEndAccordianWidth.indexOf("px"));
		var iWidthDiff = iInitAccordianWidth - iEndAccordianWidth;		
		var sEndAccordianWidth = document.getElementById("accordions").style.width		
		jitkViewer_addMapWidth(iWidthDiff);							
	}	      
	return false;
}


//STORES THE STARTING DRAG VALUE FOR HBAR (BETWEEN LEFT PANELS AND MAP)
function hPosition(p) {

	var sInitAccordianWidth = document.getElementById("accordions").style.width
	iInitAccordianWidth = sInitAccordianWidth.substring(0, sInitAccordianWidth.indexOf("px"));
	//document.onmouseup = new Function("h_allowed = false; return false;")
	document.onmouseup = hEndPos;
	document.onmousemove = hNewPos;
	if (!document.all){
	     h_startpos = p.screenX + h_diffpos;
	}    
	else{
	   h_startpos = event.clientX + h_diffpos;
	}
	   h_allowed = true;
	return false;
}


//OPENS OR CLOSES THE OVERVIEW MAP AND THE SPACE IT SITS IN, RE-SCALES THE ACCORDIONS TO FIT
function setOverviewMap(status) {
	var ie6Adjustment = 0;
	if (jQuery.browser.msie) {
		if (parseInt(jQuery.browser.version,10) == 6) {
			ie6Adjustment = 7;
		} else if (parseInt(jQuery.browser.version,10) == 7) {
			ie6Adjustment = 4;	
		}
	}
	if (status == "open"){
		overviewMapSpaceHeight = init_overviewMapSpaceHeight;
		document.getElementById('overviewMapContainerPanel').style.display = "block";
		scaleboxes();
	} 
	if (status == "closed"){
	  	overviewMapSpaceHeight = 0;
		document.getElementById('overviewMapContainerPanel').style.display = "none";
		newHeight = (winH - notPanel - ie6Adjustment);
		resizeAccordions(newHeight);
		//scaleboxes();
	}
	if (status == "min"){
		if(overviewMapSpaceHeight == init_overviewMapSpaceHeight){
	  		overviewMapSpaceHeight = 10;
			currentHeight = (winH - notPanel) - init_overviewMapSpaceHeight;
			newHeight = (winH - notPanel - ie6Adjustment) - overviewMapSpaceHeight;
			resizeAccordions(newHeight);
		}
	}
	if (status == "max"){
		if(overviewMapSpaceHeight != init_overviewMapSpaceHeight){
			currentHeight = (winH - notPanel) - overviewMapSpaceHeight;
			newHeight = (winH - notPanel - ie6Adjustment) - init_overviewMapSpaceHeight;
		  	overviewMapSpaceHeight = init_overviewMapSpaceHeight;
			resizeAccordions(newHeight);
		}
	}
}



//ADJUSTS WIDTH OF ACCORDIONS WITH HBAR DRAG
//MAP AND RESULTS RESIZE NATURALLY TO FIT AVAILABLE WIDTH.
function hNewPos(p) {

	var iWinWidth = 0;
	var pageBounds = EsriUtils.getPageBounds();
	var iMaxXPos = pageBounds.width - jitkViewer_rightBuffer;
	
	if (h_allowed) {
		if (navigator.appName == "Netscape") {
			h_endpos = p.screenX;
			iWinWidth = window.innerWidth;
		}
		
		if (navigator.appName.indexOf("Microsoft") != -1) {
			iWinWidth = document.body.offsetWidth;
			h_endpos = event.clientX;
		}
		
		var iWidthWithoutLeftPanel = iWinWidth - leftItemsW;
		var iPrevDiffPos = h_diffpos;
		h_diffpos = h_startpos - h_endpos;
		
		// If the bar has not been moved beyond the maximum point to the right
		if ( (-h_diffpos < iWidthWithoutLeftPanel)  
			&& (h_diffpos < leftPanel) 
			&& (h_endpos < iMaxXPos) ) {
			
			document.getElementById("accordions").style.width = leftPanel - h_diffpos + "px";
			
			var rightPanelLeft = $("#accordions").width() + $("#toolbar").width() + $("#vbar").width();
			$("#rightPanel").css("left",rightPanelLeft);
			if (h_diffpos <=0) updateOV(leftPanel - h_diffpos);
			
		}
		else {
			h_diffpos = iPrevDiffPos;
		}
	}
}


//SNAPS THE LEFT PANEL OPEN TO "P" VALUE PASSED IN.
//USED BY "MINIMIZE" AND "OPEN-WIDE" CONTROL BUTTONS
function hPositionJump(p) {

	var newAccordionWidth = parseInt(p,10);
	var accordionWidth = $("#accordions").width();
	var accordionWidthDiff = accordionWidth - newAccordionWidth;
	
	if (accordionWidthDiff != 0) {
		jitkViewer_addMapWidth(accordionWidthDiff);
	
		var mapDisclaimerWidth = $("#mapDisclaimer").width();
		var toolbarWidth = $("#toolbar").width();
		var vbarWidth = $("#vbar").width();
		var mapContainerWidth = $("#mapContainer").width();
		var mapWidth = EsriControls.maps['map1'].bounds.width;
		var mapSpacingWidth = mapContainerWidth - mapWidth;
		//var windowWidth = $(document).width();
		var windowWidth = $("#topmenu").outerWidth({margin:true});
		var notMapWidth = newAccordionWidth + toolbarWidth + vbarWidth + mapSpacingWidth + 1;
		var rightPanelLeft = newAccordionWidth + toolbarWidth + vbarWidth;
	
		var newMapWidth = windowWidth - notMapWidth;
		var newMapContainerWidth = newMapWidth + mapSpacingWidth;
		
		$("#rightPanel").css("left",rightPanelLeft);
	
		$("#map > div").width(newMapWidth);
		$("#mapDisclaimer").width(mapDisclaimerWidth);
		$("#mapContainer").width(newMapContainerWidth);
		$("#mapHeader").width(newMapContainerWidth);
		
		$("#resultsBox").width(newMapWidth-1);
		$("#resultsContainer").width(newMapContainerWidth);
	
		if (newAccordionWidth == 0) {
			$("#accordions").width(newAccordionWidth);
			$("#accordions").hide();
		} else {
			$("#accordions").width(newAccordionWidth);
			updateOV(newAccordionWidth);
			$("#accordions").show();
		}
			
		h_allowed = false;
	}
	return false;
}


//HIDES OR SHOWS THE LEFT PANEL ITEMS BASED ON "P" VALUE PASSED IN.
//THIS IS USED BY THE CLOSE (X) BUTTON AND THE REOPEN PANEL MENU ITEM
function accordDisplay(p) {
	switch (p) {
		case "none":
			return hPositionJump(0);
			break;
		case "reset":
			return hPositionJump(jitkDefaultAccordionWidth);
			break;
		case "max":
			return hPositionJump(400);
			break;
		case "min":
			return hPositionJump(0);
			break;
	}
}



//FUNCTIONS FOR RESULTS AREA DISPLAY BUTTONS
function jitkViewer_displayResults(p) {
	if (p == "none"){
		//document.getElementById("map").style.display = "block";
		document.getElementById("mapHeader").style.display = "block";
		document.getElementById("mapContainer").style.display = "block";
		document.getElementById("resultsBox").style.display = p;
		document.getElementById("resultsContainer").style.display = p;
		document.getElementById("hbar").style.display = p;
		showResults = false;
		mapHeight = winH - notPanel - mapHeaderH;
		smoothModify('map', 'height', document.getElementById("map").style.height.slice(0, -2), mapHeight, 100);
		
		jitkViewer_resizeMapHeight(mapHeight);
	}
else	if (p == "block"){
		//document.getElementById("map").style.display = "block";
		document.getElementById("mapHeader").style.display = "block";
		document.getElementById("mapContainer").style.display = "block";
		document.getElementById("resultsContainer").style.display = "block";
		document.getElementById("resultsBox").style.display = "block";
		document.getElementById("hbar").style.display = "block";
		showResults = true;
		mapHeight = winH - notMap - v_diffpos;
		smoothModify('map', 'height', document.getElementById("map").style.height.slice(0, -2), mapHeight, 100);
		
		jitkViewer_resizeMapHeight(mapHeight);
	}
else	if (p == "max"){
		setTimeout("document.getElementById('mapHeader').style.display = 'none'", 800);
		setTimeout("document.getElementById('mapContainer').style.display = 'none'", 800);
		showResults = true;
		mapHeight = winH - notMap - v_diffpos;
		v_diffpos = v_diffpos + mapHeight + mapHeaderH + bottomMargin;
		mapHeight = 0;
		if(document.getElementById("resultsBox").style.height.slice(0, -2) != "") {
			rFrom = document.getElementById("resultsBox").style.height.slice(0, -2);
		} else {
			rFrom = 0;
		}
		smoothModify('map', 'height', document.getElementById("map").style.height.slice(0, -2), mapHeight, 100);
		smoothModify('resultsBox', 'height', rFrom, resultsBoxH + v_diffpos, 100);
	}
else	if (p == "min"){
		document.getElementById("map").style.display = "block";
		document.getElementById("mapHeader").style.display = "block";
		document.getElementById("mapContainer").style.display = "block";
		showResults = true;
		mapHeight = (winH - notMap) - v_diffpos;
		resultsAreaH = resultsBoxH + resultsOtherH + v_diffpos;
		v_diffpos =  v_diffpos - resultsAreaH;
		mapHeight = mapHeight + resultsAreaH;
		if(document.getElementById("map").style.height.slice(0, -2) != "") {
			mFrom = document.getElementById("map").style.height.slice(0, -2);