//面对象设计
var gui = new Object(); // 名字空间
gui.guibox = function(event,boxid,titlestr,pageurl)
{
	var e = e||event; 
	//var posx  =  e.clientX  +  window.document.documentElement.scrollLeft;
	//var posy  =  e.clientY  +  window.document.documentElement.scrollTop;
	var posx =  100+window.document.documentElement.scrollLeft;
	var posy =  100+window.document.documentElement.scrollTop;
	var guibox = document.createElement("div");
	var pageframe = document.createElement("iframe");
	var title = document.createElement("div");
	var content = document.createElement("div");
	var closebutton = document.createElement("div");
	
	guibox.appendChild(title);
	guibox.appendChild(content);
	guibox.appendChild(closebutton);
	
	content.appendChild(pageframe);
	
	//dialog define
	guibox.id = boxid;
	guibox.style.width = "600px";
	guibox.style.height = "300px";
	guibox.style.position = "absolute";
	guibox.style.zIndex = "1000";
	guibox.style.left = posx;
	guibox.style.top = posy;
	guibox.style.display = "block";
	guibox.style.background = "#ffffff";
	guibox.style.border = "1px solid  #cccccc";
	guibox.style.padding = "5px";
	//title define
	title.style.background = "#CCCCCC";
	title.style.padding = "3px";
	title.style.fontWeight = "bold";	
	//iframe define
	pageframe.frameBorder = "0";
	pageframe.width = "580";
	pageframe.height = "250";
	pageframe.scrolling = "no";
	pageframe.src = pageurl;
	
	//content define
	content.style.margin = "3px";
	
	//closebutton define
	closebutton.style.margin = "3px";
	closebutton.style.cursor = "pointer";
	
	closebutton.onclick = function(){
		   var guibox = document.getElementById(boxid);
		   document.body.removeChild(guibox);
		   return;
	}
       	
	title.innerHTML = titlestr;
	closebutton.innerHTML = "[关闭]";
	
	document.body.appendChild(guibox);
	guibox.style.display = "block";

}
gui.closebox = function(boxid)
{
	var box  = document.getElementById(boxid);

	window.location.reload();
	return;
}

//
gui.scrollhiddenlist = function(boxid,buttonforward,buttonback,showcount,stepcount)
{
    var scrolllist = document.getElementById(boxid);
    var btnforward = document.getElementById(buttonforward);
    var btnback = document.getElementById(buttonback);
    
    var cursor = 0;
    
    var listitem = scrolllist.getElementsByTagName("li");
    var isitemless = listitem.length<showcount;
    
    displayitembycursor(listitem,0);
    
    if(!isitemless){
        btnforward.onclick = function(){
            if(cursor+showcount < listitem.length)
                displayitembycursor(listitem,++cursor);
        }
        btnback.onclick = function(){
            if(cursor > 0)
                displayitembycursor(listitem,--cursor);
        }
    }
    function displayitembycursor(list,cur){
    //隐藏所有元素
        for(var i = 0; i<list.length; i++){
            list[i].style.display = "none";
        }
        //显示指定数目的元素并且计算浮标
        var listlength = isitemless?list.length:showcount;
        for(var i = 0+cur; i<listlength+cur; i++){
            list[i].style.display = "block";
        }
    }
}
