jQuery.preloadImages = function() {
   $.each (arguments,function (e) {
       $("<img>").attr("src", this);
   });
}

$(document).ready(function() {
	/* вообщем обяъвлю пока все глобально пока, потом это надо как плагин переписать и сделать внутри плагина! */
	
	k_fon = 2.3;
	k_panorama = 1.3;
	k_people = 1;
	k_stage = 1;
	
	var width = $(window).width();
	var panorama_width = $("#panorama").width(); 
	var small_width = $("#panorama_mar1").width(); // !! изза 4х пиксельного смещения берем этот див!
	var ramka_width = $("#ramka").width();
	var link_container_width = $("#link_container").width();
	
	$("#draggable").css("width", (width+ ($("#panorama").width()-width)*k_panorama)+"px"); 
	// длинна невидимой части перетягиваемой области в k_panorama раз больше чем аналогичная область за экраном у панорамы.
	// невидимая 
	delta = -$("#draggable").width()+ width;
	delta_ = delta + width/6;
	// тут не забыть, если увеличивать дельту то только для начального расположения
	// delta_ - подумать!! возмонжно не так считать!
	var d2 = 668*k_panorama;
	var d4 = -740*k_panorama;
	// дельты для 2 и 4 элементов
	// 668 и 760 - расстояние между центрами 3 и 2, 3 и 4 на картинке
	
	panorama_points = [0, Math.round(delta_/2 + d2), Math.round(delta_/2), Math.round(delta_/2 + d4), delta];

	k_small = panorama_width / small_width;
	// тут похоже не так считается... - смореть тоже по выступающим хвостам!
	
	// загружаем маленькие картинки 
	var img_path = '/assets/templates/site/images/scroll/';
	$.preloadImages(
	img_path+ "left.png", 
	img_path+ "right.png", 
	img_path+ "small_left.png", 
	img_path+ "small_right.png", 
	img_path+ "left_hover.png", 
	img_path+ "right_hover.png", 
	img_path+ "small_left_hover.png", 
	img_path+ "small_right_hover.png", 
	img_path+ "scroll1.png", 
	img_path+ "hole.png", 
	img_path+ "right_hole.png", 
	img_path+ "left_hole.png", 
	img_path+ "circle.png", 
	img_path+ "decor.png");
	
	
	$("<img/>").bind("load", function() {
		
		$("<img/>").bind("load", function() {
			
			$("#kitchens_loader").hide();
			
			/* установим кухню посередине */
			
			$("#draggable").css("left", Math.round(delta_/2) + "px");
			
		
			
			$("#link_container").css("left", Math.round(-delta_/2+delta_/(2*k_panorama)) + "px");
			$("#panorama").css("left", Math.round(delta_/(2*k_panorama)) + "px");
			$("#people").css("left", Math.round(delta_/(2*k_people)) + "px");
			$("#fon").css("left", Math.round(delta_/(2*k_fon)) + "px");
			
			// работаем с рамкой
			$("#ramka").html("<div><span class=\"circle\"></span></div>");
			// задаем рамеры рамки
			// пока не пойму поменяется ли left у #ramka div - по идее должен!
			var screen = $("#ramka div"); // наш маленький экран
			var screen_width = width * small_width / panorama_width // ширина экрана			
			
			screen.css("width", (screen_width) + "px"); //плюс ширина рамок с тенями, чтоы полупрозрачные картинки не накладывались
			
			// именно так, чтобы дельты слоя слева и права нормально обсчитались
			var screen_left = parseFloat(screen.css("left"));
			
			$("#left_shadow").css("width",screen_left + "px"); // ширина декора до экрана
			
			$("#right_shadow").css({
				"width":(ramka_width-screen_left-screen_width) + "px",
				"left": (screen_left + screen_width)+"px"
			});
			// ширина декора после экрана
			// для того чтобы ее узнать надо знать ширину ездящей рамки, а не ширину маленькой иллюстрации
			
			/* бегунок */
		
			// итак, считаем границы для бегунка.
			// левая граница это левая позиция -"дырки".left-5 - кусочек бордера
			
			/* global !!*/	
			screen_delta = (width-small_width)/2; // !!!!!
			
			/* global !!*/	
			delta_left  = - parseFloat(screen.css('left')) + screen_delta;
			delta_left_containment = delta_left + 4; //!!! не пойму почему
			
			// правая граница это левая позиция "дырки" + ширина маленького экрана  + 5
			
			/* global !!*/	
			delta_right  = delta_left + small_width - screen_width;
			delta_right_containment = delta_right + 3.87; //!!! не пойму почему
			// похоже contaiment - считается относительно окна
			// действительно, задаешь 0 и 1 - на 1280 между -338 и 330 на 1024 между 206 и 207 - со скроллами как раз будет разница 2*(330-206)
			
			// позиция бегунка на начало работы - по центру!
			// delta_/(2*k_panorama*k_small) - поскольку дрыка это у нас как экран ,соотвественно его позиция будет в k_small раз меньше, чем сама панорама
			// + delta_left - это у нас вообще параметр который отвечает за сдвиг координат
			// плиз небольшой сдвиг за счет рамки
			$("#ramka").css("left", Math.round(delta_left - screen_delta - (delta_/(2*k_panorama*k_small))) + "px");

			
			$("#panorama, #people, #fon, #panorama_small").css("visibility","visible");
			$("#right_panorama_arrow, #left_panorama_arrow").show();
			
		
			//alert(delta);
		
			$('#draggable').draggable({ 
				axis: 'x',
				containment: [delta, 0, 0, 0],
				drag: function(event, ui) { 
			
					jTweener.removeTween();
					
					var x = parseFloat(ui.helper.css('left'));
					var panorama_x = x/k_panorama;
					var people_x = x/k_people;
					var fon_x = x/k_fon;
				
					var ramka_x = delta_left - screen_delta - panorama_x/k_small;
				
					$("#link_container").css("left", (panorama_x-x) + "px");
					$("#panorama").css({"left": panorama_x + "px"});
					$("#people").css({"left": people_x + "px"});
					$("#ramka").css({"left": ramka_x + "px"});
					$("#fon").css("left", fon_x + "px");
					
					check_arrows(x, delta);
			
				},
				start: function(event, ui) {
				},
				stop: function(event, ui) {
					/*
					jTweener.addTween($("#panorama"), {left: "+=100"});
					jTweener.addTween($("#people"), {left: "+=100"});
					*/
				}
			});
			
			$('#ramka').draggable({ 
				axis: 'x',
				/* delay: 200, */
				/* grid: [1, 1], */
				containment: [delta_left_containment, 0, delta_right_containment, 0],
				handle: 'div',
				/* cursor: 'move', */
				drag: function(event, ui) {
					
					jTweener.removeTween();
					
					var x = parseFloat(ui.helper.css('left'));
					/* nvar ramka_x = delta_left - screen_delta - panorama_x/k_small;  */
					
					//$("#test").html(delta_right_containment);
					
					var panorama_x = (-x + delta_left - screen_delta)*k_small;
					
					var draggable_x = panorama_x*k_panorama;
					
					var people_x = draggable_x/k_people;
					
					var fon_x = draggable_x/k_fon;
					
					$("#link_container").css("left", (panorama_x-draggable_x) + "px");
					$("#panorama").css({"left": panorama_x + "px"});
					$("#people").css({"left": people_x + "px"});
					$("#fon").css("left", fon_x + "px");
					$('#draggable').css({"left": draggable_x + "px"});
					
					check_arrows(draggable_x, delta_);
			
				},
				stop: function(event, ui) {
				}
			});
	
		
		}).attr("src","/assets/templates/site/images/scroll/people.png");
		
	}).attr("src","/assets/templates/site/images/scroll/kitchens_posterise_50.png");

	$("#left_panorama_arrow, #right_panorama_arrow, #left_arrow, #right_arrow").live("click", function() {
			move_to_the_position(parseFloat($("#draggable").css('left')), $(this).attr('dir'));
	})
});

