document.onkeyup = KeyCheck;
//	document.onkeypress = KeyCheckPress;
 	
	var stage_height = 736;
	var stage_width = 838;
	var single_scroll = 20;
	var pressed_scroll = 10;
	var margin_top = 123;
	var div_top = 0;
	var div_left = 0;
	var top_val = 0;
	var left_val = 0;
	var cols = 5;
	var rows = 3;
	var items;
	var items_num;
	var document_width;
	var menu = [];
	
	$(document).ready(function() {
		items = $(".item");
		items_num = items.size();
		
		act_item = '';
		
		document_width = $('#draggableElement').width();
		cols = Math.round(document_width / stage_width);
		rows = Math.floor(items_num / cols);
		left_val = $('#draggableElement').offset().left;
		if (items_num % cols) {
			rows++;
		}
		var left_margin = ($('html').innerWidth() - stage_width) / 2;
		$('#draggableElement').css({
			marginLeft: left_margin,
			marginTop: margin_top - 88
		});
		var x = 0;
		for (var i = 0; i < rows; i++) {
			for (var y = 0; y < cols; y++) {
				menu[x] = {
					top: i * stage_height,
					left: y * stage_width
				}
				x++;
			}
		}
/*		$('#containerBox').css({
			width: $('#draggableElement').width() * 2,
			height:$('#draggableElement').height() * 2,
			overflow:'hidden'
		});*/
		
		var el = $('#draggableElement').draggable({ scroll: false, cancel: 'object' });

		
		
		//var leftEdge = el.parentNode.clientWidth - el.clientWidth;
		//var topEdge = el.parentNode.clientHeight - el.clientHeight;
		//var dragObj = new dragObject(el, null, new Position(leftEdge, topEdge), new Position(0, 0));
		//right();
	});
	
	function setMenuItem() {
		$('a.active').removeClass("active");
		for (var i = 0; i < menu.length; i++) {
			if (Math.abs(top_val) == menu[i].top && Math.abs(left_val) == menu[i].left) {
				$('#subcat-' + i + "> a").addClass("active");
				$('#subcat-' + i ).parent().parent().children("a").addClass("active");
			}
		}
		setActItem();
	}

	function scrollToItem(item) {
		top_val = - menu[item].top;
		left_val = - menu[item].left;
		$("#draggableElement").animate({
			left: left_val + "px",
			top: top_val + "px"
		}, 2000);
		setMenuItem();		
	}

	function setActItem() {
		act_item = (top_val / stage_height) * cols + (left_val / stage_width);
		act_item = (Math.abs(act_item) + 1);
		return act_item;
	}
	
	function right() {
		if (act_item == items_num) {
			top_val = 0;
			left_val = 0;
			$("#draggableElement").animate( { 
				left: left_val,
				top: top_val
			}, 1000 );
			setMenuItem();			
		} else if (Math.abs(left_val) < (stage_width * (cols - 1))) {	
			left_val = left_val - stage_width;
			$("#draggableElement").animate( { 
				left: left_val + "px"
			}, 1000 );
			setMenuItem();
		} else if (Math.abs(top_val) < (stage_height * (rows - 1))) {
			top_val = top_val - stage_height;
			left_val = 0;
			$("#draggableElement").animate( { 
				left: left_val,
				top: top_val
			}, 1000 );
			setMenuItem();
		} else {
			top_val = 0;
			left_val = 0;
			$("#draggableElement").animate( { 
				left: left_val,
				top: top_val
			}, 1000 );
			setMenuItem();
		}
	}
	
	function left() {
		if (left_val < div_left) {
			left_val = left_val + stage_width;
			$("#draggableElement").animate( { 
				left: left_val + "px"
			}, 1000 );
			setMenuItem();
		} else if (top_val < div_top) {
			top_val = top_val + stage_height;
			left_val =  -(stage_width * (cols - 1)); 
			$("#draggableElement").animate( { 
				left: left_val,
				top: top_val
			}, 1000 );
			setMenuItem();
		} else {
			left_val = -(cols - 1) * stage_width;
			tmp_rows = -2;
			if (items_num % rows) {
				mod_val = (items_num % (rows - 1)) - 1;
				left_val = -(mod_val * stage_width);
				tmp_rows = 1;
			}
			top_val = -((Math.floor(items_num / rows) + tmp_rows) * stage_height);
			$("#draggableElement").animate( { 
				left: left_val,
				top: top_val
			}, 1000 );
			setMenuItem();
		}
	}
	
	function up() {
		if (top_val < div_top) {	
			top_val = top_val + stage_height;
			$("#draggableElement").animate( { 
				top: top_val + "px"
			}, 1000 );
			setMenuItem();
		}
	}
	
	function down() {
		if (Math.abs(top_val) < (stage_height * (rows - 1))) {	
			top_val = top_val - stage_height;
			$("#draggableElement").animate( { 
				top: top_val + "px"
			}, 1000 );
			setMenuItem();
		}
	}
	
	function KeyCheck(e) {		
	   var KeyID = (window.event) ? event.keyCode : e.keyCode;
	   switch (KeyID) {
	      case 37:
			left();
	      break;
	      case 38:
			up();	
	      break;
	      case 39:
			right();
	      break;
	      case 40:
	     	down();			
	      break;
	   }
	}