var newsScroller = function(){
	
	//-------------------------------------------ScrollBar-------------------------------------------
	var mouseX = 0;
	var mouseY = 0;

	//container
	var infomationContainer = document.getElementById( "infomation-container" );
	
	var nowFragment = 0;
	
	//fragment1
	var fragment1 = document.getElementById( "fragment-1" );
	var fragment1Inner = document.getElementById( "fragment-1-inner" );
	
	//fragment2
	var fragment2 = document.getElementById( "fragment-2" );
	var fragment2Inner = document.getElementById( "fragment-2-inner" );
	
	//fragment3
	var fragment3 = document.getElementById( "fragment-3" );
	var fragment3Inner = document.getElementById( "fragment-3-inner" );
	
	//fragment4
	var fragment4 = document.getElementById( "fragment-4" );
	var fragment4Inner = document.getElementById( "fragment-4-inner" );
	
	var fragmentArray = [ fragment1, fragment2, fragment3, fragment4 ];
	var fragmentInnerArray = [ fragment1Inner, fragment2Inner, fragment3Inner, fragment4Inner ];
	
	//Scrollbar
	var infoFragmentScrollbar = document.getElementById( "info-fragment-scrollbar" );
	var fragmentSlideBarInterval;
	var fragmentSlideBarClickPoint = new Object();
	var fragmentSlideBarDownFlag = false;
	
	
	var fragmentMouseX = 0;
	var fragmentMouseY = 0;
	var bodyScrollTop = 0;
	var enterFrameInterval = setInterval( enterFrameIntervalHandler, 1000 / 60 );
	
	/*
	var testTf = document.getElementById( "test-tf" );
	testTf.style.position = "fixed";
	testTf.style.top = "0px";
	*/
	
	$("#info-fragment-scrollbar").mousedown(function ( e ) {
		
		fragmentSlideBarDownFlag = true;
		var rect = e.target.getBoundingClientRect();
		var x = e.clientX - rect.left;
		var y = e.clientY - rect.top;
		fragmentSlideBarClickPoint.x = x;
		fragmentSlideBarClickPoint.y = y;
		fragmentSlideBarInterval = setInterval( fragmentSlideBarIntervalHandler, 1000 / 60 );
	
	});
	
	function fragmentSlideBarIntervalHandler(){
	
		if( fragmentSlideBarDownFlag ){
			
			infoFragmentScrollHandler();
			
		}
	
	}
	
	function infoFragmentScrollHandler(){
		
		var targetY = fragmentMouseY - fragmentSlideBarClickPoint.y;
		infoFragmentScrollbar.style.top = targetY + "px";
		
		if( infoFragmentScrollbar.offsetTop < 14 ) infoFragmentScrollbar.style.top = "14px";
		if( infoFragmentScrollbar.offsetTop > fragmentArray[ nowFragment ].offsetHeight - 100 + 14 ) infoFragmentScrollbar.style.top = fragmentArray[ nowFragment ].offsetHeight - 100 + 14 + "px";
		var infoFragmentScrollbarY = infoFragmentScrollbar.offsetTop;
		var per = ( infoFragmentScrollbarY - 14 ) / ( fragmentArray[ nowFragment ].offsetHeight - 100 );
		var dist = fragmentInnerArray[ nowFragment ].offsetHeight - fragmentArray[ nowFragment ].offsetHeight;
		fragmentInnerArray[ nowFragment ].style.top = -( per * dist ) + "px";
			
			
		//testTf.innerHTML = per;
	}
	
	
	//mouse x y
	function getAbsoluteMousePosition( e ){
 		
 		mouseX = e.clientX;
		mouseY = e.clientY;
		
	}
	
	$( document.body ).mousemove(function ( e ) {
	
		getAbsoluteMousePosition( e );
	
	});
	
	function enterFrameIntervalHandler() {
		
		fragmentMouseY = mouseY - ( infomationContainer.offsetTop - bodyScrollTop );
		bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	
	}
	
	$( document.body ).mouseup(function ( e ) {
		
		if( fragmentSlideBarDownFlag ){
			fragmentSlideBarDownFlag = false;
			clearInterval( fragmentSlideBarIntervalHandler );
		}
		
	});
	
	
	
	
	
	//-------------------------------------------tab-------------------------------------------
	var tabArray = new Array();
	tabArray = [ document.getElementById("category-1").children.item(0), document.getElementById("category-2").children.item(0), document.getElementById("category-3").children.item(0), document.getElementById("category-4").children.item(0) ];
	
	$( tabArray[ 0 ] ).hover(
		function () {
			if( nowFragment != 0 ) tabArray[ 0 ].style.backgroundPosition = "0px -12px";
		},
		function () {
    		if( nowFragment != 0 ) tabArray[ 0 ].style.backgroundPosition = "0px 0px";
		}
	);
	
	$( tabArray[ 0 ] ).click( function(){
									   nowFragment = 0;
									   toggleFragmentHandler( 0 );
									   tabClickHandler( 0 );
									   });
	
	
	$( tabArray[ 1 ] ).hover(
		function () {
			if( nowFragment != 1 ) tabArray[ 1 ].style.backgroundPosition = "0px -12px";
		},
		function () {
    		if( nowFragment != 1 ) tabArray[ 1 ].style.backgroundPosition = "0px 0px";
		}
	);
	
	$( tabArray[ 1 ] ).click( function(){
									   nowFragment = 1;
									   toggleFragmentHandler( 1 );
									   tabClickHandler( 1 );
									   });
	
	
	$( tabArray[ 2 ] ).hover(
		function () {
			if( nowFragment != 2 ) tabArray[ 2 ].style.backgroundPosition = "0px -12px";
		},
		function () {
    		if( nowFragment != 2 ) tabArray[ 2 ].style.backgroundPosition = "0px 0px";
		}
	);
	
	$( tabArray[ 2 ] ).click( function(){
									   nowFragment = 2;
									   toggleFragmentHandler( 2 );
									   tabClickHandler( 2 );
									   });
	
	
	$( tabArray[ 3 ] ).hover(
		function () {
			if( nowFragment != 3 ) tabArray[ 3 ].style.backgroundPosition = "0px -12px";
		},
		function () {
    		if( nowFragment != 3 ) tabArray[ 3 ].style.backgroundPosition = "0px 0px";
		}
	);
	
	$( tabArray[ 3 ] ).click( function(){
									   nowFragment = 3;
									   toggleFragmentHandler( 3 );
									   tabClickHandler( 3 );
									   });
	
	
	
	
	function toggleFragmentHandler( target ){
		
		for( var i = 0; i < fragmentArray.length; i++ ){
			if( i == target ){
				$( fragmentArray[ i ] ).fadeIn( 200 );
			}else{
				$( fragmentArray[ i ] ).fadeOut( 200 );
			}
		}
	
	}
	
	
	function tabClickHandler( type ){
		
		tabArray[ type ].style.backgroundPosition = "0px -24px";
		for(var i = 0; i < 4; i++){
			if( i != type ){
				tabArray[ i ].style.backgroundPosition = "0px 0px";
			}
		}
		
		
		//scrollBar
		$( infoFragmentScrollbar ).animate({ top: "14px" }, 300 );
		for( i = 0; i < fragmentInnerArray.length; i++ ){
			fragmentInnerArray[ i ].style.top = "0px";
		}
		
	}
	
}


$(document).ready( loadCompHandler );
function loadCompHandler(){
	
	newsScroller = new newsScroller();
	
}