/*
 @requires : cls_base.js
 @author   : shawn Young
 @date     : 2008-08
*/

XL.Marquee = XL.Class.create();


var _cssImg = new Image();
_cssImg.src="images/btnbg.png";

XL.Marquee.prototype = { 
	  dataProvider:null,
	  _id:'mySq',
	  _owner:null,
	  _cssName:'mq',
	  _CSSTxt:'.mq_xl_marquee{}\n \
		a.mq_btn,a.mq_btn_ck{height:10px;line-height:10px;margin:3px 2px;text-align:center;font-size:10px;font-family:\"monospace\";float:right;width:14px;text-decoration:none;} \n \
		a.mq_btn {color:#ffffff;background-color:#C7DEEE;} \n \
		a:hover.mq_btn,a.mq_btn_ck {background-color:#ffffff;color:#6699CC;} \n \
		.mq_img{ } \n \
		.mq_btnhover{ }\n \
		.mq_xl_marquee_img{width:100%;height:100%;}\n \
		.mq_btnPanel_bg{width:100%;height:17px;margin-top:0px;_margin-top:-17px;background-color:#555555;alpha:0.5;filter:alpha(opacity=50);overflow:hidden;white-space:noWrap;;z-index:889;}\n \
		.mq_btnPanel{width:100%;height:17px;margin-top:-17px;overflow:hidden;white-space:noWrap;z-index:888;}',
	  _interV:null,
	  _plink:null,	
      _parent:null,
	  _curSelIndex:0,
	  _ImgArr:null,
	  _picField:'pic',
	  _urlField:'url',
	  _txtField:'txt',
	  _loadedPics:0,
	  _curSelIndex:0,
	  _targetField:'target',
	  _delay:3000,
      initialize:function(para){
		  var defPara = {
			  id:'mySq',
			  parent:'',
			  dataProvider:[],
			  cssName:'mq',
			  picField:'pic',
			  urlField:'',
			  target:'target',
			  delay:3000
		  }
		  this._ImgArr = [];

		  //参数初始化
		  if(typeof(para)=='object'){
			 for(var o in para){
			  defPara[o] = para[o];
		     }
		  }
			
		  //ID设置
		  if(defPara['id']){
			  this._id = defPara['id'];
		  }
		
		 //样式初始化
		  if(defPara['cssName']) {
			  this._cssName = defPara['cssName'];
		  }
		  //if(this._cssName=='mq'){
		  //	  document.write('<style type="text/css" rel="stylesheet">'+this._CSSTxt+'</style>');
		  //}
          
		  if(XL.Obj.getNumber(defPara['delay'])){
			  this._delay = XL.Obj.getNumber(defPara['delay']);
		  }

		  if(defPara['target']){
			  this._targetField = defPara['target'];
		  }
		  if(defPara['parent']){
			  this._owner = XL.DOM.$(defPara['parent']);
		  }
		  if(!this._owner){
		    this._owner = document.createElement('div');
            document.body.appendChild(this._owner);
			/*
			if(defPara['width']){
				this._owner.style.width = defPara['width']-155;
			}
			if(defPara['height']){
				this._owner.style.height = defPara['height'];
			}*/
		  }
		  
		  if(defPara['picField']){
			  this._picField = defPara['picField'];
		  }
		  if(defPara['urlField']){
			  this._urlField = defPara['urlField'];
		  }

		  if(defPara['dataProvider'] instanceof Array){
			  this.dataProvider = defPara['dataProvider'];
		  }
		  
		  //this.showUI();
		  this.initData();
	  },
	  initData:function(arr){
	     if(arr instanceof Array){
			 this.dataProvider = arr;
		 }
		 if(!(this.dataProvider instanceof Array)){
			 return ;
		 }
         for(var i=0;i<this.dataProvider.length;i++){
           var curIndex = this._ImgArr.length;
		   this._ImgArr[curIndex] = new Image();
           this._ImgArr[curIndex].onload = XL.Class.bindMethod(this._handlerImgloaded,this);
           this._ImgArr[curIndex].onerror = XL.Class.bindMethod(this._onimgerror,this);
		   this._ImgArr[curIndex].src = String(this.dataProvider[i][this._picField]);
		 }
	  },
	  _handlerImgloaded:function(){
		 //处理图片加载完成事件
		 this.dispatchEvent(XL.EVENT.ON_LOAD,this.dataProvider[this._loaded]);
         this._loadedPics++;
		 if(this._loadedPics == this.dataProvider.length){
			//解析载入完成事件
			this.showUI();
			this.dispatchEvent(XL.EVENT.ON_INITIAL,this._ImgArr);
		 }
	  },
	  _onimgerror:function(){
		  //分发载入失败事件
          this.dispatchEvent(XL.EVENT.ON_LOADFAILD,this.dataProvider[this._loaded]);
		  this._loadedPics++;
		  if(this._loadedPics == this.dataProvider.length){
			//解析载入完成事件
			this.showUI();
			this.dispatchEvent(XL.EVENT.ON_INITIAL,this._ImgArr);
		  }
	  },
      showUI:function(){
        if(!this._owner){ alert('no owner');return false; }
		this._owner.className=this._cssName;
		
		var dl = document.createElement('dl');
		this._owner.appendChild(dl);
		
		var dt1 = document.createElement('dt');
		dt1.className = 'mql';
		
		this._btnPanel = document.createElement('ul');
		dt1.appendChild(this._btnPanel);

		dl.appendChild(dt1);

		var dt2 = document.createElement('dt');
		dt2.className = 'mqr';
		this._plink = document.createElement('a');
		dt2.appendChild(this._plink);
		dl.appendChild(dt2);
		

				
		this._parent = document.createElement('img');
		this._parent.setAttribute('width','100%');
		this._parent.setAttribute('height','100%');
		if(document.all && document.attachEvent){
			this._parent.style.filter = 'revealTrans(duration='+(this._delay/2000)+',transition=10);';
		}
		this._parent.style.visibility = 'hidden';
		
		this._parent.src = this._ImgArr[0].src;
        this._curSelIndex = 0;
		this.dispatchEvent(XL.EVENT.ON_CHANGE,this.dataProvider[0]);
		this._plink.appendChild(this._parent);
        
		
        if(this._ImgArr.length>0){
            for(var i=1;i<this._ImgArr.length+1;i++){
				var li = document.createElement('li');
                var picBtn = document.createElement('a');
                li.id = this._id+'_btn'+i.toString();
                if(i==1){
                    li.className = 'sel';
                }
                picBtn.href =    "javascript:///";
                li.onclick = function(){return false;};
                li.setAttribute(this._cssName+'_index',i);
				picBtn.setAttribute(this._cssName+'_index',i);
                
                li.onmouseover  = XL.Class.bindMethod(this.btnShowImg,this);
                li.onmouseout   = XL.Class.bindMethod(this._beginTimer,this);
				picBtn.innerText = this.dataProvider[i-1][this._txtField];
				li.appendChild(picBtn);
                this._btnPanel.appendChild(li);
            }
        }
        this._beginTimer();
        return true;
      },
	  _beginTimer:function(){
		  this._parent.onclick = XL.Class.bindMethod(this._handlerClick,this);
		  this._parent.style.visibility = 'visible';
		  this._interV = setInterval(XL.Class.bindMethod(this.swapImg,this),this._delay);  
	  },
	  _handlerClick:function(){
		  this.dispatchEvent(XL.EVENT.CLICK,this.dataProvider[this._curSelIndex]);
	  },
	  swapImg:function(){      
		  if(this._curSelIndex>=this.dataProvider.length-1){
			this.showImg(0);
		  }else{
			this.showImg(this._curSelIndex+1);
		  }
	  },
	  btnShowImg:function(){
		   this._pauseTimer();
		   var obj = window.event.srcElement;
		   var index = XL.Obj.getNumber(obj.getAttribute(this._cssName+'_index'));
		   if(index>0){
			index = index-1;
		   }else{
			index = 0;
		   }
		   this.showImg(index);       
	  },
	  showImg:function(index){        
        if(this._curSelIndex == index) return;
        if(this._curSelIndex>=0){
            var preObj = XL.DOM.$(this._id+'_btn'+(this._curSelIndex+1).toString());
            if(preObj){preObj.className = ''};
        }
        if(XL.Obj.isNumber(index)){
            if(this._ImgArr[index]){
				if(XL.Agent.isIE){
					this._parent.filters.revealTrans.Transition = Math.floor(Math.random()*23);
					this._parent.filters.revealTrans.apply();
					this._parent.src = this._ImgArr[index].src;
					this._parent.filters.revealTrans.play(0.5);
			    }else{
					this._parent.src = this._ImgArr[index].src;
				}
                
                var curObj= XL.DOM.$(this._id+'_btn'+(index+1).toString());
                if(curObj){curObj.className = 'sel'};
                
			
                this._plink.setAttribute('href',decodeURIComponent(this.dataProvider[index][this._urlField]));
				var targ = this.dataProvider[index][this._targetField];
				if(!targ){targ = '_self'};
                this._plink.setAttribute('target',targ);
                
                this._curSelIndex = index;
            }
        }
        //触发改变事件
        this.dispatchEvent(XL.EVENT.ON_CHANGE,this.dataProvider[index]);
      },
	  _pauseTimer:function(){
		  clearInterval(this._interV);  
	  }
}