Boat = {};
Boat.UI = {};
//翻页控件
Boat.UI.Paging = new Class({
    /*Events
        beforeLoad 读取数据前执行
        afterLoad 读取数据后执行
    */
    Implements: [Events, Options],    
    options:{
        url:'', //后台URL        
	   // className:'paging',
	    total:'total', //数据源中记录数属性
	    limit:20, //每页记录数
	    //el:控件容器,showNumber:是否显示数字按钮,showText:是否显示页码
	    head:{el:document.body,showNumber: false,showText:true},
	    foot:{el:null,showNumber: true,showText:false}
    },
    
    initialize: function(options){        
        this.setOptions(options);
        $('page').empty();	//初始化分页信息
        this.index = 0; //当前页
        this.limit = this.options.limit;      
        this.imgurl='http://assets.lianyu.com/images/';
        //this.head = new Element('span',{'class':this.options.className});       
        this.head = new Element('span');       
        this.head.injectInside($(this.options.head.el));

        this.loader = new Request.JSON({url:this.options.url,onComplete:this.onComplete.bind(this)});
     		
        this.param = {}; //load参数

        if(this.options.foot.el){
            this.foot = this.head.clone();
            this.foot.injectInside($(this.options.foot.el));
        }
    },
    
    onComplete: function(data,text){    
    	data = data||{};
        if(this.index==0){
            this.total = data[this.options.total]||0; //总记录数
        }        
        this.page = Math.ceil(this.total/this.limit); //总页数 
        
        this.create(this.head,this.options.head);
        
        if(this.foot){
            this.create(this.foot,this.options.foot);
        }
       this.fireEvent('afterLoad',[data,text]);
       //this.fireEvent('afterLoad',data);
    },
  
    create: function(panel,options){
        panel.empty();
        //首页
        var first = new Element('a',{'html':'<input type="image" src="'+this.imgurl+'front/first.gif" align="absmiddle"/>','href':'javascript:void(null)','events':{'click':this.click.bind(this,0)}});
        panel.grab(first);  
         //上一页      
        //if(this.index>0){
           // var prev = new Element('a',{'html':'&nbsp','class':'prev','href':'javascript:void(null)','events':{'click':this.click.bind(this,this.index-1)}});
            new Element('span',{'html':"&nbsp;&nbsp;"}).inject(first, 'after');
            if(this.index > 0){
            	var prev = new Element('a',{'html':'<input type="image" src="'+this.imgurl+'front/prev.gif" align="absmiddle"/>','href':'javascript:void(null)','events':{'click':this.click.bind(this,this.index-1)}});
            }else{
            	var prev = new Element('a',{'html':'<input type="image" src="'+this.imgurl+'front/prev.gif" align="absmiddle"/>','href':'javascript:void(null)','events':{'click':this.click.bind(this,0)}});
            }
            panel.grab(prev);
       // }  
        
        if(options.showNumber){  
            var beginInx = this.index-2<0?0:this.index-2;
            var endIdx = this.index+2>this.page?this.page:this.index+2;
            
            if(beginInx>0) panel.grab(this.createNumber(0));
            if(beginInx>1) panel.grab(this.createNumber(1));
            if(beginInx>2) panel.grab(this.createSplit());        
            
            for(var i=beginInx;i<endIdx;i++){
                panel.grab(this.createNumber(i));
            }
            
            if(endIdx<this.page-2) panel.grab(this.createSplit());
            if(endIdx<this.page-1) panel.grab(this.createNumber(this.page-2));
            if(endIdx<this.page) panel.grab(this.createNumber(this.page-1));
        }
		//下一页
        //if(this.index<this.page-1){
           // var next = new Element('a',{'html':'','class':'next','href':'javascript:void(null)','events':{'click':this.click.bind(this,this.index+1)}});
           if(this.index<this.page-1){
            	var next = new Element('a',{'html':'<input type="image" src="'+this.imgurl+'front/next.gif" align="absmiddle"/>','href':'javascript:void(null)','events':{'click':this.click.bind(this,this.index+1)}});
           }else{
           		var next = new Element('a',{'html':'<input type="image" src="'+this.imgurl+'front/next.gif" align="absmiddle"/>','href':'javascript:void(null)','events':{'click':this.click.bind(this,this.index)}});
           }
            panel.grab(next);
            
            new Element('span',{'html':"&nbsp;&nbsp;"}).inject(next, 'before');
        //}
        
        
        var last = new Element('a',{'html':'<input type="image" src="'+this.imgurl+'front/last.gif" align="absmiddle"/>','href':'javascript:void(null)','events':{'click':this.click.bind(this,this.page-1)}});
         panel.grab(last);  
         new Element('span',{'html':"&nbsp;&nbsp;"}).inject(last, 'before');
        
        //var desc = new Element('span', {'html': image.description}).inject(name, 'after');
        if(options.showText) panel.grab(this.createText());  
          
    },
    
     createNumber: function(i){
        var a = new Element('a',{'html':i+1,'href':'javascript:void(null)','events':{'click':this.click.bind(this,i)}});
       /* if(i==this.index){
            a.addClass('clicked');
        }*/        
        return a;
    },
   
    createSplit: function(){
        var split = new Element('span',{'html':'...'});
        return split;
    },
    
    createText: function(){
        var text = new Element('span',{'html':'&nbsp;&nbsp;&nbsp;&nbsp;第'+(this.index+1)+'/'+(this.page)+'页'});
        return text;
    },
    
    click: function(index){
        this.index = index;
        this.load();
    },
    
    load: function(param){
        this.fireEvent('beforeLoad');
        this.param.start = this.index*this.limit;
        this.param.limit = this.limit;
        
        if(param) this.param = $merge(this.param,param);
        
        this.loader.get(this.param);
    },
    
    reload: function(param){
        this.index = 0;
        this.load(param);
    },
    
    setLimit: function(limit){
        this.limit = limit;
        this.reload();
    }
});