//	Javascript

var intv_id;
var intv_time = 50;
var move_dir = 0;
var move_speed = 8;		//	8
var scrollWheel_speed = 9;
var heightBox = 230;	//	240
var heightArea = 0;
var pos_act = 0;
var pos_min = 0;
var pos_max = 0;
var elmScrollBar;
var elmScrollUp;
var elmScrollDown;
var elmScrollBox;
var elmScrollArea;
var elmInfo;
var cssScrollBar = 'contentScrollBar';
var cssScrollUp = 'buttonScrollUp';
var cssScrollDown = 'buttonScrollDown';
var cssVisibleON = 'visibleON';
var cssVisibleOFF = 'visibleOFF';
//
var elmClose;
var elmOpen;
var elmContentBG;
var useINFO = true;
var showINFO = true;

/*	SCROLLING FUNCTIONALITY		*/
function enableMenuMove( dir )
{
	move_dir = dir;
	clearInterval(intv_id);
	intv_id = setInterval(moveMenu, intv_time);
	elmInfo.html('enable');
}

function disableMenuMove ()
{
	elmInfo.html('disable');
	clearInterval(intv_id);
	intv_id = null;
}

function moveMenu ()
{
	pos_act += (move_speed * move_dir);
	elmInfo.html('pos-act: ' + pos_act + '<br/>move_speed: ' + move_speed + '<br/>move_dir: '  + move_dir);
	pos_act = testNewScrollPos(pos_act);
	setScrollArea(pos_act);
}

function testNewScrollPos ( pos )
{
	pos = pos < pos_min ? pos_min : pos;
	pos = pos > pos_max ? pos_max : pos;
	return pos;
}

function resetScrollArea ()
{
	setScrollArea(0);
	//resetScrollArea(0);
}

function setScrollArea ( pTop )
{
	elmInfo.html('scrollTop: ' + elmScrollArea.scrollTop() );
	elmScrollArea.css( {'top': pTop + 'px'} );
}

function onScrollWheel (e)
{
	e = e ? e : window.event;
	var raw = e.detail ? e.detail : e.wheelDelta;
	var normal = e.detail ? e.detail * -1 : e.wheelDelta / 40;
	//
	pos_act += (normal * scrollWheel_speed);
	pos_act = testNewScrollPos(pos_act);
	setScrollArea(pos_act);
	//
	elmInfo.html("&nbsp;Raw Value: " + raw + "&nbsp;Normalized Value: " + normal );
	cancelEvent(e);
}

function enableScrolling ()
{
	pos_min = 0 - (heightArea - heightBox);
	//
	elmScrollBar.empty();
	elmScrollBar.append('<div id="jq-scrollUP"></div>');
	elmScrollBar.append('<div id="jq-scrollDOWN"></div>');
	//
	elmScrollUp = $('#jq-scrollUP');
	elmScrollDown = $('#jq-scrollDOWN');
	//
	elmScrollBar.removeClass();
	elmScrollBar.addClass(cssScrollBar);
	elmScrollUp.removeClass();
	elmScrollUp.addClass(cssScrollUp);
	elmScrollDown.removeClass();
	elmScrollDown.addClass(cssScrollDown);
	//	enable BUTTONS	!!!
	elmScrollUp.mouseover( function(e) { enableMenuMove(1); $(this).css( {'cursor': 'pointer' } ); } );
	elmScrollUp.mouseout( function(e) { disableMenuMove(); $(this).css( {'cursor': 'auto' } ); } );
	elmScrollDown.mouseover( function(e) { enableMenuMove(-1); $(this).css( {'cursor': 'pointer' } ); } );
	elmScrollDown.mouseout( function(e) { disableMenuMove(); $(this).css( {'cursor': 'auto' } ); } );
	//	enable MOUSEWHEEL	!!!
	hookEvent('jq-scrollArea', 'mousewheel', onScrollWheel);
	//
	elmInfo.html('enableScrolling()');
}

function initScrolling ()
{
	heightBox = elmScrollBox.height();
	heightArea = elmScrollArea.height();
        //alert(heightArea);
	if( heightArea > heightBox ){
		enableScrolling();
	}
}
/*	MOUSEWHEEL - FUNCTIONALITY	*/
function hookEvent(element, eventName, callback)
{
	if(typeof(element) == "string"){
		element = document.getElementById(element);
	}
	if(element == null){
		return;
	}
	if(element.addEventListener){
		if(eventName == 'mousewheel'){
			element.addEventListener('DOMMouseScroll', callback, false);
		}
		element.addEventListener(eventName, callback, false);
	} else if(element.attachEvent){
		element.attachEvent("on" + eventName, callback);
	}
}

function unhookEvent(element, eventName, callback)
{
	if(typeof(element) == "string"){
		element = document.getElementById(element)
	}
	if(element == null){
		return;
	}
	if(element.removeEventListener){
		if(eventName == 'mousewheel'){
			element.removeEventListener('DOMMouseScroll', callback, false);  
		}
		element.removeEventListener(eventName, callback, false);
	} else if(element.detachEvent){
		element.detachEvent("on" + eventName, callback);
	}
}

function cancelEvent(e)
{
	e = e ? e : window.event;
	if(e.stopPropagation){
		e.stopPropagation();
	}
	if(e.preventDefault){
		e.preventDefault();
	}
	e.cancelBubble = true;
	e.cancel = true;
	e.returnValue = false;
	return false;
}

/*	CLOSING	CONTENT FUNCTIONALITY	*/
function initClose ()
{
	elmClose.mouseover( function(e) { $(this).css( {'cursor': 'pointer' } ) } );
	elmClose.mouseout( function(e) { $(this).css( {'cursor': 'auto' } ) } );
	elmClose.mousedown( function(e) { closeContent(); } );
}

function closeContent ()
{
	elmClose.css( {'visibility': 'hidden'} );
	elmContentBG.css( {'visibility': 'hidden'} );
	elmScrollBar.css( {'visibility': 'hidden'} );
	elmScrollBox.css( {'visibility': 'hidden'} );
	//
	elmOpen.css( {'visibility': 'visible'} );
}

function initOpen ()
{
	elmOpen.mouseover( function(e) { $(this).css( {'cursor': 'pointer' } ) } );
	elmOpen.mouseout( function(e) { $(this).css( {'cursor': 'auto' } ) } );
	elmOpen.mousedown( function(e) { openContent(); } );
}

function openContent ()
{
	elmOpen.css( {'visibility': 'hidden'} );
	elmClose.css( {'visibility': 'visible'} );
	elmContentBG.css( {'visibility': 'visible'} );
	elmScrollBar.css( {'visibility': 'visible'} );
	elmScrollBox.css( {'visibility': 'visible'} );
	//
	initClose();
	initScrolling();
}

/*	READY FOR ACTION	*/
$(document).ready(function() {
	if (useINFO) {
		elmContentBG = $('#jq-contentBG');
		elmOpen = $('#jq-open');
		elmClose = $('#jq-close');
		elmScrollBar = $('#jq-scrollBar');
		elmScrollBox = $('#jq-scrollBox');
		elmScrollArea = $('#jq-scrollArea');
		elmInfo = $('#jq-info');
		//
		initOpen();
		if (showINFO) {
			openContent();
		} else {
			elmOpen.css( {'visibility': 'visible'} );
		}
//		initClose();
//		initScrolling();
	}
});