var check_arrows = function(x, delta) {
	//right arrow
	if(x < delta + 100) {
		$("#right_arrow").hide();
		$("#right_panorama_arrow").hide();
	}
	else {
		$("#right_arrow").show();
		$("#right_panorama_arrow").show();
	}
	//left arrow 
	if(x > -100) {
		$("#left_arrow").hide();
		$("#left_panorama_arrow").hide();		
	} else {
		$("#left_arrow").show();
		$("#left_panorama_arrow").show();		
	}
}

var move_to_the_position = function(x, dir) {
	var xx = 0;
	var key_x = 0;
	// по текущей позиции ищем точку куда в итоге двигать!
	for (var i = 0; i < panorama_points.length; i++) {
		usl = dir=='ltr' ? (panorama_points[i] > x):(panorama_points[i] < x);
		if(usl) {
			x_key = i;
			if(dir=='rtl') break;
		}
   }
	
	xx = panorama_points[x_key];
	
	var panorama_x = xx/k_panorama;
	var people_x = xx/k_people;
	var fon_x = xx/k_fon;
				
	var ramka_x = delta_left - screen_delta - panorama_x/k_small;
	
	jTweener.addTween($("#link_container"), {left: (panorama_x-xx)});	
	jTweener.addTween($("#draggable"), {left: xx});	
	jTweener.addTween($("#fon"), {left: fon_x});
	jTweener.addTween($("#people"), {left: people_x});
	jTweener.addTween($("#panorama"), {left: panorama_x});
	jTweener.addTween($("#ramka"), {
		left: ramka_x,
		onComplete: function() {
			check_arrows(xx, delta_);
		}
	});	
	
}