(function($){
	$(document).ready(function(){
		
		$('#settings-dialog').dialog({
			title:'vBulletin: New vBulletin 5.0 Installation',
			autoOpen:false,
			modal:true,
			resizable:false,
			closeOnEscape:false,
			width:600,
			draggable:false,
			dialogClass:'sb-dialog-container settings-dialog-container shadow-dark',
			create:function(){				
				$('#btnOK').click(function(){
					//@todo:temporary only for demo
					location.href = 'page/1';
					return false;
				});
			}
		});
		
		$('#install-dialog-3').dialog({
			title:'vBulletin: New vBulletin 5.0 Installation',
			autoOpen:false,
			modal:true,
			resizable:false,
			closeOnEscape:false,
			width:600,
			draggable:false,
			dialogClass:'sb-dialog-container install-dialog-container-3 shadow-dark',
			create:function(){				
				$('#btnShowDetails').toggle(
					function(){
						$(this).html('Hide Details');
						$('#install-details').show();
					},
					function(){
						$(this).html('Show Details');
						$('#install-details').hide();
					}
				);
			},
			open:function(){
				//@todo: temporary only for demo
				setTimeout(function(){setProgress(1)}, 1000);				
			}
		});
		
		function setProgress(step){
			var maxStep = 7;
			if (step <= maxStep){
				var percent = (step!=maxStep) ? (Math.round(100/maxStep))*step : 100;
				$('#install-dialog-3 .header span').text('Step ' + step + ' of ' + maxStep);
				$('#install-dialog-3 .progressbar .filled').css('width', percent + '%').find('span').text(percent + '%');
				var $stepDetail = $('<div></div>').html('Step '+ step + ' - Done.')
					.appendTo('#install-details'); //@todo - add actual step descriptions
				if ($('#install-details').is(':visible')){
					$stepDetail.get(0).scrollIntoView();
				}
				setTimeout(function(){setProgress(step+1)}, 1000);
			}
			else { 
				$('#install-dialog-3').dialog('close');
				$('#settings-dialog').dialog('open');				
			}
		}
		
		$('#install-dialog-2').dialog({
			title:'vBulletin: New vBulletin 5.0 Installation',
			autoOpen:false,
			modal:true,
			resizable:false,
			closeOnEscape:false,
			width:600,
			draggable:false,
			dialogClass:'sb-dialog-container install-dialog-container-2 shadow-dark',
			create:function(){				
				$('#btnInstall').click(function(){
					$('#install-dialog-2').dialog('close');
					$('#install-dialog-3').dialog('open');
				});
			}
		});
		
		$('#thumbnail-list .site-theme-thumbnail input[type=radio]').thumbnailRadioCheckbox({
			thumbnailClass:'radio-checkbox-thumbnail image shadow',
			select:function($thumbnail, $radio){
				$thumbnail.css('border-style', 'inset');
				$thumbnail.parent().removeClass('shadow');

				$('#btnSave').removeAttr('disabled');
				$('#themeid').val($radio.val());
			},
			unselect:function(){
				$('#thumbnail-list .radio-checkbox-thumbnail img').css('border-style', 'solid');
				$('#thumbnail-list .radio-checkbox-thumbnail').addClass('shadow');
			}
		});

		$('.site-theme-thumbnail .image.selected img').addClass('inset');

		$('#preview-dialog').dialog({
			title:'Preview',
			autoOpen:false,
			modal:true,
			resizable:false,
			height:805,
			width:828,
			dialogClass:'sb-dialog-container preview-dialog-container shadow-dark',
			create:function(){
				$('#btnClose').click(function(){
					$('#preview-dialog').dialog("close");
				});
			}
		});
		
		$('#btnCancel').click(function(){
			location.href = 'site-manager';
		});
		
		$('#btnPreview').click(function(){
			$('#preview-dialog').dialog("open");
		});

		$('.preview-button').click(function(){
			$('.image', $(this).prev()).click();
		});

		$('.preview-button button[name=btnPreview]').click(function(){
			$('#preview-dialog .dialog-content .preview-image, #preview-dialog .action-buttons').hide();
			$('#preview-dialog .loading-icon').show();

			var previewTitle = $('label', $(this).closest('.site-theme-thumbnail')).text();
			$('#preview-dialog').dialog("option", "title", "Preview: " + previewTitle).dialog("open");

			var img = new Image(800, 700);
			img.onload = function(){
				$('#preview-dialog .loading-icon').hide();
				$('#preview-dialog .dialog-content .preview-image').html('<img src="' + this.src + '" alt="' + this.alt + '" title="" />').show();
				$('#preview-dialog .action-buttons').show();
			}
			img.onerror = function(){
				$('#preview-dialog .loading-icon').hide();
				$('#preview-dialog .dialog-content').html('<div class="error">Error loading the preview.</div>');
				$('#preview-dialog .action-buttons').show();
			}
			img.src = $(this).parent().prevAll('img').attr('src').replace('.png', '-large.png');

			img.alt = previewTitle;
		});
		
		$('.preview-button button[name=btnSelect]').click(function(){
			location.href = 'page';
		});
		
		//first step
		$('#install-dialog-2').dialog('open');
	});
})(jQuery);