<!-- moo tools code -->

<script src="mootools.js" type="text/javascript">
/** Make sure you include window, core, fx, and transitions from mootools.net/download **/
</script>

<script type="text/javascript">

/** This fly-in window script has not been optimised, or made into a mootools class yet.
    perhaps when i can justify it, it will, if anyone else turns it into a class, or
    makes it more efficient let me know: ribeena@toasttechnology.com.au  **/

var effect1; //Our effect - this will move the window in and out

var effect1Play = false; //Indicates whether the window is showing or not

var clientsize; //the size of the client window (browser)

var flysize; //the size of the window we want to fly in

var ydifference = 0; //this will be the vertical size difference between the client window and our fly in window

var xdifference = 0; //and this is the horizontal difference

var showFly; //this is the toggle function we call to move the window in or out


window.addEvent('domready', function(){ //working from dome ready, so we don't have to wait for images to load

	//we start off by setting everything up and putting it in it`s starting state

	
	effect1 = new Fx.Styles( $('myFlyIn'), {duration: 500, wait: true});
	   //i only want the fly in to last 0.5seconds, change the duration to make it longer

	   // and you could add a transition too if you want the movement to ease

	
	clientsize = window.getSize(); //grab the size of the client window

	flysize = $('myFlyIn').getSize(); //grab the size of our fly in

	

	if (clientsize.size.y > flysize.size.y){
		ydifference = (clientsize.size.y - flysize.size.y)/2;
		   //only if our fly in window is smaller than the client window do we have difference

		   // we take half of the difference to figure out the offset to put the window

	}
	
	if (clientsize.size.x > flysize.size.x){
		xdifference = (clientsize.size.x - flysize.size.x)/2;
		   //same as above but for horizontal

	}
	
	$('myFlyIn').setStyle('left', flysize.size.x*-1); //make sure the window is hidden offstage

	$('myFlyIn').setStyle('z-index', 10); //and infront of everything

	
	$('myFlyIn').setStyle('top', window.getScrollTop()+ydifference);
	   //we start it off in the right place by adding the scroll offset of the slient window

	   // to the difference between the windows we figured out earlier

	   //we`ll use the horizontal difference later

	

	//now to set up our window change functions to ensure it updates and still positions

	// the fly-in window in the center of the screen


	//for scrolling we just have to set the vertical position to difference

	// plus the new scroll offset. I`ve not used Fixed for css compliant browsers

	// you`ll see why.

	window.onscroll = function(){
		if(effect1Play){
			if (clientsize.size.y > flysize.size.y){
				$('myFlyIn').setStyle('top', window.getScrollTop()+ydifference);
				   //if the fly-in is showing and it is smaller than

				   // the client window, we can update it, however

				   // if it is larger, we don`t, that way the user

				   // can use the scroll bars to see the whole fly in.

			}
		} else {
			$('myFlyIn').setStyle('top', 0);
			   //well it`s not showing, and we don`t want it stuffing up

			   //our scroll bars, so we place it at the top.

		}
	};


	//When the window size changes, our client window will change size

	// and in my case the fly-in size may change, we we need to figure out

	// the differences again. Note the behaviour of onresize varies

	// and may not update until you`ve finished resizing the browser.	

	window.onresize = function(){
		clientsize = window.getSize();
		flysize = $('myFlyIn').getSize();
	
		if (clientsize.size.y > flysize.size.y){
			ydifference = (clientsize.size.y - flysize.size.y)/2;
		} else {
			ydifference = 0;
		}
		
		if (clientsize.size.x > flysize.size.x){
			xdifference = (clientsize.size.x - flysize.size.x)/2;
		} else {
			xdifference = 0;
		}
		
		//all that code was same as before, but now we'll

		//set the difference to zero when the fly-in is larger

		
		
		$('myFlyIn').setStyle('top', window.getScrollTop()+ydifference);
		   //reposition the fly-in

		
		if(effect1Play){
			$('myFlyIn').setStyle('left', xdifference);
			   //if the fly in is showing move it to the right spot

		} else {
			$('myFlyIn').setStyle('left', flysize.size.x*-1);
			   //if not, make sure it`s off screen.

		}
	};
	

	//And here is our function we put on links to hide and show

	// our pretty fly in.	

	showFly = function(){
		if(effect1Play){
			//it`s showing, start the effect to hide it away

			effect1.start({ 'left': flysize.size.x*-1});
			effect1Play = false;
		} else {
			//it`s hidden, start the effect to move it to the center

			$('myFlyIn').setStyle('top', window.getScrollTop()+ydifference);
			effect1.start({ 'left': xdifference});
			effect1Play = true;

		}
	};
		
}); //end dom ready

</script>