DashBoard.jsp

最新推荐文章于 2021-09-29 21:24:07 发布
qinxd8523
最新推荐文章于 2021-09-29 21:24:07 发布
阅读量288
点赞数
分类专栏： Others 文章标签： html
本文链接：https://blog.youkuaiyun.com/qinxd8523/article/details/12448341
版权
Others 专栏收录该内容
10 篇文章
订阅专栏
本文介绍了一个仪表板网页的设计与实现方法，重点在于如何通过Java与JavaScript结合使用来实现不同类型的元素（如网页、图片、Excel表格）按预定的时间间隔进行周期性的展示。此外，还详细介绍了如何根据不同时间段配置元素的显示与隐藏。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="java.io.InputStream"%>
<%@ page import="java.io.InputStreamReader"%>
<%@ page import="java.io.BufferedReader"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.Map"%>
<%@ page import="com.citi.dashboard.InitConf"%>
<%@ page import="com.citi.dashboard.InitConst"%>
<%@ page import="com.citi.dashboard.FindImageFile"%>

<%
	Map<String, String> map = InitConf.getProperties("conf/elementConf.properties");
	String leftElementCyclePeriod = map.get(InitConst.LEFT_ELEMENT_CYCLE_PERIOD);
	String rightElementCyclePeriod = map.get(InitConst.RIGHT_ELEMENT_CYCLE_PERIOD);
	String imageCyclePeriod = map.get(InitConst.IMAGE_CYCLE_PERIOD);
	String excelCyclePeriod = map.get(InitConst.EXCEL_CYCLE_PERIOD);
	String webRefreshPeriod = map.get(InitConst.WEB_REFRESH_PERIOD);
	String bulletinSpeed = map.get(InitConst.BULLETIN_SPEED);

	List<String> leftElements = InitConf.getConf(request.getContextPath() + "conf/leftElements.conf");
	List<String> rightElements = InitConf.getConf(request.getContextPath() + "conf/rightElements.conf");
	List<String> bulletinContent = InitConf.getConf(request.getContextPath() + "conf/bulletinContent.conf");
	List<String> leftElementShowTime = InitConf.getConf(request.getContextPath() + "conf/leftElementShowTime.conf");
	List<String> rightElementShowTime = InitConf.getConf(request.getContextPath() + "conf/rightElementShowTime.conf");
	List<String> imageShowTime = InitConf.getConf(request.getContextPath() + "conf/imageShowTime.conf");
	List<String> excelShowTime = InitConf.getConf(request.getContextPath() + "conf/excelShowTime.conf");
	List<String> bulletinShowTime = InitConf.getConf(request.getContextPath() + "conf/bulletinShowTime.conf");
	//long start = System.currentTimeMillis();
	List<String> allImages = FindImageFile.getAllImageName(request.getContextPath(), "/html/", "image/");
	//for(String name: allImages) {
    	//System.out.println(name);
    //}
	//System.out.println(System.currentTimeMillis() - start);
%>

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<head>
<title>DashBoard</title>
    <link rel="stylesheet" href="css/web-style.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/bulletin-style.css" type="text/css" media="screen" />

</head>

<body οnlοad="init()">
	<div id="mainDiv" class="div-web">
		<div id="leftMainDiv" class="div-left">
		</div>

		<div id="rightMainDiv" class="div-right">
		</div>
	</div>
  <div id="bulletinDiv" class="bulletin">
        <div id="inMar" class="inMar">
            <div id="Mar1">
            </div>
            <div id="Mar2">
            </div>
        </div>
  </div>

</body>

<script type="text/javascript" src="scripts/bulletin.js"></script>
<script type="text/javascript" src="scripts/web.js"></script>
<script type="text/javascript" src="scripts/ajax.js"></script>
<script type="text/javascript" src="scripts/globalObject.js"></script>
<script type="text/javascript" src="scripts/webObject.js"></script>

