// LOAD-ORDER: 120

/*


  C_L_A_S_S

	"Vertical Splitter"

	Dependencies : [script.aculo.us / drag-drop]

*/



var VSplitter = Class.create( CookieHelper , {

	/* @private */
	_elem: null,
	
	/* @private */
	ELEM_CLASS: 'v_splitter',
	
	ELEM_SEMIHIDDEN_CLASS: 'v_splitter_is_semi_hidden',
	
	COLLAPSE_BTTN_CLASS: 'collapse_bttn',
	

	
	/* @constructor */
	initialize: function ( parent, leftClient, rightClient, intXDist , blnRightClientIsAdjustedByMargin, leftCookieName, collapsedPrefKey ) {			
		
			this.leftClient = leftClient;
			this.rightClient = rightClient;			
			
			this.xDist = intXDist;
			this.cookieName = leftCookieName;
			this._collapsedPrefKey = collapsedPrefKey;			
			
			this.blnRightClientIsAdjustedByMargin = blnRightClientIsAdjustedByMargin;
			
			this._elem = this.createElem ( parent );	
						
			this.alignElem(); //hook up the alignElem() to event:xxxxxx			
					
			this.doPrefControl();						
			
					
			new Draggable( this._elem , 
							{ 
								constraint: 'horizontal' , 
								ghosting: false, 	
								onStart: this.onDragStart.bind(this),						
								onEnd: this.onDraggedEnd.bind(this) 
							}
			);			
			
			Event.observe(  window, 'resize' , this.alignElem.bind(this) );
	
	},
	
	
	
	/* @public */
	/* TODO: run every time browser CHANGES size (eventlistener) */
	alignElem: function(){
	
		if ( !this._elem.hasClassName( this.ELEM_CLASS ) ) return;	
		
		if ( !this._elem.hasClassName('foxed') ) this._elem.addClassName( 'foxed');
		
		var _bottom = (this.leftClient).getStyle('bottom');
		var _top = (this.leftClient).getStyle('top');
		
		if (_bottom) this._elem.setStyle( { 'bottom': _bottom } );
		if (_top) this._elem.setStyle( { 'top': _top } );
		
		//if( $('infobox') ) $('infobox').insert('<br/>splittr.leftClientEastside = ' + this.leftClientEastside() );
				
		this._elem.setStyle( {	'left': this.leftClientEastside() + 'px', 	'height': (this.leftClient).getHeight() + 'px'	} );
		
		
	
	},
	
	
	/* @private */
	doPrefControl: function() {
		
		
		var c = this.readCookie( this.cookieName );
		var c2 = this.readCookie( this._collapsedPrefKey );
		
		if ( c ) {
				if ( this.withinLimits( c ) ) {
					this.setLeft( c );
					this.reAlignClients( );
				}
		}
		
		if ( c2 ) {
			if( parseInt(c2) == 1 )
				this.collapse(); //in case CSS hasn't alreadyy!
		}
		
	},
	
	/* @public */
	reAlignClients: function( ) {						 
		
		 var oldHorizMargin = this.clientHorizMargin();		 		 
		 var intDiff = this.getLeft() - this.leftClientEastside();			
		var leftClientsHorizPadding = parseInt(this.leftClient.getStyle('padding-left')) + parseInt(this.leftClient.getStyle('padding-right')) ;
		
		//alert( "oldHorizMargin:" + oldHorizMargin + " intDiff:" + intDiff + " leftClientsHorizPadding:" + leftClientsHorizPadding);
		var newW = ((this.leftClient.getWidth()) - leftClientsHorizPadding) + intDiff;
		//console.warn("newW:" + newW);
		this.leftClient.style.width = newW + 'px';	
		
		this.reAlignOnlyRightClient( oldHorizMargin, this.leftClientEastside() );
				
		
	},
	
	reAlignOnlyRightClient: function ( intMarginDiff, intRefLeft ){
		
		if( this.blnRightClientIsAdjustedByMargin ) {			
			this.rightClient.style.marginLeft = (intRefLeft + intMarginDiff) + 'px';
		}
		else
			this.rightClient.style.left = (intRefLeft + intMarginDiff) + 'px';	
		
	},
	
	/* @public */
	setLeft: function ( intLeft ) {
		
		this._elem.setStyle( { left : intLeft + 'px' } );
	},
	
	/* @public */
	getLeft: function () {
		return this._elem.positionedOffset().left;
	},
	
	/* @public */
	getHeight: function() {
		return this._elem.getHeight();
	},		
	
	/* @private */
	onDragStart: function() {
		//this._elem.removeClassName( 'foxed' );
		this._startLeft = this.getLeft();
		
	},
	
	/* @private */
	onDraggedEnd: function( el, mouseEv ) {		
		
		//this._elem.style.position = this.preferedPosType();
		if ( !this._elem.hasClassName('foxed') ) this._elem.addClassName( 'foxed');
		
		if ( this.withinLimits( this.getLeft() ) ) {
			 		this.reAlignClients( );
			 		if ( this.cookieName != '__none__' )
			 			this.writeCookie( this.cookieName, this.getLeft(), getNewDate( 9 ), null , '/' );
		}
		else {	this.alignElem();   }
			
	},
	
	/* @private */
	withinLimits: function( intLeft ) {
			
		var rightDistance = ( document.viewport.getWidth() - intLeft ) + this._elem.getWidth();				
		
		if (this.xDist) 
			return !( intLeft < this.xDist || rightDistance < this.xDist );
		else
			return true;
		
	},
	
	/* @private */
	clientHorizMargin: function() {
		if ( this._hibernatedClientHorizMargin )
			return this._hibernatedClientHorizMargin
		else
			return this.rightClient.cumulativeOffset().left - (this.leftClient.cumulativeOffset().left + this.leftClient.getWidth() ) ;		
	},
	
	hibernateClientHorizMargin: function() {
		this._hibernatedClientHorizMargin = this.clientHorizMargin();
	},
	
	unHibernateClientHorizMargin: function() {
		delete this._hibernatedClientHorizMargin;
	},
	
	
	/* @private */
	leftClientEastside: function() {
		
		return (this.leftClient).positionedOffset().left + (this.leftClient).getWidth() ;
	},
	
	
	/* @public */
	getId: function() {
		return this._elem.identify();
	},
	
	/* @private */
	createElem: function( parentElem ) {
	
		var newElem = $( document.createElement('div') );				
		
		newElem.addClassName ( this.ELEM_CLASS );
		
		this._bttn = this.createCollapseButton();
				
		newElem.insert( this._bttn );
		
		parentElem.insert( { 'bottom' : newElem } );
		
		newElem.identify();
		
		return newElem;
	}, 
	
	createCollapseButton: function() {		
		var bttn =  $( document.createElement('div') );			
		bttn.identify();	
		bttn.style.position = "absolute";	
		bttn.addClassName( this.COLLAPSE_BTTN_CLASS );
		bttn.observe( 'click', this.buttonClicked.bind(this) );	
		return bttn;
	},
	
	
	
	buttonClicked: function(ev) {			
		
		if ( this._elem.hasClassName( this.ELEM_CLASS ) ) 
			this.collapse();
		else
			this.returnFromCollapse();
			
	},
	
	
	
	collapse: function() {
	     
		this._elem.removeClassName( this.ELEM_CLASS );
		this._elem.addClassName( this.ELEM_SEMIHIDDEN_CLASS );
		this.setLeft( 0 ); /* save if restore */	
		this.hibernateClientHorizMargin();
		/*this.reAlignClients(); / dont bother .. this time! */
		this.reAlignOnlyRightClient( 0, 0 );
		this.leftClient.hide();
		
		this.writeCookie( this._collapsedPrefKey, 1 , getNewDate( 9 ), null , '/');
		
	
	},
	
	returnFromCollapse: function() {
	    
		this._elem.removeClassName( this.ELEM_SEMIHIDDEN_CLASS );
		this._elem.addClassName( this.ELEM_CLASS );
		this.leftClient.show();
		this.alignElem();
		this.reAlignClients();
		
		this.unHibernateClientHorizMargin();
		
		this.writeCookie( this._collapsedPrefKey, 0 , getNewDate( 9 ), null , '/');
		//this.toggleButtonClass();
	}
	


});

/* do not EXECUTE if *.spec */
if ( !location.toString().include( '_spec.html' ) ){
	
	var spaceInPx = 66;
	
	var splittr = null;
	

	document.observe(	'dom:loaded' , 
	
						function() { 					
						    var a = $('toc');
						    var b = $('main');
						    
							splittr = new VSplitter( $$('body')[0] , a , b, spaceInPx , true ,'v_splitter_1_left', 'toc_hidden' );
							
							
						} 
				);
				

				
};