/**
* @author dboz
*/

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

if ($('#hubDrop .item, #hub .item').length) { //check to see if the navs are present
	//hover states of the hub items
	$('#hubDrop .item, #hub .item').each(function(){
	
		//if theres is a secondary nav choice
		if ($(this).find('.hubItemNav').length) {
			$(this).find('.link').hide();
			$(this).find('.hubItemNav').hide();
			if (!$(this).find('.hubItemNav .choose').length) 
				$(this).find('.hubItemNav').prepend('<div class="choose">choose:</div>');
			$(this).hover(function(){
				$(this).find('.hubItemNav').addClass('hovered');
				$(this).find('.hubItemNav').show();
			}, function(){
				$(this).find('.hubItemNav').hide();
				//$(this).find('.hubItemNav').removeClass('hovered');
			});
			
			//else its just a single link so change the background on rollover	
		}
		else {
			$(this).hover(function(){
				$(this).addClass('itemHover');
			}, function(){
				$(this).removeClass('itemHover');
			});
		}
	});
	
	
	var $panels = $('#slider .scrollContainer .group');
	var $container = $('#slider .scrollContainer');
	var $prev = $('img.scrollButtons.prev');
	var $next = $('img.scrollButtons.next');
	
	// calculate a new width for the container (so it holds all panels)
	$('.navdrop').show(); //gotta show it to get the width i guess
	var contWidth = $panels[0].offsetWidth * $panels.length; //make the $container wide enough to hold all the groups on one plane
	if ($('#hubDrop').length) {
		// 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
			});
			
			// calculate a new width for the container (so it holds all panels)
			$container.css('width', contWidth);
		}
		else {
			//horizontal = false;
			//$container.css('height', $panels[0].offsetHeight * $panels.height);
		}
	}
	
	
	
	// collect the scroll object, at the same time apply the hidden overflow
	// to remove the default scrollbars that will appear
	$('#slider .scroll').css('overflow', 'hidden');
	var $scroll = $('#slider .scroll');
	
	// apply our left + right buttons
	$scroll.after('<img class="scrollButtons prev" src="/images/spacer.png" />').after('<img class="scrollButtons next" src="/images/spacer.png" />');
	
	
	//just saving this code for later
	function toGetAThing(){
		$('#this_link').click(function(){
			$('#content').trigger('goto', [4]);
			return false;
		});
	}
	
	
	//handle the clicking of a navbar link
	$('.navbar ul li a').click(function(){
		trigger({
			id: $(this).attr('title')
		});
		//trigger()
		if ($('.navdrop').hasClass('shown')) {
			//move the carousel to proper position
			//change the nav bar link focus
		}
		else {
			$('.navdrop').fadeIn(300);
			//$('.navdrop #slider').show(400);
			$('.navdrop').addClass('shown');
		}
		
		return false;
	});
	
	// handle nav selection
	function selectNav(navName){
		$(this).parents('ul:first').find('li').removeClass('active').end().end().parent('li').addClass('active');
	}
	
	//takes the id name of the section (.group) you want ans scrolls there
	function triggerSection(idName){
		$('.scroll .group').each(function(i){
			if ($(this).attr('id') == idName) {
				$scroll.trigger('goto', [i]);
			}
		});
		
	}
	
	// go find the navigation link that has this target and select the nav
	function trigger(data){
		$('.navdrop').fadeIn(300); // IE bug fix: first time click doesn't scroll
		var el = $('.navbar ul li').find('a[title="' + data.id + '"]').get(0);
		//var el = $('.navbar ul li.'+data.id+' a');
		selectNav.call(el);
		//$scroll.get(data.id);       
		triggerSection(data.id);
	}
	
	
	if (window.location.hash) {
		navhash = window.location.hash.substr(1);
		trigger({
			id: navhash
		});
	}
	else {
		selectNav.call('.navbar ul li.dream a');
		$('img.scrollButtons.prev').hide();
	}
	
	
	// offset is used to move to *exactly* the right place, since I'm using
	// padding on my example, I need to subtract the amount of padding to
	// the offset.  Try removing this to get a good idea of the effect
	var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1;
	
	
	var scrollOptions = {
		target: $scroll, // the element that has the overflow
		// can be a selector which will be relative to the target
		items: $panels,
		
		navigation: '.navbar ul li a',
		
		// selectors are NOT relative to document, i.e. make sure they're unique
		prev: 'img.scrollButtons.prev',
		next: 'img.scrollButtons.next',
		
		// allow the scroll effect to run both directions
		axis: 'xy',
		
		//onAfter: trigger, // our final callback
		
		offset: offset,
		cycle: false,
		// duration of the sliding effect
		duration: 300,
		
		// easing - can be used with the easing plugin: 
		// http://gsgd.co.uk/sandbox/jquery/easing/
		//easing: 'swing',
		onBefore: function($panels, pos, elem, items){
		
			$('img.scrollButtons.prev').show();
			$('img.scrollButtons.next').show();
			if (pos.id == 'dream') {
				$('img.scrollButtons.prev').hide();
			}
			else {
				if (pos.id == 'play') 
					$('img.scrollButtons.next').hide();
			}
			
			
			//was having trouble with the info screen causing flickrs
			$scroll.find('.item .info').hide();
			
		},
		onAfter: function(elem){
		
			//'this' is the element being scrolled ($pane) not jqueryfied
			$scroll.find('.item .info').fadeIn(100);
			trigger(elem);
			
		}
	};
	
	// 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.
	if ($('#hubDrop,#hub').length) {
		$('.navbar ul a').each(function(){
			$(this).attr('href', '#' + $(this).attr('title'));
		});
		$('#slider').serialScroll(scrollOptions);
	}
	
	
	// now apply localScroll to hook any other arbitrary links to trigger 
	// the effect
	$.localScroll(scrollOptions);
	
	// finally, if the URL has a hash, move the slider in to position, 
	// setting the duration to 1 because I don't want it to scroll in the
	// very first page load.  We don't always need this, but it ensures
	// the positioning is absolutely spot on when the pages loads.
	scrollOptions.duration = 1;
	$.localScroll.hash(scrollOptions);
	
	
	
	//add close button to dropnav
	if (!$('.navdrop .close').length) {
		$('.navdrop .holder').append('<div class=\'close\'><a href=\'#\'><img src=\'/images/buttonDropNavClose.png\' border=\'0\' /></a></div>');
	}
	
	//close button click 
	$('.navdrop .close a').click(function(){
		$('.navdrop').slideUp(200);
		$('.navdrop').removeClass('shown');
		$('.topnav').find('li').removeClass('active').end();
		
	});
	
	
	//hide top nav stuff
	$('.navdrop').hide();
	
}//end the check for navs on the page   

});