/***********************************
	Landscape navigation
************************************/
var myScreen = $('screen');
var myWorld = $('world');
var scroller = new Fx.Scroll(myScreen, {wheelStop: false, fps: 25, duration: 1600, transition: 'quad:in:out'});
var cloudMover = new Fx.Morph(myWorld, {fps: 25, duration: 1600, transition: 'quad:in:out'});

function Init()
{
	myScreen.fade('in');
}
var screenX;
var screenY;
function getScreenSize()
{
	var size = myScreen.getSize();
	screenX = size.x;
	screenY = size.y;
}
curPageCol = 1;
curPageRow = 1;
function gotoPage(col, row)
{
	
	x = 1920 * col;
	y = 1200 * row;
	x = x + ((1920 - screenX) /2);
	if (row == 0)
	{
	y = y + ((1200 - screenY) /2);				
	} else {
	y = y + (1200 - screenY);
	}
	scroller.pause();
	cloudMover.pause();
	scroller.start(x, y);
	curPageCol = col;
	curPageRow = row;
	
	cloudX = ((2688 - screenX) / 2) * col * -1;
	cloudY = ((1680 - screenY) / 2) * row * -1;
	cloudMover.start({'background-position': (cloudX + ' ' + cloudY)});
	

}
/***********************************
	Resize event
************************************/
var timer;
window.addEvent('resize', function(){
  $clear(timer);
  timer = (function(){
	getScreenSize();
//	alert("The element is "+screenX+" pixels wide and "+screenY+"pixels high.");
	gotoPage(curPageCol, curPageRow);
    //your logic goes here
  }).delay(50);
});


/***********************************
	Airplane animation
************************************/
	var myTransition = new Fx.Transition(Fx.Transitions.Bounce, 2);

	var myPlaneHoriz = new Fx.Morph('airplane', {duration: 10000, unit: '%', transition: Fx.Transitions.linear, onComplete: function() {myPlaneHoriz.start({ 'left': [0, 100], 'margin-left': [-30, 0] });}});
	var myPlaneVert = new Fx.Morph('airplane', {duration: 3000, unit: '%', transition: Fx.Transitions.Sine.easeInOut, onComplete: function() {startNewAltitude();}});
	
	myPlaneHoriz.start({ 'left': [0, 100], 'margin-left': [-30, 0] });
	var oldAlt = 50;
	var goingUp = true;
	function startNewAltitude()
	{
		if (oldAlt < 35)
		{
			goingUp = true;	
		}
		if (oldAlt > 35)
		{
			goingUp = false;	
		}
		if (goingUp)
		{
			diff = 80 - oldAlt;
			if (diff > 20)
			{
				diff = 20;
			}
			var newValue = Math.floor(Math.random()*(diff + 1));
			newValue = newValue + oldAlt;
		} else {
			diff = oldAlt - 20;
			if (diff > 20)
			{
				diff = 20;
			}
			var newValue = Math.floor(Math.random()*(diff + 1));
			newValue = oldAlt - newValue;
		}
		myPlaneVert.start({ 'top': [oldAlt, newValue]});		
		oldAlt = newValue;
	}
	startNewAltitude();
/***********************************
	Do this immediately!
************************************/
myScreen.fade('hide');
getScreenSize();
scroller.set(1920 + ((1920 - screenX) /2), 1200 + (1200 - screenY));
gotoPage(curPageCol, curPageRow);

$$('#clowns .item').each(function(el){
    el.fade('hide');
});
$('activeClown').fade("show");

$$('#hoesteunen .item').each(function(el){
    el.fade('hide');
});
$('activeHoeSteunen').fade("show");

$$('#gadgets .item').each(function(el){
    el.fade('hide');
});
$('activeGadget').fade("show");