$(function() {

/* navigation */
	$('#nav').delegate('li:not(.current)', 'click', function() {
		$(this).addClass('current').siblings().removeClass('current')
			.parents('#wrapper').find('div.box').hide().eq($(this).index()).fadeIn(500);
	})
/* end navigation */

	$('div.box').not(':first').hide();

	$('#submit').attr('disabled', true).addClass('inactive');
	$('#set1, #set2').css('background', '#FFC');
	$('#sub1, #sub2').hide().css({position: 'absolute',	top: '35px', left: '145px', padding: '0'});
	$('#error').append('<ul></ul>');

	$('div.fieldset').hover(
		function() {
			$(this).addClass('active');
		},
		function() {
			$(this).removeClass('active');
		}
	);

	$('#cssReset').change(function() {
		$('#cssResetInfo').remove();
		$(this).after('<div id="cssResetInfo"></div>');
		if ( $('#cssReset').val() == 2 ) $('#cssResetInfo').prepend('<a href="http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/" target="_blank">Подробнее о сбросе стилей от Eric Meyer &raquo;</a>');
		if ( $('#cssReset').val() == 3 ) $('#cssResetInfo').prepend('<a href="http://developer.yahoo.com/yui/reset/" target="_blank">Подробнее о сбросе стилей от Yahoo! &raquo;</a>');
	});

	$('input[name=width]').click(function () {
		$('#set1').css('background', '#FFFFFF');
		$('#fixWidth, #liqWidth, #maxWidth').hide();
		if ($('#fix:checked').length > 0) $('#fixWidth').animate({height: 'show'}, 200);
		if ($('#liq:checked').length > 0) $('#liqWidth, #maxWidth').animate({height: 'show'}, 200);
	});

	$('#fix').click(function() {
		$('#liqw').val('1000').removeClass('error');
		$('#maxw').val('').removeClass('error');
		$('#error li:contains("Указана слишком маленькая минимальная ширина макета.")').remove();
		$('#error li:contains("Минимальная ширина должна быть указана в цифрах.")').remove();
		$('#error li:contains("Указана слишком маленькая максимальная ширина макета.")').remove();
		$('#error li:contains("Максимальная ширина должна быть указана в цифрах.")').remove();
		if ( $('input.error').length < 1  ) {
			$('#error').fadeOut(100);
		}
	});

	$('#liq').click(function() {
		$('#fixw').val('1000').removeClass('error');
		$('#error li:contains("Указана слишком маленькая ширина макета.")').remove();
		$('#error li:contains("Ширина макета должна быть указана в цифрах.")').remove();
		if ( $('input.error').length < 1  ) {
			$('#error').fadeOut(100);
		}
	});

	$('#headerh').click(function() {
		if ( $('#headerh:checked').length > 0 ) {
			$('#headerHeight').animate({height: 'show'}, 200);
		} else {
			$('#headerHeight').hide();
		}
	});

	$('#footerh').click(function() {
		if ( $('#footerh:checked').length > 0 ) {
			$('#footerHeight').animate({height: 'show'}, 200);
		} else {
			$('#footerHeight').hide();
		}
	});

	$('#lc, #cr').click(function() {
		if ( $('#lc:checked, #cr:checked').length > 0 ) {
			$('#lSidebarWidth').hide();
			$('#lSidebarWidth').animate({height: 'show'}, 200);
		} else {
			$('#lSidebarWidth').hide();
		}
	});

	$('#sub2 input').click(function() {
		$('#lSidebarWidth, #rSidebarWidth').hide();
		$('#lSidebarWidth, #rSidebarWidth').animate({height: 'show'}, 200);
	});

	$('#set2 input').click(function() {
		$('#eh').attr('disabled', false);
		$('label[for=eh]').css({color: '#444444'});
	});

	$('input[name=sidebar]').click(function() {
		$('#set2').css('background', '#FFFFFF');
	});

	$('#s1').click(function() {
		$('input[name=sidebar]').attr('checked', false);
		if ( $('input[name=sidebar]:checked').length < 1 ) $('#set2').css('background', '#FFFFCC');
		$('#sub2, #lSidebarWidth, #rSidebarWidth').hide();
		$('#sub1').animate({height: 'show'}, 200);
		$('#submit').attr('disabled', true).addClass('inactive');
	});

	$('#s2').click(function() {
		$('input[name=sidebar]').attr('checked', false);
		if ( $('input[name=sidebar]:checked').length < 1 ) $('#set2').css('background', '#FFFFCC');
		$('#sub1, #lSidebarWidth').hide();
		$('#sub2').animate({height: 'show'}, 200);
		$('#lsw').val('250').removeClass('error');
		if ( $('input.error').length < 1  ) {
			$('#error').fadeOut(100);
		}
		$('#submit').attr('disabled', true).addClass('inactive');
	});

	$('#s0').click(function() {
		$('#sub1, #sub2, #lSidebarWidth, #rSidebarWidth').hide();
		$('#set2').css('background', '#FFFFFF');
		$('input[name=sidebar]').attr('checked', false);
		$('#eh').attr('disabled', true).attr('checked', false);
		$('label[for=eh]').css({color: '#A7A6AA'});
		$('#lsw').val('250').removeClass('error');
		$('#rsw').val('250').removeClass('error');
		$('#error li:contains("Указана слишком маленькая ширина левого сайдбара.")').remove();
		$('#error li:contains("Ширина левого сайдбара должна быть указана в цифрах.")').remove();
		$('#error li:contains("Указана слишком маленькая ширина правого сайдбара.")').remove();
		$('#error li:contains("Ширина правого сайдбара должна быть указана в цифрах.")').remove();
		$('#error li:contains("Указана слишком маленькая ширина сайдбара.")').remove();
		$('#error li:contains("Ширина сайдбара должна быть указана в цифрах.")').remove();
		if ( $('input.error').length < 1  ) {
			$('#error').fadeOut(100);
		}
	});

	$('input[name=width], input[name=sidebar], #s0').click(function() {
		$('#picture').css({opacity: 0});
		$('#picture').animate({opacity: 1});
	});

	function ieAlert() {
		if ( $('#maxw').val() !='' && $('#fb:checked').length > 0 ) {
			$('#alert').show(200);
			if ( $('#alert').length < 1 ) {
				$('#error').after('<div id="alert"></div>');
				$('#alert').hide();
				$('#alert').show(200);
			}
			$('#alert').text('При данном наборе опций в IE6 не будет поддержки максимальной ширины.');
		} else {
			$('#alert').hide(200);
		}
	}

	$('form div input').click(function () {
		$('#preview').removeClass();
		var liq = '';
		if ($('#liq:checked').length > 0) liq = 'liq ';
		if (($('#fix:checked').length > 0 || $('#liq:checked').length > 0) && $('#lc:checked').length > 0) $('#preview').addClass(liq+'ex1');
		if (($('#fix:checked').length > 0 || $('#liq:checked').length > 0) && $('#cr:checked').length > 0) $('#preview').addClass(liq+'ex2');
		if (($('#fix:checked').length > 0 || $('#liq:checked').length > 0) && $('#lcr:checked').length > 0) $('#preview').addClass(liq+'ex3');
		if (($('#fix:checked').length > 0 || $('#liq:checked').length > 0) && $('#lrc:checked').length > 0) $('#preview').addClass(liq+'ex4');
		if (($('#fix:checked').length > 0 || $('#liq:checked').length > 0) && $('#clr:checked').length > 0) $('#preview').addClass(liq+'ex5');
		if (($('#fix:checked').length > 0 || $('#liq:checked').length > 0) && $('#s0:checked').length > 0) $('#preview').removeClass().addClass(liq+'ex6');
		if (
			$('#fixw').val() >= 400 &&
			$('#liqw').val() >= 10 &&
			$('#hh').val() >= 1 &&
			$('#fh').val() >= 1 &&
			$('#lsw').val() >= 1 &&
			$('#rsw').val() >= 1 &&
			/^\d*$/.test( $('#fixw').val() && $('#liqw').val() && $('#hh').val() && $('#fh').val() && $('#lsw').val() && $('#rsw').val() ) == 1 &&
			($('#maxw').val() == '' || ($('#maxw').val() >= 1000 && /^\d*$/.test($('#maxw').val()) == 1))
		) {
			$('#error').fadeOut(100);
			if ( $('input[name=width]:checked').length > 0 && ( $('input[name=sidebar]:checked').length > 0 || $('#s0:checked').length > 0 ) ) {
				$('#submit').removeAttr('disabled').removeClass('inactive');
			}
		}
		if ( $('input[name=width]:checked').length > 0 && ( $('input[name=sidebar]:checked').length > 0 || $('#s0:checked').length > 0 ) ) {
			$('#info').hide(200);
		} else {
			$('#info').show(200);
		}
		ieAlert();
	});

	$('#fixw, #liqw, #maxw, #hh, #fh, #lsw, #rsw').keyup(function () {
		if ( $('#error ul').length < 1 ) {
			$('#error').append('<ul></ul>');
		}
		if (
			$('#fixw').val() >= 400 &&
			$('#liqw').val() >= 10 &&
			$('#hh').val() >= 1 &&
			$('#fh').val() >= 1 &&
			$('#lsw').val() >= 1 &&
			$('#rsw').val() >= 1 &&
			/^\d*$/.test( $('#fixw').val() && $('#liqw').val() && $('#hh').val() && $('#fh').val() && $('#lsw').val() && $('#rsw').val() ) == 1 &&
			($('#maxw').val() == '' || ($('#maxw').val() >= 1000 && /^\d*$/.test($('#maxw').val()) == 1))
		) {
			$('#error').fadeOut(100);
			if ( $('input[name=width]:checked').length > 0 && ( $('input[name=sidebar]:checked').length > 0 || $('input[id=s0]:checked').length > 0 ) ) {
				$('#submit').removeAttr('disabled').removeClass('inactive');
			}
		} else {
			$('#submit').attr('disabled', true).addClass('inactive');
		}
	});

	window.$errors = {
		root_node : '#error',
		add : function(str, condition) {
			if (typeof condition == 'undefined') condition = true;
			if (typeof str == 'string') var arr = [[str, condition]];
			else var arr = arguments;
			var result = 0;
			for (var i = 0; i < arr.length; i++) {
				result = (result || arr[i][1]);
				if (arr[i][1]) {
					if (!$errors.find(arr[i][0]).length) $($errors.root_node + ' ul').append('<li>' + arr[i][0] + '</li>');
				}
				else $errors.find(arr[i][0]).remove();
			}
			$errors[ ($($errors.root_node + ' li').length ? 'show' : 'hide') ]();
			return result;
		},
		find : function(str) {
			var el = $($errors.root_node + ' li');
			for (var i = 0; i < el.length; i++)
				if (el[i].innerHTML == str) return $(el[i]);
			return {length : 0, remove : function(){}};
		},
		show : function(){ $($errors.root_node).fadeIn(300); },
		hide : function(){ $($errors.root_node).fadeOut(100); }
	};

	$('#fixw').keyup(function () {
		$(this)[ ($errors.add(
			['Указана слишком маленькая ширина макета.', (this.value < 400)],
			['Ширина макета должна быть указана в цифрах.', (/^\d*$/.test(this.value) != 1)]
		) ? 'addClass' : 'removeClass') ]('error');
	});

	$('#liqw').keyup(function () {
		$(this)[ ($errors.add(
			['Указана слишком маленькая минимальная ширина макета.', (this.value < 10)],
			['Минимальная ширина должна быть указана в цифрах.', (/^\d*$/.test(this.value) != 1)]
		) ? 'addClass' : 'removeClass') ]('error');
	});

	$('#maxw').keyup(function () {
		if ($(this).val() != '' ) {
			$(this)[ ($errors.add(
				['Указана слишком маленькая максимальная ширина макета.', (this.value < 1000)],
				['Максимальная ширина должна быть указана в цифрах.', (/^\d*$/.test(this.value) != 1)]
			) ? 'addClass' : 'removeClass') ]('error');
		} else {
			$(this).removeClass('error');
		}
		ieAlert();
	});

	$('#hh').keyup(function () {
		$(this)[ ($errors.add(
			['Указана слишком маленькая высота шапки.', (this.value < 1)],
			['Высота шапки должна быть указана в цифрах.', (/^\d*$/.test(this.value) != 1)]
		) ? 'addClass' : 'removeClass') ]('error');
	});

	$('#fh').keyup(function () {
		$(this)[ ($errors.add(
			['Указана слишком маленькая высота подвала.', (this.value < 1)],
			['Высота подвала должна быть указана в цифрах.', (/^\d*$/.test(this.value) != 1)]
		) ? 'addClass' : 'removeClass') ]('error');
	});

	$('#lsw').keyup(function () {
		if ($('#s1:checked').length > 0) {
			$(this)[ ($errors.add(
				['Указана слишком маленькая ширина сайдбара.', (this.value < 1)],
				['Ширина сайдбара должна быть указана в цифрах.', (/^\d*$/.test(this.value) != 1)]
			) ? 'addClass' : 'removeClass') ]('error');
		} else {
			$(this)[ ($errors.add(
				['Указана слишком маленькая ширина левого сайдбара.', (this.value < 1)],
				['Ширина левого сайдбара должна быть указана в цифрах.', (/^\d*$/.test(this.value) != 1)]
			) ? 'addClass' : 'removeClass') ]('error');
		}
	});

	$('#rsw').keyup(function () {
		$(this)[ ($errors.add(
			['Указана слишком маленькая ширина правого сайдбара.', (this.value < 1)],
			['Ширина правого сайдбара должна быть указана в цифрах.', (/^\d*$/.test(this.value) != 1)]
		) ? 'addClass' : 'removeClass') ]('error');
	});

});