JSTable=function(_containerName)
{
    var _container=document.getElementById(_containerName);
    //_container.style.border="solid 1px black";
    var _self=this;
    var _title=new Array();
    var _items=new Array();
    var _mouseY;
    var _sliderTop=22;
    var _sliderBottom;
    var _items=null;
    var _startIndex=0;
    var count=5;
    var length=0;
    var _tempY=0;
    
    var bodyTable=document.createElement("table");
    bodyTable.id=_containerName+"_body";
    bodyTable.style.backgroundColor="white";
    bodyTable.cellPadding=0;
	bodyTable.cellSpacing=0;
	bodyTable.style.border="solid 1px black";
	bodyTable.style.styleFloat="left";
	bodyTable.style.width=parseInt(_container.style.width)-22;
	bodyTable.onmousewheel=function()
	{
	    if(event.wheelDelta>0)
	    {
	        _self.moveUp(1);
	        _self.refreshSlider();
	    }
	    else if(event.wheelDelta<0)
	    {
	        _self.moveDown(1);
	        _self.refreshSlider();
	    }	    
	};
    _container.appendChild(bodyTable);
    
    var sliderDiv=document.createElement("div");
    sliderDiv.id="_slider";
    sliderDiv.style.background="#E5E5E5";
    sliderDiv.style.border="2px #717171 solid";
    sliderDiv.style.borderTopColor="#FFFFFF";
    sliderDiv.style.borderLeftColor="#FFFFFF";
    sliderDiv.style.width="16px";
    sliderDiv.style.top=0;
    sliderDiv.style.position="absolute";
    sliderDiv.style.right="0px";
    sliderDiv.style.fontSize="0px";
    sliderDiv.onclick=function()
    {
        event.cancelBubble = true   
    };
    sliderDiv.onmousemove=function()
    {
        if(event.button==1&&_mouseY!=null)
        {
            _tempY=event.clientY-_mouseY-parseInt(this.style.top);
            if(parseInt(this.style.top)+_tempY>=0&&parseInt(this.style.top)+_tempY<=_sliderBottom)
            {
                this.style.top=parseInt(this.style.top)+_tempY;
                _self.refreshTable();
            }
        }
    };
    sliderDiv.onmouseup=function()
    {
        this.releaseCapture();
    };
    sliderDiv.onmousedown=function()
    {    
        _mouseY=event.clientY-this.style.pixelTop;
        this.setCapture();
    };

    
    var scrollBar=document.createElement("div");
    scrollBar.id=_containerName+"_scrollBar";
    scrollBar.style.background="#FFFFFF";
    scrollBar.style.styleFloat="right";
    scrollBar.style.width="21px";
    scrollBar.style.borderWidth="1px";
    scrollBar.style.borderStyle="solid";
    scrollBar.style.borderColor="black";
    scrollBar.style.position="absolute"; 
    scrollBar.style.top=_sliderTop;
    scrollBar.style.right="0px";
    scrollBar.onclick=function()
    {
        if(event.clientY<(sliderDiv.offsetTop+scrollBar.offsetTop+_container.offsetTop+1))
        {
            if(_startIndex<count)
            {
                _self.moveTo(0);
            }
            else
            {
                _self.moveUp(count);
            }
            _self.refreshSlider();
        }
        else if(event.clientY>(sliderDiv.offsetTop+sliderDiv.offsetHeight+scrollBar.offsetTop+_container.offsetTop+1))
        {
            if(_startIndex>(length-count*2))
            {
                _self.moveTo(length-count);
            }
            else
            {
                _self.moveDown(count);
            }
            _self.refreshSlider();
        }
    };
   
    var statusImage=document.createElement("image");
    statusImage.id="status";
    statusImage.src="images/button_sx.jpg";
    statusImage.style.styleFloat="left";
    statusImage.style.position="absolute";
    //statusImage.style..="solid 1px black";
    statusImage.onclick=function()
    {
        if(this.src.match(/sx/)!=null)
        {
            bodyTable.style.display="none";
            scrollBar.style.display="none";
            this.src="images/button_hy.jpg";
            this.style.top="";
            this.style.bottom="0px";
        }
        else if(this.src.match(/hy/)!=null)
        {
            bodyTable.style.display="block";
            scrollBar.style.display="block";
            this.src="images/button_sx.jpg";
            this.style.top="0px";
        }
        event.cancelBubble = true;
    };
    statusImage.onmousemove=function()
    {
        if(this.src.match(/sx/)!=null)
        {
            this.src="images/button_sx_on.jpg";
        }
        else if(this.src.match(/hy/)!=null)
        {
            this.src="images/button_hy_on.jpg";
        }
    };
    statusImage.onmouseout=function()
    {
        if(this.src.match(/sx/)!=null)
        {
            this.src="images/button_sx.jpg";
        }
        else if(this.src.match(/hy/)!=null)
        {
            this.src="images/button_hy.jpg";
        }
    };
    _container.appendChild(statusImage);
    scrollBar.appendChild(sliderDiv);
    _container.appendChild(scrollBar);
    this.initlize=function(title,items){
        if(items==null)
        {
            length=0;
        }
        else
        {   
            length=items.length;
            _items=items;
        }
        bodyTable.insertRow();
        var i;
        var j;
        for(i=0;i<title.length;i++)
        {
            bodyTable.rows[0].insertCell();
            bodyTable.rows[0].cells[i].innerHTML=_self.formatText(title[i].caption);
            _title.push(title[i].value);
        }
        
        var statusImage=document.createElement("image");
        statusImage.id="status";
        statusImage.src="images/button_sx.jpg";

        for(i=0;i<count;i++)
        {
            bodyTable.insertRow();
            bodyTable.rows[i+1]
            for(j=0;j<_title.length;j++)
            {
                bodyTable.rows[i+1].insertCell();
                bodyTable.rows[i+1].onmousemove=function()
                {
                    this.style.backgroundColor="#EAEAEA";
                };
                bodyTable.rows[i+1].onmouseout=function()
                {
                    this.style.backgroundColor="";
                }
                bodyTable.rows[i+1].onclick=function()
                {
                    addSingleMark(this.x,this.y,"震级："+this.cells[2].innerText+"&#10震源："+this.cells[1].innerText);
                }
                bodyTable.rows[i+1].cells[j].innerHTML=_self.formatText(eval("items[i]."+_title[j]));
                if(j==_title.length-1)
                {
                    bodyTable.rows[i+1].x=eval("items[i].x");
                    bodyTable.rows[i+1].y=eval("items[i].y");
                }
            }
        }
        scrollBar.style.height=parseInt(bodyTable.offsetHeight-24);
        sliderDiv.style.height=parseFloat((bodyTable.offsetHeight-statusImage.offsetHeight))*count/length;
        _sliderBottom=parseInt(scrollBar.offsetHeight)-parseInt(sliderDiv.style.height)-8;
        _container.style.height=bodyTable.offsetHeight;
        
    };
    this.addItem=function(item)
    {
        if(_items!=null)
        {
            _items.push(item);
            length++;
        }
    };
    this.formatText=function(strInnerText)
    {
        if(strInnerText==null)
        {
            return "<font face='Arial' color='black' size='2'>---</font>"
        }
        return "<font face='Arial   ' color='black' size='2'>"+strInnerText+"</font>";
    };
    this.moveDown=function(unit)
    {   
        if(_startIndex+unit+count>length)
        {
            return;
        }
        else if(_startIndex+unit==length-1)
        {
            _self.moveTo(length-1);
        }
        else if(_startIndex+unit<length-1)
        {
            _self.moveTo(_startIndex+unit);
        }
    };
    this.moveUp=function(unit)
    {
        if(_startIndex>0)
        {
            var index;
            if(_startIndex-unit>=0)
            {
                index=_startIndex-unit;
            }
            else if(_startIndex-unit<0)
            {
                index=_startIndex;
            }
            window.status=index;
            _self.moveTo(index);
        }
    };
    this.moveTo=function(index)
    {
        _startIndex=index;
        for(var i=0;i<count;i++)
        {
            for(var j=0;j<bodyTable.rows[i].cells.length;j++)
            {
                bodyTable.rows[i+1].cells[j].innerHTML=_self.formatText(eval("_items["+(index+i)+"]."+_title[j]));
                if(j==_title.length-1)
                {
                    bodyTable.rows[i+1].x=eval("_items["+(index+i)+"].x");
                    bodyTable.rows[i+1].y=eval("_items["+(index+i)+"].y");
                }
            }
        }
    };
    this.refreshTable=function()
    {
        var t=parseInt(length*(parseFloat(sliderDiv.style.top))/(_sliderBottom-_tempY))-count;
        if(t>=0&&t+count<=length)
        {
            _self.moveTo(t);
        }
    };
    this.refreshSlider=function()
    {
        sliderDiv.style.top=(parseFloat(_startIndex)*_sliderBottom)/(length-count);
    };
    this.dispose=function()
    {
        bodyTable=statusImage=scrollBar=null;
        _container.removeChild(bodyTable);
        _container.removeChild(statusImage);
        _container.removeChild(scrollBar);
        
    }
}