var lastInput = null;
var isIE = isIE6 = isIE7 = isIE8 = isIE9 = false;

function inputFocused(eventData) {
	var theInput = $(eventData.target);
	theInput.addClass('focused');
	if (isIE6) {
		if (lastInput != null && lastInput != theInput) {
			$(lastInput).removeClass('focused'); 
		}
		lastInput = theInput;
		eventData.stopPropagation();	// so the document onclick doesn't fire and unfocus the input we've just focused!
	}  
}

function inputBlurred(eventData) {
	var theInput = $(eventData.target);
	theInput.removeClass('focused'); 
}

function unfocusLastInput() {
	if (lastInput != null) {
		$(lastInput).removeClass('focused'); 
		lastInput = null;
	}
}



// Fix the background flicker when scrolling in IE6
// Thanks to http://misterpixel.blogspot.com/2006/09/forensic-analysis-of-ie6.html
function fixIE6BackgroundFlicker() {
	try {
		document.execCommand("BackgroundImageCache", false, true);
	} catch(err) {}
}



function fixWoodenFrame() {
	$(window).bind('resize', moveWoodenFrame);
	$('div#pageFrameRight').css('right', 'auto');
	$('div#pageFrameBottom').css('bottom', 'auto');
	$('div#pageFrameBottom').css('top', '0px');
	moveWoodenFrame();
}
function moveWoodenFrame() {
	var ww = $(window).width();
	var wh = $(window).height();
	if (ww < 788) ww = 788;
	if (wh < 590) wh = 590;
	$('div#pageFrameRight').css('left', ww - 28);
	$('div#pageFrameBottom').css('top', wh - 34);
}



var bookmarkUrlMatcher = /^(\S*?)#(\S+)$/;
function attachScrollToBookmarkBehaviour() {
	jQuery('a.bookmark').click(function(eventData) {
		var anchor = $(this);
		var href = anchor.attr('href');
		var bookmarkMatches = href.match(bookmarkUrlMatcher);
		if (bookmarkMatches.length == 3) {
			// Only scroll to the bookmark if we have a matching id in our page
			var bookmarkName = bookmarkMatches[2];
			var elToScrollTo = $('#' + bookmarkName);
			if (elToScrollTo.length) {
				var elTop = elToScrollTo.offset().top;
				$('html, body').animate({scrollTop:elTop-35}, 1250, 'cubicEaseOut');
				anchor.blur();
				eventData.stopImmediatePropagation();
				return false;
			}
		}
	});
}



// We need a different function for IE as we need extra elements to use the AlphaImageLoader filter
// This stops the alpha transparency from being stripped when the transform takes place
function attachNavigationHoverBehaviourForIE8AndUnder() {
	var effectOverDuration = 200;
	var effectOutDuration = 400;
	var lis = $('div#navigation li:not(.hidden)');
	lis.each(function() {
		var theLi = $(this);
		var theImg = $('img', this);
		var theSpan = $('img', this);
		theImg.wrap('<span class="rotate"></span>').wrap('<span class="img"></span>');
		var theRotateSpan = $('span.rotate', this);
		var theImgSpan = $('span.img', this);

		// IE 6 animates the menu items quite nicely. IE 7 is a bit slower, and IE 8 runs like a lame dog.
		// For this reason, IE 7 and IE 8 users do not get the animation - the transition is instant.
		if (isIE7 || isIE8) {
			theLi.mouseenter(function() {
				theRotateSpan.addClass('rotated');
				theImgSpan.css('width', '155').css('height', '73');
			}).mouseleave(function() {
				theRotateSpan.removeClass('rotated');
				theImgSpan.css('width', '115').css('height', '54');
			});
		} else {
			theLi.mouseenter(function() {
				if (!theLi.hasClass('selected')) {				
					theRotateSpan.animate({
						'rotate': '10deg'
					}, effectOverDuration);
				}
				theImgSpan.animate({
					'width': '155',
					'height': '73'
				}, effectOverDuration);
			}).mouseleave(function() {
				if (!theLi.hasClass('selected')) {				
					theRotateSpan.animate({
						'rotate': '0deg'
					}, effectOutDuration);
				}
				theImgSpan.animate({
					'width': '115',
					'height': '54'
				}, effectOutDuration);
			});
		}
	});
}

// Fake animating rotate(0deg -> 10deg) and translateX(0px -> 8px) without reams of code...
// Pick (or make up) a style that we can set without changing the layout, and use its step function
function attachNavigationHoverBehaviourForIE9() {
	$('div#navigation li:not(.hidden)').mouseenter(function() {
		var theAnchor = $('a', this);
		theAnchor.css('-ms-fake-transition', 2).animate({'-ms-fake-transition': 10}, {
			'duration': 200,
			'step': function(eventData) { this.style.msTransform = 'translateX(' + (eventData * 0.8) + 'px) rotate(' + eventData + 'deg)'; }
		});
	}).mouseleave(function() {
		var theAnchor = $('a', this);
		theAnchor.css('-ms-fake-transition', 10).animate({'-ms-fake-transition': 2}, {
			'duration': 400,
			'step': function(eventData) { this.style.msTransform = 'translateX(' + (eventData * 0.8) + 'px) rotate(' + eventData + 'deg)'; }
		});
	});
}

function attachNavigationHoverBehaviour() {
	var effectOverDuration = 200;
	var effectOutDuration = 400;
	var lis = $('div#navigation li:not(.hidden)');
	lis.each(function() {
		var theLi = $(this);
		var theImg = $('img', this);
		theLi.mouseenter(function() {
			var degreesToRotate = (theLi.hasClass('selected') ? '0deg' : '10deg');	// Don't re-rotate an already rotated item
			theImg.animate({
				'width': '155',
				'height': '73',
				'rotate': degreesToRotate
			}, effectOverDuration);
		}).mouseleave(function() {
			theImg.animate({
				width: '115',
				height: '54',
				rotate: '0deg'
			}, effectOutDuration);
		});
	});
}



function initPage() {
	if (document.getElementById('ie6CSS')) isIE = isIE6 = true;
	if (document.getElementById('ie7CSS')) isIE = isIE7 = true;
	if (document.getElementById('ie8CSS')) isIE = isIE8 = true;
	if (document.getElementById('ie9CSS')) isIE = isIE9 = true;

	if (isIE6) fixIE6BackgroundFlicker();
	if (!isIE6) fixWoodenFrame();

	attachScrollToBookmarkBehaviour();

	// Don't use JS for navigation hover transforms in Opera for two reasons:
	// 1: Opera can use CSS3 transitions on the 'transform' property (no other browser currently does this), and
	// 2: The patches that allow us to animate the CSS3 'transform' property don't work properly in Opera - it jumps a lot

	if (isIE9) {
		// IE 9 is a great step in the right direction... We only need to fake transitions.
		// IE 7 and IE 8 animate like a lame dog, although IE 6 works well. However, don't transition anything < IE 9
		attachNavigationHoverBehaviourForIE9();
	}
	
//else if (isIE) {
//		attachNavigationHoverBehaviourForIE8AndUnder();
//	} else if (!$.browser.opera) {
//		attachNavigationHoverBehaviour();
//	}

}

$(document).ready(initPage);