/**
 * Manages navigation through the styleguide's elements from within the page
 * @constructor
 */
function Styleguide() {
	this._init();
}

Styleguide.prototype = {
	_tocContainer: null,
	_tocContainerFrame: null,
	_infoButton: null,
	_infoContainer: null,
	
	_init: function () {
		$('.container').css('z-index', '1');
		
		this._tocContainerFrame = $('<iframe src=""></iframe>')
			.css({
				'position': 'absolute',
				'top': '0',
				'left': '0',
				'height': '600px',
				'width': '20px',
				'margin': '0',
				'padding': '0',
				'border-width': '0',
				'z-index': '2'
				})
			.appendTo(document.body);
		
		this._tocContainer = $('<div><div>')
			.css({
				'position': 'absolute',
				'top': '0',
				'left': '0',
				'height': '600px',
				'width': '0',
				'padding': '10px 0 10px 20px',
				'overflow': 'hidden',
				'background-color': '#666',
				'z-index': '3'
				})
			.appendTo(document.body);
		
		var toc = {
			'templates': {
				't03 - content page': 't3-normalcontentpage-debug.html',
				't04 - job search results': 't4-searchresults-debug.html',
				't10 - homepage': 't10-homepage-debug.html'
			}
		};
		
		var categories = $('<ul></ul>').appendTo(this._tocContainer).css('color', '#E0E0E0');
		$.each(toc, new Delegate(this, function (key, value) {
			var category = $('<ul></ul>').appendTo(categories).append($('<li></li>').append($('<h1></h1>').text(key).css('color', '#E0E0E0')));
			
			$.each(value, new Delegate(this, function (key, value) {
				var item = $('<li></li>').appendTo(category).append(
					$('<a></a>').attr('href', value).text(key).css('color', '#E0E0E0')
				);
				
				if (window.location.pathname.match(value+'$')) {
					item.css('font-weight', 'bold');
				}
			}));
		}));		
		
		this._infoButton = $('<div><div>')
			.css({
				'position': 'absolute',
				'top': '16px',
				'right': '16px',
				'width': '20px',
				'height': '20px',
				'background-image': 'url(images/info.png)',
				'z-index': '2',
				'cursor': 'pointer'
				})
			.appendTo(document.body);
			
		this._infoContainerFrame = $('<iframe src=""></iframe>')
			.css({
				'position': 'absolute',
				'top': '36px',
				'right': '16px',
				'height': '250px',
				'width': '40px',
				'margin': '0',
				'padding': '0',
				'border-width': '0',
				'z-index': '3'
				})
			.hide()
			.appendTo(document.body);
		
		this._infoContainer = $('<div><div>')
			.css({
				'position': 'absolute',
				'top': '36px',
				'right': '16px',
				'height': '250px',
				'width': '400px',
				'padding': '10px',
				'background-color': '#666',
				'z-index': '4'
				})
			.hide()
			.appendTo(document.body);
		
		var info = {
			title: 'T10 - Homepage',
			description: 'This is the homepage, the website opens with this page',
			downloads: {
				'PSD': '#',
				'HTML': '#',
				'Images': '#'
			},
			related: {
				'C21 - Company Viewer': '#',
				'C25 - Poll': '#'
			},
			overlays: {
				'Components': 'images/homepage-overlay.png'
			}
		};
		
		this._infoContainer.append($("<h1></h1>").text(info.title).css('color', '#E0E0E0'));
		this._infoContainer.append($("<p></p>").text(info.description).css('color', '#E0E0E0'));
		this._infoContainer.append($("<h2></h2>").text('Downloads').css('color', '#E0E0E0'));
		
		var downloads = $("<ul></ul>").appendTo(this._infoContainer).css('margin-bottom', '16px');
		$.each(info.downloads, function (index, element){
			downloads.append($("<li></li>").append($("<a></a>").attr('href', element).text(index).css('color', '#E0E0E0')));
		});
		
		this._infoContainer.append($("<h2></h2>").text('Related').css('color', '#E0E0E0'));
		var related = $("<ul></ul>").appendTo(this._infoContainer).css('margin-bottom', '16px');
		$.each(info.related, function (index, element){
			related.append($("<li></li>").append($("<a></a>").attr('href', element).text(index).css('color', '#E0E0E0')));
		});
		
		this._infoContainer.append($("<h2></h2>").text('Overlays').css('color', '#E0E0E0'));
		var overlays = $("<ul></ul>").appendTo(this._infoContainer).css('margin-bottom', '16px');
		$.each(info.overlays, function (index, element){
			overlays.append($("<li></li>").append($("<a></a>").attr('href', '#').text(index).css('color', '#E0E0E0').toggle(
				function () {
					$(document.body).append(
						$('<img />').attr({'src': element, 'id': 'overlay'}).css({
							'position': 'absolute',
							'z-index': '1',
							'top': '0',
							'left': '0'
						})
					);
				},
				function () {
					$('#overlay').remove();
				})));
		});
		
		this._tocContainer.hover(new Delegate(this, function () {
			this._tocContainerFrame.css({'width': '200px'});
			this._tocContainer.css({'width': '200px', 'padding': '10px'});
		}), new Delegate(this, function () {
			this._tocContainerFrame.css({'width': '20px'});
			this._tocContainer.css({'width': '0', 'padding': '10px 0 10px 20px'});
		}));
		
		this._infoButton.hover(new Delegate(this, function () {
			this._infoButton.css({'background-image': 'url(images/info-highlight.png)'});
		}), new Delegate(this, function () {
			this._infoButton.css({'background-image': 'url(images/info.png)'});
		}));
		
		this._infoButton.toggle(new Delegate(this, function () {
			this._infoContainerFrame.show();
			this._infoContainer.show();
		}), new Delegate(this, function () {
			this._infoContainerFrame.hide();
			this._infoContainer.hide();
		}));
	}
}