// JavaScript Document

// create the object
jQuery.fn.pane = function() {
	
	// set the config object
	p = {
		curCol			:	-1,
		curRow			:	-1,
	};
	
	// set the pane position
	setPanePosition();
	
	// build scroll links
	buildScrollLinks();
	
	// if there is an anchor in the URL, scroll to it, otherwise, scroll to home
	var hashStr = self.document.location.hash.substring(1);
	var initTarget = (hashStr.length > 0)	?	hashStr		:	'home';
	// do the initial scroll and show the initial subnav 
	doScroll(initTarget);
	setSubNav(initTarget);
	
	// by jquery protocols, we must return a jquery object
	return this.each(function() {
	});
	


	// ---------------------------------------
	// setPanePosition
	function setPanePosition() {
		// set page variables
		p.wHeight 		=	$(window).height();
		p.wWidth		=	$(window).width();
		p.pHeight		=	$('#pane').innerHeight();
		p.pWidth		=	$('#pane').innerWidth();
		p.pTop			=	(p.wHeight > p.pHeight)		?	(p.wHeight - p.pHeight) / 2		: 0;
		p.pLeft			=	(p.wWidth > p.pWidth)		?	(p.wWidth - p.pWidth) / 2		: 0;
		// if the blocks don't already exist, create them
		if($('#blockLeft').length == 0) {
			$('body').prepend('<div class="block" id="blockLeft"></div>');
			$('body').prepend('<div class="block" id="blockRight"></div>');
			$('body').prepend('<div class="block" id="blockTop"></div>');
			$('body').prepend('<div class="block" id="blockBottom"></div>');
			$('body').prepend('<div id="cliff"></div>');
		}
		// set the position
		$('#pane').css({ 'position':'absolute' , 'top':p.pTop , 'left':p.pLeft , 'display':'block' , 'z-index':'1' , 'overflow':'hidden' });
		// apply styles to the outer container
		$('#containerOuter').css({ 'height':'100%' , 'width':'100%' , 'overflow':'hidden' , 'position':'absolute' , 'top':'0px' , 'left':'0px' , 'z-index':'2' });
		// set sizes and position
		$('#blockLeft').css({ 'top':'0px' , 'left':'0px' , 'height':'100%' , 'width':p.pLeft , 'background-color':'#000', 'z-index':'10' });
		$('#blockRight').css({ 'top':'0px' , 'right':'0px' , 'height':'100%' , 'width':p.pLeft , 'z-index':'11' }).fadeTo(0,'.7');
		$('#blockTop').css({ 'top':'0px' , 'left':p.pLeft , 'height':p.pTop , 'width':p.pWidth , 'z-index':'12' }).fadeTo(0,'.7');
		$('#blockBottom').css({ 'bottom':'0px' , 'left':p.pLeft , 'height':p.pTop , 'width':p.pWidth , 'z-index':'13' }).fadeTo(0,'.7');
		$('#cliff').css({ 'top':'0px' , 'left':(p.pLeft - 40), 'height':'100%' , 'width':'100px' , 'z-index':'15' });
		$('#nav').css({ 'position':'absolute' , 'top':p.pTop , 'left':p.pLeft , 'z-index':'14' });
		// set the position of the container
		$('#container').css({ 'padding-left':p.pLeft , 'padding-top':p.pTop });
		// hide any subnavs
		$('.subnav, .subnav li').css({ 'display':'none' });
		// redraw if the window size changes
		$(window).bind('resize',setPanePosition);
	}
	
	
	
	// ---------------------------------------------------
	// buildScrollLinks
	function buildScrollLinks() {
		// find any links to anchor tags and bind a scroll behavior to them
		$('a[href^=#]').live('click',function(e) {
			var href = $(this).attr('href').replace('#','');
			// if the current section is not the one whose subnav is shown
			var curSect = href.replace(/-[\w\d]*/,'');
			setSubNav(curSect);
			// scroll
			doScroll(href);
			// if we need to show a new subnav, do it
			e.preventDefault();
		});
	}
	
	
		
	// ---------------------------------------------------
	// setSubNav
	function setSubNav(curSect) {
		// if there is a subnav showing
		if($('.showSubnav').length > 0) {
			// if the current subnav does not match the current section, hide it
			if(!$('#subnav-' + curSect).hasClass('showSubnav')) {
				// hide the old subnav
				var oldSub = $('.showSubnav');
				oldSub.animate({ 'width':'0px' }, 500);
				oldSub.children('li').css({ 'display':'none' });
				oldSub.removeClass('showSubnav');
			} else {
				var skipShow = true;
			}
		}
		
		setTimeout(function() {
			if(!skipShow) {
				if($('#subnav-' + curSect).length == 1) {
					// show the new subnav
					var newSub = $('#subnav-' + curSect);
					newSub.animate({ 'width':'500px' }, 500);
					newSub.children('li').css({ 'display':'inline' });
					newSub.addClass('showSubnav');				
				}
			}
		}, 200);
	}
	
	
	// ---------------------------------------------------
	// scroll
	function doScroll(target) {
		// find the anchor for the target, and then get the rel attr of the anchor and split it to get the x and y coords
		var coords = $('#' + target).attr('rel');
		var goToCol = coords.split('|')[0];
		var goToRow = coords.split('|')[1];
		// set the x and y coordinates
		var goToX = (p.pWidth * (goToCol - 1));
		var goToY = (p.pHeight * (goToRow - 1));
		
		// if we're not on the selected column and we're not in the first row
		if(p.curCol != goToCol && p.curRow != 1) $('#containerOuter').scrollTo(0, 'slow', { 'axis':'y' });
		// if we're not in the correct column, scroll to it
		if(p.curCol != goToCol) 	$('#containerOuter').scrollTo(goToX, 'slow', { 'axis':'x' });
		// then, scroll to the correct row in the new column
		$('#containerOuter').scrollTo(goToY, 'slow', { 'axis':'y' });		
		
		// set the selected class
		$('li.selected').removeClass('selected');
		$(this).parents('li').addClass('selected');
		// set the current position
		p.curRow = goToRow;
		p.curCol = goToCol;
	}


}