var slideFlag = 1;
var scrollbarHeight;
var scrollbarTop = 0;

var scrollbarTop = 0;
var mainMarginTop = 0;

(function ($) {
	$.fn.contentsView = function () {
		$("img#slide").click(function() {
			slideFlag = 1;
			changeView(1);
		});
		
		$("img#nomal").click(function() {
			scrollbarHeight = $("div#scrollbar").height();
			slideFlag = 0;
			changeView(0);
		});
	}
})(jQuery);


function contentsView(inSlideFlag) {
	var totalHeight = $("div#scrollArea").attr('clientHeight');
	var listNum = $("div#sub li").length;
	
	
	slideFlag = inSlideFlag;
	if (slideFlag == 1) {
		$("body").addClass("slideMode");
		$("div#scrollbar").css("display", "block");
	}
	else {
		$("body").removeClass("slideMode");
		$("div#scrollbar").css("display", "none");
	}
	
	for (var i = 0; i < listNum; i++) {
		var listHeight = $("div#sub li").eq(i).attr('clientHeight');
		var paddingNum = ((totalHeight / listNum) - listHeight) / 2;
		$("div#sub li").eq(i).css("padding-top", paddingNum + "px");
		$("div#sub li").eq(i).css("padding-bottom", paddingNum + "px");
	}
	
	//$("div#sub li").css("height", totalHeight / listNum + "px");
	$("div#scrollbar").css("height", (totalHeight / listNum) + "px");
}


function setSlideFlag(inSlideFlag) {
	slideFlag = inSlideFlag;
}

function changeView(inSlideFlag) {
	slideFlag = inSlideFlag;
	
	
	if (slideFlag == 1) {
		$("body").addClass("slideMode");
		$("div#scrollbar").css("display", "block");
	}
	else {
		$("body").removeClass("slideMode");
		$("div#scrollbar").css("display", "none");
	}
	
	if (inSlideFlag == 1) {
		$("div#scrollbar").animate({"top": scrollbarTop + "px"}, 500, "easeInOutExpo");
		$("div#main").animate({ "margin-top": mainMarginTop + "px" }, 500, "easeInOutExpo");
		$("div#scrollArea").animate({"height": 450 + "px"} , 1000, "easeInOutExpo");
//		$("div#scrollbar").animate({"top": scrollbarHeight * (inSectionNum) + "px"}, "ease-in-out");
//		$("div#scrollArea").animate({"height": 450 + "px"}, "ease-in-out");

	}
	else {
		scrollbarTop = parseInt($("div#scrollbar").css("top"));
		mainMarginTop = parseInt($("div#main").css("margin-top"));
//		$("div#scrollbar").animate({"top": 0 + "px"}, "ease-in-out");

		var mainHeight = parseInt($("div#main").attr('clientHeight'));
		$("div#scrollArea").css("height", "450px");
		
		$("div#scrollbar").animate({"top": 0 + "px"}, 500, "easeInOutExpo");
		$("div#main").animate({ "margin-top": 0 + "px" }, 500, "easeInOutExpo");
		$("div#scrollArea").animate({"height": mainHeight + 150 + "px"} , 1000, "easeInOutExpo");
	}
}