/**
 * @author Grace
 *  Scroll	- JS scrollbar -- depends on scriptaculous slider.js
 *  
 *  
 *  
 */

//namespace
if ((typeof POK) == 'undefined') {
	var POK = {};
}


/*
 * Scroll Widget -- DEPENDS ON scriptaculous slider.js
 *   Constructor
 *		div (str) -- div where scrollable items are stored
 *		handle (str)
 *		track (str)
 *		wrap (str)
 *		direction (str:optional) -- 'v' or 'h' default: 'h'
 */
POK.Scroll = function(config){
	this.div = config.div;
	this.handle = config.handle;  //scrollbar handle ID
	this.track = config.track;		//scrollbar track ID
	this.wrap = config.wrapper;
	this.direction = config.direction ? config.direction : 'h';
	
	//calculate the initial position of the slider & menu
	this.initPos = 0;
	
	this.sliderObj = null;

	//pointer to the actual DIV objects
	this.scrollDiv = null;
	this.handleDiv = null;
	this.trackDiv = null;
	this.wrapDiv = null;
};

POK.Scroll.prototype = {

	// scroll the element horizontally based on its width and the slider maximum value
	scrollHorizontal: function(value, element, slider) {
		element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
	},
	
	scrollVertical: function(value, element, slider) {
		element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
	},
	
	load: function(dorefresh) {
		if(! dorefresh) { 
			this.scrollDiv = $(this.div);
			this.handleDiv = $(this.handle);
			this.trackDiv = $(this.track);
			this.wrapDiv = $(this.wrap);			
		}

		//if no scrolling content or if no scrollbar, don't do anything.
		if (!this.scrollDiv || !this.wrapDiv) {
			return;
		}

		/* Slider -------need to init after page is done loading-- */
		/* otherwise the slider will be hidden...  not sure why    */
		var that = this;

		// horizontal slider control
		if (this.direction == 'h'){
				this.sliderObj = new Control.Slider(this.handle, this.track , {
				onSlide: function(v) { that.scrollHorizontal(v, that.scrollDiv, that.sliderObj);  },
				onChange: function(v) { that.scrollHorizontal(v, that.scrollDiv, that.sliderObj); }
			});
			
			// disable scrolling if text doesn't overflow the div
			if (this.scrollDiv.scrollWidth <= this.scrollDiv.offsetWidth) {
				this.sliderObj.setDisabled();
				this.wrapDiv.hide();
			}
		}
		//vertical slider control
		else {
			this.sliderObj = new Control.Slider(this.handle, this.track , {
				axis: 'vertical',
				onSlide: function(v) { that.scrollVertical(v, that.scrollDiv, that.sliderObj);  },
				onChange: function(v) { that.scrollVertical(v, that.scrollDiv, that.sliderObj); }
			});
			
			// disable scrolling if text doesn't overflow the div
			if (this.scrollDiv.scrollHeight <= this.scrollDiv.offsetHeight) {
				this.sliderObj.setDisabled();
				this.wrapDiv.hide();
			}
			else {
				this.sliderObj.setEnabled();
				this.wrapDiv.show();
			}			
		}
		this.sliderObj.setValue(this.initPos);  //Goes from 0 to 1
	},
	
	refresh: function() {
		//this.sliderObj.setDisabled();
		this.sliderObj.dispose();
		this.sliderObj = null;
		
		//recreate HTML
		this.destroyTrack();
		this.createTrack();
		this.load(true);
	},
	destroyTrack : function () {
		this.trackDiv = null;
		this.handleDiv = null;
		this.handleimg = null;
		this.wrapDiv.update('');
	},
	createTrack : function() {
		/*recreate HTML:  
		 <div id="maintrack" class="scrolltrack"> 
			<div id="mainhandle" class="scrollhandle" ><img src="graphics/scrollhandle.gif" alt="scroll handle"/></div>
		</div>*/
		
		this.trackDiv = new Element ('div', {'id' : 'maintrack', 'class' : 'scrolltrack'});
		this.wrapDiv.insert(this.trackDiv);
		
		this.handleDiv = new Element ('div', {'id' : 'mainhandle', 'class' : 'scrollhandle'});
		this.trackDiv.insert(this.handleDiv);
		
		var handleimg = new Element('img', {'src' : 'graphics/scrollhandle.gif','alt' : 'scroll handle'});
		this.handleDiv.insert(handleimg);
	}
};

/*---------------------------------------------------------------
END of Scroll class  */