$(document).ready(function()
{
	var resizePageElement = function()
	{
		var size = getPageSize();
		var items = $('.rotator_item');
		var width = size[2] < 1600 ? 1600 : 3200;
		var height = size[1] - $('#navigation').height() - $('#nextprev').height() - $('#copy').height();

		if(height < 824)
		{
			$('#rotator, .rotator_list').height(824);
		}

		$('.rotator_list').width($(items).length * width);

		$(items).each(function()
		{
			$(this).width(width);

			if(height < 824)
			{
				$(this).height(824);
			}

			$('a', this).each(function()
			{
				if(!this.rel)
				{
					$(this).attr('rel', '#popup_window');
				}
			});
		});

		$('#popup_window').width(size[2] - 200).height(size[3] - 200);
		$('.contentWrap').height(size[3] - 230);
	}

	resizePageElement();

	$(window).bind('resize', null, resizePageElement);

	var navigation = $('#navigation li a');

	$('#mainmenu_map area').each(function(key)
	{
		if(navigation[key])
		{
			$(this).click(function(event)
			{
				event.preventDefault();
				$(navigation[key]).click();
			});
		}
	});

	$('a[rel=\#popup_window]').overlay({
		expose: '#000',
		onBeforeLoad: function()
		{
			$('body').css('overflow', 'hidden');

			// grab wrapper element inside content
			var wrap = this.getContent().find(".contentWrap");
			// load the page specified in the trigger
			wrap.load(this.getTrigger().attr("href"));
		},
		onClose: function()
		{
			$('body').css('overflow', 'auto');
		}
	});

	$('#screen').serialScroll({
		target:'#rotator',
		items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
		prev:'img.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'img.next',// Selector to the 'next' button (absolute too)
		axis:'xy',// The default is 'y' scroll on both ways
		navigation:'#navigation li a',
		duration:400,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
		force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
		
		//queue:false,// We scroll on both axes, scroll both at the same time.
		//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
		stop:true,// Each click will stop any previous animations of the target. (false by default)
		//lock:true, // Ignore events if already animating (true by default)		
		//start: 0, // On which element (index) to begin ( 0 is the default, redundant in this case )		
		//cycle:true,// Cycle endlessly ( constant velocity, true is the default )
		//step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
		//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
		//lazy:false,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
		//interval:1000, // It's the number of milliseconds to automatically go to the next
		//constant:true, // constant speed
		
		onBefore:function( e, elem, $pane, $items, pos ){
			/**
			 * 'this' is the triggered element 
			 * e is the event object
			 * elem is the element we'll be scrolling to
			 * $pane is the element being scrolled
			 * $items is the items collection at this moment
			 * pos is the position of elem in the collection
			 * if it returns false, the event will be ignored
			 */
			 //those arguments with a $ are jqueryfied, elem isn't.
			e.preventDefault();
			if( this.blur )
				this.blur();
		},
		onAfter:function( elem ){
			//'this' is the element being scrolled ($pane) not jqueryfied
		}
	});
});

var getPageSize = function()
{
	var xScroll, yScroll, windowWidth, windowHeight;

	if(window.innerHeight && window.scrollMaxY)
	{
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	}
	else if(document.body.scrollHeight > document.body.offsetHeight)
	{
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	}
	else
	{
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	if(self.innerHeight)
	{
		if(document.documentElement.clientWidth)
		{
			windowWidth = document.documentElement.clientWidth;
		}
		else
		{
			windowWidth = self.innerWidth;
		}

		windowHeight = self.innerHeight;
	}
	else if(document.documentElement && document.documentElement.clientHeight)
	{
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	}
	else if(document.body)
	{
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;
	pageWidth = (xScroll < windowWidth) ? xScroll : windowWidth;

	return [pageWidth, pageHeight, windowWidth, windowHeight];
};