var fracs = $('#outline').fracs();

$(function() { // fracs
	//$('#outline').fracs('check');

	$('#outlinebox').css('border', '1px solid #eee');

	$("#outline").fracs("outline", {
		crop: true,
		styles: [{
			selector: 'nav'
			,fillStyle: '#6CC42E'
		}, {
			selector: 'h1,h2,h3,h4,h5,h6'
			,fillStyle: '#AA0000'
		}, {
			selector: 'article,section,img'
			,fillStyle: '#EAEAEA'
		}, {
			selector: 'a,button'
			,fillStyle: '#89B9F8'
		}, {
			selector: 'input:text'
			,fillStyle: '#FFE866'
		}, {
			selector: '.adv'
			,fillStyle: '#CCCCCC'
		}]
	});

	$(window).resize(function() {
		if($(this).width() < 1100) {
			//$('#outlinebox').css('position', 'fixed');
			$('#outlinebox').css('display', 'none');
		} else {
			//$('#outlinebox').css('position', 'absolute');
		}
	});

});

$(function() {
	/* menu show and hide */
	$('.TopMenuList').mouseover(function() {
		$(this).children('.SubMenuBox').show();
	});
	$('.TopMenuList').mouseout(function() {
		$(this).children('.SubMenuBox').hide();
	});

	/* auto change img when mouse over */
	$('.imgoverable').mouseover(function() {
		var img = $(this).attr('src');
		var overname = $(this).attr('data-overname');
		var pat1 = /^.*\//;
		var folder = img.match(pat1);
		var fname = img.replace(pat1, '');
		if (fname.match(overname+'.')) {
			return false;
		}
		var overfile = fname.replace(/\./, overname+'.');
		$(this).attr('src', folder+overfile);
	});

	/* auto change img when mouse ouy */
	$('.imgoverable').mouseout(function() {
		var img = $(this).attr('src');
		var overname = $(this).attr('data-overname');
		var pat1 = /^.*\//;
		var folder = img.match(pat1);
		var fname = img.replace(pat1, '');
		var outfile = fname.replace(overname+'.', '.');
		$(this).attr('src', folder+outfile);
	});
});