var scrollPnl = function(){
	
	//Propriedades
	this.targ = null
	this.posIni = 1;
	this.pnl = null;
	this.pnlH = '420';
	this.pnlW = '800';
	this.cmdScrlTop = null;
	this.cmdScrlBottom = null;	
	this.scrollDirection = "v" ;
	
	//Metodo para ativar rolagem
	this.setScroll = function(){
		
		var $posIni = this.posIni;
		
		var $cmdTop = this.cmdScrlTop;
		var $cmdBottom = this.cmdScrlBottom;
		
		var $targ = this.targ;		
				$targ.style.position = 'relative';
				$targ.style.padding = '5px';		
				//$targ.style.height = ($targ.clientHeight) ? $targ.clientHeight + 60 + 'px' : $targ.offsetHeight + 60 + 'px' ;
				
				/*
				$targ.onclick = function(){
					$targ.style.height = "";
					//alert(this.clientHeight);
				}	
				*/			
		
		var $targSz;
		var $pnlSz;
		
		var $pnl = this.pnl;
		with($pnl.style){
			overflow = 'hidden';
			position = 'relative';
			width = (this.pnlW=='auto') ? '100%' : parseInt(this.pnlW) + 'px';			
			height = parseInt(this.pnlH) + 'px';			
		}
		
		//direçao da rolagem
		var scrlDir = this.scrollDirection;
				scrlDir;
					
		//rola para cima o elemento ao sobrepor o mouse
		$cmdTop.onmouseover = function(){			
			
			if(scrlDir == 'hl' || scrlDir == 'hr'){
				$targSz = ($targ.clientWidth) ? $targ.clientWidth : $targ.offsetWidth ;
				$pnlSz = ($pnl.clientWidth) ? $pnl.clientWidth : $pnl.offsetWidth ;
			}else{
				$targSz = ($targ.clientHeight) ? $targ.clientHeight : $targ.offsetHeight ;
				$pnlSz = ($pnl.clientHeight) ? $pnl.clientHeight : $pnl.offsetHeight ;
			}

			var scrollTop = setInterval(
												function(){													
													if ($posIni <= ($targSz - $pnlSz)){
														switch( scrlDir ) {															
															case 'hl' : $targ.style.left = "-" + $posIni+ + "px"; break;
															case 'hr' : $targ.style.right = "-" + $posIni + "px"; break;
															default : $targ.style.top = "-" + $posIni + "px"; break;
														}
														$posIni = $posIni + 3;																			
													}else{ 
														clearInterval(scrollTop,1); 
													}
												}
											,5)
			
			//interrompe a rolagem
			this.onmouseout = function(){setTimeout( function(){clearInterval(scrollTop,1)}, 200);}
		}
			
		//rola para baixo o elemento ao sobrepor o mouse
		$cmdBottom.onmouseover = function(){
			var scrollBottom = setInterval(
												function(){
													if ($posIni > 1 ){
														$posIni = $posIni - 3;
														switch( scrlDir ) {															
															case 'hl' : $targ.style.left =  "-" + $posIni + "px";	break;
															case 'hr' : $targ.style.right =  "-" + $posIni + "px";	break;
															default : $targ.style.top =  "-" + $posIni + "px";	break;
														}
													}else{ 
														clearInterval(scrollBottom,1);
													}
												}
											,1)
			
			//interrompe a rolagem
			this.onmouseout = function(){setTimeout( function(){clearInterval(scrollBottom,1)}, 200);}
								
		}	
		
		//this.showHideScroll();

		
	},
	
	this.showHideScroll = function(){
		var h = (this.targ.clientHeight) ? this.targ.clientHeight : this.targ.offsetHeight ;
		if(h<=this.pnlH){				
			this.cmdScrlTop.style.display = 'none';
			this.cmdScrlBottom.style.display = 'none';
		}
	}		
}
