// JavaScript for Aberdeen Plastics
// by David Lantner, http://lantner.net/david/

function setupARIA() {
	// add WAI-ARIA roles:
	$('#menu').attr('role','navigation');
	$('#content').attr('role','main').attr('aria-live','polite').attr('aria-atomic','true');
}

function contentWrapARIA() {
	// Add ARIA attributes for the dynamic content area.
	// This is a separate function because it will be called again after content is loaded by Ajax.
	$('#contentWrap .img img').attr('aria-labeledby','product-name').attr('aria-describedby','description product-id');
}

// Function to "hijack" links to use Ajax to load content:
function hijax(yes,no) {
	$(yes).not($(no)).bind('click', function() {
		$('#menu .current').removeClass('current');
		$('#menu a[href="' + $(this).attr('href') + '"]').parent('li').addClass('current');
		// set a fixed height on div#content (add 1px for FF2), then fade-out the inside content area and remove it:
		$('#content').height( ( $('#content').height() + 1 ) + 'px' ).children('#content-wrap').fadeOut('slow').remove().end();
		// call the history function to load the link target via Ajax: 
		$.history.load( $(this).attr('href') );
		// prevent the browser default (of following the link):
		return false;
	});
}

function animContent() {
	$('#content').animate( { height: $('#content-wrap').height() }, 250, function() {
		// reset the "overflow" property to "auto":
		$(this).css({overflow:'auto'});
		// update the document title:
		var str = $('#content-wrap h2.product-name:first').text();
			$('#menu a').each(function(){
				if( $(this).text() == str ) {
					str = str + ' - ' + $(this).parents('li:last').children('a').text().replace(' »','') + ' - Aberdeen Plastics';
				}
			});
		document.title = str;
		// show the inner content area:
		$('#content-wrap').fadeIn();
	});
}

function loadContent(path) {
	// empty the content area, set its "overflow" to "hidden" to prevent a scrollbar, and load new content:
	$('#content').empty().css({overflow:'hidden'}).load(path + ' #content-wrap', function(){
		$('#content-wrap').hide();
		// when the content loads, animate the height of "div#content":
		if ( $('#content .img img').length > 0 ) {
			$('#content .img img').load( function() {
				animContent();
			});
		} else {
			animContent();
		}
		
		// apply the Fancybox zoom plugin on the product image link that was just loaded:
		$('#content a.img').fancybox({
			'hideOnContentClick': true,
			'overlayShow': true,
			'overlayOpacity': 0.2
		});
		// bind (again) Ajax functionality to newly-loaded links:
		hijax('#content a','#skip a, h1 a, #menu a, a.img');
		// apply ARIA attributes on the product image:
		contentWrapARIA();
	});
}

// function to be called after Ajax content is loaded:
function pageload(hash) {
	// ensure hash doesn't contain the first '#' character:
	//hash = hash.replace(/^.*#/, '');
	if(hash) {
		// restore the Ajax loaded state:
		loadContent(hash);
	} else {
		// start page
		// check for the presence of the "hp" class on the link to the product image
		if ( $('.hp').length < 1 ) {
			loadContent('/home/');
			$('#content').animate( { height: $('#content-wrap').height() }, 250);
		}
	}
}

$(document).ready(function(){
	// initialize history plugin:
	// the callback is called at once by present location.hash
	$.history.init(pageload);

	// apply WAI-ARIA roles and attributes to dynamic content areas:
	setupARIA();
	contentWrapARIA();

	// enhance navigation menu using Superfish plugin for jQuery:
	$('ul.sf-menu').superfish({ 
		animation: {
			opacity:'show',
			height:'show'
		},
		pathClass: 'current',
		speed: 'fast'
	});
	
	// enhance product image zoom using the Fancybox plugin for jQuery:
	$('#content a.img').fancybox({
		'hideOnContentClick': true,
		'overlayShow': true,
		'overlayOpacity': 0.2
	});
	
	// bind Ajax functionality to most links:
	hijax('a','#skip a, h1 a, #menu a:eq(0), a.img');

	// Insert a "Loading..." message to inform user during Ajax requests:
	$('#menu').before('<div id="loading">Loading&#8230;</div>');
	// subscribe the message to appear during Ajax events:
	$('#loading').ajaxStart(function(){
		$(this).fadeIn('fast');
	}).ajaxStop(function(){
		$(this).fadeOut('slow');
	});
});;