/**
 * Попап
 * @type
 */

var popupBlock = {

	init : function(img){
		var that = this;

		this.popupCont = $("#popup_cont");

		this.popupBlock = $(".center_window");
		this.leftBlock = $(".left_window");
		this.rightBlock = $(".right_window");

		this.shader = $("#shader");
		this.closer = $("#closer");

		this.images = $(".img_link");

		this.windowWidth = $(window).width();
		this.windowHeight = $(document).height();

		this.popupCont.width(this.windowWidth).height(this.windowHeight);
		this.shader.width(this.windowWidth).height(this.windowHeight);

		this.isBusy = false;

		this.popupBlock.css({
			"visibility" : "hidden",
			"display" : "block"
		});

		this.imgCache = [];

		this.tmpImg = new Image();
		this.tmpImg.onload = function(){
				that.newWidth();
			};

		this.attachEvents();
	},

	/**
	 * Показываем картинку
	 * @param {} img Картинка, которую показываем
	 * @param {} prev Куда нажали(право, лево)
	 */
	showImage : function(img, prev){
		var that = this;
		/**
		 * Нажали на левое изображение
		 */
		if(prev === 'left'){
			var center = this.popupBlock;
			var right = this.rightBlock;
			var left = this.leftBlock;
			var centerWidth = this.imgWidth;
			var leftWidth = this.leftImage;

			this.popupBlock.css(
				{
					left: (this.windowWidth - this.imgWidth)/2 - 10,
					marginLeft: 0
				}
			);

			this.leftBlock.css(
				{
					right: "auto",
					marginRight: 0
				}
			);

			$(this.currentImage.removeClass("current").prevAll("A")[0]).addClass("current");
			this.currentImage = $(this.currentImage.prevAll("A")[0]);
			this.prevImg = this.currentImage.prevAll("A")[0];

			this.popupBlock.animate(
				{
					left: this.windowWidth-100,
					marginLeft: 0
				}, 500, function(){
					center.removeClass("center_window").addClass("right_window");
					that.rightBlock = center;
					that.rightImage = centerWidth;
				}
			);

			this.leftBlock.animate(
				{
					left: (this.windowWidth - this.leftImage)/2 - 10
				}, 500, function(){
					left.removeClass("left_window").addClass("center_window");
					that.popupBlock = left;
					that.imgWidth = leftWidth;
				}
			);

			right.remove();
			this.leftBlock = $("<div class='gall_item left_window'></div>").appendTo(this.popupCont);
			if(this.prevImg){
				var leftImg = new Image();
				leftImg.onload = function(){
						that.leftPrev(leftImg);
					};
				leftImg.src = $(this.prevImg).attr("href");
			}
			else{
				setTimeout(
					function(){
						that.isBusy = false;
					}, 250
				);
			}
		}
		/**
		 * Нажали на правое изображение
		 */
		else if(prev === 'right'){

			var center = this.popupBlock;
			var right = this.rightBlock;
			var left = this.leftBlock;

			var centerWidth = this.imgWidth;
			var rightWidth = this.rightImage;

			this.rightBlock.css(
				{
					left: this.windowWidth-100,
					marginLeft: 0
				}
			);

			this.popupBlock.css(
				{
					left: (this.windowWidth - this.imgWidth)/2 - 10,
					marginLeft: 0
				}
			);

			$(this.currentImage.removeClass("current").nextAll("A")[0]).addClass("current");
			this.currentImage = $(this.currentImage.nextAll("A")[0]);
			this.nextImg = this.currentImage.nextAll("A")[0];

			this.popupBlock.animate(
				{
					left: -(this.imgWidth-80),
					marginLeft: 0
				}, 500, function(){
					center.removeClass("center_window").addClass("left_window");
					that.leftBlock = center;
					that.leftImage = centerWidth;
				}
			);

			this.rightBlock.animate(
				{
					left: (this.windowWidth - this.rightImage)/2 - 10
				}, 500, function(){
					right.removeClass("right_window").addClass("center_window");
					that.popupBlock = right;
					that.imgWidth = rightWidth;
				}
			);

			left.remove();
			this.rightBlock = $("<div class='gall_item right_window'></div>").appendTo(this.popupCont);

			if(this.nextImg){
				var rightImg = new Image();
				rightImg.onload = function(){
						that.rightPrev(rightImg);
					};
				rightImg.src = $(this.nextImg).attr("href");
			}
			else{
				setTimeout(
					function(){
						that.isBusy = false;
					}, 250
				);
			}

		}
		/**
		 * Первая загрузка картинок
		 */
		else{
			this.currentImage = this.images.filter(".current");
			if(img.tagName === 'A'){
				this.tmpImg.src = $(img).attr("href");
			}
			else{
				this.tmpImg.src = $(img).attr("src");
			}

			this.prevImg = this.currentImage.prevAll("A")[0];
			this.nextImg = this.currentImage.nextAll("A")[0];
		}
	},

	hideImage : function(){
		var that = this;

		this.popupBlock.css({
			"visibility": "hidden",
			width: this.beginWidth,
			height: this.beginHeight,
			marginLeft: -75
		});

		this.tmpImg = new Image();
		this.tmpImg.onload = function(){
			that.newWidth();
		};

		this.popupBlock.empty();
		this.leftBlock.attr("style","").empty();
		this.rightBlock.attr("style","").empty();
		this.images.removeClass("current");
		this.popupCont.hide();
	},

	newWidth : function(){
		var that = this;

		this.popupCont.show();

		this.imgWidth = this.tmpImg.width;
		this.imgHeight = this.tmpImg.height;

		this.windowTop = window.pageYOffset || document.documentElement.scrollTop;
		this.windowHeight = window.innerHeight || document.documentElement.clientHeight;

		this.closer.css({top: this.windowTop+30}).show();
		var topOffset = this.windowTop + (this.windowHeight - this.imgHeight)/2;

		this.popupBlock.css({
			"visibility" : "visible"
		});

		this.popupBlock.css(
			{
				top : topOffset,
				width: this.imgWidth,
				marginLeft: -(this.imgWidth/2 + 10),
				left: '50%'
			}
		);
		this.popupBlock.empty();
		this.popupBlock.append(that.tmpImg);
		this.popupBlock.append("<a class='article_link' href='" + this.currentImage.find(".article_link").attr("title") + "'>" + this.currentImage.find(".article_link").text() + "</a>")
		this.popupBlock.append("<div class='pic_description'>" + this.currentImage.find(".pic_description").html() + "</div>")
		var source = this.currentImage.find(".source_img");
		if(source.length > 0){
			this.popupBlock.append("<div class='pic_source'>" + "<a target='_blank' href='" + $(source).attr('title') + "'>" +  $(source).text() + "<ins class='icon_24'><ins class='a'/></ins></a>" + "</div>")
		}

		if(this.prevImg !== undefined){
			var leftImg = new Image();
			leftImg.onload = function(){
					that.leftPrev(leftImg);
				};
			leftImg.src = this.prevImg.tagName === 'A' ? $(this.prevImg).attr("href") : $(this.prevImg).attr("src");
		}

		if(this.nextImg !== undefined){
			var rightImg = new Image();
			rightImg.onload = function(){
					that.rightPrev(rightImg);
				};
			rightImg.src = this.nextImg.tagName === 'A' ? $(this.nextImg).attr("href") : $(this.nextImg).attr("src");
		}
	},

	leftPrev : function(img){
		var that = this;

		this.leftBlock.empty().show();
		this.leftImage = img.width;
		var topOffset = this.windowTop + (this.windowHeight - img.height)/2;
		this.leftBlock.css({
			top: topOffset,
			right: "auto",
			left: -(img.width+20),
			width: this.leftImage
		});
		this.leftBlock.append(img);
		this.leftBlock.append("<a class='article_link' href='" + $(this.prevImg).find(".article_link").attr("title") + "'>" + $(this.prevImg).find(".article_link").text() + "</a>")
		this.leftBlock.append("<div class='pic_description'>" + $(this.prevImg).find(".pic_description").html() + "</div>")
		var source = $(this.prevImg).find(".source_img");
		if(source.length > 0){
			this.leftBlock.append("<div class='pic_source'>" + "<a target='_blank' href='" + $(source).attr('title') + "'>" +  $(source).text() + "<ins class='icon_24'><ins class='a'/></ins></a>" + "</div>")
		}

		setTimeout(function(){
			that.leftBlock.animate(
				{
					left: -(img.width-80)
				}, 250,
				function(){
					that.isBusy = false
				}
			);
		}, 250)
	},

	rightPrev : function(img){
		var that = this;

		this.rightBlock.empty().show();
		var topOffset = this.windowTop + (this.windowHeight - img.height)/2;
		this.rightImage = img.width;

		this.rightBlock.css({
			top: topOffset,
			marginLeft: 0,
			width: this.rightImage
		});

		this.rightBlock.append(img);
		this.rightBlock.append("<a class='article_link' href='" + $(this.nextImg).find(".article_link").attr("title") + "'>" + $(this.nextImg).find(".article_link").text() + "</a>")
		this.rightBlock.append("<div class='pic_description'>" + $(this.nextImg).find(".pic_description").html() + "</div>")
		var source = $(this.nextImg).find(".source_img");
		if(source.length > 0){
			this.rightBlock.append("<div class='pic_source'>" + "<a target='_blank' href='" + $(source).attr('title') + "'>" +  $(source).text() + "<ins class='icon_24'><ins class='a'/></ins></a>" + "</div>")
		}

		setTimeout(function(){
			that.rightBlock.animate(
				{
					marginLeft: -100
				}, 250,
				function(){
					that.isBusy = false
				}
			);
		}, 250)
	},

	showFlash : function(flash){
		var that = this;

		this.popupBlock.empty();

		var flashvars = {
			video: $(flash).attr("href"),
			css: "css/default.css",
			skin: "skin/gasprom.swf",
			cover: "cover/default.jpg"
		}
		this.imgWidth = 500;
		this.imgHeight = 500;
		this.windowTop = window.pageYOffset || document.documentElement.scrollTop;
		this.windowHeight = window.innerHeight || document.documentElement.clientHeight;
		var topOffset = this.windowTop + (this.windowHeight - this.imgHeight)/2;
		this.popupBlock.css({
			"visibility" : "visible"
		});
		this.popupBlock.animate(
			{
				top : topOffset,
				width: this.imgWidth,
				height: this.imgHeight,
				marginLeft: -(this.imgWidth/2)
			}, 250,
			function(){
				$("<div id='flash_container'></div>").appendTo(that.popupBlock);
				swfobject.embedSWF("swf/video_player.swf", "flash_container", "500", "500", "9.0.0","expressInstall.swf",flashvars);
			}
		);
	},

	imgTopOffset :function(container){
		var cont = $(container);
		var img = cont.find("img")[0];
		if(img){
			switch (cont.attr("class")){
				case "gall_item center_window":
					cont.css({
						top: this.windowTop + (this.windowHeight - img.height)/2,
						marginLeft: -(img.width / 2 + 10),
						left: '50%'
					});
					break;
				case "gall_item left_window":
					cont.css({
						top: this.windowTop + (this.windowHeight - img.height)/2,
						right: "auto",
						left: -(img.width-80)
					});
					break;
				case "gall_item right_window":
					cont.css({
						top: this.windowTop + (this.windowHeight - img.height)/2,
						left: "100%",
						marginLeft: -100
					});
					break;
			}
		}
	},

    attachEvents : function(){
		var that = this;

		this.closer.click(
			function(){
				that.hideImage();
				if(that.popupCont.length != 0){
					return false;
				}
			}
		);

		this.closer.hover(
			function(){
				that.closer.addClass("hovered");
			},
			function(){
				that.closer.removeClass("hovered");
			}
		);

		this.popupBlock.click(
			function(e){
				e.stopPropagation();
			}
		);

		$(".left_window").live("click",
			function(e){
				if(!that.isBusy){
					that.isBusy = true;
					that.showImage($(this).find("img")[0], "left");
				}
			}
		);

		$(".right_window").live("click",
			function(e){
				if(!that.isBusy){
					that.isBusy = true;
					that.showImage($(this).find("img")[0], "right");
				}
			}
		);

		$(document).click(
			function(e){
				if($(e.target).parent().attr("id") == "popup_cont"){
					that.hideImage();
				}
			}
		);

		$(window).resize(
			function(){
				that.windowWidth = $(window).width();
				that.windowHeight = window.innerHeight || document.documentElement.clientHeight;
				that.windowTop = window.pageYOffset || document.documentElement.scrollTop;

				that.popupCont.width(that.windowWidth).height($(document).height());
				that.shader.width(that.windowWidth).height($(document).height());

				that.imgTopOffset(that.leftBlock);
				that.imgTopOffset(that.popupBlock);
				that.imgTopOffset(that.rightBlock);
			}
		);
	}
};