<script type="text/javascript" language="javascript">
	
	var go = new GlobalObject();
	
	if(typeof Elements == "undefined"){
    	var Elements = {
	      	LeftWeb: 0x1,
	      	RightWeb: 0x2,
	      	Image: 0x4,
	      	Excel: 0x10
    	};
    }

	// global number of webs shown per page
	// global current index of the web
	var g_leftElementIndex = 0;
	var g_rightElementIndex = 0;
	var g_imageIndex = 0;
	
	var g_leftWebDivId = "left_web_div";
	var g_leftImageDivId = "left_image_div";
	var g_leftExcelDivId = "left_excel_div";
	var g_leftExcelFrameId = "left_excel_frame";
	
	var g_rightWebDivId = "right_web_div";
	var g_rightImageDivId = "right_image_div";
	var g_rightExcelDivId = "right_excel_div";
	var g_rightExcelFrameId = "right_excel_frame";

	function S(element) {
		return document.getElementById(element);
	}

	function showElement(id) {
		var element = S(id);
		if(element && element.style) {
				element.style.display = "block";
		}
	}

	function hideElement(id) {
		var element = S(id);
		if(element && element.style) {
				element.style.display = "none";
		}
	}
	
	// Get the specified digit floating-point number
	if(!Number.prototype.toFixed) {
		Number.prototype.toFixed = function(n) {
			with(Math)
				return round(Number(this)*pow(10,n))/pow(10,n);
		};
	}
	
	function regExpTest(regExp, testString) {
		var pattern = new RegExp(regExp);
		return pattern.test(testString);
	}

	// init left elements. Element format is web@@margin-top, margin-right, margin-bottom, margin-left
	function initLeftElements() {
  		var leftElements = [];
  		var index = 0;
  		<% 	String element = "";
			for(int i=0;i<leftElements.size();++i) {
				element = leftElements.get(i);
		%>
				var str = "<%=element%>";
				if(!regExpTest("^\#+", str)) {
					var elementObject = new WebObject();
					elementObject.hasResized = false;
					var array = str.split("@@");
					if(checkArray(array)) {
						if(array.length == 2) {
							//format is web url@@margin-top, margin-right, margin-bottom, margin-left
							elementObject.src = array[0];
							var margins = array[1].split(",");
							if(checkArray(margins) && margins.length == 4) {
								elementObject.marginTop = parseInt(margins[0]);
								elementObject.marginRight = parseInt(margins[1]);
								elementObject.marginBottom = parseInt(margins[2]);
								elementObject.marginLeft = parseInt(margins[3]);
							}
						} else if(array.length == 1) {
							//format is: web url
							elementObject.src = array[0];
						}
						leftElements[index] = elementObject;
						index++;
					}
				}
		<% }
		%>
		return leftElements;
  	}
  	
  	function initRightElements() {
  		var rightElements = [];
  		index = 0;
		<% 	element = "";
			for(int i=0;i<rightElements.size();++i) {
				element = rightElements.get(i);
		%>
				var str = "<%=element%>";
				if(!regExpTest("^\#+", str)) {
					var elementObject = new WebObject();
					elementObject.hasResized = false;
					var array = str.split("@@");
					if(checkArray(array)) {
						if(array.length == 2) {
							//format is web url@@margin-top, margin-right, margin-bottom, margin-left
							elementObject.src = array[0];
							var margins = array[1].split(",");
							if(checkArray(margins) && margins.length == 4) {
								elementObject.marginTop = parseInt(margins[0]);
								elementObject.marginRight = parseInt(margins[1]);
								elementObject.marginBottom = parseInt(margins[2]);
								elementObject.marginLeft = parseInt(margins[3]);
							}
						} else if(array.length == 1) {
							//format is: web url
							elementObject.src = array[0];
						}
						rightElements[index] = elementObject;
						index++;
					}
				}
		<% }
		%>
		return rightElements;
  	}
  	
  	function initAllImages() {
  		var allImages = [];
  		index = 0;
		<% 	element = "";
			for(int i=0;i<allImages.size();++i) {
				element = allImages.get(i);
		%>
				var str = "<%=element%>";
				if(!regExpTest("^\#+", str)) {
					allImages[index] = str;
					index++;
				}
		<% }
		%>
		return allImages;
  	}
  	
  	function initLeftWebCyclePeriod() {
  		var periodArray = [];
		var element = "<%=leftElementCyclePeriod%>";
		periodArray[0] = element;
		return periodArray;
  	}
  	
  	function initRightWebCyclePeriod() {
  		var periodArray = [];
		var element = "<%=rightElementCyclePeriod%>";
		periodArray[0] = element;
		return periodArray;
  	}
  	
  	function initImageCyclePeriod() {
  		var periodArray = [];
		var element = "<%=imageCyclePeriod%>";
		periodArray[0] = element;
		return periodArray;
  	}
  	
  	function initExcelCyclePeriod() {
  		var periodArray = [];
		var element = "<%=excelCyclePeriod%>";
		periodArray[0] = element;
		return periodArray;
  	}
  	
  	function initWebRefreshPeriod() {
  		var periodArray = [];
		var element = "<%=webRefreshPeriod%>";
		periodArray[0] = element;
		return periodArray;
  	}
  	
  	function initBulletinSpeed() {
  		var bulletinSpeedArray = [];
		var element = "<%=bulletinSpeed%>";
		bulletinSpeedArray[0] = element;
		return bulletinSpeedArray;
  	}
  	
  	function initBulletinContent() {
  		var bulletinContent = [];
  		var index = 0;
		<% 	element = "";
			for(int i=0;i<bulletinContent.size();++i) {
				element = bulletinContent.get(i);
		%>
				var str = "<%=element%>";
				if(!regExpTest("^\#+", str)) {
					bulletinContent[index] = str;
					index++;
				}
		<% }
		%>
		return bulletinContent;
  	}
  	
  	function initImageShowTime() {
  		var timeIntervals = [];
  		index = 0;
		<% 	element = "";
			for(int i=0;i<imageShowTime.size();++i) {
				element = imageShowTime.get(i);
		%>
				var str = "<%=element%>";
				if(!regExpTest("^\#+", str)) {
					timeIntervals[index] = str;
					index++;
				}
		<% }
		%>
		return timeIntervals;
  	}
  	
  	function initLeftWebShowTime() {
  		var timeIntervals = [];
  		index = 0;
		<% 	element = "";
			for(int i=0;i<leftElementShowTime.size();++i) {
				element = leftElementShowTime.get(i);
		%>
				var str = "<%=element%>";
				if(!regExpTest("^\#+", str)) {
					timeIntervals[index] = str;
					index++;
				}
		<% }
		%>
		return timeIntervals;
  	}
  	
  	function initRightWebShowTime() {
  		var timeIntervals = [];
  		index = 0;
		<% 	element = "";
			for(int i=0;i<rightElementShowTime.size();++i) {
				element = rightElementShowTime.get(i);
		%>
				var str = "<%=element%>";
				if(!regExpTest("^\#+", str)) {
					timeIntervals[index] = str;
					index++;
				}
		<% }
		%>
		return timeIntervals;
  	}
  	
  	function initExcelShowTime() {
  		var timeIntervals = [];
  		index = 0;
		<% 	element = "";
			for(int i=0;i<excelShowTime.size();++i) {
				element = excelShowTime.get(i);
		%>
				var str = "<%=element%>";
				if(!regExpTest("^\#+", str)) {
					timeIntervals[index] = str;
					index++;
				}
		<% }
		%>
		return timeIntervals;
  	}
  	
  	function initBulletinShowTime() {
  		var timeIntervals = [];
  		index = 0;
		<% 	element = "";
			for(int i=0;i<bulletinShowTime.size();++i) {
				element = bulletinShowTime.get(i);
		%>
				var str = "<%=element%>";
				if(!regExpTest("^\#+", str)) {
					timeIntervals[index] = str;
					index++;
				}
		<% }
		%>
		return timeIntervals;
  	}
  	
  	function checkLeftElements(leftElementShowTime) {
  		if(!checkArray(leftElementShowTime))
  			return null;

  		if(checkTime(leftElementShowTime)) {
  			// get left elements from cache
  			if(checkArray(go.getLeftElements()))
  				return go.getLeftElements();
  			// get the elements from configuration, unit is ms
  			var leftElements = initLeftElements();
  			if(!leftElements) {
  				//alert("exception occurs when initial left elements");
  				return null;
  			}
  			// get the cycle period of left webs from configuration, unit is ms
  			var webPeriodArray = initLeftWebCyclePeriod();
  			// default web cycle period is 2 minutes: 120 000ms
  			var period = 120000;
  			if(webPeriodArray != null && (webPeriodArray instanceof Array) && webPeriodArray.length == 1) {
  				period = webPeriodArray[0];
  			}

  			leftElements.name = Elements.LeftWeb;
  			leftElements.period = period;
  			go.setLeftElelments(leftElements);
  			return leftElements;
  		}
  		return null;
  	}
  	
  	function checkRightElements(rightElementShowTime) {
  		if(!checkArray(rightElementShowTime))
  			return null;

  		if(checkTime(rightElementShowTime)) {
  			// get right elements from cache
  			if(checkArray(go.getRightElements()))
  				return go.getRightElements();
  			// initial right elements
  			var rightElements = initRightElements();
  			if(!rightElements) {
  				//alert("exception occurs when initial right elements");
  				return null;
  			}
  			// get the cycle period of right webs from configuration, unit is ms
  			var webPeriodArray = initRightWebCyclePeriod();
  			// default web cycle period is 2 minutes: 120 000ms
  			var period = 120000;
  			if(webPeriodArray != null && (webPeriodArray instanceof Array) && webPeriodArray.length == 1) {
  				period = webPeriodArray[0];
  			}
  			rightElements.name = Elements.RightWeb;
  			rightElements.period = period;
  			go.setRightElements(rightElements);
  			return rightElements;
  		}
  		return null;
  	}
  	
  	function checkImage(imageShowTime) {
  		if(!checkArray(imageShowTime)) 
  			return null;
  		
  		if(checkTime(imageShowTime)) {
  		// get images from cache
  			if(checkArray(go.getImages()))
  				return go.getImages();
  			// initial all images
  			var allImages = initAllImages();
  			if(!allImages) {
  				alert("exception occurs when initial images");
  				return;
  			}
  			// get the cycle period of images from configuration, unit is ms
  			var imagePeriodArray = initImageCyclePeriod();
  			// default image cycle period is 2 minutes: 120 000ms
  			var period = 120000;
  			if(imagePeriodArray != null && (imagePeriodArray instanceof Array) && imagePeriodArray.length == 1) {
  				period = imagePeriodArray[0];
  			}
  			allImages.period = period;
  			allImages.name = Elements.Image;
  			go.setImages(allImages);
  			return allImages;
  		}
  		return null;
  	}
  	
  	function checkExcel(excelShowTime) {
  		if(!checkArray(excelShowTime))
  			return;
		
  		if(checkTime(excelShowTime)) {
  			// get excel images from cache
  			if(checkArray(go.getExcelImages()))
  				return go.getExcelImages();
	  		var url = "/excelimage/action";
	  		doRequestUsingGET(url, checkExcelCallBack);
  		}
  	}
  	
  	function checkExcelCallBack() {
  		if(xmlHttp.readyState == 4) {
          if(xmlHttp.status == 200) {
        	  var respText = xmlHttp.responseText;
        	  if(respText) {
        		  excelImageArray = respText.split("@@");
        		  if(checkArray(excelImageArray)) {
        			  	for(var i=0;i<excelImageArray.length;++i) {
        			  		//alert("excelImageArray ====== " + excelImageArray[i] );
        			  	}
        			  
        				// get the cycle period of excel images from configuration, unit is ms
        			  	var excelPeriodArray = initExcelCyclePeriod();
			  			// default image cycle period is 2 minutes: 120 000ms
			  			var period = 120000;
			  			if(excelPeriodArray != null && (excelPeriodArray instanceof Array) && excelPeriodArray.length == 1) {
			  				period = excelPeriodArray[0];
			  			}
        			    excelImageArray.name = Elements.Excel;
        			    excelImageArray.period = period;
        			    go.setExcelImages(excelImageArray);
        		  } else {
        			  alert("Exception occurs of the excel image array");
        		  }
        	  }
          }
      }
  	}
  	
  	function checkBulletin(bulletinShowTime) {
  		if(!checkArray(bulletinShowTime))
  			return;

  		if(checkTime(bulletinShowTime)) {
  			// get bulletin from cache
  			if(go.getBulletinSpeed() && checkArray(go.getBulletinContents())) {
  				initBulletin(go.getBulletinSpeed(), go.getBulletinContents());
  				return;
  			}

	  		var bulletinSpeed = initBulletinSpeed();
			if(checkArray(bulletinSpeed)) {
				bulletinSpeed = g_defaultSpeed;
			} 
			
			var bulletinArray = initBulletinContent();
			initBulletin(bulletinSpeed, bulletinArray);
			go.setBulletinContents(bulletinArray);
			go.setBulletinSpeed(bulletinSpeed);
  		}
  	}
  	
	function init() {
		var leftElementShowTime = initLeftWebShowTime();
  		go.setLeftElementShowTime(leftElementShowTime);
		var leftElements = checkLeftElements(leftElementShowTime);
		
		var rightElementShowTime = initRightWebShowTime();
  		go.setRightElementShowTime(rightElementShowTime);
		var rightElements = checkRightElements(rightElementShowTime);
		
		var imageShowTime = initImageShowTime();
  		go.setImageShowTime(imageShowTime);
		var images = checkImage(imageShowTime);
		
		var excelShowTime = initExcelShowTime();
  		go.setExcelShowTime(excelShowTime);
		var excelImages = checkExcel(excelShowTime);
		
		var bulletinShowTime = initBulletinShowTime();
		go.setBulletinShowTime(bulletinShowTime);
		checkBulletin(bulletinShowTime);
		
		//get next elements(webs, images, excels etc)
		var allElements = new Array();
		allElements[0] = leftElements;
		allElements[1] = rightElements;
		allElements[2] = images	;
		allElements[3] = excelImages;
		if(!go) {
			go = new GlobalObject();
		}
		go.setLeftElelments(leftElements);
		go.setRightElements(rightElements);
		go.setAllElements(allElements);
		
		initMainHtml("leftMainDiv", leftElements);
		initMainHtml("rightMainDiv", rightElements);
		
		changeElement(leftElements);
		changeElement(rightElements);
		
		changeElementCyclically();
		
		// get web refresh period, default period is 1 hour, equals 3600000ms
		var webRefreshPeriod = 3600000;
		var webRefreshArray = initWebRefreshPeriod();
		if(webRefreshArray && (webRefreshArray instanceof Array) && webRefreshArray.length == 1) {
			webRefreshPeriod = webRefreshArray[0];
		}
		setInterval(refreshWebs(leftElements, rightElements), webRefreshPeriod);
	}
	
	function initImageHtml(imageDivId, visibleFlag) {
		var html = "<div id='";
		html += imageDivId;
		html += "' style='display:";
		if(visibleFlag == true) {
			html += "block'></div>";
		} else {
			html += "none'></div>";
		}
		return html;
	}

	function changeImageHtml(parentDivId, imageDivId, src, visibleFlag) {
		//debugger;
		var div = S(parentDivId);
		if(!div) {
			alert("The div contains the image doesn't exists!");
			return;
		}
		var divWidth = div.offsetWidth;
		var divHeight = div.offsetHeight;
		
		// get the original width and height of image
		var img = new Image();
		img.src = src;
		var imgWidth = img.width;
		var imgHeight = img.height;
		img.onload = function() {
			//debugger;
			imgWidth = this.width;
			imgHeight = this.height;
			// get the ratio of image
			var widthRatio = (divWidth/imgWidth).toFixed(3);
			var heightRatio = (divHeight/imgHeight).toFixed(3);
			var min = widthRatio < heightRatio ? widthRatio : heightRatio;
			
			var newImgWidth = Math.floor(imgWidth * min);
			var newImgHeight = Math.floor(imgHeight * min);
			
			var marginTop = Math.floor((divHeight - newImgHeight)/2);
			
			var imageDiv = S(imageDivId);
			if(!imageDiv) {
				alert("Elements " + imageDivId + " doesn't exists!");
				return;
			}

			var html = "<img src='";
			html += src;
			html += "' width='";
			html += newImgWidth;
			html += "' height='";
			html += newImgHeight;
			html += "'>";
			
			imageDiv.style.margin = marginTop + "px auto";
			imageDiv.innerHTML = "";
			imageDiv.innerHTML = html;
			if(visibleFlag == true) {
				imageDiv.style.display = "block";
			} else if (visibleFlag == false) {
				imageDiv.style.display = "none";
			}
			img = null;
		};
		img = null;
	}

	function initExcelHtml(excelDivId, divClass, frameId, frameClass, visibleFlag) {
		var html = "<div id='";
		html += excelDivId;
		html += "' class='";
		html += divClass;
		if(visibleFlag == true) {
			html += "' style='display:block'>";
		} else if(visibleFlag == false) {
			html += "' style='display:none'>";
		}
		html += "<iframe id='";
		html += frameId;
		html += "' class='";
		html += frameClass;
		html += "' scrolling='no'></iframe></div>";
		
		//debugger;
		
		return html;
	}
	
	function changeExcelHtml(excelDivId, frameId, frameClass, visibleFlag, src) {
		var excelDiv = S(excelDivId);
		if(!excelDiv) {
			alert("Elements " + excelDivId + " doesn't exists!");
			return;
		}
		var frame = S(frameId);
		if(!frame) {
			alert("Elements " + frameId + " doesn't exists!");
			return;
		}
		
		var html = "<iframe id='";
		html += frameId;
		html += "' class='";
		html += frameClass;
		html += "' scrolling='no' src='";
		html += src;
		html += "'></iframe>";
		
		//debugger;
		
		excelDiv.innerHTML = "";
		excelDiv.innerHTML = html;
		
		if(visibleFlag == true) {
			excelDiv.style.display = "block";
		} else if (visibleFlag == false) {
			excelDiv.style.display = "none";
		}
	}	
	
	function isWeb(file) {
		var regExp = /^(http\:\/\/)|(https\:\/\/)|(HTTP\:\/\/)|(HTTPS\:\/\/)/;
		if((file instanceof WebObject) && file.src){
			file = file.src;
		}
		file = file.toLowerCase();
		if(regExp.test(file)) 
			return true;
		else
			return false;
	}
	
	function isImage(file) {
		var regExp = /\.(gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG)$/;
		//file = file.toLowerCase();
		if(regExp.test(file))
			return true;
		else
			return false;
	}
	
	function isExcel(file) {
		var regExp = /\.(xls)|(xlsx)|(XLS)|(XLSX)$/;
		file = file.toLowerCase();
		if(regExp.test(file)) 
			return true;
		else
			return false;
	}
	
	function clearCycle() {
		var timeId = go.getElementCycleTimeId();
		if(timeId != null) {
			clearInterval(timeId);
			go.setElementCycleTimeId(null);
		}
	}

	function refreshWebs(leftElements, rightElements) {
		return function() {
			//debugger;
			clearCycle();
			// function refreshWebHtml(webDivId, framePrefix, frameClass, elements)
			refreshWebHtml("leftMainDiv", g_leftFramePrefix, "frame-web-left", leftElements);
			refreshWebHtml("rightMainDiv", g_rightFramePrefix, "frame-web-right", rightElements);

			changeElementCyclically();
		};
	}
	
	
	function initMainHtml(divId, elements) {
		var div = S(divId);
		if(!div) {
			alert("Div element: " + divId + " doesn't exists!");
			return;
		}
		if(!elements.name) {
			alert("unknown element name : " + elements.name);
			return;
		}
		var html = "";
		switch(elements.name) {
			case Elements.LeftWeb:
			  // function initWebHtml(webDivId, framePrefix, frameClass, elements)
				html += initWebHtml(g_leftWebDivId, g_leftFramePrefix, "frame-web-left", elements);
				// initImageHtml(imageDivId, visibleFlag)
				html += initImageHtml(g_leftImageDivId, false);
				// function initExcelHtml(excelDivId, divClass, frameId, frameClass, visibleFlag)
				html += initExcelHtml(g_leftExcelDivId, "div-excel-left", g_leftExcelFrameId, "frame-excel-left", false);
				// alert("div.innerHTML ============= " + html);
				div.innerHTML = "";
				div.innerHTML = html;
				
				//resizeAllIframeWhenInit(g_leftFramePrefix, elements);
				break;
			
			case Elements.RightWeb:
			  // function initWebHtml(webDivId, framePrefix, frameClass, elements)
				html += initWebHtml(g_rightWebDivId, g_rightFramePrefix, "frame-web-right", elements);
				// initImageHtml(imageDivId, visibleFlag)
				html += initImageHtml(g_rightImageDivId, false);
				// function initExcelHtml(excelDivId, divClass, frameId, frameClass, visibleFlag)
				html += initExcelHtml(g_rightExcelDivId, "div-excel-right", g_rightExcelFrameId, "frame-excel-right", false);
				// alert("div.innerHTML ============= " + html);
				div.innerHTML = "";
				div.innerHTML = html;
				
				//resizeAllIframeWhenInit(g_rightFramePrefix, elements);
				break;
			
			default:
				return;
		}
	}
	
	function changeElement(nextElementsArray) {
			if(!checkArray(nextElementsArray)) {
				alert("Parameter 'nextElementsArray' should be an non empty array");
				return;
			}
			var nextElemName = nextElementsArray.name;
			switch(nextElemName) {
				case Elements.LeftWeb:
					if(!nextElementsArray[g_leftElementIndex].src) {
						alert("left element should contains src attribute");
						return;
					}
						
					if(isWeb(nextElementsArray[g_leftElementIndex].src)) {
						showWebFrame(nextElemName);
						showElement(g_leftWebDivId);
						hideElement(g_leftImageDivId);
						hideElement(g_leftExcelDivId);
					} else if(isImage(nextElementsArray[g_leftElementIndex].src)) {
						//function changeImageHtml(parentDivId, imageDivId, src, visibleFlag)
						changeImageHtml("leftMainDiv", g_leftImageDivId, nextElementsArray[g_leftElementIndex].src, true);
						hideElement(g_leftWebDivId);
						hideElement(g_leftExcelDivId);
					} else if(isExcel(nextElementsArray[g_leftElementIndex].src)) {
						// function changeExcelHtml(excelDivId, frameId, frameClass, visibleFlag, src)
						changeExcelHtml(g_leftExcelDivId, g_leftExcelFrameId, "frame-excel-left", true, nextElementsArray[g_leftElementIndex].src);
						hideElement(g_leftWebDivId);
						hideElement(g_leftImageDivId);
					} else {
						return;
					}
					g_leftElementIndex++;
					if(g_leftElementIndex >= nextElementsArray.length) {
						g_leftElementIndex = 0;
					}
					break;
				
				case Elements.RightWeb:
					if(!nextElementsArray[g_rightElementIndex].src) {
						alert("right element should contains src attribute");
						return;
					}
					if(isWeb(nextElementsArray[g_rightElementIndex].src)) {
						showWebFrame(nextElemName);
						showElement(g_rightWebDivId);
						hideElement(g_rightImageDivId);
						hideElement(g_rightExcelDivId);
					} else if(isImage(nextElementsArray[g_rightElementIndex].src)) {
						//function changeImageHtml(parentDivId, imageDivId, src, visibleFlag)
						changeImageHtml("rightMainDiv", g_rightImageDivId, nextElementsArray[g_rightElementIndex].src, true);
						hideElement(g_rightWebDivId);
						hideElement(g_rightExcelDivId);
					} else if(isExcel(nextElementsArray[g_rightElementIndex].src)) {
						// function changeExcelHtml(excelDivId, frameId, frameClass, visibleFlag, src)
						changeExcelHtml(g_rightExcelDivId, g_rightExcelFrameId, "frame-excel-right", true, nextElementsArray[g_rightElementIndex].src);
						hideElement(g_rightWebDivId);
						hideElement(g_rightImageDivId);
					} else {
						return;
					}
					g_rightElementIndex++;
					if(g_rightElementIndex >= nextElementsArray.length) {
						g_rightElementIndex = 0;
					}
					break;
					
				case Elements.Image:
					//debugger;
					var randomAlternativeSide = Math.floor(Math.random()*2);
					// show image in left iframe
					if(randomAlternativeSide == 0) {
						if(isImage(nextElementsArray[g_imageIndex])) {
							//function changeImageHtml(parentDivId, imageDivId, src, visibleFlag)
							changeImageHtml("leftMainDiv", g_leftImageDivId, nextElementsArray[g_imageIndex], true);
							hideElement(g_leftWebDivId);
							hideElement(g_leftExcelDivId);
						}
						g_imageIndex++;
						if(g_imageIndex >= nextElementsArray.length) {
							g_imageIndex = 0;
						}
					} else if(randomAlternativeSide == 1) {
						if(isImage(nextElementsArray[g_imageIndex])) {
							//function changeImageHtml(parentDivId, imageDivId, src, visibleFlag)
							changeImageHtml("rightMainDiv", g_rightImageDivId, nextElementsArray[g_imageIndex], true);
							hideElement(g_rightWebDivId);
							hideElement(g_rightExcelDivId);
						}
						g_imageIndex++;
						if(g_imageIndex >= nextElementsArray.length) {
							g_imageIndex = 0;
						}
					}
					break;
				
				case Elements.Excel:
					var randomAlternativeSide = Math.floor(Math.random()*2);
					// show image in left iframe
					var currentIndex = go.getExcelIndex();
					if(randomAlternativeSide == 0) {
						if(isImage(go.excelImages[currentIndex])) {
							//function changeImageHtml(parentDivId, imageDivId, src, visibleFlag)
							changeImageHtml("leftMainDiv", g_leftImageDivId, go.excelImages[currentIndex], true);
							hideElement(g_leftWebDivId);
							hideElement(g_leftExcelDivId);
						}
						var nextIndex = currentIndex + 1;
						if(nextIndex >= go.getExcelImages().length) {
							go.setExcelIndex(0);
						} else {
							go.setExcelIndex(nextIndex);
						}
					} else if(randomAlternativeSide == 1) {
						if(isImage(go.excelImages[go.getExcelIndex()])) {
							//function changeImageHtml(parentDivId, imageDivId, src, visibleFlag)
							changeImageHtml("rightMainDiv", g_rightImageDivId, go.excelImages[go.getExcelIndex()], true);
							hideElement(g_rightWebDivId);
							hideElement(g_rightExcelDivId);
						}
						var nextIndex = currentIndex + 1;
						if(nextIndex >= go.getExcelImages().length) {
							go.setExcelIndex(0);
						} else {
							go.setExcelIndex(nextIndex);
						}
					}
					break;
				
				default:
					alert("haven't support this kind of element yet");
					return;
			}
	}
	
	function changeElementCyclically() {
		var nextElementsArray = [];
			try {
				var leftElements = checkLeftElements(go.getLeftElementShowTime());
				var rightElements = checkRightElements(go.getRightElementShowTime());
				var images = checkImage(go.getImageShowTime());
				var excelImages = checkExcel(go.getExcelShowTime());
				
				var allElements = [leftElements, rightElements, images, excelImages];
				go.setAllElements(allElements);
				
				nextElementsArray = nextShownElement(allElements);
				if(!nextElementsArray.period) {
					alert("element period is unknown");
					return;
				}
				clearCycle();
				changeElement(nextElementsArray);
			} catch (e) {
				alert("Exception occurs when elements cycles");
			} finally {
				var period = 10000;
				if(nextElementsArray.period)
					period = nextElementsArray.period;
				var timeId = setInterval(changeElementCyclically, parseInt(period));
				go.setElementCycleTimeId(timeId);
			}
	}

	// return the ARRAY of the elements, which will be shown next period
	// elements contains [left-elements, right-elements]
	// the array has a name attribure, which spedify the element
	function nextShownElement(allElements) {
		if(!checkArray(allElements)) {
			alert("The parameters of allElements should be valid array");
			return;
		}
		var length = allElements.length;
		var totalElementNum = 0;
		for(var i=0;i<length;++i) {
			if(checkArray(allElements[i])) {
				totalElementNum += allElements[i].length;
			}
		}
		nextIndex = Math.floor(Math.random()*totalElementNum);
		var sum = 0;
		for(var i=0;i<length;++i) {
			if(!checkArray(allElements[i]))
				continue;
			if(nextIndex >= sum-1 && nextIndex< sum+allElements[i].length) {
				return allElements[i];
			}
			sum += allElements[i].length;
		}
	}
	
	function checkArray(array) {
		if(array == undefined || array == null || !(array instanceof Array) || array.length == 0)
			return false;
		return true;
	}
	
	// time interval format["8:30-12:00", "15:00-16:00"]
	function checkTime(times) {
		if(!checkArray(times)) {
			alert("Exception of time interval configuration");
			return false;
		}
		try {
			for(var i=0;i<times.length;++i) {
			    var now = new Date();
			    var current = parseInt(now.getHours()) * 60 + parseInt(now.getMinutes());
			    var beginEnd = times[i].split('-');
			    var begin = beginEnd[0].split(":");
			    var end = beginEnd[1].split(":");
			    var b = parseInt(begin[0]) * 60 + parseInt(begin[1]);
			    var e = parseInt(end[0]) * 60 + parseInt(end[1]);
			    if (current >= b && current <= e) {
			    	return true;
			    }
			    else 
			    	continue;
			}
			return false;
		} catch (e) {
			alert(e.message);
		}
	}
	
	

</script>
</html>