var effectDuration = 0.7;
var lastSidebarHeight = -1;

// TODO: At no point is the width set to the start or end width explicitly. These are used only to work out the percentage to grow / shrink by. This should change!    
Effect.WidthResizeFromTo = function(element, effectOptions, fromWidthPX, toWidthPX) {
	element = $(element);
	var elementDimensions = element.getDimensions();
	var percentageToResize = (toWidthPX / fromWidthPX) * 100;

	return new Effect.Scale(element, percentageToResize,
		Object.extend({
			scaleY: false,
			scaleContent: false,
			scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}
		}, effectOptions || { })
	);
};

// TODO: At no point is the height set to the start or end height explicitly. These are used only to work out the percentage to grow / shrink by. This should change!    
Effect.HeightResizeFromTo = function(element, effectOptions, fromHeightPX, toHeightPX) {
	element = $(element);
	var elementDimensions = element.getDimensions();
	var percentageToResize = (toHeightPX / fromHeightPX) * 100;

	return new Effect.Scale(element, percentageToResize,
		Object.extend({
			scaleX: false,
			scaleContent: false,
			scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}
		}, effectOptions || { })
	);
};

function initSidebar() {
	var button = new Element('a', { 'id':'sidebarToggleButton', 'href':'#', 'title':'Toggle the sidebar on/off'});
	Element.insert($$('#sidebar .seeThroughContent')[0], {top:button});
	Event.observe('sidebarToggleButton', 'click', toggleSidebar);
}

function toggleSidebar(eventData) {
	try { Event.element(eventData).blur(); } catch(e) {};
	try { Event.stop(eventData); } catch(e) {};
	
	if ($('sidebar').hasClassName('collapsing')) return(false);
	$('sidebar').addClassName('collapsing');

	if ($('sidebar').hasClassName('collapsed')) {

		// Going down!
		$('sidebar').style.height = 'auto';			// In case the user resized the font while the sidebar was collapsed
//$('sidebarContent').style.height = 'auto';

		var contentHeight = $('contentAndNavContainer').getHeight();
		if (lastSidebarHeight == -1) lastSidebarHeight = contentHeight;
		new Effect.HeightResizeFromTo('sidebarPlaceholder', { duration: effectDuration }, contentHeight, lastSidebarHeight);

		new Effect.WidthResizeFromTo('contentAndNavContainer', { duration: effectDuration }, 890, 680);
		//new Effect.Move('sidebar', { x: 0, y: $('header').getHeight(), mode: 'relative', duration: effectDuration });
		//new Effect.Appear('sidebar', { duration: effectDuration });
		new Effect.BlindDown('sidebarContent', { duration: effectDuration, afterFinish:function() {
			$('sidebar').setStyle({ position:'static', 'top':'auto', left:'auto' });
			$('sidebarPlaceholder').style.height = '1px';
			lastSidebarHeight = $('sidebar').getHeight();
			
			// Force IE 6 to redraw content (need to test IE 7 and disable if not necessary???)
			if (Prototype.Browser.IE) { 
				$('sidebar').style.zoom = '2';
				$('sidebar').style.zoom = '1';
			}

			$('sidebar').removeClassName('collapsed');
			$('sidebar').removeClassName('collapsing');

		}});

	} else {

		// Going up!
		lastSidebarHeight = $('sidebar').getHeight();
		var contentHeight = $('contentAndNavContainer').getHeight();
		$('sidebarPlaceholder').style.height = lastSidebarHeight + 'px';
		$('sidebar').absolutize().setStyle({ height:'auto' });;

		if (lastSidebarHeight > contentHeight) { 
			new Effect.HeightResizeFromTo('sidebarPlaceholder', { duration: effectDuration }, lastSidebarHeight, contentHeight);
		}

		new Effect.WidthResizeFromTo('contentAndNavContainer', { duration: effectDuration }, 680, 890);
		//new Effect.Move('sidebar', { x: 0, y: 0 - $('header').getHeight(), mode: 'relative', duration: effectDuration });
		//new Effect.Fade('sidebar', { to:0.5, duration: effectDuration });

//  $('sidebarContent').style.overflow = 'hidden';

		new Effect.BlindUp('sidebarContent', { duration: effectDuration, afterFinish:function() {
			$('sidebar').setStyle({ 'top':'0px' });
			$('sidebar').addClassName('collapsed');
			$('sidebar').removeClassName('collapsing');
		}});
 	}
}

Event.observe(document, 'dom:loaded', initSidebar);