/**
 * @author Sergey
 */

 function Gallery(elem){
 	this.root = $(elem);
	this.id = Gallery.__guid++;

	this.anim_dir = Gallery.FROM_TOP;
	this.animating = false;

	this.anim_func = EEQ.Quartic.easeInOut;
	this.anim_dur = 25;

	this.player_id = 'flvpl'+this.id;

	this.items = this.root.find('.preview li');
	this.big_image = this.root.find('.big-image');
	this.caption = this.big_image.find('.caption');

	this.attachEvents();

	this.selected_item = this.items.filter('.selected').find('a');
	if(!this.selected_item.length){
		this.items.filter(':first').find('a').click();
	}
}

Gallery.__guid = 1;
Gallery.video_player_url = '/f/1/global/flv_player.swf';
Gallery.video_player_skin_url = '/f/1/global/skin.swf';
Gallery.small_player_size = {width:492, height: 409};
Gallery.large_player_size = {width:664, height: 538};

//Big image animation direction
Gallery.FROM_TOP = 1;
Gallery.FROM_RIGHT = 2;
Gallery.FROM_BOTTOM = 4;
Gallery.FROM_LEFT = 8;

Gallery.prototype = {
	attachEvents: function(){
		var me = this;

		//hook all preview links
		this.root.find('.preview').each(function(){
			var obj = $(this);
			var anim_dir = obj.is('.set1') ? Gallery.FROM_TOP : Gallery.FROM_LEFT;
			obj.find('a').click(function(){
				if(me.animating)
					return false;
				return me.onPreviewClick(this, anim_dir);
			});
		});


//		this.items.find('a').click(function(){
//			if(me.animating)
//				return false;
//			return me.onPreviewClick(this);
//		});

		//hook all video links
		var me = this;
		this.root.find('.video a').click(function(){
			if(me.animating)
				return false;
			return me.onVideoClick(this);
		});
	},

 	onPreviewClick: function(target, anim_dir){

		if($(target).parent().is('.selected') || $(target).find('i').eq(0).is('.on'))
			return false;

		var href = target.href;
		var title = target.title;
		var me = this;
		
		
//		anim_dir = anim_dir || this.anim_dir;

//		this.anim_dir = $(target).parents('ul.preview').is('.set1') ? Gallery.FROM_TOP : Gallery.FROM_LEFT;
		if(this.proxy_image){
			//there is old proxy image with loading image, remove it
			this.proxy_image.onload = null;
			this.proxy_image = null;
			delete this.proxy_image;
		}
		
		if(this.loader_icon){
			clearInterval(this.icon_timeout);
			this.loader_icon.removeClass("on");
			this.loader_icon = null;
			delete this.loader_icon;
		}
		
		
		
		//create new image instance
		this.proxy_image = new Image();
		this.loader_icon = $(target).find('i').eq(0);
		
		this.icon_timeout = setTimeout(function(){me.loader_icon.addClass("on");},500);
		
		//when image loaded, swap images
		this.proxy_image.onload = function(){
			me.swapImages(me.proxy_image.src, title, anim_dir);
			me.swapPreviews(target, anim_dir);
			delete me.proxy_image;
			clearInterval(me.icon_timeout);
			me.loader_icon.removeClass("on");
		};

		//load image
		this.proxy_image.src = href;
		
		
		
		return false;
	},

	/**
	 * Swap old big image with new one
	 * @param {String} img New image path
	 * @param {String} [title] New image caption
	 * @param {Number} [anim_dir] Animation direction
	 */
	swapImages: function(img, title, anim_dir){

		//remove video player
		$('#'+this.player_id).remove();

		var img_node = $('<img>').attr('src', img);
		var old_img = this.big_image.find('img');

		if(!old_img.length){
			//there is no old image, just place new one
			this.big_image.prepend(img_node);
			return;
		}

		anim_dir = anim_dir || this.anim_dir;

		var canvas_width = this.big_image.width();
		var canvas_height = this.big_image.height();
		img_node.css({position: 'absolute', zIndex: 2});

		//place image in proper place
		var k = 1, p = '', init_pos, target_pos, me = this;
		switch(anim_dir){
			case Gallery.FROM_BOTTOM:
				img_node.css('top', '100%');
				k = 1;
				p = 'top';
				break;
			case Gallery.FROM_TOP:
				img_node.css('bottom', '100%');
				k = -1;
				p = 'top';
				break;
			case Gallery.FROM_RIGHT:
				img_node.css('left', '100%');
				k = 1;
				p = 'left';
				break;
			case Gallery.FROM_LEFT:
				img_node.css('right', '100%');
				k = -1;
				p = 'left';
				break;
		}

		//make shure that nothing sneaks out
		this.big_image.css({
			width: canvas_width,
			height: canvas_height,
			position: 'relative',
			overflow: 'hidden'
		});

		//attach new image
		this.big_image.prepend(img_node);

		//revert image position to 'top' or 'left' property
		if(p == 'left'){
			init_pos = img_node[0].offsetLeft;
			target_pos = k*canvas_width;
			img_node.css({left: init_pos, right: 'auto'});
		}
		else{
			init_pos = img_node[0].offsetTop;
			target_pos = k*canvas_height;
			img_node.css({top: init_pos, bottom: 'auto'});
		}

		//animate images
		this.animating = true;

		old_img.css('position', 'relative');
		var tw1 = new Tween(old_img, p, this.anim_func, 0, target_pos, this.anim_dur);
		tw1.onMotionFinished = function(obj){
			$(obj).remove();
		};

		var tw2 = new Tween(img_node, p, this.anim_func, init_pos, 0, this.anim_dur);
		tw2.onMotionFinished = function(obj){
			$(obj).css({
				position: 'static',
				top: 'auto',
				left: 'auto',
				zIndex: ''
			});

			me.big_image.css({overflow: ''});
			if(me.caption.length){
				me.caption.fadeIn('normal');
			}

			me.animating = false;
		};


		//find canvas size delta
		var d_canvas_width = img_node.width() - old_img.width();
		var d_canvas_height = img_node.height() - old_img.height();

		if(d_canvas_height || d_canvas_width){
			var tw3 = new Tween(this.big_image, '', this.anim_func, 0, 1, this.anim_dur);
			tw3.onMotionChanged = function(obj){
				obj.style.width = (this.position * d_canvas_width + canvas_width) + 'px';
				obj.style.height = (this.position * d_canvas_height + canvas_height) + 'px';
			};
		}

		if(this.caption.length){
			this.caption.fadeOut('fast', function(){
				$(this).hide().html(title || '');
			});
		}
	},

	swapPreviews: function(item, anim_dir){
		item = $(item);
		var item_image = item.find('img');
		var w = item_image.width(), h = item_image.height();

		var pre_anim_state = {
			width: w,
			height: h,
			display: 'block',
			position: 'relative',
			overflow: 'hidden'
		};

		var post_anim_state = {
//			width: '',
//			height: '',
//			display: '',
			position: '',
			overflow: ''
		};

		if(!this.selected_item.length){
			//there's no selected image, don't animate
			this.selected_item = item.parent().addClass('selected').end();
			return;

		}

		//animate previously selected image (show it)
		this.selected_item.css(pre_anim_state).parent().removeClass('selected');
		var dir = (this.selected_item.parents('.preview').is('.set1')) ? 'top' : 'left';
		var init_pos = ((dir == 'top') ? h : w) + 2;
		var img = this.selected_item.find('img').css(dir, init_pos);
		var tw1 = new Tween(img, dir, this.anim_func, init_pos, 0, this.anim_dur);
		tw1.onMotionFinished = function(obj){
			$(obj).parent().css(post_anim_state);
		};

		//animate newly selected image (hide it)
		item.css(pre_anim_state);
		var dir = (anim_dir == Gallery.FROM_TOP || anim_dir == Gallery.FROM_BOTTOM) ? 'top' : 'left';
		var tw2 = new Tween(item_image, dir, this.anim_func, 0, ((dir == 'top') ? h : w) + 2, this.anim_dur);
		tw2.onMotionFinished = function(obj){
			$(obj).parent().parent().addClass('selected');
		};
		this.selected_item = item;
	},

	onVideoClick: function(target){
		this.items.removeClass('selected');
		this.playVideo(target.href, $(target).is('.small-size') ? Gallery.small_player_size : Gallery.large_player_size);
		return false;
	},

	playVideo: function(video_path, size){
		//create and attach video node
		var video_node = $('<div>').attr('id', this.player_id);
		this._clearBigImage();
		this.big_image.prepend(video_node);

		//create video player
		var so = new SWFObject(Gallery.video_player_url, this.player_id+'_flv', size.width, size.height, 8, '#17191c');
		so.addVariable('skin_path', Gallery.video_player_skin_url);

		//replace video path extension to 'flv'
		video_path = video_path.replace(/\.\w+$/, '.flv');

		//play video
		so.addVariable('flv_path', video_path);
		so.write(this.player_id);
	},

	_clearBigImage: function(){
		this.big_image.css({width:'auto', height: 'auto'}).find('img, #'+this.player_id).remove();
		this.items.removeClass('selected').find('img').css({top: 0, left: 0});
		this.selected_item = [];
	}
 };

$(function(){
	$('.gallery').each(function(){
		if(!$(this).is('.leveling'))
			new Gallery(this);
	});
});