var element = null;
var inExpressMode = false;

$('document').ready(function() {

	var returnText = '<< Return to course list';
	var currentCat = 0;
	var currentCourse = 0;
	var categories = new Array();
	var step1String = '<div class="course-browser-step1"><div class="course-browser-left-col">';

	element = $('.course-browser');
	element.children('*').hide();

	step1String += '<h2>' + $.trim(element.children('h2').text()) + '</h2></div>'
				+ '<div class="course-browser-right-col"><ul>';

	element.children('div').each(function(i){
		var self = $( this );
		categories[i] = {
			h2: $.trim(self.children('h2').text()),
			courses: new Array()
		};

		self.children('div').each(function(j){
			var self2 = $( this );
			categories[i].courses[j] = {
				h2: $.trim(self2.children('h2').text()),
				p: $.trim(self2.children('p').html()),
				toolTipContent: $.trim(self2.children('div').text()),
				imgURL: self2.children('img').attr('src')
			};
		});
		step1String += '<li><a href="#" onclick="return false">' + $.trim($(this).children('h2').text()) +'</a></li>'
	});

	step1String += '</ul></div></div>';
	element.append(step1String);

	element.find( '.course-browser-step1').delegate('a', 'click', function(){

		currentCat = $( this ).closest( 'li' ).index();

		var step2String = '<div class="course-browser-step2"><div class="course-browser-left-col">'
						+ '<h2>' + categories[currentCat].h2 + '</h2><ul>';

		var courseCount = categories[currentCat].courses.length;
		for( var i = 0; i <courseCount; i++ ) {
			step2String += '<li><a href="#" onclick="return false">' + categories[currentCat].courses[i].h2 + '</a></li>';
		}
		step2String += '<li class="course-browser-return"><a href="#" onclick="return false">' + returnText + '</a></li></ul></div>'
					+ '<div class="course-browser-middle-col"></div>'
					+ '<div class="course-browser-right-col"></div></div>';
		element.append( step2String );

		gotoStepTwo( element );
		// setup the tooltip for the image

		element.find( '.course-browser-step2' ).delegate( 'a', 'click', function() {

			var returnIndex = element.find( '.course-browser-step2 li').size();
			currentCourse = $( this ).closest( 'li' ).index();

			if( returnIndex === currentCourse + 1 ) {
				gotoStepOne( element );
				return;
			}

			var rightColumn = element.find( '.course-browser-step2 .course-browser-right-col' );

			rightColumn.prev().children( 'img' ).fadeOut( 'fast', function(){
				$( this ).remove();
			});

			if( categories[currentCat].courses[currentCourse].imgURL !== undefined ) {
				rightColumn.prev().html('<img src="' + categories[currentCat].courses[currentCourse].imgURL + '" />' );
			}

			rightColumn.prev().children('img').qtip({
				content: categories[currentCat].courses[currentCourse].toolTipContent,
				position: {
					corner: {
						target: 'topRight',
						tooltip: 'bottomLeft'
					}
				},
				style: {
					width: 400,
					padding: 5,
					background: '#2bbcad',
					color: 'white',
					'font-size': 12,
					border: {
						width: 7,
						color: '#2bbcad'
					},
					tip: 'bottomLeft',
					name: 'dark' // Inherit the rest of the attributes from the preset dark style
				}
			});

			rightColumn.fadeOut('fast', function() {
				$( this ).html( '<p style="margin: 44px 0 10px -10px !important; color: #D95204; font-weight: bold; font-size: 1em;">'  + categories[currentCat].courses[currentCourse].h2 + '</p><p>'  + categories[currentCat].courses[currentCourse].p + '</p><p><a id="courseSignUp" href="#" style="color: #D95204 !important; font-weight: bold;">Sign Up for Courses</a></p>' ).fadeIn('fast');
				$("#courseSignUp").click(function() {
					courseSignUp();
					return false;
				});
			});

			return false; // Overrhide browser behavior.

		});

		return false; // Overrhide browser behavior.

	});

	setInterval("updateBrowserHeight()", 100);

});

//var previousContent = null;

