function SliderV(scrollPanel, bg, thumb, height) {
	this.height = height;
	this.scrollPanel = scrollPanel;
	this.bg = bg;
	this.thumb = thumb;
	var contentBlock = YAHOO.util.Selector.query('#'+scrollPanel+' div.scrollyData'); 
    var Event = YAHOO.util.Event,
        Dom   = YAHOO.util.Dom,
        lang  = YAHOO.lang,
        slider
	
	//var bg = document.getElementById(this.scrollPanel).getElementsByTagName(bg);
	
	var topConstraint = 0;
	var bottomConstraint = this.height;
	this.region = YAHOO.util.Dom.getRegion(contentBlock[0]);
    var scaleFactor = this.getScale();
	var keyIncrement = 20;
	
	
	Event.onDOMReady(function() {
	

		slider = YAHOO.widget.Slider.getVertSlider(bg, thumb, topConstraint, bottomConstraint);
		slider.getRealValue = function() {
			return Math.round(this.getValue() * scaleFactor);
		}
	
		slider.subscribe("change", function(offsetFromStart) {
			
			//alert(scrollPanel);
			
			// use the scale factor to convert the pixel offset into a real value
			var actualValue = slider.getRealValue();
			contentBlock[0].style.top = actualValue * (-1) + 'px';
			
			// Update the title attribute on the background.  This helps assistive
			// technology to communicate the state change
			Dom.get(bg).title = "slider value = " + actualValue;
		});
	
		slider.subscribe("slideStart", function() {
				YAHOO.log("slideStart fired", "warn");
		});
	
		slider.subscribe("slideEnd", function() {
				YAHOO.log("slideEnd fired", "warn");
		});
		
	});
}

SliderV.prototype = {
	getScale: function(){
		var nodeHeight = this.region.bottom-this.region.top;
		YAHOO.log('NODE HEIGHT: '+ nodeHeight);
		scale = (nodeHeight-this.height)/this.height;
		scale = (scale > 0) ? scale : 0;
		return scale;
	},
	getDataElement: function(){
		var container = Dom(scrollPanel);
		console.log(container);
	}
}


function SliderH(scrollPanel, bg, thumb) {
	this.scrollPanel = scrollPanel;
	this.bg = bg;
	this.thumb = thumb;
    var Event = YAHOO.util.Event,
        Dom   = YAHOO.util.Dom,
        lang  = YAHOO.lang,
        slider
	
	//var bg = document.getElementById(this.scrollPanel).getElementsByTagName(bg);
	
	var topConstraint = 0;
	var bottomConstraint = 300;
	this.region = YAHOO.util.Dom.getRegion(scrollPanel);
    var scaleFactor = this.getScale();
	var keyIncrement = 20;
	
	
	Event.onDOMReady(function() {
	

		slider = YAHOO.widget.Slider.getHorizSlider(bg, thumb, topConstraint, bottomConstraint);
		slider.getRealValue = function() {
			return Math.round(this.getValue() * scaleFactor);
		}
	
		slider.subscribe("change", function(offsetFromStart) {
			
			var contentBlock = YAHOO.util.Selector.query('#'+scrollPanel+' div.scrollyData'); 
			//alert(scrollPanel);
			
			// use the scale factor to convert the pixel offset into a real value
			var actualValue = slider.getRealValue();
			
			//contentBlock[0].style.left = actualValue * (-1) + 'px';
			Dom.get(scrollPanel).style.left = actualValue * (-1) + 'px';
			//YAHOO.util.Dom.setStyle(scrollPanel, 'border', '1px solid red');
			
			// Update the title attribute on the background.  This helps assistive
			// technology to communicate the state change
			Dom.get(bg).title = "slider value = " + actualValue;
		});
	
		slider.subscribe("slideStart", function() {
				//console.log("slideStart fired", "warn");
		});
	
		slider.subscribe("slideEnd", function() {
				//console.log("slideEnd fired", "warn");
		});
		
	});
}

SliderH.prototype = {
	getScale: function(){
		var nodeWidth = this.region.right-this.region.left;
		//console.log('nodeWidth: '+nodeWidth);
		scale = (nodeWidth-300)/300;
		return scale;
	}
}