var PopupImage = {};
//текущая картинка 
PopupImage.currentImageUrl = null;
//константы состояния 
PopupImage.STATE_CLOSE = 0;
PopupImage.STATE_OPEN = 1;
PopupImage.STATE_CHANGE = 2;
PopupImage.state = PopupImage.STATE_CLOSE;
//обработчики смены статутса 
PopupImage.onStatusHandlers = [];
//некоторые константы 
PopupImage.PRELOAD_W = 300;
PopupImage.PRELOAD_H = 300;
PopupImage.RESIZE_PX_PER_SEC = 1000;
PopupImage.SHOW_IMG_DURATION = 300;
PopupImage.CLOSE_ALL_DURATION = 200;

PopupImage.init = function() {
	//получаем основные DOM-элементы
	this.jContainer = $("#popup_cont"); //общий контейнер
	this.jWhiteArea = $("#popup_white_area"); //белая область вокруг прелоадера
	this.jMainArea = $("#popup_main_area"); //область - содержащая все напрозрачные элементы
	this.jPreloader = $("#popup_preloader"); 
	this.jImage = $("#popup_main_img");
}
//отобразить новую картинку
PopupImage.setImage = function(imageUrl) {
	//если сейчас происходит анимация - игнорировать
	if(this.state == PopupImage.STATE_CHANGE)
		return;
	//если картинка закрыта
	if(this.state == PopupImage.STATE_CLOSE) {
		//открыть картинку		
		this.open();		
	}
	//показать прелоадер
	this.jPreloader.show();
	//установить состояние
	this._setState(PopupImage.STATE_CHANGE);
	//начать загружать картику
	if(this.loadImage) {//memory leaks fix
		this.loadImage.onload = null;
		this.loadImage.onerror = null;
	}
	this.loadImage = new Image();
	this.loadImage.onload = function(){PopupImage._onImageLoaded();}
	this.loadImage.onerror = function(){PopupImage._onImageError();}
	this.loadImage.src = imageUrl;
}

//обработка события "Новая картинка загружена" 
PopupImage._onImageLoaded = function() {	
	//скрыть прелоадер
	this.jPreloader.hide();
	
	//получить размер картинки 
	var newWidth  = this.loadImage.width;
	var newHeight = this.loadImage.height;
	//нужно ли менять размер
	var isWidthChanged = newWidth != this.currentWidth;
	var isHeightChanged = newHeight != this.currentHeight;
	var isNeedResize = isWidthChanged || isHeightChanged;
	//новую картинку НЕ нужно создавать, если изменяется размер,
	//или текущая картинка не содержит изображения
	var isCreateNewImage = !isNeedResize && this.jImage.attr('src').length > 0;
	if(isCreateNewImage)
		var jNewImage = $(document.createElement("img"));
	else
		var jNewImage = this.jImage;
	//показать новыу картинку и увести в альфу 
	jNewImage.css('opacity', 0);	
	jNewImage.attr('src', this.loadImage.src);	
	if(isCreateNewImage)
		this.jImage.after(jNewImage);
	else
		jNewImage.show();
	//функция для отображения картинки и установки нового статуса
	var fnShowImg = function() {
		jNewImage.animate({opacity: 1}, PopupImage.SHOW_IMG_DURATION, 'linear', function(){						
			//удалит старую картинку
			if(isCreateNewImage) {
				PopupImage.jImage.remove();
				PopupImage.jImage = jNewImage;
			}
			PopupImage.currentImageUrl = PopupImage.jImage.attr('src');
			PopupImage._setState(PopupImage.STATE_OPEN);
		});		
	}
	//если размер нужно поеменять
	if(isNeedResize) {
		//установим размер белой области в соответсви со старой картинкой
		this.jWhiteArea.css({
			width:  this.currentWidth,
			height: this.currentHeight
		});
		//считем длительность анимации 
		var dx = Math.abs(newWidth - this.currentWidth);
		var dy = Math.abs(newHeight - this.currentHeight);
		var dPx = dx > dy ? dx : dy;
		var duration = (dPx / PopupImage.RESIZE_PX_PER_SEC) * 1000;		
		//изменяем размер, по окончании показыываем картинку 
		var o = {
			width:  newWidth,
			height: newHeight
		};
		this.jWhiteArea.animate(o, duration, 'linear', fnShowImg);
	} else {//если размер остаётся старый 
		//показываем картинку 
		fnShowImg();
	}
		
	//запомнить размер текущей картинки 
	this.currentWidth  = newWidth;
	this.currentHeight = newHeight;
}

//обработка неудачной попытки загрузки изображения 
PopupImage._onImageError = function() {
	//вывести сообщение об ошибке 
	alert("Ошибка при загрузке изображения");
	//закрыть окно
	this.close();
}

//открытие ранее закртыой картинки
PopupImage.open = function() {
	//не показывать картинку, пока она не загрузится 
	this.jImage.hide();
	//дефолтные размеры перлоадера 
	this.jWhiteArea.css({
		width:  PopupImage.PRELOAD_W,
		height: PopupImage.PRELOAD_H
	});
	//установить зрамер прелоадера как текущий 
	this.currentWidth = PopupImage.PRELOAD_W;
	this.currentHeight = PopupImage.PRELOAD_H;
	//закрыть при клике по любой точке экрана 
	$(document.body).bind('click', PopupImage.close);
	//отобразить
	this.jContainer.show();
}

//может выполняться в глобальном контексте, не использовать this 
PopupImage.close = function() {
	//снать обработчик на закртыие 
	$(document.body).unbind('click', PopupImage.close);
	//скрыть всё в альфу 
	PopupImage.jMainArea.animate({opacity: 0},PopupImage.CLOSE_ALL_DURATION, 'linear', function() {
		//по окончании установить новый статус и снять альфу 
		PopupImage.jContainer.hide();
		PopupImage.jMainArea.css({opacity: 1});
		PopupImage._setState(PopupImage.STATE_CLOSE);
		//убрать ссылку с картинки
		PopupImage.jImage.attr("src", "");
	});		
	
	return false;
}

PopupImage._setState = function(newState) {
	//проверить статус 
	if(newState === undefined)
		alert("Undefined state");
	//установить статус 
	this.state = newState;
	//вызвать обработчики 
	for(var i=0; i<this.onStatusHandlers.length; i++) {
		this.onStatusHandlers[i].call(this);
	}
}

PopupImage.addOnStatusChanged = function(callback) {
	this.onStatusHandlers.push(callback);
}

$(document).ready(function(){
	PopupImage.init();
	$(".j_show_img").click(function(){
		if(this.isDrag)
			return false;
			
		PopupImage.setImage(this.href);
		/*var w = fromClass(this,"w_");
		var h = fromClass(this,"h_");
		if(w && h){
			$("#shop_big_img").attr('width', w);
			$("#shop_big_img").attr('height', h);
		}*/		
		return false;
	});
});