﻿/* 
Jquery Modal v1.1.0 (WEBDELO)

Описание: Библиотека работы модального окна.
Разработчик: Хмельницкий Руслан Олегович
Дата: 28.04.2010
Сайт: www.webdelo.org
Требования: 
 - jquery v1.4.2
*/ 

var webdeloModal = {
	// Класс конфигурации модального окна
	Settings : function(){
		// Дефолтные значения
		this.overlayOpacity = 15; // Прозрачность фона модального окна
		this.overlayColor = '#000'; // Цвет фона прозрачного окна
		this.overlayImg = '/img/pattern.png';
		this.currentType = ''; // Текущий тип окна (эта строка добавляется к CSS-классу контейнера)
		this.loadingImgSrc = '/img/loading.gif';
		this.imgCloseText = 'Щелкни мышью, чтобы свернуть изображние';
		this.isShowBtnOk = false; // Показать ли кнопку Ok
		this.btnOkTitle = "Ok"; // Что выводить в кнопке Ok
		this.fadeEffect = false; // Включать ли эффект увядания
		this.effectFast = false; 
		this.effectSlow = true;
	},
	
	// Создаем дефолтную конфигурацию модального окна
	config : null,
	
	// Объекты 
	overlay : null,
	container : null,
	data : null,
	button : null,
	img: null,
	
	// Инициализация модального окна
	init : function(){

		if(this.config == null)
			this.config = new this.Settings();
		
		// Создаем фон модального окна
		this.overlay = $('<div>')
				.attr('id', 'webdeloModalOverlay')
				.css($.extend({},{
					opacity: this.config.overlayOpacity / 100,
					backgroundColor: this.config.overlayColor,
					backgroundImage: "url('"+this.config.overlayImg+"')",
					height: '100%',
					width: '100%',
					cursor: 'wait',
					position: 'fixed',
					left: 0,
					top: 0,
					zIndex: 3000
				}))
				.hide()
				.appendTo('body');
				
		// Создаем контейнер модального окна
		this.container = $('<div>')
				.attr('id', 'webdeloModalContainer')
				.addClass('webdeloModalContainer' + this.config.currentType)
				.css($.extend({}, {
					position: 'fixed', 
					zIndex: 3100
				}))
				.hide()
				.appendTo('body');
				
		this.data = $('<div>')
				.addClass('webdeloModalData')
				.appendTo('body');
				
		this.button = $('<div>')
				.addClass('webdeloModalButton')
				.append('<button onclick="webdeloModal.close()">' + this.config.btnOkTitle + '</button>')
				.hide()
				.appendTo('body');
				
		this.img = $('<img>')
				.attr('title', this.config.imgCloseText)
				.attr('src', this.config.loadingImgSrc)
				.css($.extend({}, {
					cursor: 'pointer'
				}))
				.hide()
				.click(function() {
					webdeloModal.close();
				})
				.appendTo('body');
				
		this.container.append(this.data);
		this.container.append(this.button);
		this.container.append(this.img);
	},
	
	// Обновление параметров модального окна
	update : function(){
		// Изменяем фон модального окна если надо
		if(this.overlay.css('backgroundColor') != this.config.overlayColor)
			this.overlay.css('backgroundColor', this.config.overlayColor);
				
		// Изменяем контейнер модального окна если надо
		if(this.container.attr('class') != 'webdeloModalContainer' + this.config.currentType)
			this.container.removeClass().addClass('webdeloModalContainer' + this.config.currentType);
			
		setTimeout("webdeloModal.toCenter()", 500);
	},
	
	// Открытие модального окна
	open : function(data, cnfg){
		
		if(this.overlay == null || this.container == null)
			this.init();
			
		var isUpdate = false;
		if (typeof cnfg == 'object')
			isUpdate = this.setConfig(cnfg);
		
		if (typeof data == 'string' || typeof data == 'number') 
		{
			this.data = this.data.html(data);
			isUpdate = true;
			
			this.data.show();
			this.img.hide();
			
			if(this.config.isShowBtnOk)
				this.button.show();
			else
				this.button.hide();
		}
		else if (typeof data == 'object') 
		{
			this.data.hide();
			this.img.show()
					.attr('src', data.src);
			this.button.hide();
			isUpdate = true;
		}

		var effect = this.config.effectFast?'fast':(this.config.effectSlow?'slow':null);
		if(this.config.fadeEffect)
		{
			this.overlay.fadeIn(effect);
			this.container.fadeIn(effect);
		}
		else
		{
			this.overlay.show(effect);
			this.container.show(effect);
		}
		if(isUpdate)
			this.update();
	},
	
	// Закрытие модального окна
	close : function() {
		var effect = this.config.effectFast?'fast':(this.config.effectSlow?'slow':null);
		if(this.config.fadeEffect)
		{
			this.overlay.fadeOut(effect);
			this.container.fadeOut(effect);
		}
		else
		{
			this.overlay.hide(effect);
			this.container.hide(effect);
		}
		//this.img.animate({left: "+=0"}, 1000).attr('src', this.config.loadingImgSrc);
		this.button.hide();
		return false;
	},
	
	// Показ картинки
	showImg : function(a)
	{
		this.open("Загрузка изображения...", {currentType : 'Loading', isShowBtnOk : false});
		if(this.img == null)
			this.init();
		var Img = document.createElement('img');
		Img.onload = function () { try { webdeloModal.open(this, {currentType : 'Img', isShowBtnOk : false}); } catch (e) {} };
		Img.src = a.href;

		return false;
	},

	
	setConfig: function (cnfg) {
		
		if(this.config == null)
			this.config = new this.Settings();
			
		var isUpdate = false;
		
		if (typeof cnfg == 'object')
		{
			if(cnfg.overlayOpacity != undefined) {
				this.config.overlayOpacity = cnfg.overlayOpacity;
				isUpdate = true;
			}
			if(cnfg.overlayColor != undefined) {
				this.config.overlayColor = cnfg.overlayColor;
				isUpdate = true;
			}
			if(cnfg.currentType != undefined) {
				this.config.currentType = cnfg.currentType;
				isUpdate = true;
			}
			if(cnfg.isShowBtnOk != undefined) {
				this.config.isShowBtnOk = cnfg.isShowBtnOk;
				isUpdate = true;
			}
			if(cnfg.btnOkTitle != undefined) {
				this.config.btnOkTitle = cnfg.btnOkTitle;
				isUpdate = true;
			}
			if(cnfg.fadeEffect != undefined) {
				this.config.fadeEffect = cnfg.fadeEffect;
				isUpdate = true;
			}
			if(cnfg.effectFast != undefined) {
				this.config.effectFast = cnfg.effectFast;
				isUpdate = true;
			}
			if(cnfg.effectSlow != undefined) {
				this.config.effectSlow = cnfg.effectSlow;
				isUpdate = true;
			}
		}
		return isUpdate;
	},
	
	toCenter : function () {
		this.container.animate({marginTop:  "-" + (this.container.height()/2) + "px",
								marginLeft: "-" + (this.container.width()/2) + "px"}, 'slow');
	},
	
	fixIE: function () {
		var wHeight = $(document.body).height() + 'px';
		var wWidth = $(document.body).width() + 'px';
	
		// hacks
		this.overlay.css({position: 'absolute', height: wHeight, width: wWidth});
	}
};
