/*нужно фиксить расчет ширины и учитывать бордеры...*/
Proto.UI._compacttable=Class.create({
    initialize: function() 
    {
    
    this.options = Object.extend({
            element: document.body.getElementsByTagName('TABLE')[0] ,
            width:900,
            height:400,
            border:"#c0c0c0",
            headerBorder:"#929C9C",
            shadowClassName:'superscroll-shadow',
            headerShadowClassName:'superscroll-shadow-dark',
            wrapperClassName:"superscroll",
            staticLeftCols:1
            }, arguments[0] || { });
            if(this.options.staticLeftCols<1){return;}
            //if(Prototype.Browser.IE){return;}
       this.element = _(this.options.element); 
       this.options.staticLeftCols++;
       this.render(); 
       
     // this.element.hide();
            
      },
      weelhandler:function(e)
      {
            
            Event.stop(e);
            
            var raw = e.detail ? e.detail : e.wheelDelta;
            
            if(Prototype.Browser.Gecko)
            {
            axis=((e.axis!=1)?"v":"h");
            raw=raw*10
            }
            else
            {
            axis=((e.wheelDeltaY!=0)?"v":"h");
            }
        var sc = this.container1.scrollTop;
        var scl = this.container2.scrollLeft;    
            if(axis == "v")
           {
                if(Prototype.Browser.WebKit)
                {
                    try{
                    this.container2.scrollTop =  this.container1.scrollTop = ((this.headerHeight+1 <= sc-raw)?sc-raw:this.headerHeight+1)//sc-raw;
                    this.topSroller.scrollTop = this.container2.scrollTop - this.headerHeight;
                    }catch(x){}
                }
                else
                {
                    try{
                    this.container2.scrollTop =  this.container1.scrollTop = ((this.headerHeight+1 <= sc+raw)?sc+raw:this.headerHeight+1)//sc-raw;
                    this.topSroller.scrollTop = this.container2.scrollTop - this.headerHeight;
                    }catch(x){}
                }
                 
            }
            else
            {
                if(Prototype.Browser.WebKit)
                {
                try{
                    this.container1.scrollLeft = 0;
                    this.header2.scrollLeft =  this.container2.scrollLeft =  ((this.w+1 >= scl-raw)?this.w+1:scl-raw);
                    this.bottSroller.scrollLeft = this.container2.scrollLeft - this.w+1;
                    }catch(x){}
                }
                else
                {
                    try{this.container1.scrollLeft = 0;
                    this.header2.scrollLeft =  this.container2.scrollLeft =  ((this.w+1 >= scl+raw)?this.w+1:scl+raw);
                    this.bottSroller.scrollLeft = this.container2.scrollLeft - this.w+1;
                    }catch(x){}
                }
            }
           
            

      },
      render:function()
      {
          //this.pagescroll={top:((document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop),left:((document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft)};
	     this.ishw=this.element.getWidth();//parseFloat(this.element.style.borderRightWidth)+ parseFloat(this.element.style.borderLeftWidth);
	      if(this.ishw - 10  <= this.options.width){ return; }
	      if(this.options.height - 10  <= this.options.height){ return; }
	      this.viewport = document.viewport.getDimensions();
          var header = this.element.select("THEAD")[0];
//        var hd=header.innerHTML;
//        this.header = 
       try{ this.headerHeight=header.getHeight(); }catch(x){ this.headerHeight=this.element.select("TH")[0].getHeight(); }
        this.container1 = new Element("div",{style:"width:"+(this.options.width-1)+"px;height:"+(this.options.height-this.headerHeight)+"px; overflow:hidden;margin:0px;padding:0px;float:left;border-right:1px solid"+this.options.border});
          this.element.wrap(this.container1);
          heads = this.element.select("TH");
          var w=0;
           for (var i = 0; i < heads.length  && i < this.options.staticLeftCols-1; i++) 
            {
                    w+=heads[i].getWidth();
            }
            
            this.w=w;
            
        this.container1.style.width=(w-1)+'px';
        this.container = new Element('div',{style:"width:"+this.options.width+"px;height:"+this.options.height+"px; overflow:auto;margin:0px;padding:0px;",'class':this.options. wrapperClassName});
        this.container1.wrap(this.container);
        
        this.container2 = new Element('div',{style:"width:"+(this.options.width-w)+"px;height:"+(this.options.height-this.headerHeight)+"px; overflow:hidden; overflow-X:hidden;margin:0px;padding:0px;float:left;"});
        this.container.insert(this.container2);
        
        this.header1 = new Element("div",{style:"width:"+(w-1)+"px; height:"+(this.headerHeight-1)+"px; overflow:hidden;margin:0px;padding:0px;float:left;border-right:1px solid"+this.options.headerBorder+";border-bottom:1px solid"+this.options.headerBorder});
        this.container.insertBefore(this.header1,this.container1);
        this.header2 = new Element("div",{style:"width:"+(this.options.width-w)+"px; height:"+(this.headerHeight-1)+"px; overflow:hidden;margin:0px;padding:0px;float:left;border-bottom:1px solid"+this.options.headerBorder});
        this.container.insertBefore(this.header2,this.container1);
        //this.headerHr = new Element("div",{style:"width:"+(this.options.width-2)+"px; height:1px; background:#ff0000;margin:0px;padding:0px;float:left;clear:both;"});
       // this.container.insertBefore(this.headerHr,this.container1);
        this.header1.update("<div style='width:"+this.ishw+"px;margin:0px;padding:0px;'>"+this.container1.innerHTML+"</div>");
        this.header2.update("<div style='width:"+this.ishw+"px;margin:0px;padding:0px;'>"+this.container1.innerHTML+"</div>");
        this.container2.update("<div style='width:"+this.ishw+"px;margin:0px;padding:0px;'>"+this.container1.innerHTML+"</div>");
        this.container1.update("<div style='width:"+this.ishw+"px;margin:0px;padding:0px;'>"+this.container1.innerHTML+"</div>");
        this.container2.scrollLeft = w+1;
        this.header2.scrollLeft = w+1;
        
        this.container1.scrollTop = this.headerHeight+1;
        this.container2.scrollTop = this.headerHeight+1;
        
        
        this.container1.observe(((!Prototype.Browser.Gecko)?"mousewheel":"DOMMouseScroll"),this.weelhandler.bind(this));
        this.container2.observe(((!Prototype.Browser.Gecko)?"mousewheel":"DOMMouseScroll"),this.weelhandler.bind(this));
        this.container2.onscroll = function(){ this.container1.scrollTop =  this.container2.scrollTop;  }.bind(this);
       
            
       this.bottSroller = new Element("div",{ 'class':'magicscoll',style:"width:"+this.container2.getWidth()+"px;height:20px;position:absolute;overflow-x:scroll; overflow-y:hidden;z-index:999999;"});
       Element.insert(_(document.body),this.bottSroller); 
       this.topSroller = new Element("div",{  'class':'magicscoll',style:"width:20px;height:"+this.container2.getHeight()+"px;position:absolute;overflow-y:scroll;overflow-x:hidden;z-index:999999;"});
       Element.insert(_(document.body),this.topSroller); 

       this.bottSroller.clonePosition(this.container,{ 
            setHeight:false,
            setWidth:false,
            offsetLeft:this.container1.getWidth(),
            offsetTop:this.container.getHeight()+1
        });
       this.topSroller.clonePosition(this.container,{ 
            setHeight:false,
            setWidth:false,
            offsetLeft:this.container.getWidth()+1,
            offsetTop:this.headerHeight
        });
var inscroller = new Element("div",{style:"height:18px; width:"+(this.container2.select('table')[0].getWidth()-w)+"px;"}).update("&nbsp;");
this.bottSroller.insert(inscroller);
 var inscroller2 = new Element("div",{style:"width:18px; height:"+(this.container2.select('table')[0].getHeight()-this.headerHeight)+"px;"}).update("&nbsp;");
this.topSroller.insert(inscroller2);
      
      this.bottSroller.onscroll = function(e){
                this.container2.scrollLeft = this.header2.scrollLeft = w+ this.bottSroller.scrollLeft;
                
            }.bind(this);
      
          this.topSroller.onscroll = function(e){
                this.container2.scrollTop = this.container1.scrollTop = this.headerHeight+this.topSroller.scrollTop ;
                
            }.bind(this);
            
        this.vertShadow = new Element("div",{'class':this.options.shadowClassName });
        Element.insert(document.body,this.vertShadow); 
        this.vertShadow.clonePosition(this.container1,{ 
            setHeight:true,
            setWidth:false,
            offsetLeft:this.container1.getWidth(),//-this.vertShadow.getWidth()/2,
            offsetTop:this.header1.getHeight()+1
        });
        this.vertShadow.toFront();
        this.vertShadow2 = new Element("div",{'class':this.options.headerShadowClassName });
        Element.insert(document.body,this.vertShadow2); 
        this.vertShadow2.clonePosition(this.header1,{ 
            setHeight:true,
            setWidth:false,
            offsetLeft:this.header1.getWidth(),//-this.vertShadow.getWidth()/2,
            offsetTop:0
        });
        this.vertShadow2.toFront();
        
      }
     
            
});
Proto.UI.compacttable=function(msg,params)
    {
		
		new Proto.UI._compacttable({ });
      
    }