var viewTime = 7000;

var timerID;
var nowNum;
var dep = 100;
var hover_flg = false;

var img = "#mainArea p";
var btn = "#mainArea li";


$(function() {
	mainSet();
	boxLine();
	showContents(0);
});

function mainSet(){
	$(img + ":gt(0)").hide();
	$('img', btn).unbind();
	$(btn).each (function(i){
		setMainChange($(this),i);
	});

	$("#mainArea div").hover(
		function(){
			clearTimeout(timerID);
			hover_flg = true;
		},
		function(){
			hover_flg = false;
			timerID = setTimeout("timerFunc()", viewTime);
		}
	)

	mainChange(4, false, true);
	timerID = setTimeout("timerFunc()", viewTime);
}
function setMainChange(ele, num) {
	ele.hover(
		function(){
			hover_flg = true;
			mainChange(num, true);
		},
		function(){
			hover_flg = false;
			timerID = setTimeout("timerFunc()", viewTime);
		}
	);
}
function mainChange(num, hf, ff) {
	clearTimeout(timerID);

	var t = ff ? 0 : hf ? 200 : 400;
	if(num != nowNum) {
		$(btn).each (function(i){
			if(i != num) {
				$("img:eq(0)", this).attr("src", $("img:eq(0)", this).attr("src").replace("_on.", "_off."));
			}else {
				$("img:eq(0)", this).attr("src", $("img:eq(0)", this).attr("src").replace("_off.", "_on."));
			}
		});

		$(img).not(img + ":eq("+num+")").stop().css("opacity", 1).show();
		$(img + ":eq("+num+")").hide().fadeIn(t, 'linear', function(){
			if(!hover_flg && num == nowNum) {
				timerID = setTimeout("timerFunc()", viewTime);
			}
		}).css("z-index",dep);

		dep ++;
		nowNum = num;
	}
}

function timerFunc(){
	mainChange((nowNum+1)%5);
}





function showContents(n){
	var navi = "#articleTab li";
	var contents = "#articleArea .article_area";

	$(contents).each( function(i){
		if(i == n){
			if($(this).is(":hidden")) $(this).fadeIn(200);
			boxFit(contents + ":eq("+i+")");
		}else {
			$(this).hide();
		}
	});
	contentsChange(navi, contents);

	$('.ph a', contents).hover(
		function () {
			$(this).css('opacity', 0.7);
		},
		function () {
			$(this).css('opacity', 1);
		}
	);
}

function contentsChange(navi, contents){
	$(navi).each( function(i){
		$(this).unbind("click").removeClass('current');
		if($(contents + ":eq("+i+")").is(":hidden")){
			$(this).click( function(e){
				showContents(i);
			});
			$("img:eq(0)", this).attr("src", $("img:eq(0)", this).attr("src").replace("_on.gif", "_off.gif")).hover(
				function () {
					$(this).attr("src", $(this).attr("src").replace("_off.", "_on."));
				},
				function () {
					$(this).attr("src", $(this).attr("src").replace("_on.", "_off."));
				}
			);
		}else {
			$(this).addClass('current')
			$("img:eq(0)", this).attr("src", $("img:eq(0)", this).attr("src").replace("_off.gif", "_on.gif")).unbind();
		}
	});
}

function boxFit(ele){
	var line = ele + " .line";
	var box = " .box";

	$(line).each (function(){
		var box = $(".box", this);
		var h = 0;
		$(box).each (function(){
			h = Math.max($(".inner", this).height(), h);
		});
		$(".inner", box).css(prop, h);
	});
}

function boxLine() {
	var wrap = ".article_list";
	var ele = ".box";

	$(wrap).each( function(n){
		var column = 4;
		var box = wrap + ":eq(" + n + ") > .box";
		var loop = Math.ceil($(box).size()/column);

		for(var i = 0; i < loop; i ++) {
			var line_div = $('<div class="line clearfix">');
			$(this).append(line_div);

			$(box).each( function(j){
				if(j == 0) {
					$(this).addClass("box_left");
				}else if(j == column - 1) {
					$(this).addClass("box_right");
				}

				$(this).appendTo(line_div);
	
				if(j >= column - 1 || $(box).size() < 1) {
					return false;
				}
			});
		}
	});

	$('.line:first-child, wrap').addClass('first_line');
	$('.line:last-child, wrap').addClass('last_line');
}