var previewPopup;
var activeMarkupPopupTab;
var activeMarkupPopupPage;
var htmlCode = false;
var cssCode = false;

hljs.initHighlightingOnLoad();

window.addEvent('domready', function() {
	activeMarkupPopupPage = defaultPage;
	if(activeMarkupPopupPage) {
		loadPreview(pathUrl + activeMarkupPopupPage);
	}
	initSelect();
	frameHeight();
	initLinks();
})

window.addEvent('resize', function() {
	frameHeight();
});

function initSelect() {
	var pageElement = $('page');
	if(pageElement) {
		pageElement.addEvent('change', function() {
			htmlCode = false;
			activeMarkupPopupPage = pageElement.getProperty('value');
			if(!activeMarkupPopupTab || activeMarkupPopupTab.getProperty('id') == 'preview') {
				loadPreview(pathUrl + activeMarkupPopupPage);
			}
			else {
				loadCode(pathUrl + activeMarkupPopupPage, activeMarkupPopupTab.getProperty('id'));
			}
			return true;
		})
	}
}

function frameHeight() {
	var height;
	if(window.innerHeight) {
		height = window.innerHeight;
	} else {
		height = document.documentElement.clientHeight;
	}
	var iframe = $('iframe');
	if(iframe) {
		iframe.setStyle('height', height - 51 + 'px');
	}
	$$('#html-code-container pre').setStyle('height', height - 51 + 'px');
	$$('#css-code-container pre').setStyle('height', height - 51 + 'px');
}

function initLinks() {
	var html = $('html');
	var css = $('css');
	var preview = $('preview');
	if(html && css && preview) {
		html.addEvent('click', function() {
			loadCode(pathUrl + activeMarkupPopupPage, 'html');
			return false;
		});
		css.addEvent('click', function() {
			loadCode(pathUrl + defaultCss, 'css');
			return false;
		});
		preview.addEvent('click', function() {
			loadPreview(pathUrl + activeMarkupPopupPage);
			return false;
		});
	}
}

function loadPreview(url) {
	var iframe = $('iframe');
	var htmlCodeContainer = $('html-code-container');
	var cssCodeContainer = $('css-code-container');
	if(iframe && htmlCodeContainer && cssCodeContainer) {
		iframe.addClass('hidden');
		iframe.setProperty('src', url);
		htmlCodeContainer.addClass('hidden');
		cssCodeContainer.addClass('hidden');
		iframe.removeClass('hidden');
		setActiveMarkupPopupTab('preview');
	}
}

function loadCode(url, type) {
	if(!showCode(type)) {
		var ajaxLoader = $('ajax-loader');
		if(ajaxLoader) {
			ajaxLoader.removeClass('hidden');
		}
		new Request({
			url: url,
			onSuccess: function(response) {
				var codeContainer = $(type + '-code-container');
				if(codeContainer) {
					var code = escape(response);
					codeContainer.set('html', '<pre><code id="' + type + '-code" class="' + type + '">' + code + '</code></pre>');
					hljs.highlightBlock($(type + '-code'));

					if(type == 'html') {
						htmlCode = true;
					}
					else {
						cssCode = true;
					}
					showCode(type);
				}
			},
			onComplete: function() {
				if(ajaxLoader) {
					ajaxLoader.addClass('hidden');
				}
			}
		}).send();
	}
}

function showCode(type) {
	var iframe = $('iframe');
	var htmlCodeContainer = $('html-code-container');
	var cssCodeContainer = $('css-code-container');
	if(iframe && htmlCodeContainer && cssCodeContainer) {
		if(type == 'html') {
			if(!htmlCode) return false;
			htmlCode = true;
			cssCodeContainer.addClass('hidden');
			iframe.addClass('hidden');
			htmlCodeContainer.removeClass('hidden');
		}
		else {
			if(!cssCode) return false;
			cssCode = true;
			htmlCodeContainer.addClass('hidden');
			iframe.addClass('hidden');
			cssCodeContainer.removeClass('hidden');
		}
	}
	frameHeight();
	setActiveMarkupPopupTab(type);
	return true;
}

function escape(value) {
	return value.replace(/&/gm, '&amp;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;');
}

function setActiveMarkupPopupTab(tabId) {
	var tab = $(tabId);
	if(tab) {
		if(activeMarkupPopupTab) {
			activeMarkupPopupTab.removeClass('active');
		}
		activeMarkupPopupTab = tab;
		activeMarkupPopupTab.addClass('active');
	}
}