function slideTo(el,x,y,uTime){if(!(el=$(el))){return}var pos=el.viewportOffset();if(!el.timeout){el.timeout=25}el.xTarget=x;el.yTarget=y;el.slideTime=uTime;el.stop=false;el.xA=el.xTarget-el.getLeft();el.yA=el.yTarget-el.getTop();if(el.slideLinear){el.B=1/el.slideTime}else{el.B=Math.PI/(2*el.slideTime)}el.yD=el.getTop();el.xD=el.getLeft();var d=new Date();el.C=d.getTime();if(!el.moving){_slideTo(el)}}function _slideTo(el){if(!(el=$(el))){return}var now,s,t,newY,newX;now=new Date();t=now.getTime()-el.C;if(el.stop){el.moving=false}else if(t<el.slideTime){setTimeout("_slideTo('"+el.id+"')",el.timeout);s=el.B*t;if(!el.slideLinear){s=Math.sin(s)}newX=Math.round(el.xA*s+el.xD);newY=Math.round(el.yA*s+el.yD);el.setLeft(newX);el.setTop(newY);el.moving=true}else{el.setLeft(el.xTarget);el.setTop(el.yTarget);el.moving=false;if(el.onslideend){el.onslideend()}}}ScrollList=Class.create();ScrollList.prototype={parent:'',id:'scrollList',options:{title:'',position:'absolute',top:0,left:0,width:0,height:0},direction:'vertical',scrlStep:150,enableMouseOver:false,enableMouseWheel:true,dataSource:[],itemTemplate:'',items:[],itemsTooltipTemplate:'',bgImg:'/images/scrollList/bg.gif',headerbg:'/images/scrollList/header.gif',bUpImg:'/images/scrollList/up.gif',bDnImg:'/images/scrollList/down.gif',initialize:function(parent,id,options){this.options=options||this.options;this.parent=$(parent);this.id=this.options.id||this.id;this.direction=this.options.direction||this.direction;this.scrlStep=this.options.scrlStep||this.scrlStep;if(this.options.dataSource){this.setDataSource(this.options.dataSource)}this.itemTemplate=this.options.itemTemplate||this.itemTemplate;this.enableMouseOver=this.options.enableMouseOver||this.enableMouseOver;this.enableMouseWheel=this.options.enableMouseWheel||this.enableMouseWheel;this.container=document.createElement("div");this.container.className='scrollList';this.container.id=this.id;this.container.parent=this;this.container.style.overflow='hidden';this.container.style.display='none';this.container.style.zIndex=1000;this.parent.appendChild(this.container);this.style=this.container.style;this.btnUp=document.createElement("div");this.btnUp.className='btnUp';this.btnUp.style.zIndex=3;this.btnUp.scrlUp=true;this.btnUp.parent=this;this.container.appendChild(this.btnUp);this.mask=$(document.createElement("div"));this.mask.className='mask';this.mask.style.zIndex=3;this.mask.parent=this;this.container.appendChild(this.mask);this.scrlEle=$(document.createElement("div"));this.scrlEle.className='list';this.scrlEle.id=this.id+"_scrlEle";this.scrlEle.style.position='absolute';this.scrlEle.style.top='0';this.scrlEle.style.zIndex=1;this.mask.appendChild(this.scrlEle);this.btnDown=document.createElement("div");this.btnDown.className='btnDown';this.btnDown.style.zIndex=3;this.btnDown.parent=this;this.container.appendChild(this.btnDown);if(this.enableMouseWheel){Event.observe(this.container,"mousewheel",this.mWheel.bindAsEventListener(this),false);Event.observe(this.container,"DOMMouseScroll",this.mWheel.bindAsEventListener(this),false)}if(this.direction=='vertical'){if(this.enableMouseOver){Event.observe(this.btnUp,"mouseover",this.bOnMouseover.bindAsEventListener(this,"up"),false);Event.observe(this.btnUp,"mouseout",this.bOnMouseout.bindAsEventListener(this),false);Event.observe(this.btnDown,"mouseover",this.bOnMouseover.bindAsEventListener(this,"down"),false);Event.observe(this.btnDown,"mouseout",this.bOnMouseout.bindAsEventListener(this),false)}Event.observe(this.btnUp,"click",this.bOnClick.bindAsEventListener(this,"up"),false);Event.observe(this.btnDown,"click",this.bOnClick.bindAsEventListener(this,"down"),false)}else{if(this.enableMouseOver){Event.observe(this.btnUp,"mouseover",this.bOnMouseover.bindAsEventListener(this,"left"),false);Event.observe(this.btnUp,"mouseout",this.bOnMouseout.bindAsEventListener(this),false);Event.observe(this.btnDown,"mouseover",this.bOnMouseover.bindAsEventListener(this,"right"),false);Event.observe(this.btnDown,"mouseout",this.bOnMouseout.bindAsEventListener(this),false)}Event.observe(this.btnUp,"click",this.bOnClick.bindAsEventListener(this,"left"),false);Event.observe(this.btnDown,"click",this.bOnClick.bindAsEventListener(this,"right"),false)}},setTemplate:function(itemTemplate,syntax){syntax=syntax||'/(^|.|\r|\n)(\<%=\s*(\w+)\s*%\>)/';this.itemTemplate=new Template(itemTemplate,syntax)},databind:function(){this.scrlEle.innerHTML='';var __data__=this.dataSource;this.items.count=__data__.length;if(this.items.count<1){this.scrlEle.innerHTML='No items found'}else{var itt;var objBody=document.getElementsByTagName("body")[0];if(this.itemsTooltipTemplate!=''||this.itemsTooltipTemplate!=''){itt=$(this.itemsTooltipTemplate)}for(var i=0;i<this.items.count;i++){var iDiv=document.createElement("div");var item=__data__[i];iDiv.className='item';this.scrlEle.appendChild(iDiv);iDiv.parent=this;iDiv.innerHTML=this.itemTemplate.evaluate(item);iDiv.index=i;iDiv.onclick=this.iOnClick;this.items.push(iDiv)}}},show:function(){this.style.display='block'},hide:function(){this.style.display='none'},refresh:function(){},changeDataSource:function(dataSource){this.setDataSource(dataSource);this.databind();this.show()},setDataSource:function(dataSource){if(typeof(dataSource)=='string'&&dataSource.isJSON()){this.dataSource=dataSource.evalJSON()}else if(typeof(dataSource)=='array'){this.dataSource=dataSource}else{throw'Thuoc tinh dataSource khong la xau dang JSON hoac mang';}},mWheel:function(e){var __offset;var x=this.scrlEle.getLeft();var y=this.scrlEle.getTop();if(Event.wheel(e)>0){if(this.direction=='vertical'){if(this.scrlEle.getTop()<0){__offset=Math.max(this.scrlEle.getTop(),-this.scrlStep);y=this.scrlEle.getTop()-__offset}}else{if(this.scrlEle.getLeft()<=0){__offset=Math.max(this.scrlEle.getLeft(),-this.scrlStep);x=this.scrlEle.getLeft()-__offset}}}else{if(this.direction=='vertical'){if(this.scrlEle.getTop()+this.scrlEle.getHeight()>this.mask.getTop()+this.mask.getHeight()){__offset=Math.min(this.scrlEle.getTop()+this.scrlEle.getHeight()-this.mask.getTop()-this.mask.getHeight(),this.scrlStep);y=this.scrlEle.getTop()-__offset}}else{if(this.scrlEle.getLeft()+this.scrlEle.getWidth()>this.mask.getWidth()){__offset=Math.min(this.scrlEle.getLeft()+this.scrlEle.getWidth()-this.mask.getWidth(),this.scrlStep);x=this.scrlEle.getLeft()-__offset}}}slideTo(this.scrlEle.id,x,y,1000)},bOnMouseover:function(e,direct){var __offset;var x=this.scrlEle.getLeft();var y=this.scrlEle.getTop();if(direct=='up'){if(this.scrlEle.getTop()<0){__offset=Math.max(this.scrlEle.getTop(),-this.scrlStep);y=this.scrlEle.getTop()-__offset}}else if(direct=='down'){if(this.scrlEle.getTop()+this.scrlEle.getHeight()>this.mask.getTop()+this.mask.getHeight()){__offset=Math.min(this.scrlEle.getTop()+this.scrlEle.getHeight()-this.mask.getTop()-this.mask.getHeight(),this.scrlStep);y=this.scrlEle.getTop()-__offset}}else if(direct=='left'){if(this.scrlEle.getLeft()<=0){__offset=Math.max(this.scrlEle.getLeft(),-this.scrlStep);x=this.scrlEle.getLeft()-__offset}}else if(direct=='right'){if(this.scrlEle.getLeft()+this.scrlEle.getWidth()>this.mask.getWidth()){__offset=Math.min(this.scrlEle.getLeft()+this.scrlEle.getWidth()-this.mask.getWidth(),this.scrlStep);x=this.scrlEle.getLeft()-__offset}}slideTo(this.scrlEle.id,x,y,1000)},bOnMouseout:function(){if(this.onMouseOver)this.scrlEle.stop=true},bOnClick:function(e,direct){var __offset;var x=this.scrlEle.getLeft();var y=this.scrlEle.getTop();if(direct=='up'){if(this.scrlEle.getTop()<0){__offset=Math.max(this.scrlEle.getTop(),-this.scrlStep);y=this.scrlEle.getTop()-__offset}}else if(direct=='down'){if(this.scrlEle.getTop()+this.scrlEle.getHeight()>this.mask.getTop()+this.mask.getHeight()){__offset=Math.min(this.scrlEle.getTop()+this.scrlEle.getHeight()-this.mask.getTop()-this.mask.getHeight(),this.scrlStep);y=this.scrlEle.getTop()-__offset}}else if(direct=='left'){if(this.scrlEle.getLeft()<=0){__offset=Math.max(this.scrlEle.getLeft(),-this.scrlStep);x=this.scrlEle.getLeft()-__offset}}else if(direct=='right'){if(this.scrlEle.getLeft()+this.scrlEle.getWidth()>this.mask.getWidth()){__offset=Math.min(this.scrlEle.getLeft()+this.scrlEle.getWidth()-this.mask.getWidth(),this.scrlStep);x=this.scrlEle.getLeft()-__offset}}slideTo(this.scrlEle.id,x,y,1000)},iOnClick:function(){if(typeof(this.parent.itemOnclick)!='undefined')this.parent.itemOnclick.apply(this)}};