var ScrollBar= Class.create({
    initialize:function(inArgs){
        
        this.kViewportSize=320;
        this.kContentSize=320;
        this.kPaneName="wtscrollpane";
        this.kTrackName="wtslidertrack";
        this.kHandleName="wtsliderhandle";
	    this.kBackBtnName="wtbackbtn";
	    this.kForwardBtnName="wtforwardbtn";
        this.kSlideIncrement=0.24;
        this.kDecel=0.4;
        this.kPaneName="wtscrollpane";
        this.kTrackName="wtslidertrack";
        this.kHandleName="wtsliderhandle";
	    this.kBackBtnName="wtbackbtn";
	    this.kForwardBtnName="wtforwardbtn";
		
        this.scriptacSlider={};
        this.viewportOffset=0;
        this.sliderValue=0;
        this.animationId=false;
        this.isSliding=false;
        this.isMouseDown=false;
        this.overlap=0;
        this.offsetImageSize=0;
        this.handleOffset=20;
        this.offsetContentSize=-320;
        this.scrollAxis= "horizontal";
	    this.scrollSize=12;
	    this.trackLength=0;
        this.id=0;
        
		if(inArgs){
            if(inArgs.id) 		        this.id = inArgs.id;
            if(inArgs.imageOverlap)	    this.overlap=inArgs.imageOverlap;
			if(inArgs.sliderCentering)  this.handleOffset=inArgs.sliderCentering;
			if(inArgs.Container)        this.Container = inArgs.Container;
			if(inArgs.innerElemClass)   this.innerElemClass = inArgs.innerElemClass;
			if(inArgs.scrollAxis)       this.scrollAxis = inArgs.scrollAxis;
			if(inArgs.scrollSize) 		this.scrollSize = inArgs.scrollSize;
           
			
            this.getSize = (this.scrollAxis =="vertical") ? function(elem){	 return elem.getHeight();} 
									: function(elem){	 return elem.getWidth(); };
		    this.addHTML();
            this.updateDimensions();	
		}

		
		
        var sliderOpts = {};
		if(this.scrollAxis =="vertical"){
			sliderOpts = {axis:this.scrollAxis, 
            onSlide:  this.scrollVertical.bind(this),
			onChange: this.scrollOnChange.bind(this) 

			};
		}
		else{
			sliderOpts = {axis:this.scrollAxis, 
			onSlide:  this.scrollHorizontal.bind(this),
			onChange: this.scrollOnChange.bind(this) 
			};
		}
		this.scriptacSlider=new Control.Slider(this.kHandleName+this.id,this.kTrackName+this.id,sliderOpts );
		
		Event.observe(this.kTrackName+this.id,'mousedown',(function(e){
            var o=(this.scrollAxis =="vertical") ? ( e.offsetY||e.layerY ) : ( e.offsetX||e.layerX );
            if((e.element()).id==(this.kTrackName+this.id) && o< this.handleOffset) {
                this.animateSlide(0);
            }
        }).bind(this));
            
		Event.observe(this.Container,'resize',this.updateDimensions.bind(this));
        
		Event.observe(this.kBackBtnName+this.id,'mousedown' 
                        ,(function(){  this.decrementSlide(this.kSlideIncrement);}).bind(this));
		
        Event.observe(this.kForwardBtnName+this.id,'mousedown'  
                        ,(function(){  this.incrementSlide(this.kSlideIncrement);}).bind(this));
		
        Event.observe(this.kHandleName+this.id,'mousedown'
                        ,(function(){  this.isMouseDown=true;}).bind(this));
	
		Event.observe(this.kHandleName+this.id,'mouseup'
                        ,(function(){  this.isMouseDown=false;}).bind(this));
	},
    
	getSize:function(elem){  return elem.getWidth();},
	addHTML: function(){
        var container = $(this.Container);
          
        
        var handleStyle = (this.scrollAxis =="vertical") ? handleStyle= "top:0" : handleStyle = "left:0";
        var scrollPane = new Element('div', { 'id': this.kPaneName+this.id , 'class': this.kPaneName}).update(container.innerHTML);
        container.update(scrollPane);
        container.insert({ bottom:  
            "<div id=\""+this.kTrackName+this.id+"\" class=\""+this.kTrackName+"\" style=\"visibility: visible;\">"+
                "<div id =\""+this.kHandleName+this.id+"\" class=\""+this.kHandleName+" selected\"  style=\""+handleStyle+"\"></div>"+
            "</div>"+
            "<div id=\""+this.kBackBtnName+this.id+"\" class=\""+this.kBackBtnName+"\" ></div>"+
            "<div  id=\""+this.kForwardBtnName+ this.id+"\" class=\""+this.kForwardBtnName+"\" ></div>"
        });
			
	},
    
	updateSize: function(){
		var elems = $(this.kPaneName+this.id).select(' .'+this.innerElemClass);
		this.kContentSize=0;
		for( var i =0 ; i < elems.size(); i++){
			this.kContentSize += this.getSize(elems[i]);
		}
		return this.kContentSize;	
	},
    
	updateDimensions:function(){
        var container = $(this.Container);
        var trackStyle ={};
        var backBtn=$(this.kBackBtnName +this.id);
        this.handleOffset = this.getSize($(this.kHandleName+this.id));
        var forwardBtn = $(this.kForwardBtnName+this.id);
        this.viewportOffset = this.getSize(backBtn) + this.getSize(forwardBtn);
        this.kViewportSize=this.getSize(container);
        this.trackLength = this.kViewportSize-this.viewportOffset;
        this.offsetImageSize=this.getSize($$('#'+this.kPaneName+this.id+' .'+this.innerElemClass)[0])-this.overlap;
        this.kContentSize=this.updateSize();
		
		if(this.scrollAxis =="vertical"){
			$(this.kPaneName+this.id).setStyle({"height":this.kContentSize+"px"});
			backBtn.setStyle({"right":"0px", "top": "0px"});
			forwardBtn.setStyle({"right":"0px","bottom":"0px"});
			//set width in css
			trackStyle = {"visibility":"visible","top": this.getSize(backBtn)+"px", "right":"0px", "height":this.kViewportSize+"px"};
		}
		else{
			$(this.kPaneName+this.id).setStyle({"width":this.kContentSize+"px"});
			backBtn.setStyle({"bottom":"0px", "left": "0px"});
			forwardBtn.setStyle({"bottom":"0px","right":"0px"});
			//set height in css
			trackStyle = {"visibility":"visible","left": this.getSize(backBtn)+"px", "bottom":"0px", "width":this.trackLength+"px"};
		}
		$(this.kTrackName+this.id).setStyle(trackStyle);
		container.style.overflow="hidden";

		this.offsetContentSize=-1*(this.kContentSize-this.kViewportSize);
	},
	
	scrollVertical: function(value){
	
        if(value  &&  !this.isSliding){
			this.isSliding=true;

			$(this.kPaneName+this.id).style.top=this.offsetContentSize*value+"px";

			this.scriptacSlider.sliderValue=value;
			this.sliderValue=value;
			this.isSliding=false;
		}
	},
    
	scrollHorizontal: function(value){
	
		if(value  &&  !this.isSliding){
			this.isSliding=true;

			$(this.kPaneName+this.id).style.left=this.offsetContentSize*value+"px";

			this.scriptacSlider.sliderValue=value;
			this.sliderValue=value;
			this.isSliding=false;
		}
	},
    
	scrollOnChange : function(value){
	
        if(value && !this.isSliding){
            this.isSliding=true;
            this.animateSlide(value);
        }
	},
	
    incrementSlide:function(scrollIncrement){
        this.animateSlide(this.sliderValue + scrollIncrement);
    },
    
    decrementSlide:function(scrollIncrement){
        this.animateSlide(this.sliderValue - scrollIncrement);
    },

    calcDecelerate:function(start, end){
        
        if (Math.abs(start-end) < 3 ){
            return end;
        }
        else{
            return (start - Math.floor((start - end)*this.kDecel) );
        }

    },
    
    animateSlide:function(endPos){

        if (endPos>1) 			{ endPos=1; }
        else if (endPos < 0 )	{ endPos=0; }
        
        this.sliderValue=endPos;
        window.clearInterval(this.animationId);
        var contentEndPos = this.offsetContentSize * endPos;

        var handleEndPos=(Math.round(this.trackLength-this.handleOffset)*endPos);
        var contentPos ={};
        var handlePos ={};
        this.isSliding=true;
        this.animationId=window.setInterval((function(){
            if(this.scrollAxis =="vertical"){
                contentPos = parseInt($(this.kPaneName+this.id).getStyle('top')) || 0;
                handlePos  = parseInt($(this.kHandleName+this.id).getStyle('top')) || 0;
            }
            else{
                contentPos = parseInt($(this.kPaneName+this.id).getStyle('left')) || 0;
                handlePos  = parseInt($(this.kHandleName+this.id).getStyle('left')) || 0;
            }
            contentPos= this.calcDecelerate(contentPos,contentEndPos);
            handlePos = this.calcDecelerate(handlePos,handleEndPos);
            if(this.scrollAxis =="vertical"){
                $(this.kPaneName+this.id).style.top=contentPos+"px";	
                $(this.kHandleName+this.id).style.top=handlePos+"px";
            }
            else{
                $(this.kPaneName+this.id).style.left=contentPos+"px";	
                $(this.kHandleName+this.id).style.left=handlePos+"px";
            }
            if(contentPos == contentEndPos){
                window.clearInterval(this.animationId);
                this.isSliding=false;
            }
        }).bind(this),30);

    }

  
});
 
 ScrollBar.sid =0;
  ScrollBar.create= function(params){
        ScrollBar.sid = ScrollBar.sid+1;
        params["id"]= ScrollBar.sid;
        return new ScrollBar(params);
    };