$(function(){
	var popup = $('#p-popup').appendTo('#imagery-wrap').css('opacity', 0),
		popup_stub = $('<div id="p-stub"/>').appendTo('#imagery-wrap'),
		show_popup = false,
		popup_timer;
		
	
	function hidePopup() {
		clearTimeout(popup_timer);
		
		show_popup = false;
		popup.fadeOut(200);
		popup_stub.hide();
	}
	
	/**
	 * @param {Number} x
	 * @param {Number} y
	 * @param {jQuery} elem
	 */
	function showPopup(x, y, elem) {
		clearTimeout(popup_timer);
		setTimeout(function(){
			if (elem.hasClass('letter')) {
//				popup.find('img').attr('src', elem.find('img').attr('bigimage'));
				popup.find('h3').html( elem.find('h3').html() );
				popup.find('h4').html( elem.find('h4').html() );
				
				var img = new Image;
				img.onload = function() {
					popup
						.css({width: img.width})
						.find('img').attr('src', img.src);
				}
				img.src = elem.find('img').attr('bigimage');
			}
			showPopupAnim(x, y, elem.width(), elem.height());
		}, 50);
	}
	
	function showPopupAnim(x, y, width, height) {
		var cx = x + width / 2,
			cy = y + height / 2;
			
		popup.stop().show().css({
			left: cx - popup.width() / 2,
			top: cy - popup.height() / 2,
			opacity: 0
		}).animate({opacity: 1}, 200);
		
		popup_stub.show().css({
			left: x, 
			top: y,
			width: width,
			height: height
		});
	}
	
		
	popup_stub.mouseout(hidePopup);
	
	$('.event .images .letter, .event .images img[big-image]').not('.no-hover').mouseover(function() {
		var elem = $(this);
		var offset = elem.offset();
		showPopup(offset.left, offset.top, elem);
	});
	
});

