/* vars
 * 
 */

var heightSize;

/*
 * methods
 */


function init() {
	// Make it sound real legit!
	document.getElementById('loading-text').innerHTML = 'Loading Libraries...<br />Loading UI Components...<br />Loading Images...<br />Initializing...';
	
	Ext.Ajax.request({
		url : 'pages/home.html' , 
		method: 'GET',
		success: function ( result, request ) { 
			initLoad( result.responseText );
		},
		failure: function ( result, request) { 
			Ext.MessageBox.alert('Failed', 'Unable to retrieve Main Content Data.');
		} 
	});
}

function initLoad( responseText ) {
	document.getElementById('baseContent').innerHTML = responseText;
	
	// wait for a 1/2 second then fade the mask away.
	setTimeout(function(){
		Ext.get('loading-mask').fadeOut({duration: 1,remove:true});
	}, 500);
}

/*
 * Starts the whole process of grabbing new page content and resizing the container
 */
function navigate( address, size ) {
	heightSize = size;
	Ext.get("baseContent").fadeOut({duration: .5});
	setTimeout(function(){
		getBaseContent(address)
	}, 500);	
}

/*
 * grabs the new page content, then calls the piping function
 */
function getBaseContent( address ) {
		Ext.Ajax.request({
			url : address , 
			method: 'GET',
			success: function ( result, request ) { 
				baseLoadContent(result.responseText); 
			},
			failure: function ( result, request) { 
				Ext.MessageBox.alert('Failed', 'Unable to retrieve Main Content Data.');
			} 
		});
}

/*
 * takes the response text and pipes it into the baseContent element, then calls the fade in function.
 */
function baseLoadContent( responseText ) {
	document.getElementById('baseContent').innerHTML = responseText;
	foundationResize(heightSize);
}

/* 
 * Need to really address my algo for this, its not sizing right...
 */
function foundationResize( heightChange ) {
	var foundationEl = Ext.get("foundation"); 
	
	var oldHeight = foundationEl.getHeight();
	var newHeight = heightChange;
	var newY = foundationEl.getY();
	
	newY = newY * (oldHeight / newHeight);

	foundationEl.shift({
				    	height: newHeight,
				    	y: newY,
						duration: .5
					});
	setTimeout(function(){
		Ext.get("baseContent").fadeIn({duration: .5});
	}, 500);
}