function crsl_getRealGrad(num){
	if(num > 0){
		var real_grad = num % 360
	}else{
		var real_grad = 360+num % 360
	}
	return real_grad
}

$(function(){

	var crsl_item_num = $('#menuitems > *').length
	var crsl_blank_segment_num = Math.floor(crsl_item_num/4)
	
	
	var crsl_circ_step = 360/(crsl_item_num + crsl_blank_segment_num) 
	var crsl_blank_segment_grads = crsl_blank_segment_num * crsl_circ_step
	
	var cir_scale = 430/240
	var radius = 125; // радиус окружности
	
	var offset_x = 340 - 5;
	var offset_y = 170 - 5;
	 
	var current_angle_disposition = crsl_blank_segment_grads / 2
	var current_angle = 180 - crsl_item_num * crsl_circ_step / 2
	
	var currentImage = ""
	var currentObj = ""
	
	//INIT
	$("#menuitems").attr("style","display:block");
	$('#menuitems > *').each(function(i){
		this.crsl_angle = current_angle + i*crsl_circ_step
		// есть аргумент — работаем как setter
		var a_temp = this.crsl_angle
		
		var grad = crsl_getRealGrad(a_temp)
		
		// переводим угол из градусов в радианы
		var a = a_temp  / 180 * Math.PI;

		// считаем новые координаты
		var rad_grad = grad / 360;
		
		var obj_height = (offset_y + Math.cos(a) * radius);
		if(obj_height < 50){
			var obj_delta = Math.abs(50 - obj_height)
			obj_height = obj_height - obj_delta*obj_delta/3
		}
		
		$(this.obj).css("zoom", 1)
		
	  obj_fontsize = 14 + 80/obj_height
	  $(this).css("font-size",obj_fontsize + "px")
		$(this).css("font-weight","normal")

		var width_offset = Math.abs($(this).width()) * rad_grad;
		
		var this_left = (offset_x - width_offset + cir_scale * Math.sin(a) * radius)
		
		this.style.left = this_left + 'px';
		this.style.top = obj_height + 'px'
		
		//Effects
		if($.browser.msie){
			if(obj_height > 260){
				$(this).hide()
			}else{
				$(this).show()
			}
		}else{
			var fade_y = 250
			obj_opacity = 1 - 0.05*(obj_height-fade_y)
			$(this).css("opacity",obj_opacity)
		}
		
		//IMAGE PRELOAD
		$.preloadImages($(this).attr("title"));
		
		//CHANGE IMAGE
		if(crsl_getRealGrad(this.crsl_angle) == 180){
			currentObj = this;
			currentImage = $(this).attr("title")
			$("#image_zone").attr( "style", "background-image:url(" + currentImage + ")").fadeIn(500)
			
			//SMALL IMAGE
			var position = $(this).position();
			$("#small_image_zone").css("background-image","url(/" + $("#sm_imgs_" + currentObj.id).attr("src") + ")");
			$("#small_image_zone").css("left", position.left + $(this).width() - 15)
			$("#small_image_zone").css("top", position.top - 20)
			
		}
		
		//ONHOVER
		$(this).hover(
			function(){
				$("#image_zone").attr( "style", "background-image:url(" + $(this).attr("title") + ");")
			},
			function(){
				$("#image_zone").attr( "style", "background-image:url(" + currentImage + ");")
		});
	});
	
	$('#menuitems > *').each(function(i){
		this.crsl_angle = current_angle + i*crsl_circ_step
		this.crsl_anim = {
			obj: document.getElementById(this.id),
			r: 100, //радиус окружности
			a: this.crsl_angle, // текущий угол
			/** угловая скорость */
			angle: function(){
				if (!arguments.length) {
					// нет аргументов — работаем как getter
					return this.a;
				} else {
					// есть аргумент — работаем как setter
					this.a = arguments[0];
					
					var grad = crsl_getRealGrad(this.a)
					
					// переводим угол из градусов в радианы
					var a = this.a  / 180 * Math.PI;
					//Высота
					var obj_height = (offset_y + Math.cos(a) * radius);
					if(obj_height < 50){
						var obj_delta = Math.abs(50 - obj_height)
						obj_height = obj_height - obj_delta*obj_delta/3
					}
					
			   	obj_fontsize = 14 + 80/obj_height
					$(this.obj).css("font-size",obj_fontsize + "px")
					if($.browser.msie){
						if(obj_height > 260){
							$(this.obj).hide()
						}else{
							$(this.obj).show()
						}
					}else{
						var fade_y = 250
						obj_opacity = 1 - 0.05*(obj_height-fade_y)
						$(this.obj).css("opacity",obj_opacity)
					}
					// Считаем новые координаты
					var rad_grad = grad / 360;
					var width_offset = Math.abs($(this.obj).width()) * rad_grad;
					
					this.obj.style.left = (offset_x - width_offset + cir_scale * Math.sin(a) * radius) + 'px';
					this.obj.style.top = obj_height + 'px'
					
					
				}
			}
		}
	});
	
	function circleMove(angle_delta){
		
		if(blockAccess == true) return false;
		var timer = 1
		blockAccess = true
		
		$('#menuitems > *').each(function(i){
			var grad = crsl_getRealGrad(this.crsl_angle)
			
			if((grad + angle_delta) < crsl_blank_segment_grads / 2){
				this.crsl_angle -= crsl_blank_segment_grads
			}else{
				if((grad + angle_delta) > 360 - crsl_blank_segment_grads / 2){
					this.crsl_angle += crsl_blank_segment_grads
				}
			}
			
			
			//CHANGE IMAGE
			if(crsl_getRealGrad(this.crsl_angle + angle_delta) > 175 && crsl_getRealGrad(this.crsl_angle + angle_delta) < 185){
				//$("#debug").html($(this).attr("id"))
				currentImage = $(this).attr("title")
				currentObj = this;
				$("#image_zone").fadeOut(500,function(){
					$(this).attr( "style", "background-image:url(" + currentImage + ");")
				}).fadeIn(500)
				
				//SMALL IMAGES
				$("#small_image_zone").fadeOut(500)
			}
			
			jTweener.addTween(this.crsl_anim, {
				angle: this.crsl_angle += angle_delta,
				transition: 'easeinoutcubic',
				time: 1*timer
			})
		})
		
		//$("#debug").html(tmp_debug)
		
		$(this).oneTime(1000*timer, function() {
			//SMALL IMAGE
			var position = $(currentObj).position();
			
			$("#small_image_zone").css("background-image","url(/" + $("#sm_imgs_" + currentObj.id).attr("src") + ")");
			$("#small_image_zone").css("left", position.left + $(currentObj).width() - 15)
			$("#small_image_zone").css("top", position.top - 20)
			$("#small_image_zone").fadeIn(500)
			blockAccess = false
		})
	}
	
	
	var stopRolling = false
	var blockAccess = false
	function circleRoll(angle_delta){
		
		if(blockAccess == true) return false;
		var timer = 1 - circleSpeed/2
		blockAccess = true

		$('#menuitems > *').each(function(i){
			var grad = crsl_getRealGrad(this.crsl_angle)
			
			if((grad + angle_delta) < crsl_blank_segment_grads / 2){
				this.crsl_angle -= crsl_blank_segment_grads
			}else{
				if((grad + angle_delta) > 360 - crsl_blank_segment_grads / 2){
					this.crsl_angle += crsl_blank_segment_grads
				}
			}
			
			
			jTweener.addTween(this.crsl_anim, {
				angle: this.crsl_angle += angle_delta,
				transition: 'easeNone',
				time: 1*timer
			})
		})
		
		
		if(stopRolling == false){
			$(this).oneTime(1000*timer, function() {
				if (stopRolling == false) {
					blockAccess = false
					circleRoll(angle_delta)
				}
		  });
		}
		
		$(this).oneTime(1000*timer, function() {
			blockAccess = false
	  });
	}
	
	
	
	$('#btn_left').click(function(){
		circleMove(crsl_circ_step)
	});
	
	$('#btn_right').click(function(){
		circleMove(-crsl_circ_step)
	});
	
	
	var circleSpeed = 0
	
	$('#left_hover_zone').mousemove(function(e){
			var offset = $(this).offset();
		  circleSpeed = (200 - (e.pageX - offset.left))/200;
      //$('#debug').html(circleSpeed);
	});
	
	$('#right_hover_zone').mousemove(function(e){
			var offset = $(this).offset();
		  circleSpeed = (e.pageX - offset.left)/200;
      //$('#debug').html(circleSpeed);
	});
	
	$('#left_hover_zone').hover(
		function(){
			stopRolling = false
			circleRoll(crsl_circ_step)
		},
		function(){
			stopRolling = true
			$(this).stopTime("lhz")
	});
	
	$('#right_hover_zone').hover(
		function(){
			stopRolling = false
			circleRoll(-crsl_circ_step)
		},
		function(){
			stopRolling = true
			$(this).stopTime("lhz")
	});
});