var gIopViewWidth = 390;
var gSliderLength = 354;
var gTitleWidth = 250;
var gArrowWidth = 17 + 1;

var gHandleDragBol = false;
var gHandleDragStartLeft = 0;
var gHandleDragStartPointX = 0;
var gHandleWidth = 0;
var gCanvasWidth = 0;
var gArrowInterval;
var gArrowValue;
var gArrowBol = false;
var gHandleHover = false;
var gLeftarrowHover = false;
var gRightarrowHover = false;

var gScrollMin = 0;
var gFirefoxBol = false;
var gScrollBothEndsBol = false;


$(function() {
	initializeSlider();
});

function initializeSlider() {
	var browser = navigator.userAgent;
	if (browser.indexOf("Firefox") != -1) { gFirefoxBol = true; }
	if (browser.indexOf("Safari") != -1) { gFirefoxBol = true; }
	
	var idIopBox = document.getElementById('iopBoxBody');
	var idHandle = document.getElementById('iopBoxNavHandle');
	var idHandle2 = document.getElementById('iopBoxNavHandle2');
	
	gCanvasWidth = idIopBox.scrollWidth;
	gHandleWidth = gSliderLength * (gIopViewWidth / (gCanvasWidth - gTitleWidth));
	if (gHandleWidth > gSliderLength) { gHandleWidth = gSliderLength; }
	
	if (gIopViewWidth >= (gCanvasWidth - gTitleWidth)) {
		document.getElementById('iopBoxNav').style.display = "none";
		document.getElementById('iopBoxScroll2').style.display = "none";
	} else {
		var idIopBox = document.getElementById('iopBoxBody');
		if (window.addEventListener) idIopBox.addEventListener('DOMMouseScroll', wheel, false);
		idIopBox.onmousewheel = wheel;
	}
	
	if (gCanvasWidth == 0) { return; }
	
	idHandle.style.width = gHandleWidth;
	idHandle2.style.width = gHandleWidth;
	if ($('table.color2').css('direction') == "rtl") {
		gScrollMin = 0;
		handle_change(gSliderLength);
	} else {
		gScrollMin = gTitleWidth;
		handle_change(0);
	}
	
	document.onmouseup = handle_up;
	document.onmousemove = drag_move;
	document.onmouseout = handle_up

	idHandle.onmousedown = handle_down;
	idHandle.onmouseover = handle_on;
	idHandle.onmouseout = handle_out
	var idSlider = document.getElementById('iopBoxNavSlider');
	idSlider.onmousedown = slider_point;
	idSlider.onmouseover = slider_on;
	idSlider.onmouseout = slider_out;
	idSlider.onmouseup = slider_up;
	var idLeftarrow = document.getElementById('iopBoxNavLeftarrow');
	idLeftarrow.onmousedown = arrowLeftDown;
	idLeftarrow.onmouseup = arrowMouseUp;
	idLeftarrow.onmouseover = slider_Lon;
	idLeftarrow.onmouseout = slider_out;
	var idRightarrow = document.getElementById('iopBoxNavRightarrow');
	idRightarrow.onmousedown = arrowRightDown;
	idRightarrow.onmouseup = arrowMouseUp;
	idRightarrow.onmouseover = slider_Ron;
	idRightarrow.onmouseout = slider_out;
	
	idHandle2.onmousedown = handle_down;
	idHandle2.onmouseover = handle_on;
	idHandle2.onmouseout = handle_out
	var idSlider2 = document.getElementById('iopBoxNavSlider2');
	idSlider2.onmousedown = slider_point;
	idSlider2.onmouseover = slider_on;
	idSlider2.onmouseout = slider_out;
	idSlider2.onmouseup = slider_up;
	var idLeftarrow2 = document.getElementById('iopBoxNavLeftarrow2');
	idLeftarrow2.onmousedown = arrowLeftDown;
	idLeftarrow2.onmouseup = arrowMouseUp;
	idLeftarrow2.onmouseover = slider_Lon;
	idLeftarrow2.onmouseout = slider_out;
	var idRightarrow2 = document.getElementById('iopBoxNavRightarrow2');
	idRightarrow2.onmousedown = arrowRightDown;
	idRightarrow2.onmouseup = arrowMouseUp;
	idRightarrow2.onmouseover = slider_Ron;
	idRightarrow2.onmouseout = slider_out;
}
function handle_down(e) {
	gHandleDragBol = true;
	gHandleDragStartLeft = document.getElementById('iopBoxNavHandle').offsetLeft - gArrowWidth;
	gHandleDragStartPointX = getPageX(e);
	handle_downA();
}
function handle_up(e) {
	gHandleDragBol = false;
	handle_upA();
}
function handle_change(val){
	var handleLeft = val;
	if (handleLeft < 0) { 
		handleLeft = 0; 
		if (gArrowBol) { arrowMouseUp(); }
		gScrollBothEndsBol = true;
	}
	if (handleLeft > (gSliderLength - gHandleWidth)) { 
		handleLeft = gSliderLength - gHandleWidth; 
		if (gArrowBol) { arrowMouseUp(); }
		gScrollBothEndsBol = true;
	}
	
	var iopboxScroll = gScrollMin + (gCanvasWidth - gTitleWidth) * (handleLeft / gSliderLength);
	
	document.getElementById('iopBoxNavHandle').style.left = gArrowWidth + handleLeft;
	document.getElementById('iopBoxNavHandle2').style.left = gArrowWidth + handleLeft;
	document.getElementById('iopBoxBody').scrollLeft = iopboxScroll;
}
function slider_point(e) {
	var hx = getPointX(e) - gArrowWidth;
	var idHandle = document.getElementById('iopBoxNavHandle');
	var handleLeft = idHandle.offsetLeft - gArrowWidth;
	var movePoint = 0;
	
	gHandleDragStartPointX = hx;
	if (hx < handleLeft) {
		gArrowValue = - gHandleWidth;
	} else {
		gArrowValue = gHandleWidth;
	}
	
	gArrowInterval = setInterval(sliderButtonDown, 400);
	sliderButtonDown();
}
function sliderButtonDown() {
	var idHandle = document.getElementById('iopBoxNavHandle');
	var handleLeft = idHandle.offsetLeft + gArrowValue - gArrowWidth;
	handle_change(handleLeft);
}
function slider_up() {
	clearInterval(gArrowInterval);
	gArrowBol = false;
}
function slider_out() {
	clearInterval(gArrowInterval);
	gArrowBol = false;
	slider_out();
}
function drag_move(e) {
	if (gHandleDragBol) {
		var handleLeft = gHandleDragStartLeft + (getPageX(e) - gHandleDragStartPointX);
		handle_change(handleLeft);
		if (gFirefoxBol) { window.getSelection().removeAllRanges(); }
		return false;
	}
}
function arrowLeftDown() {
	document.getElementById('iopBoxNavLeftarrow').className = "scrollBarLeftarrow_down";
	document.getElementById('iopBoxNavLeftarrow2').className = "scrollBarLeftarrow_down";

	gArrowValue = -10;
	gArrowBol = true;
	gArrowInterval = setInterval(arrowButtonDown, 100);
	arrowButtonDown();
}
function arrowRightDown() {
	document.getElementById('iopBoxNavRightarrow').className = "scrollBarRightarrow_down";
	document.getElementById('iopBoxNavRightarrow2').className = "scrollBarRightarrow_down";

	gArrowValue = +10;
	gArrowBol = true;
	gArrowInterval = setInterval(arrowButtonDown, 100);
	arrowButtonDown();
}
function arrowMouseUp() {
	clearInterval(gArrowInterval);
	gArrowBol = false;
	if (gArrowValue > 0) {
		document.getElementById('iopBoxNavRightarrow').className = "scrollBarRightarrow_on";
		document.getElementById('iopBoxNavRightarrow2').className = "scrollBarRightarrow_on";
	} else {
		document.getElementById('iopBoxNavLeftarrow').className = "scrollBarLeftarrow_on";
		document.getElementById('iopBoxNavLeftarrow2').className = "scrollBarLeftarrow_on";
	}
}
function arrowButtonDown() {
	var idHandle = document.getElementById('iopBoxNavHandle');
	handle_change(idHandle.offsetLeft + gArrowValue - gArrowWidth);
}
function getPointX(e) {
	if (!e) { e = window.event; }
	var hx;
	if (document.all) { hx = e.offsetX; } else { hx = e.layerX; }
	return hx;
}
function getPageX(e) {
	var hx;
	if (document.all) { hx = event.clientX; } else { hx = e.pageX; }
	return hx;
}
function handle_downA() {
	document.getElementById('iopBoxNavHandle').className = "scrollBarHandle_down";
	document.getElementById('iopBoxNavHandle2').className = "scrollBarHandle_down";
	slider_on();
}
function handle_upA() {
	if ( gHandleHover ) {
		document.getElementById('iopBoxNavHandle').className = "scrollBarHandle_on";
		handle_on(false);
	}else{
		document.getElementById('iopBoxNavHandle').className = "scrollBarHandle";
		handle_out(false);
	}
	if (gLeftarrowHover) {
		slider_Lon();
	} else if (gRightarrowHover) {
		slider_Ron();
	} else {
		slider_out();
	}
}
function handle_on( bUpdateSlider ) {
	gHandleHover = true;
	if ( !gHandleDragBol ) {
		document.getElementById('iopBoxNavHandle').className = "scrollBarHandle_on";
		document.getElementById('iopBoxNavHandle2').className = "scrollBarHandle_on";
		if (bUpdateSlider) { slider_on(); }
	}
}
function handle_out( bUpdateSlider ) {
	if ( !gHandleDragBol ) {
		document.getElementById('iopBoxNavHandle').className = "scrollBarHandle";
		document.getElementById('iopBoxNavHandle2').className = "scrollBarHandle";
		if (bUpdateSlider) { slider_out(); }
	}
	gHandleHover = false;
}
function slider_on() {
	if ( !gHandleDragBol ) {
		document.getElementById('iopBoxNavLeftarrow').className = "scrollBarLeftarrow_over";
		document.getElementById('iopBoxNavRightarrow').className = "scrollBarRightarrow_over";
		document.getElementById('iopBoxNavLeftarrow2').className = "scrollBarLeftarrow_over";
		document.getElementById('iopBoxNavRightarrow2').className = "scrollBarRightarrow_over";
	}
}
function slider_Lon() {
	gLeftarrowHover = true;
	if ( !gHandleDragBol ) {
		document.getElementById('iopBoxNavLeftarrow').className = "scrollBarLeftarrow_on";
		document.getElementById('iopBoxNavRightarrow').className = "scrollBarRightarrow_over";
		document.getElementById('iopBoxNavLeftarrow2').className = "scrollBarLeftarrow_on";
		document.getElementById('iopBoxNavRightarrow2').className = "scrollBarRightarrow_over";
	}
}
function slider_Ron() {
	gRightarrowHover = true;
	if ( !gHandleDragBol ) {
		document.getElementById('iopBoxNavLeftarrow').className = "scrollBarLeftarrow_over";
		document.getElementById('iopBoxNavRightarrow').className = "scrollBarRightarrow_on";
		document.getElementById('iopBoxNavLeftarrow2').className = "scrollBarLeftarrow_over";
		document.getElementById('iopBoxNavRightarrow2').className = "scrollBarRightarrow_on";
	}
}
function slider_out() {
	if ( !gHandleDragBol ) {
		document.getElementById('iopBoxNavLeftarrow').className = "scrollBarLeftarrow";
		document.getElementById('iopBoxNavRightarrow').className = "scrollBarRightarrow";
		document.getElementById('iopBoxNavLeftarrow2').className = "scrollBarLeftarrow";
		document.getElementById('iopBoxNavRightarrow2').className = "scrollBarRightarrow";
	}
	gLeftarrowHover = false;
	gRightarrowHover = false;
}
function wheel(event){
	var delta = 0;
	if (!event) event = window.event; //For IE.				
	if (event.wheelDelta) { 
		// IE/Opera.
		delta = event.wheelDelta/120;
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		// Mozilla case. 
		delta = -event.detail/3;
	}
	/** If delta is nonzero, handle it.
	* Basically, delta is now positive if wheel was scrolled up,
	* and negative, if wheel was scrolled down.
	*/
	if (delta) { handle(delta); }

	if (!gScrollBothEndsBol) {
		if (event.preventDefault) { event.preventDefault(); }
		event.returnValue = false;
	}
}

function handle(delta) {
	gScrollBothEndsBol = false;
	var idHandle = document.getElementById('iopBoxNavHandle');
	var directionOffset = 1;
	if ( $('table.color2').css('direction') == "rtl") { directionOffset = - 1; }

	var scrollValue = 0;
	if (delta < 0) {
		scrollValue = + 10 * directionOffset;
	} else {
		scrollValue = - 10 * directionOffset;
	}
	handle_change(idHandle.offsetLeft + scrollValue - gArrowWidth);
}