// JavaScript Document

var ggdObjID = "#grad_details";
var loadingObjID = "#ggd_loading";
var ggdContentID = "#ggd_content";
var ggdImage = "#big_ggd_photo";
var ggd_posY;
var loadedData = "";
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();


$(document).ready(function(){


	$(ggdObjID).corner("20px");
	
	
	$(loadingObjID).bind("ajaxSend", function(){ // при отправке запроса на подгрузку
//	    $(this).show(); // показываем элемент
	    $(loadingObjID).animate({opacity: "show"}, "slow"); // показываем "загрузка" медленно
	}).bind("ajaxComplete", function(){ // после получения ответа
//	    $(this).hide(); // скрываем элемент
		// убеждаемся что content loaded - контент загружен
//		alert("ajaxComplete");
		$(ggdContentID).html(loadedData); // вставляем HTML, пошла загрузка фото.
		// далее показ по бинду

		$(ggdImage).bind('load',    // биндим продолжение на событие полной загрузки изображения
			function (e) { // как только загрузили картинку
				//jsDelay(500);
				setTimeout(function() { 
					$(loadingObjID).animate({opacity: "hide"}, "fast", // быстро плавно убираем "загрузка"
											function (){  // и после пропадания "загрузки" плавно и медленно показываем контент
												//$(ggdImage).show();
												$(ggdContentID).animate({opacity: "show"}, "slow");
											} 
					); // закончили анимацию
					$(ggdImage).unbind('load');
				}, 1000) // end setTimeOut
			});
		
	});


	$(".gg_tumb").click(
		function(e){

			// get mouse cursor position related to page
			ggd_posY = e.pageY;
			
			
			maxVpos = viewportHeight - $(ggdObjID).outerHeight(true) - 30;
			if (e.clientY > maxVpos) { 
				ggd_posY = e.pageY - (e.clientY - maxVpos);
			}
//			maxH = $(document).height() - $(ggdObjID).outerHeight(true) - 50;
//			if (ggd_posY > maxH) { ggd_posY = maxH;}

//			var offset = $(this).position();
//			$("#xxxx").html("Pos: x = " + e.clientX + ", y = " + e.clientY);

			// set Content position
			if ( $(ggdObjID).css('display') == 'none' ) {
				// если нет на экране - можем смело сразу менять позицию
				$(ggdObjID).css('top', ggd_posY);
			} else {
				// если уже показано, сначала плавно скрыть и поменять позицию (по завершению скрытия)
				$(ggdObjID).animate({opacity: "hide", height: 'hide'}, "fast", function(){
																							$(ggdObjID).css('top', ggd_posY);
																						});
			}
			
			// очистить контейнер от прежних данных прежде чем показать окошко
			loadedData = "";
			$(ggdContentID).html(loadedData);
			
			// показываем "окошко"
			$(ggdObjID).animate({opacity: "show", height: 'show'}, "slow");


			// some operations to load content
			var objName = $(this).attr('name');
			
			$.ajax({
				url:"gradchart/details.php", // Адрес на сервере
				global:"true", // Использовать или нет глобальные настройки
				dataType:"html", // Тип олучаемых данных
				data: { id: objName }, // Отправляем данные
				type:"POST",	// Метод (post/get)
			  	cache:"true", // Опция устанавливающая кэшировать или нет данные
				success:function(data){
						loadedData = data;
//						alert("loadedData = data");
					}
			});// отправляем запрос. При этом у нас ранее на событие забиндены действия по показу и скрытию


/*			$.post("gradchart/details.php", { id: objName },
				function(data) {
					loadedData = data;
//  					$(ggdContentID).html(data);	   
				}
			); // отправляем запрос. При этом у нас ранее на событие забиндены действия по показу и скрытию
*/

//			$(ggdContentID).load('gradchart/details.php?id=' + objName);
//			alert($objName);
		}
	);
	
	$("#ggd_close").click(
		function(){
			$(ggdObjID).animate({opacity: "hide", height: 'hide'}, "fast");
		}
	);




});