/**
 * Compact panels dev
 * @author Andrew Ramsden <http://irama.org/dev/compact-panels-2/>
 */
compactConf = {
	panelsLoop        : true,
	animationDuration : 500,
	animationAxis     : 'xy'
};

// start closure (protects variables from global scope)
(function($){
	
	$(document).ready(function() {
		$('.compact').each(initCompact);
	});

	var currentPanel = null;
	var sectionCount = null;
	
	initCompact = function () {
		
		// add window element
			windowEl = $('<div class="viewport"><div class="slider"></div></div>');
			windowEl.find('.slider').append ($(this).contents('.section'));
			$(this).contents('.section').remove();
			$(this).append(windowEl);
		
		// add buttons
			//$(this).find('.viewport').before('<ul class="actions"><li><a href="#" class="previous" title="Open previous section">&lt;</a></li><li><a href="#" class="pause">||</a></li><li><a href="#" class="next" title="Open next section">&gt;</a></li></ul><ul class="panels"></ul>');
			$(this).find('.viewport').before('<ul class="actions"><li><a href="#" class="previous" title="Open previous section">&lt;</a></li><li><a href="#" class="next" title="Open next section">&gt;</a></li></ul><ul class="panels"></ul>');
		
		// add actions to buttons
			$(this).find('.previous').click(previousPanel);
			$(this).find('.pause').click(pauseMovement);
			$(this).find('.next').click(nextPanel);
		
		// for each section add a link
			sectionCount = 1;
			sections = $(this).find('.section');
			sections.each(addSectionTab);
			currentPanel = '#'+$(sections[0]).attr('id');
		
		// set the width of the slider
			$(this).find('.slider').css('width', sections[0].offsetWidth * sections.length);
		
		// setup scrolling
			/*scrollOptions = {
				target   : $(this).find('.viewport'),
				axis     : compactConf.animationAxis,
				duration : compactConf.animationDuration,
				onBefore : updateForCurrentPanel
			};
			*/
			//$.localScroll(scrollOptions);
			// load hash at startup
			//scrollOptions.duration = 1;
			//$.localScroll.hash(scrollOptions);

		
		// highlight current section
			updateForCurrentPanel.apply(this);
		
		
		// lastly set active class
			$(this).addClass('active');
	};
	
	addSectionTab = function () {
		id = $(this).attr('id');
		listItem = $('<li><a href="#'+id+'">'+(sectionCount++)+'</a></li>');
		listItem.find('a').attr('title', 'Open the '+$(this).firstHeading().text()+' section');
		listItem.find('a').click(jumpToPanel);
		$(this).parents('.compact:lt(1)').find('ul.panels').append(listItem);	
	};
	
	jumpToPanel = function () {
		viewPortEl = $(this).parents('.compact:lt(1)').find('.viewport');
		scrollOptions = {
			target    : viewPortEl,
			axis      : compactConf.animationAxis,
			duration  : compactConf.animationDuration,
			onAfter   : updateFrag
		};
		
		currentPanel = $(this).attr('href');
		newPanel = viewPortEl.find(currentPanel);
		updateForCurrentPanel.apply(this);
		viewPortEl.stop().scrollTo(newPanel, scrollOptions);
		
		return false;
	};
	
	previousPanel = function () {
		
		viewPortEl = $(this).parents('.compact:lt(1)').find('.viewport');
		currentPanel = '#'+viewPortEl.find('.section.current').attr('id');
		
		scrollOptions = {
			target    : viewPortEl,
			axis      : compactConf.animationAxis,
			duration  : compactConf.animationDuration,
			onAfter   : updateFrag
		};
		
		newPanel = viewPortEl.find(currentPanel).prevAll('.section:lt(1)');
		
		if (newPanel.size()>0) {
			currentPanel = '#'+newPanel.attr('id');
			updateForCurrentPanel.apply(this);
			viewPortEl.stop().scrollTo(newPanel, scrollOptions);
		} else if (compactConf.panelsLoop) {
			// load first panel
				newPanel = viewPortEl.find('.section:last-child');
				currentPanel = '#'+newPanel.attr('id');
				updateForCurrentPanel.apply(this);
				viewPortEl.stop().scrollTo(newPanel, scrollOptions);
		}
		
		return false; // suppress # link being followed
	};
	
	nextPanel = function () {
		
		
		
		
		viewPortEl = $(this).parents('.compact:lt(1)').find('.viewport');
		currentPanel = '#'+viewPortEl.find('.section.current').attr('id');
		
		scrollOptions = {
			target    : viewPortEl,
			axis      : compactConf.animationAxis,
			duration  : compactConf.animationDuration,
			onAfter   : updateFrag
			//onBefore  : updateForCurrentPanel
		};
		
		newPanel = viewPortEl.find(currentPanel).nextAll('.section:lt(1)');
		
		if (newPanel.size()>0) {
			currentPanel = '#'+newPanel.attr('id');
			updateForCurrentPanel.apply(this);
			viewPortEl.stop().scrollTo(newPanel, scrollOptions);
		} else if (compactConf.panelsLoop) {
			// load first panel
				newPanel = viewPortEl.find('.section:first-child');
				currentPanel = '#'+newPanel.attr('id');
				updateForCurrentPanel.apply(this);
				viewPortEl.stop().scrollTo(newPanel, scrollOptions);
		}
		
		return false; // suppress # link being followed
	};
	
	pauseMovement = function () {
		
		return false; // suppress # link being followed
	};
	
	updateFrag = function () {
		//$.frag(currentPanel, false);
		return false;
	};
	
	updateForCurrentPanel = function () {
		
		if ($(this).is('.compact')) {
			// just set current link
				$(this).find('.panels a[href='+currentPanel+']').addClass('current');
				$(this).find('.section'+currentPanel).addClass('current');
				return;
		}
		
		compactContEl = $(this).parents('.compact:lt(1)');
		// clean up older current classes
			compactContEl.find('.panels a').removeClass('current');
			compactContEl.find('.section').removeClass('current');
		
		if (typeof $(this).attr('href') != 'undefined' && $(this).attr('href') != '#') {
			// came from frag link
				$(this).addClass('current');
				currentPanel = $(this).attr('href');
				compactContEl.find('.section'+currentPanel).addClass('current');
		} else {
			// came from next/prev link
				compactContEl.find('.panels a[href='+currentPanel+']').addClass('current');
				compactContEl.find('.section'+currentPanel).addClass('current');
		}
		
	};
	
})(jQuery); // end closure