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

		$('#btnPreview').click(function(){
			//change header
			var $header = $('#preview-dialog .sbPageWrapper .header');
			var $selectedOption = $('#logo-options-container .option input[type=radio]:checked');
			switch($selectedOption.attr('id')){
				case 'radUploadLogo':
					var uploadImagePath = $('#uploadLogo-container img').attr('src');
					$('#preview-dialog').dialog('option', 'title', 'Preview Header: Upload a logo image');
					$header.removeClass('nologo haslogo')
						.empty()
						.append(function(){
							if (uploadImagePath) {
								$(this).addClass('haslogo')
								return '<img src="' + uploadImagePath + '" alt="Site Logo" title="" />';
							}
							$(this).addClass('nologo');
							return 'YOUR LOGO HERE <em>(You should upload a logo and save it to preview actual logo)</em>';
						});
					break;
				case 'radCustomHtml':
					$('#preview-dialog').dialog('option', 'title', 'Preview Header: Custom HTML');
					$header.removeClass('nologo haslogo')
						.empty()
						.append(function(){
							var customHtml = $.trim($('#customhtml').val());
							if (customHtml) {
								$(this).addClass('haslogo')

								//@todo: filter HTML to prevent XSS attack
								//may just be an iframe passing the html markup to be filtered to the server and rendering the filtered html from the iframe
								return customHtml;
							}
							$(this).addClass('nologo');
							return 'YOUR CUSTOM HTML HERE <em>(You should enter custom HTML to preview actual HTML)</em>';
						});
					break;
				default: //radNoLogo
					$('#preview-dialog').dialog('option', 'title', 'Preview Header: No logo');
					$header.addClass('nologo')
						.removeClass('haslogo')
						.text('YOUR SITE NAME HERE');
			}
			//open preview dialog
			$('#preview-dialog').dialog('open');

			//adjust dialog page content height to avoid scrollbars
			adjustContentHeight($selectedOption.attr('id'));
		});

		//attach onclick handler to radio buttons
		$('#logo-options-container .option input[name=logoOptions]').click(function(){
			if ($(this).attr('prevchecked') == '1') {
				return false;
			}

			//set form enctype when file upload option is selected
			this.form.encoding = (this.id == 'radUploadLogo') ? 'multipart/form-data':'application/x-www-form-urlencoded';

			$('#btnSave').removeAttr('disabled');
			$('#logo-options-container .option input[type=radio]').removeAttr('prevchecked');
			$(this).attr('prevchecked', '1');
			var itemToShow = $(this).parent().find('.subitem');
			//do not re-show
			if (!itemToShow.hasClass('shown')) {
				$('#logo-options-container .option .shown').slideUp('slow').removeClass('shown');
				itemToShow.slideDown('slow').addClass('shown');
			}
			itemToShow.find(':first-child').focus();
		});

		$('#uploadFile').change(function(){
			//console.debug('change...');
			$('#btnSave').removeAttr('disabled');
		});

		//prevents behavior of some browsers to retain previously checked radio button on reload
		$('#logo-options-container .option input[name=logoOptions][checked]').click();
		$('#btnSave').attr('disabled', 'disabled');

		$('#preview-dialog').dialog({
			title:'Preview Header',
			autoOpen:false,
			modal:true,
			resizable:false,
			height:600,
			width:800,
			dialogClass:'sb-dialog-container preview-dialog-container shadow-dark',
			create:function(){
				$('#btnClose').click(function(){
					$('#preview-dialog').dialog("close");
				});
				$('#preview-dialog .dialog-content').html(
					'<div class="sbPageWrapper">' +
					'	<div class="sbHeaderFooter header"></div>' +
					'	<div class="sbHeaderFooter">TOP NAVIGATION BAR</div>' +
					'	<h1 class="sbPageTitle">Page Title</h1>' +
					'	<div class="sb_screenlayout_wrapper"><div class="content">PAGE CONTENT</div></div>' +
					'	<div class="sbHeaderFooter">BOTTOM NAVIGATION BAR</div>' +
					'	<div class="sbHeaderFooter">SITE FOOTER</div>' +
					'</div>'
				);
			}
		});

		initErrorDialog();

		function adjustContentHeight(selectedOptionId){
			var $header = $('#preview-dialog .sbPageWrapper .header');
			var headerHeight =  $header.height() - ($header.hasClass('haslogo') ? (parseFloat($('#preview-dialog .sbHeaderFooter:not(.header)').css('padding-top')) + parseFloat($('#preview-dialog .sbHeaderFooter:not(.header)').css('padding-bottom'))) : 0);
			$('.sb_screenlayout_wrapper').height(
				//computed height is 0 when element is hidden, so we just hardcode the defaults
				//265=default height of page content, 16=default height of header
				265 - (headerHeight - 16)
			);
			var margin = ($('.sb_screenlayout_wrapper').height()-$('.sb_screenlayout_wrapper .content').height())/2;
			$('.sb_screenlayout_wrapper .content').css({'margin-top':margin, 'margin-bottom':margin});
		}

		window.onRenderIframeResponseCallbackSuccess = function(result){
			//update displayed logo with the uploaded one
			if (result.data && result.data.uploadedLogo) {
				$('#uploadLogo-container img').attr('src', result.data.uploadedLogo + '?' + new Date().getTime());
				$('#sitebuilderForm_step2')[0].reset();
			}
		}
	});
})(jQuery);