// BigChief ScrolledPanel
// Copyright (c) 2007 Andrea Franz (http://bigchief.it, http://nimboo.net/)
// 
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// 
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// VERSION 0.0.2

if( !BigChief ) var BigChief = {}

BigChief.ScrolledPanel = Class.create();
BigChief.ScrolledPanel.prototype = {
	initialize: function(element) {
		this.element = $(element);
		this.dimensions = {
			width: parseFloat(this.element.style.width),
			height: parseFloat(this.element.style.height)
		}; //this.element.getDimensions();
		this.options = Object.extend({
			scrollStep: this.dimensions.height,
			scrollSize: 10,
			scrollbarPosition: 'right'
		}, arguments[1] || 1);
		this.setup();		
	},
	
	setup: function() {            
		/* container */
		this.container = document.createElement('div');
		this.container.style.position = 'relative';
		this.container.style.width = this.dimensions.width + 'px';
		this.container.style.height = this.dimensions.height + 'px';
		this.container.style.overflow = 'hidden';
				
		/* panel */
		this.panel = document.createElement('div');
		this.panel.style.position = 'absolute';
		if(this.options.scrollbarPosition == 'right') {
			this.panel.style.paddingRight = this.options.scrollSize + 'px';
		} else {
			this.panel.style.paddingLeft = this.options.scrollSize + 'px';
		}
		this.panel.style.top = '0';
		this.panel.style.left = '0';
		
		this.panel.innerHTML = this.element.innerHTML;
		this.element.innerHTML = '';
		this.container.appendChild(this.panel);
		this.element.appendChild(this.container);
		this.setupScrollBar();
	},
	
	setupScrollBar: function() {		
		if( this.panel.offsetHeight > this.dimensions.height ) {
			/* down button */
			this.downButton = document.createElement('div');		
			this.downButton.className = 'BigChiefScrolledPanelDownButton';
			this.downButton.style.position = 'absolute';
			this.downButton.style.bottom = '0';
			this.downButton.style.right = (this.options.scrollbarPosition == 'right') ? '0' : this.dimensions.width - this.options.scrollSize + 'px';
			this.downButton.style.cursor = 'pointer';
			this.downButton.style.zIndex = '1';
			this.downButton.style.width= this.options.scrollSize + 'px'; 
			this.downButton.style.height= this.options.scrollSize + 'px'; 
			Event.observe(this.downButton, 'mousedown', this.onScrollDown.bind(this));
			this.container.appendChild(this.downButton);

			/* bar  */                                 
            
			/*
			this.bar = document.createElement('div');		
			this.bar.className = 'BigChiefScrolledPanelBar';
			this.bar.id = 'bar';  
			this.bar.style.position = 'absolute';
			this.bar.style.top = this.options.scrollSize + 'px';
			this.bar.style.right = '0';
			this.bar.style.zIndex = '1';                             
			this.bar.style.width= this.options.scrollSize + 'px'; 
			this.bar.style.height= this.dimensions.height - this.options.scrollSize * 2  + 'px';
			this.container.appendChild(this.bar);
			*/
			
			/* handle  */                                 
            
			/*
			this.handle = document.createElement('div');		
			this.handle.className = 'BigChiefScrolledPanelHandle';  
			this.handle.id = 'handle';  
			this.handle.style.position = 'absolute';                                                                          
			var height = this.dimensions.height / (this.panel.offsetHeight / this.dimensions.height);
			this.handle.style.height = height + 'px';                       
			this.handle.style.top = 0;// (this.dimensions.height / 2 - height / 2) + 'px';
			this.handle.style.right = '0';
			this.handle.style.cursor = 'pointer';
			this.handle.style.zIndex = '1';                             
			this.handle.style.width= this.options.scrollSize + 'px'; 									      			
			this.bar.appendChild(this.handle);
			*/
			
			/* up button */
			this.upButton = document.createElement('div');		
			this.upButton.className = 'BigChiefScrolledPanelUpButton';
			this.upButton.style.position = 'absolute';
			this.upButton.style.top = '0';
			this.upButton.style.right = (this.options.scrollbarPosition == 'right') ? '0' : this.dimensions.width - this.options.scrollSize + 'px';			
			this.upButton.style.cursor = 'pointer';
			this.upButton.style.zIndex = '1';                             			
			this.upButton.style.width= this.options.scrollSize + 'px'; 
			this.upButton.style.height= this.options.scrollSize + 'px';
			Event.observe(this.upButton, 'mousedown', this.onScrollUp.bind(this));              
			this.container.appendChild(this.upButton);			
		}
	},		
	
	onScrollDown: function(event) {                                                                		
		var step = (this.panel.offsetHeight + this.panel.offsetTop - this.dimensions.height -this.options.scrollStep >= 0) ? -this.options.scrollStep : -(this.panel.offsetHeight + this.panel.offsetTop - this.dimensions.height);
		this._move({ y: step });                                                                   
	},
	
	onScrollUp: function() {		
		var step = (this.panel.offsetTop + this.options.scrollStep <= 0) ? this.options.scrollStep : -this.panel.offsetTop;	   
		this._move({ y: step });
	},
	
	_move: function() {
		var options = Object.extend({
			x: 0,
			y: 0
		}, arguments[0] || {});
		new Effect.Move(this.panel, options);
	}
	
	
}