window.addEvent('domready', function() {

	// background resize
	var imageWidth = 1280;
	var imageHeight = 500;
	
	resizebackground(imageWidth, imageHeight);
	
	window.addEvent('resize', function(){
		resizebackground(imageWidth, imageHeight);
	}.bind(this));
	
	// trip finder checkboxes
	var trip_categories = $$('#kp_finder .trip_categories input');
	for (i=0; i<trip_categories.length; i++) {
		if (trip_categories[i].getProperty('checked')) {
			trip_categories[i].getParent().addClass('checked');
		}
		else {
			trip_categories[i].getParent().removeClass('checked');
		}
	}
	
	// extendable navigation menu
	$$('#right .knowhow_nav .level_1 > li > a, #right .mod_newsmenu .level_1 > li > a').each(function(elt){
		var menutext = elt.get('text');
		elt.appendText(menutext, 'before');
		elt.dispose();
    });
	var activeMenuId = 0;
	var menuElts = $$('#right .knowhow_nav ul.level_2, #right .mod_newsmenu ul.level_2');
	for (i=0; i<menuElts.length; i++) {
		var menuChildren = menuElts[i].getChildren();
		for (j=0; j<menuChildren.length; j++) {
			if (menuChildren[j].hasClass('active')) {
			activeMenuId = i;
			break;
			}
		}
	}
	new Fx.Accordion($$('#right .knowhow_nav .submenu, #right .mod_newsmenu .submenu'),$$('#right .knowhow_nav .level_2, #right .mod_newsmenu .level_2'),{
		display: activeMenuId,
		onActive: function(toggler) {  toggler.addClass('openmenu'); toggler.setStyle('cursor','default');},
        onBackground: function(toggler) { toggler.removeClass('openmenu'); toggler.setStyle('cursor','pointer');}
    });
});

function resizebackground(imageWidth, imageHeight)
{
	// Gather browser size and background element
	var browserWidth 	= window.getSize().x;
	var background 	= $$('#main-background .background');
	
	// When browser is smaller or equal
	if (browserWidth <=imageWidth) {
		background.setStyle('height',imageHeight);
		background.setStyle('width',imageWidth);
	}
	else {
		background.setStyle('height',(browserWidth/imageWidth)*imageHeight);
		background.setStyle('width',browserWidth);
	}

	// Update the viewport for the background
	$('main-background').setStyle('width', getViewport().width);
	
}

function getViewport()
{
	var e = window, a = 'inner';
	if ( !( 'innerWidth' in window ) ) {
		a = 'client';
		e = document.documentElement || document.body;
	}
	return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}