// JavaScript Document

var cflayout = { // cf = commutefrom
	infoContHeight : 0, // height of the info panel container in the left columns
	smallWindow : false, // flag to say if the window we are in is small, if so disable some functionality.
	init: function(){ // initialise the layout
		$('mapsearchresultscontainer').setOpacity(0);
		cflayout.setSize();
		window.addEvent('resize', cflayout.setSize);
	},
	removeElementsForSmallWindow: function(){
		if(window.getWidth()<800) {
			// remove anything other than the first paragraph in the info text
			var infotext = $('infotext').getChildren();
			for(var i=1; i<infotext.length; i++) {
				infotext[i].remove();
			}
			//remove advanced search
			$('advancedsearchcontainer').setStyle('display', 'none');
			$('advancedsearchlink').setStyle('display', 'none');
			// change menu
			$('topmenu').innerHTML = "<a href='http://www.commutefrom.com' target='_blank' class='tool-tip-elem' title='full screen::visit the full commutefrom.com website <br/> for more functionality and a bigger view'>full screen</a>"
			$ES('h1','header').each(function(e){e.remove();});
		}
	},
	setSize: function(){ // adjust the height of the body section to fill the screen, and of the info area above the advert
		cflayout.removeElementsForSmallWindow();
		var infoHeight;// = parseInt($('infotext').offsetHeight);
		var infoWidth = parseInt($('barcontainercontainer').offsetWidth); 
		//if(infoHeight != 2) { //reset to default with for resizing window (obviously has no effect on initial load), only if summary results are not showing
		if($('mapsearchresultscontainer').getStyle('opacity') == 0) {
			$('barcontainercontainer').setStyle('width','30%'); 
			if(!window.ie6) $('maincontent').setStyle('margin-left','30%'); // leave margin-left:0px for IE6 as per css
			$('maincontent').setStyle('width','69%');
			// reset for later use
			//infoHeight = parseInt($('infotext').offsetHeight);
			infoWidth = parseInt($('barcontainercontainer').offsetWidth);			
		} else { // set width otherwise we get scroll bars when making the window smaller, as main content is a set px width
			$('maincontent').setStyle('width',(window.getWidth()-infoWidth - 1) + 'px');
		}

		var docHeight = window.getHeight();
		//var searchHeight = parseInt($('search').offsetHeight);
		//var headerHeight = parseInt($('header').offsetHeight);
		var bodyTop = parseInt($('body').offsetTop);
		//var bodyHeight = docHeight - searchHeight - headerHeight - 5;
		var bodyHeight = docHeight - bodyTop - 3;
		$('body').setStyle('height',bodyHeight.toString() + 'px');
		
		$('infocontainer').setStyle('height','20%'); // hack for ie6 - if the css height (65%) + the ad height > available space it breaks, so temporarily make it small 
 		var barContHeight = parseInt($('barcontainer').offsetHeight);
		var advertHeight = parseInt($('advert').offsetHeight);
		cflayout.infoContHeight = barContHeight - advertHeight - 3;
		$('infocontainer').setStyle('height',cflayout.infoContHeight + 'px');
		
		// adjust width of side bar to avoid scroll bar 
		//if(infoHeight == 2) { // unless the height is zero because the results summary is showing
		if($('mapsearchresultscontainer').getStyle('opacity') != 0) {
			$('maincontent').setStyle('width',(window.getWidth()-infoWidth - 1) + 'px');
		} else {
			infoHeight = parseInt($('infotext').offsetHeight);
			infoWidth = infoHeight / cflayout.infoContHeight * infoWidth + 20;
			infoWidth = Math.min(Math.max(infoWidth, 200), 400);
			$('maincontent').setStyle('width',(window.getWidth()-infoWidth - 1) + 'px');
			if(!window.ie6) $('maincontent').setStyle('margin-left',infoWidth + 'px');
			$('barcontainercontainer').setStyle('width',(infoWidth) + 'px');
		}
	}/*,
	showSideSearchResults: function(){ // show the map search results in the side bar
		cflayout.showSideSearchResultsOrInfo('info','mapsearchresults');
	},
	showSideInfo: function(){ // show the info (and hide search results) in the side bar
		cflayout.showSideSearchResultsOrInfo('mapsearchresults','info');
	},		
	showSideSearchResultsOrInfo: function(hide, show){ // show the search results or info in the side bar
		var hideHeight = $(hide).offsetHeight;
		if(hideHeight != 0) { // don't do anything if the desired element is already showing
			$(hide).setStyle('border-bottom-color','#759842');
			$(hide).setStyle('height', hideHeight);// hmm think taking this out means the first animation doesn't work
			$(hide).effect('height', {duration: 750, transition: Fx.Transitions.quartInOut}).start(0)
				.chain(function(){
					$(hide).setStyle('border-bottom-color','#FFFFFF');
					$(show).setStyle('border-bottom-color','#759842');
					$(show).effect('height', {duration: 750, transition: Fx.Transitions.quartInOut})
													.start(cflayout.infoContHeight-20)
						.chain(function(){
								$(show).setStyle('height', 'auto');
								$(show).setStyle('border-bottom-color','#FFFFFF');
						});
				} ); 
		}
	}*/
};
window.addEvent('domready',cflayout.init);
// done hear as this is needed when writing the page before the domready event
cflayout.smallWindow = (window.getWidth() < 800);