window.onload = function () {
	$(document).ready(function () {
		/* This script sets up all of the dynamic interaction on the sorting page
			0. does pngFix for IE 6
			1. set up pod selector slideshow
			2. set up behavior for emergency tab
			3. set up jScrollPane
		*/

		// 0. PNG fix for IE 6
		$(document).pngFix();

		// 1. set up pod selector slideshow
		var pods = ['fs', 'cs', 'ce', 'od', 'bc'];

		// custom transition function
		// built-in fxn breaks when the panes are 100% width and the win is resized
		$.fn.cycle.transitions.piedmontScrollHorz = function($cont, $slides, opts) {
			$cont.css('overflow','hidden').width();
			opts.before.push(function(curr, next, opts, fwd) {
				next.cycleW = $('body').width(); // added this line
				$.fn.cycle.commonReset(curr,next,opts);
				opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);
				opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;
			});
			opts.cssFirst = { left: 0 };
			opts.cssBefore= { top: 0 };
			opts.animIn   = { left: 0 };
			opts.animOut  = { top: 0 };
		};

		// initialize pod selector slideshow
		var podCycle = $('#podSlider').cycle({
			fx:			'piedmontScrollHorz',
			speed:		300,
			timeout:	5000,
			pause: 		1,
			before:		blurAll,
			after: 		highlightPodLink
		});
		// activate the first pane
		podCycle.cycle(1).cycle(0);

		// fix pane width if the window is resized
		$(window).resize(function () {
			$('#podSlider .pane').css({width: $('body').width()+'px'});
		});

		// this is called just before a slide transition
		function blurAll() {
			$('.activePane .arrow').stop().css({top: '0px', height: '0px'}).hide();
			$('.activePane ul').hide('clip');
			$('.activePane').stop().css({background: 'none'}).removeClass('activePane');
		}

		// this is called just after a slide transition
		function highlightPodLink() {
			$('#navbarrightinner li.'+this.id).addClass('activePane').css(
					{background: 'url(/Portals/_default/Skins/Sort/images/podControl/'+this.id+'-arrow.png) center -20px no-repeat'}
				);
			var arrowWidth = $('.activePane').outerWidth()+'px';
			$('.activePane ul').css('width', '835px').show('slide');
			if (!($.browser.msie() && $.browser.version.number() < 7)) {
				$('#navbar .arrow').stop().css({top: '0px', height: '0px'}).show();
				$('.activePane .arrow').css({width: arrowWidth}).animate({top: '-17px', height: '21px'}, 200);
			}
		}

		// bind mouseovers to the li's in #navbar so they
		// can behave as custom slideshow controls
		$('#navbarrightinner > ul > li').each(function (index) {
			// set backgrounds for arrow divs, add classes for auto activation
			$(this).addClass('init').addClass(pods[index]);
			$('.init .arrow').css({background: 'url(/Portals/_default/Skins/Sort/images/podControl/'+pods[index]+'-arrow.png) top center no-repeat'});
			$(this).removeClass('init');
			$(this).hover(
				// mouseenter
				function () {
					podCycle.cycle('pause');
					podCycle.cycle(index);
					$(this).addClass('activePane').css(
							{background: 'url(/Portals/_default/Skins/Sort/images/podControl/'+pods[index]+'-arrow.png) center -20px no-repeat'}
						);
				},
				//mouseleave
				function () {
					podCycle.cycle('resume');
				}
			);
		});

		// 2. set up behavior for emergency tab
		if (!$.browser.msie()) {
			$('#emergency .tab').corner('10px round br bl');
			$('#emergency .inner').corner('10px round br');
		}
		$('#emergency .tab').css({top: $('#emergency').height()-10+'px'});
		$('#emergency').animate({top: '-'+$('#emergency').height()+'px'}, 400);
		$('#emergency').hover(
			function () {
				podCycle.cycle('pause');
				$(this).stop().animate({top: '0px'}, 250);
				$('#screenShade').stop().css(
						{opacity: 0, display: 'block', width: $('body').width(), height: $('body').height()}
					).animate({opacity: 0.5}, 500);
			},
			function () {
				$(this).stop().animate({top: '-'+$('#emergency').height()+'px'}, 250);
				$('#screenShade').stop().css({display: 'none'});
				podCycle.cycle('resume');
			}
		);

		// 3. set up jScrollPane
		$('#contentleftinner3').jScrollPane();

	});
}