$(function(){
	var default_anim_options = {
		time: 1.2,
		transition: 'easeinoutcubic'
	};
	
	var is_visible = false;
	
	/** @type {jQuery} */
	var last_image;
	
	var big_image = $('#imagery-gallery-item');
	
	/**
	 * @param {jQuery} section
	 */
	function freeze(section) {
		var wrap = section.find('.gallery-wrap'),
			content = section.find('.gallery-inner'),
			width = content[0].offsetWidth,
			height = content[0].offsetHeight;
		
		content.css({width: width, height: height});
		return [width, height];
	}
	
	/**
	 * @param {jQuery} section
	 */
	function relax(section) {
		section.css('left', '')
			.find('.gallery-wrap, .gallery-inner').css({width: '', height: ''});
	}
	
	
	/**
	 * @param {jQuery} section
	 */
	function expandSection(section, delay) {
		section = $(section);
		if (!section.hasClass('gallery-hidden') || section.hasClass('gallery-empty'))
			return;
		
		
		var anim_options = jTweener.Utils.mergeObjects(default_anim_options, {delay: delay || 0});
		// измеряем размер
		var left_from = section[0].offsetLeft;
		section.removeClass('gallery-hidden');
		var size = freeze(section);
		var left_to = section[0].offsetLeft;
		
		var wrap = section.css({left: left_from})
			.find('.gallery-wrap').css({width: 0, height: 0});
			
		$t(section, anim_options).tween({
			left: left_to
		});
		
		$t(wrap, anim_options).tween({
			height: size[1],
			onComplete: function() {
				$t(wrap, anim_options).tween({
					width: size[0],
					time: 0.8,
					delay: 0.2,
					onComplete: function() {
						relax(section);
					}
				});
			}
		});
	}
	
	/**
	 * @param {jQuery} section
	 */
	function collapseSection(section, delay) {
		section = $(section);
		
		if (section.hasClass('gallery-hidden') || section.hasClass('gallery-empty'))
			return;
		
		var anim_options = jTweener.Utils.mergeObjects(default_anim_options, {delay: delay || 0});
		// измеряем размер
		var left_from = section[0].offsetLeft;
		var size = freeze(section);
		section.addClass('gallery-hidden');
		var left_to = section[0].offsetLeft;
		section.removeClass('gallery-hidden');
		
		var wrap = section.css({left: left_from})
			.find('.gallery-wrap').css({width: size[0], height: size[1]});
			
		$t(wrap, anim_options).tween({
			width: 0,
			time: 0.8,
			onComplete: function() {
				$t(section, anim_options).tween({
					left: left_to,
					delay: 0.2
				});
				
				$t(wrap, anim_options).tween({
					height: 0,
					delay: 0.2,
					onComplete: function() {
						relax(section.addClass('gallery-hidden'));
					}
				});
			}
		});
	}
	
	function showGallery() {
		if (is_visible)
			return;
			
		$('#imagery-wrap .shade, .gallery-collapse')
			.css({display: 'block', opacity: 0})
			.animate({opacity: 0.9}, 300);
		
		expandSection($('#gallery-images'), 0.3)
		expandSection($('#gallery-video'), 0.35);
		is_visible = true;
	}
	
	function hideGallery() {
		collapseSection($('#gallery-images'), 0)
		collapseSection($('#gallery-video'), 0.05);
		
		setTimeout(function(){
			var decor = $('#imagery-wrap .shade, .gallery-collapse')
			.animate({opacity: 0}, 300, function(){
				decor.css({display: ''});
			});
			is_visible = false;
		}, 2300);
	}
	
	/**
	 * @param {jQuery} item
	 */
	function loadImage(item) {
		item = $(item);
		big_image.addClass('loading');
		var img = new Image;
		img.onload = function() {
			last_image = item;
			displayImageOrVideo(img);
		}
		img.src = item.attr('href');
	}
	
	function displayImageOrVideo(img) {
		big_image.removeClass('loading');
			
		if (img.jquery && img.hasClass('code')) {
			// video
			big_image.find('.code').remove();
			console.log(img.find('object').attr('width'));
			
			big_image
				.addClass('is-video')
				.find('.wrap').css('width', parseInt(img.find('object').attr('width'))).end()
				.find('img').after(img.clone());
		} else {
			// image
			big_image
				.find('.wrap').css('width', img.width).end()
				.find('img').css({width: img.width, height: img.height}).attr('src', img.src);
		}
			
			
		var left_arrow = big_image.find('.arrow.left'),
			right_arrow = big_image.find('.arrow.right');
			
		if (last_image) {
			if (last_image.prev('a, li').length)
				left_arrow.show();
			else
				left_arrow.hide();
				
			if (last_image.next('a, li').length)
				right_arrow.show();
			else
				right_arrow.hide();
				
			big_image
				.find('h3').html( last_image.find('.title').html() ).end()
				.find('p').html( last_image.find('.comment').html() )
		}
		
	}
	
	function displayPopup() {
		big_image.find('.code').remove();
		big_image.removeClass('is-video').show();
		$('#imagery-wrap').addClass('big-image');
	}
	
	function showBigImage(item) {
		item = $(item);
		displayPopup();
		loadImage(item);
	}
	
	function hideBigImage(item) {
		big_image.hide();
		last_image = null;
		$('#imagery-wrap').removeClass('big-image');
	}
	
	function showVideo(item) {
		last_image = $(item);
		displayPopup();
		displayImageOrVideo(last_image.find('.code'))
	}
	
	$('.gallery-section h3').click(function(){
		showGallery();
	});
	
	$('.gallery-collapse .pseudo-href').click(hideGallery);
	
	big_image
		.find('.close').click(hideBigImage).end()
		.find('.arrow.left').click(function(){
			if (last_image) {
				if (last_image.is('li'))
					showVideo( last_image.prev('li') )
				else
					loadImage(last_image.prev('a'))
			}
		}).end()
		.find('.arrow.right').click(function(){
			if (last_image) {
				if (last_image.is('li'))
					showVideo( last_image.next('li') )
				else
					loadImage(last_image.next('a'))
			}
		}).end();
	
	$('#gallery-images .gallery-inner a').click(function(/* Event */ evt) {
		showBigImage(this);
		
		evt.preventDefault();
		return false;
	});
	
	
	
	$('#gallery-video li').click(function(/* Event */ evt) {
		showVideo(this);
		evt.preventDefault();
		return false;
	});
});