$(function(){
	var $window = $(window);
	var $document = $(document);
	var $htmlbody = $("html,body");
	
	//------------------------------
	//New Issue RollOver
	//------------------------------
	var imgDetailSrc = "/magazine/images/btn-detail.gif";
	var imgDetailOver = "/magazine/images/btn-detail-over.gif";
	var $imgDetail = $("a.new-wrap span.icons img").eq(1);
	var $aNew = $("a.new-wrap");
	if ( $.browser.msie ) {
		$aNew.after('<div style="position:absolute; top:170px; text-align:center;"><a href="'+$aNew.attr("href")+'" class="new-wrap-cover"><img src="/magazine/images/spacer.gif" width="950" height="295" /></a></div>');
		$aNew = $("a.new-wrap-cover");
	}
	$aNew.hover(
		function() { $imgDetail.attr("src",imgDetailOver); $("a.new-wrap").css("background-color","#F2F2F2"); },
		function() { $imgDetail.attr("src",imgDetailSrc); $("a.new-wrap").css("background-color","transparent"); }
	);
	$("div#NEW div.issue a").hover(
		function() { $(this).css("background-color","#F2F2F2"); },
		function() { $(this).animate( { backgroundColor:"#FFFFFF" }, 300 ); }
	);
	
	//------------------------------
	//Scroll to back number
	//------------------------------
	$("a[href=#BACK]").click(function() {
		$htmlbody.stop();
		$htmlbody.animate({scrollTop:$("#BACK").offset().top - 30},500);
		return false;
	});
	
	//------------------------------
	//ajax for back number
	//------------------------------
	
	var $back = $("div#BACK");
	var $issues;
	var $displayedIssues;
	var page = 0;
	var totalPage = 0;
	var numInPage = 10;
	
	$("div#BACK div.issue").remove();
	$.ajax({
			type:"GET",
			url:"/magazine/issues.xml",
			dataType:"xml",
			success:onLoad
	});
	
	function onLoad( xml ) {
		$issues = $(xml).find("issue");
		totalPage = Math.ceil($issues.length / numInPage);
		resetPage(0);
		initScroll();
	}
	
	function resetPage(p,after) {
		if ( p >= totalPage ) p = totalPage - 1;
		else if ( p < 0 ) p = 0;
		if ( page == p  && $("div#BACK div.issue").length ) return;
		page = p;
		if ( $.browser.msie ) {
			$("div#BACK div.issue").addClass("remove").hide();
		} else {
			$back.css("height",$back.height()+"px");
			$("div#BACK div.issue").addClass("remove").hide();
		}
		var s = page*numInPage;
		var e = (page+1)*numInPage;
		if ( e > $issues.length ) e = $issues.length;
		for ( var i=s; i<e; i++ ) {
			$back.append($issues.eq(i).text());
		}
		$displayedIssues = $("div#BACK div.issue:not(.remove)");
		resetBacknumberRollover();
		if ( $.browser.msie ) {
			if ( after ) after();
			onResize();
		} else {
			$displayedIssues.hide();
			$displayedIssues.fadeIn(500,function() {
				$back.css("height","auto");
				if ( after ) after();
				onResize();
			});
		}
		
		//Page Navi
		if ( page == 0 ) {
			$("div#PAGE-NAVI a.prev").animate({opacity:0.3},300);
		} else {
			$("div#PAGE-NAVI a.prev").animate({opacity:1},0);
		}
		if ( page >= totalPage-1 ) {
			$("div#PAGE-NAVI a.next").animate({opacity:0.3},300);
		} else {
			$("div#PAGE-NAVI a.next").animate({opacity:1},0);
		}
		
	}
	
	function resetBacknumberRollover() {
		$displayedIssues.children("a.clearfix").hover(
			function() { $(this).css("background-color","#F2F2F2"); },
			function() { $(this).animate( { backgroundColor:"#FFFFFF" }, 300 ); }
		);
	}
	
	
	//------------------------------
	//Scroll
	//------------------------------
	
	function initScroll() {
	
		//PreLoad Explanation Image
		
		var img;
		img = new Image();
		img.src = "/magazine/images/btn-prev-exp.gif";
		img = new Image();
		img.src = "/magazine/images/btn-next-exp.gif";
		img = new Image();
		img.src = "/magazine/images/btn-pagetop-exp.gif";
		
		//Display Explanation
		
		$("div#PAGE-NAVI a.prev").hover(
			function(){ $("div#PAGE-NAVI span.exp").append('<img src="/magazine/images/btn-prev-exp.gif" width="15" height="80" />'); },
			function(){ $("div#PAGE-NAVI span.exp").empty();	}
		);
		
		$("div#PAGE-NAVI a.next").hover(
			function(){ $("div#PAGE-NAVI span.exp").append('<img src="/magazine/images/btn-next-exp.gif" width="15" height="80" />'); },
			function(){ $("div#PAGE-NAVI span.exp").empty();	}
		);
		
		$("div#PAGE-NAVI a.pagetop").hover(
			function(){ $("div#PAGE-NAVI span.exp").append('<img src="/magazine/images/btn-pagetop-exp.gif" width="15" height="80" />'); },
			function(){ $("div#PAGE-NAVI span.exp").empty();	}
		);
		
		//Change Page 
		
		$("div#PAGE-NAVI a.prev").click(function() {
			if ( page == 0 ) return false;
			resetPage(page-1,
				function() {
					//$htmlbody.stop();
					//$htmlbody.animate( { scrollTop:$document.height() },500 );
					//$htmlbody.animate( { scrollTop:$back.offset().top - 40 },500 );
				}
			);
			return false;
		});
		
		$("div#PAGE-NAVI a.next").click(function() {
			if ( page+1 >= totalPage ) return false;
			resetPage(page+1,
				function() {
					//$htmlbody.stop();
					//$htmlbody.animate( { scrollTop:$back.offset().top - 40 },500 );
				}
			);
			return false;
		});
	}
	
	//------------------------------
	//Page Top
	//------------------------------
	$("div#PAGE-NAVI a.pagetop").click(function() {
		resetPage(0);
		$htmlbody.stop();
		$htmlbody.animate( { scrollTop:0 }, 500 );
		return false;
	});
	
	//------------------------------
	//Follow scrolling
	//------------------------------
	var $pagenavi = $("div#PAGE-NAVI");
	var pagenaviTopMargin = 100;
	var topMax;
	var bottomMax;
	var mouseX = 0;
	var mouseY = 0;
	var targetTop = 0;
	var _init = false;
	
	$pagenavi.css("position","absolute");
	$pagenavi.css("display","block");
	onResize();
	$window.load(onResize);
	$window.resize(onResize);
	$window.scroll(onScroll);
		
	$document.mousemove(function( e ) {
		mouseX = e.pageX;
		mouseY = e.pageY;
		onScroll();
	});
		
		
	
	function onResize() {
		topMax = $("div#BACK").offset().top;
		bottomMax = $document.height() - 200;
		if ( !_init ) {
			$pagenavi.css("top",topMax+"px");
			_init = true;
		}
		var l = $("div#BACK").offset().left + $("div#BACK").width() - 35;
		$pagenavi.css("left",l+"px");
		onScroll();
	}
	
	function onScroll() {
		if ( mouseX > $pagenavi.offset().left ) return;
		var t = mouseY - 55;
		if ( t < topMax ) t = topMax;
		else if ( t > bottomMax ) t = bottomMax;
		if ( targetTop == t ) return;
		targetTop = t;
		$pagenavi.stop();
		$pagenavi.animate( { top:targetTop }, 400 );
		//$pagenavi.css("top",t+"px");
	}
	
});