function expressSignUp(step) {

	if(!step) {
		if(inExpressMode) return; // in case they double click the button
		step = 1;
		heightLock = true;
	}

	switch (step)
	{
		case 1:
			inExpressMode = true;

			var pos = $("#courseClose").offset().top;
			$('html, body').animate({scrollTop: pos}, {duration: 1000, easing: 'easeOutExpo'});

			$('.course-browser').show();
			$('#courseClose').fadeIn();

			element.find('.course-browser-step1 a:first').click();

			$('.course-browser').css("opacity", 0);
			setTimeout(function() { expressSignUp(2); }, 600);

			return;
			break;

		case 2:
			element.find('.course-browser-step2 a:first').click();

			$('.course-browser').css("opacity", 0);
			setTimeout(function() { expressSignUp(3); }, 600);

			return;
			break;

		case 3:
			$('#courseSignUp').click();

			$('.course-browser').css("opacity", 0);
			setTimeout(function() { expressSignUp(4); }, 600);

			return;
			break;

		case 4:

			$('.course-browser').css("opacity", 1.0);
			heightLock = false;
			updateBrowserHeight();

			return;
			break;

	}

}

function courseSignUp() {
	$(".course-browser-step2").fadeOut("fast", function() {
		$(element).append('<iframe name="courseSignUpFrame" id="courseSignUpFrame" src="' + wpThemePath + '/course_signup.php" scrolling="no" seamless="seamless" allowtransparency="true" style="overflow: hidden; border: none; width: 100%"></iframe>');
	});
}

function courseRestoreContent() {
	$("#courseSignUpFrame").fadeOut("fast", function() {
		$("#courseSignUpFrame").remove();
		$(".course-browser-step2").fadeIn("fast");

		if(inExpressMode) {
			element.find('.course-browser-step2 .course-browser-left-col a:last').click();
			inExpressMode = false;
			return;
		}
	});
}

function gotoStepOne(e) {
	var step1 = element.children('.course-browser-step1:first');
	var step2 = element.children('.course-browser-step2:first');

	step2.css({opacity: 1.0, left: 0}).show();
	step1.css({opacity: 0, left: "-200px"}).hide();

	step2.animate({left: "200px", opacity: 0}, 600, function() {
		$(this).remove();
		step1.show().animate({left: 0, opacity: 1.0}, 600);
	});
}

function gotoStepTwo(e) {
	var step1 = element.children('.course-browser-step1:first');
	var step2 = element.children('.course-browser-step2:first');

	step1.css({'opacity': 1.0, 'left': 0}).show();
	step2.css({'opacity': 0, 'left': "200px"}).hide();

	step1.animate({left: "-200px", opacity: 0}, 600, function() {
		$(this).hide();
		step2.show().animate({left: 0, opacity: 1.0}, 600);
	});
}

var previousHeight = 0;
var heightLock = false;

function updateBrowserHeight() {
	if(heightLock) return;
	heightLock = true;

	try {
		var newHeight = null;
		if(!$('.course-browser:visible').length) {
			newHeight = 0;
		} else {
			if($('#courseSignUpFrame:visible').length) {
				newHeight = $('#courseSignUpFrame');
			} else if($('.course-browser-step2:visible').length) {
				var lCol = $(".course-browser-step2:visible .course-browser-left-col").height();
				var rCol = $(".course-browser-step2:visible .course-browser-right-col").height();

				if(lCol > rCol) {
					newHeight = $('.course-browser-step2:first .course-browser-left-col');
				} else {
					newHeight = $('.course-browser-step2:first .course-browser-right-col');
				}
			} else if($('.course-browser-step1:visible').length) {
				newHeight = $('.course-browser-step1:first .course-browser-right-col');
			} else {
				//document.title = 'no resize frame';
				return;
			}

			if(typeof(newHeight) == 'undefined' || newHeight == null || !newHeight.length) { return; }
			newHeight = newHeight.height() + 20;
			//document.title = newHeight;
		}

		if(newHeight != previousHeight) {
			if(newHeight - previousHeight < 50 && newHeight - previousHeight > -50) {
				// Firefox @web-font flickering avoidance.
				$("#courseMiddle").css("height", newHeight + "px");
			} else {
				$("#courseMiddle").animate({
					height: newHeight
				}, {duration: 400, easing: 'easeOutExpo'});
			}

			previousHeight = newHeight;
		}
	} catch(err) {
		// Swallow errors gracefully.
		document.title = err;
	}

	heightLock = false;
}