$(document).ready(function() {
	var $self   = $(this),
    $over_next   = $self.find('div#mouseover-right'),
    $next_a = $over_next.find('a'),
    $over_prev   = $self.find('div#mouseover-left'), 
    $prev_a = $over_prev.find('a'),
    $html   = ($.browser.mozilla || $.browser.msie) ? $('html') : $('body')
    
	$(document)
	.bind('KEYBOARD_RIGHT',key_right)
	.bind('KEYBOARD_LEFT',key_left)
	.bind('KEYBOARD_RELEASE',key_release);
	
	$over_next
	.css({display:'block'})
	.bind('mouseenter',next_enter)
	.bind('mouseleave',next_leave);
	
	
	$over_prev
	.css({display:'block'})
	.bind('mouseenter',prev_enter)
	.bind('mouseleave',prev_leave);
	
	
	function key_right(e) {
		$next_a.addClass('key-active');
	}
	
	function key_left(e) {
		$prev_a.addClass('key-active');
	}
	
	function key_release(e) {
		$next_a.removeClass('key-active');
	  	$prev_a.removeClass('key-active');
	}
	
	function next_enter(e) {
	  $next_a.stop();
	  $over_next.bind('mousemove',next_move)
	}
	
	function next_leave(e) {
	    $over_next.unbind('mousemove',next_move)
	    $next_a.animate({top:$html.attr('scrollTop') + 316},500,'easeInOutQuart')
	}
	
	function next_move(e) {
		$next_a.css({top:e.pageY - $over_next.offset().top})
	}
	
	function prev_enter(e) {
	  $prev_a.stop();
	  $over_prev.bind('mousemove',prev_move)
	}
	
	function prev_leave(e) {
	    $over_prev.unbind('mousemove',prev_move)
	    $prev_a.animate({top:$html.attr('scrollTop') + 316},500,'easeInOutQuart')
	}
	
	function prev_move(e) {
		$prev_a.css({top:e.pageY - $over_prev.offset().top})
	}
	
	function _getScroll(){
		return {scrollTop:self.pageYOffset,scrollLeft:self.pageXOffset};
    }
});