$(document).ready(function() {
	$('.popup').hide();	
	$('.window').hide();
	$(this).children('ul').hide();
	
	$('.window-button').click(function(e) {
		e.preventDefault();
		makeWindow('#window');
	});
	
	$('.slide-button').click(function(e) {
		e.preventDefault();
		createSlide("Example slide down message.");
	});
	
	$('.bezel-button').click(function(e) {
		e.preventDefault();
		createBezel("Bezel", 1000);
	});
	
	$('.opener').click(function(e) {
		e.preventDefault();
		if($(this).hasClass('open')) {
			hideWindow($(this));
		}
		else {
			showWindow($(this));
			var startLink = $(this);
			$('.canvas').click(function() {
				hideWindow(startLink);
			});
		}
	});
	
	$('.submenu').hover(function() {
		$(this).children('ul').show();
		$(this).children('ul').addClass('visible');
	},
	
	function() {
		$(this).children('ul').removeClass('visible');
		setTimeout(function() {
			$(this).children('ul').hide();
		}, 500);
	});
});

function hideWindow(startLink) {
	var popup = startLink.next('.popup');
	var openButton = startLink;
	openButton.removeClass('open');
	popup.removeClass('open');
	setTimeout(function() {
		popup.hide();
	}, 500);
	$('.canvas').remove();
}

function showWindow(startLink) {
	var popup = startLink.next('.popup');
	popup.show();
	startLink.addClass('open');
	setTimeout(function(){
		popup.addClass('open');
	},0);
	$('<div class="canvas"></div>').appendTo('body');
}

function makeOverlay() {
	
	$('body').css('overflow', 'hidden');
	var overlay = document.createElement('div');
	overlay.id = 'overlay';	
	$('body').append(overlay);
	window.setTimeout(function() {
		$('#overlay').addClass('visible');
	}, 0);
	
};

function close(windowName) {
	$('body').css('overflow', 'auto');
	$(windowName).removeClass('visible');	
	setTimeout(function() {
		$('#overlay').removeClass('visible');
		
		setTimeout(function() {
			$('#overlay').remove();
			$(windowName).hide();
		}, 500);
	}, 500);
}

function makeWindow(windowName) {
	makeOverlay();
	$(windowName).hide();
	setTimeout(function() {
		$(windowName).show();
		setTimeout(function() {
			$(windowName).addClass('visible');
		}, 0);
	}, 500);	
	$('.close-button').click(function() {
		close(windowName);
	});
}

function createSlide(text) {
	$('<div class="slide"></div>').appendTo('body');
	$('.slide').html(text);
	$('<a class="slide-close" href="#">x</a>').appendTo('.slide');
	setTimeout(function() {
		$('.slide').addClass('down');
	}, 0);
	
	$('.slide-close').click(function(e) {
		e.preventDefault();
		closeSlide();
	});
}

function closeSlide() {
	$('.slide').removeClass('down');
	setTimeout(function() {
		$('.slide').remove();
	}, 500);
}

function createBezel(text, delay) {
	$('<div class="bezel"></div>').appendTo('body');
	$('.bezel').html(text);
	setTimeout(function() {
		$('.bezel').addClass('slow');
		$('.bezel').addClass('visible');
	}, 0);
	setTimeout(function() {
		$('.bezel').removeClass('visible');
		setTimeout(function() {
			$('.bezel').removeClass('slow');
		}, 0);
		$('.bezel').addClass('fast');
		$('.bezel').addClass('expanded');
		setTimeout(function() {
			$('.bezel').remove();
		}, 300);
	}, delay);
}