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

var popupBlock = {

	init : function(img){
		var that = this;
		//$("#popup_cont").empty();
		this.popupCont = $("#popup_cont");

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

		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").parent().prev("li").children()[0]).addClass("current");
			this.currentImage = $(this.currentImage.parent().prev("li").children()[0]);
			this.prevImg = this.currentImage.parent().prev("li").children()[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{
				this.isBusy = false;
			}
		}
		/**
		 * Нажали на правое изображение
		 */
		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.currentImage.removeClass("current").parent().next("li").children()[0]).addClass("current");
			this.currentImage = $(this.currentImage.parent().next("li").children()[0]);
			this.nextImg = this.currentImage.parent().next("li").children()[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{
				this.isBusy = false;
			}

		}
		/**
		 * Первая загрузка картинки
		 */
		else {
			this.currentImage = this.images.filter(".current");
			if(img.tagName === 'A'){
				this.tmpImg.src = $(img).attr("href");
				scale_image(this.tmpImg);
			}
			else{
				this.tmpImg.src = $(img).attr("src");
			}
			
			
			this.prevImg = this.currentImage.parent().prev("li").children()[0];
			this.nextImg = this.currentImage.parent().next("li").children()[0];
			
//			console.log(this.nextImg);
		}
	},

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

//		this.currentImage.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();
		//scale_image(this.tmpImg);
		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.append(that.tmpImg);
		if ($(this.currentImage).find(".brand_link").html()) {
		this.popupBlock.append("<div class='pic_description brand_link'><a href='" + $(this.currentImage).find(".brand_link").attr("title") + "'>" + this.currentImage.find(".brand_link").html() + "</a></div>");
		}
		if ($(this.currentImage).find(".collection_link").html()) {
		this.popupBlock.append("<div class='pic_description collection_link'><a href='" + $(this.currentImage).find(".collection_link").attr("title") + "'>" + this.currentImage.find(".collection_link").html() + "</a></div>");
		// $("div.brand_link").css("width","40%");
		} else {
			$("div.brand_link").css("width","80%");
		}
		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");
			
			scale_image(leftImg);
			
		}

		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");
			
			scale_image(rightImg);
		}
	},

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

		this.leftBlock.empty().show();
		
		scale_image(img);
		
		
		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);
		if ($(this.prevImg).find(".brand_link").html()) {
		this.leftBlock.append("<div class='pic_description brand_link'><a href='" + $(this.prevImg).find(".brand_link").attr("title") + "'>" + $(this.prevImg).find(".brand_link").html() + "</a></div>");
		}
		if ($(this.prevImg).find(".collection_link").html()) {
		this.leftBlock.append("<div class='pic_description collection_link'><a href='" + $(this.prevImg).find(".collection_link").attr("title") + "'>" + $(this.prevImg).find(".collection_link").html() + "</a></div>");
		// $("div.brand_link").css("width","40%");
		} else {
			$("div.brand_link").css("width","80%");
		}
		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();
		
		scale_image(img);
		
		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);
		if ($(this.nextImg).find(".brand_link").html()) {
		this.rightBlock.append("<div class='pic_description brand_link'><a href='" + $(this.nextImg).find(".brand_link").attr("title") + "'>" + $(this.nextImg).find(".brand_link").html() + "</a></div>");
		}
		if ($(this.nextImg).find(".collection_link").html()) {
		this.rightBlock.append("<div class='pic_description collection_link'><a href='" + $(this.nextImg).find(".collection_link").attr("title") + "'>" + $(this.nextImg).find(".collection_link").html() + "</a></div>");
		// $("div.brand_link").css("width","40%");
		} else {
			$("div.brand_link").css("width","80%");
		}
		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)
	},


	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){
				$(this).removeClass("right_move").removeClass("right_move_small");
				if(!that.isBusy){
					that.isBusy = true;
					that.showImage($(this).find("img")[0], "right");
				}
			}
		);

		
		$(".left_window").live("mouseover",
				function(){
					$(this).css({"margin-left": "50px"});
					}
			);
		$(".left_window").live("mouseout",
				function(){
				$(this).css({"margin-left": "0"});
					}
			);

		$(".right_window").live("mouseover",
				function(){
			
					if ($(this).css("margin-left").replace(/px/,"") * 1 <= "-100") {
					$(this).addClass("right_move").removeClass("right_move_small");
				} else {
					$(this).addClass("right_move_small").removeClass("right_move");
				}
					}
			);
		$(".right_window").live("mouseout",
				function(){
				$(this).removeClass("right_move").removeClass("right_move_small");
					}
			);

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

		$(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);
			}
		);
	}
	
};

function tb_getPageSize(){
	var de = document.documentElement;
	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
	arrayPageSize = [w,h];
	return arrayPageSize;
}


function scale_image (img) {
	
	var pagesize = tb_getPageSize();
	var x = pagesize[0] - 150;
	var y = pagesize[1] - 150;
	if (img.complete) {
	var imageWidth = img.width;
	var imageHeight = img.height;

	if (imageWidth > x) {
		imageHeight = imageHeight * (x / imageWidth); 
		imageWidth = x; 
		if (imageHeight > y) { 
			imageWidth = imageWidth * (y / imageHeight); 
			imageHeight = y; 
		}
	} else if (imageHeight > y) { 
		imageWidth = imageWidth * (y / imageHeight); 
		imageHeight = y; 
		if (imageWidth > x) { 
			imageHeight = imageHeight * (x / imageWidth); 
			imageWidth = x;
		}
	}
	img.width = imageWidth;
	img.height = imageHeight;
	}
}