$(function(){
	if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i))) {
		$('#scrollInTop').css('display', 'none');
		
		var $iArea = $('#iArea');
		// news
		if($('body').hasClass('pageNews')) {
			$iArea = $('#news-content');
			var newsWidth = $iArea.innerWidth() - expPX($iArea.css('paddingLeft'));
			$iArea.css({
				width: newsWidth + 'px',
				paddingRight: '0px',
				overflow: 'hidden'
			});
		}
		
		var areaWidth = $iArea.width();
		var areaHeight = $iArea.height();
		var areaPaddingLeft = expPX($iArea.css('paddingLeft'));
		var barWidth = 29;
		var anchorAry = [];
		
		$iArea.css({
			overflow: 'hidden',
			position: 'relative'
		});
		
		var wrapDiv = $('<div />')
		.attr('id', 'scrollInner')
		.css({
			width: areaWidth - barWidth + 'px',
			left: areaPaddingLeft + 'px'
		});
		$iArea.wrapInner(wrapDiv);
		$scrollInner = $('#scrollInner');
		var scrollHeight = expPX($scrollInner.css('height'));
		
		//scroll bar
		var barHeight = Math.floor(areaHeight * (areaHeight / scrollHeight));
		var movableHeight = areaHeight - barHeight;
		var ratio = (scrollHeight - areaHeight) / movableHeight;
		var scrollArea = $('<div id="scrollTrackArea"><div id="scrollTrack"></div></div><div id="scrollBarArea"><div id="scrollBar"></div></div>');
		$iArea.append(scrollArea);
		var $scrollTrackArea = $iArea.find('#scrollTrackArea'),
			$scrollTrack = $iArea.find('#scrollTrack'),
			$scrollBarArea = $iArea.find('#scrollBarArea'),
			$scrollBar = $iArea.find('#scrollBar');
		$scrollTrackArea.css({
			width: barWidth + 'px',
			height: areaHeight + 'px',
			left: areaWidth - barWidth + areaPaddingLeft + 'px'
		});
		$scrollTrack.css({
			width: '1px',
			height: areaHeight + 'px',
			marginLeft: (barWidth - 1) / 2 + 'px'
		});
		$scrollBarArea.css({
			width: barWidth + 'px',
			height: barHeight + 'px',
			left: areaWidth - barWidth + areaPaddingLeft + 'px'
		});
		$scrollBar.css({
			width: '3px',
			height: barHeight + 'px',
			marginLeft: (barWidth - 3) / 2 + 'px'
		});
		
		$scrollBarArea.bind('touchstart', function(e){
			hideAnchor();
			var nowPosition = expPX($scrollBarArea.css('top'));
			e = e.originalEvent.touches[0];
			var sY = e.pageY;
			var sX = e.pageX;
		
		
			$scrollBarArea.bind('touchmove',function(ev){
				ev.preventDefault();
				ev = ev.originalEvent.touches[0];
		
				var top = nowPosition + (ev.pageY - sY);
				if(top < 0) { top = 0; }
				else if(top > movableHeight) { top = movableHeight; }
				$scrollBarArea.css('top', top + 'px');
				$scrollInner.css('top', (top * ratio)*-1 + 'px');
		
			});
			$scrollBarArea.bind('touchend',function(ev){
				showAnchor();
				$scrollBarArea.unbind('touchmove');
				$scrollBarArea.unbind('touchend');
			});
		});
		
		//anchor
		var scrollMax = areaHeight - scrollHeight;
		//top
		var anchorTop = $('<div>TOP<img src="/common/images/arrow_up2.gif" border="0" align="absmiddle" style="padding-left: 3px;" /></div>')
		.attr('id', 'innerAnchorTop')
		.addClass('px10')
		.hide()
		.click(function() { anchorOn(0) })
		.css({
			top: areaHeight - 16 +'px',
			opacity: "0"
		});
		//up
		var anchorUp = $('<div>UP<img src="/common/images/arrow_up2.gif" border="0" align="absmiddle" style="padding-left: 3px;" /></div>')
		.attr('id', 'innerAnchorUp')
		.addClass('px10')
		.hide()
		.click(function() { anchorOn(1) })
		.css({
			top: '0px',
			opacity: "0"
		});
		//down
		var anchorDown = $('<div>DOWN<img src="/common/images/arrow_down2.gif" border="0" align="absmiddle" style="padding-left: 3px;" /></div>')
		.attr('id', 'innerAnchorDown')
		.addClass('px10')
		.hide()
		.click(function() { anchorOn(-1) })
		.css({
			top: areaHeight - 16 +'px',
			opacity: "0"
		});
		
		$iArea.append(anchorTop);
		$iArea.append(anchorUp);
		$iArea.append(anchorDown);
		
		function showAnchor() {
			anchorAry = [];
			if(expPX($scrollInner.css('top')) == 0) {
				anchorAry.push($iArea.find('#innerAnchorDown'));
			} else if(expPX($scrollInner.css('top')) == scrollMax) {
				anchorAry.push($iArea.find('#innerAnchorUp'));
				anchorAry.push($iArea.find('#innerAnchorTop'));
			} else {
				anchorAry.push($iArea.find('#innerAnchorUp'));
				anchorAry.push($iArea.find('#innerAnchorDown'));
			}
			for(i=0; i<anchorAry.length; i++) {
				anchorAry[i].show().stop(true, false).animate({opacity: '1'}, 600);
			};
		}
		
		function hideAnchor() {
			for(i=0; i<anchorAry.length; i++) {
				anchorAry[i].stop(true, false).animate({opacity: '0'}, 200, function() {
					$(this).hide();
				});
			};
		}
		
		function anchorOn(dis) {
			hideAnchor();
			var target = sPosition() + dis * (areaHeight - 18);
			if(dis == 0 || target > -20) { target = 0; }
			else if(target < scrollMax + 12) { target = scrollMax; }
			$scrollBarArea.stop(true, false).animate({top: (movableHeight / scrollMax * target) + 'px'}, 800);
			$scrollInner.stop(true, false).animate({top: target + 'px'}, 800, function() {showAnchor()});
		}
		
		showAnchor();
	}
	
	function sPosition() { return expPX($scrollInner.css('top')); }
	function expPX(value) { return Number(value.replace(/px/, "")); }
});