// when the DOM is ready...
$(document).ready(function () {

	updatePadding();

	$(window).resize(function() {
		
		updatePadding();

		$('#overlay').find('*').andSelf()
			.unbind('.serialScroll');
			
		scrollOptions.offset = window.scrollPad * -1;
		scrollOptions.force = false;
			
		$('#overlay').serialScroll(scrollOptions);
		
	});
	
	function updatePadding() {
		window.winWidth = $(window).width();
		if (window.winWidth > 1024) {
			window.scrollPad = (940-600) / 2;
			$('#slider').width(940);
			$('.scroll').width(940);
			$('.scrollContainer').css({
				'paddingLeft' : window.scrollPad,
				'paddingRight' : window.scrollPad
				});
		} else {
			$('#slider').width(940);
			$('.scroll').width(940);
			$('.scrollContainer').css({
				'paddingLeft' : 0,
				'paddingRight' : 0
				});
		}
	}
	
	var $panels = $('#slider .scrollContainer > div');
	var $container = $('#slider .scrollContainer');

	// if false, we'll float all the panels left and fix the width 
	// of the container
	var horizontal = true;

	// float the panels left if we're going horizontal
	if (horizontal) {
    $panels.css({
       'float' : 'left',
       'position' : 'relative', // IE fix to ensure overflow is hidden
			'opacity' : '0.5'
    });

		// set opacity for initially selected item
		$container.find('.selected').css('opacity','1');

    // calculate a new width for the container (so it holds all panels)
    $container.css('width', $panels[0].offsetWidth * $panels.length);
	}

	// collect the scroll object, at the same time apply the hidden overflow
	// to remove the default scrollbars that will appear
	var $scroll = $('#slider .scroll').css('overflow', 'hidden');

	// apply our left + right buttons
	$('.navigation')
		.before('<div class="scrollButtons left">Previous</div>')
		.after('<div class="scrollButtons right">Next</div>');
	if($(window).width() <= 1024 ){ $(".pagination .left").css("left", "-6px"); $(".pagination .right").css("right", "-6px"); }

	// handle nav selection
	function selectNav() {
	  $(this)
	    .parents('ul:first')
	      .find('a')
	        .removeClass('selected')
	      .end()
	    .end()
	    .addClass('selected');
	}

	// handle opacity
	function handleOpacity() {
		$(this)
			.parents('.scrollContainer')
				.find('.selected')
					.removeClass('selected')
					.animate({
						opacity: 0.5
					})
					.end()
					.find('.hover-box')
					.animate({
						opacity: 0
					})
				.end()
			.end()
			.addClass('selected')
			.animate({
				opacity: 1
			})
			.find('.hover-box')
			.animate({
				opacity: 1
			});
	}

	$('#overlay .navigation').find('a').click(selectNav);

	// go find the navigation link that has this target and select the nav
	function trigger(data) {
	    var el = $('#overlay .navigation').find('a[href$="' + data.id + '"]').get(0);
	    selectNav.call(el);
			var el = $container.find('div[id$="' + data.id + '"]').get(0);
			handleOpacity.call(el);
	}

	if (window.location.hash) {
	    trigger({ id : window.location.hash.substr(1) });
	} else {
	    $('ul.navigation a:first').click();
	}

	var offset = window.scrollPad * -1;
	
	var scrollOptions = {
	    target: $scroll, // the element that has the overflow

	    // can be a selector which will be relative to the target
	    items: $panels,
	
			event: 'click.serialScroll',

	    navigation: '.navigation a',

	    // selectors are NOT relative to document, i.e. make sure they're unique
	    prev: '.scrollButtons.left',
	    next: '.scrollButtons.right',
	
			exclude: 1,

	    // allow the scroll effect to run both directions
	    axis: 'xy',

	    onAfter: trigger, // our final callback

	    offset: offset,

	    // duration of the sliding effect
	    duration: 620,
			
			// force and interval create the autoscroll feature
			force: true,
			interval: 6250,

	    easing: 'easeInOutQuad'
	};
	
	function updateBG() {
		
		var getbg = $('#slider .scrollContainer > div:last').prev().css("background-image");
		var xposition = -1 * ($panels[0].offsetWidth - window.scrollPad - 1);
		
		$("div.scrollContainer").css({
			"background-image" : getbg,
			"background-position" : xposition + "px 0px"
			});
		
	}
	
	// apply serialScroll to the slider - we chose this plugin because it 
	// supports the indexed next and previous scroll along with hooking 
	// in to our navigation.
	$('#overlay').serialScroll(scrollOptions);
	
	
	$('.navigation a').click(function () {
		$container.trigger('stop');
	});
	
	updateBG();
	
	// headline overlay handling (from formerly-named home.js)
	$("#slider .panel").wrapInner("<div class='hover-box'></div>");
	
	$(".hover-box").prepend("<div class='bg-overlay' style='display: none;'></div>")
	.hover(
		function () {
			$(this).find(".bg-overlay").css({
				"display"	: "block",
				"opacity"	: 0.5
			});
			$("#slider .panel h2, #slider .panel h3").css({ // !Important! IE opacity bug fix
				"opacity"	: 1
			});
		}, 
		function () {
			$(this).find(".bg-overlay").css({
				"display"	: "none",
				"opacity"	: 0
			});
		}
	)
	.click(function() {		// make the link forward the browser to the proper location
		window.location = $(this).find("a:first").attr("href");
	}).css({
		"opacity": 0
	});
	
});