class Animation {
	constructor(data) {
		this.name = '';
		this.uuid = guid()
		this.loop = true;
		this.override = false;
		this.selected = false;
		this.anim_time_update = '';
		this.length = 0
		this.bones = {
			//uuid: BoneAnimator
		}
		if (typeof data === 'object') {
			this.extend(data)
		}
	}
	extend(data) {
		Merge.string(this, data, 'name')
		Merge.boolean(this, data, 'loop')
		Merge.boolean(this, data, 'override')
		Merge.string(this, data, 'anim_time_update')
		Merge.number(this, data, 'length')
		return this;
	}
	undoCopy() {
		var scope = this;
		var copy = {
			uuid: this.uuid,
			name: this.name,
			loop: this.loop,
			override: this.override,
			anim_time_update: this.anim_time_update,
			length: this.length,
			selected: this.selected,
		}
		if (this.bones.length) {
			copy.bones = {}
			for (var uuid in this.bones) {
				var kfs = this.bones[uuid].keyframes
				if (kfs && kfs.length) {
					var kfs_copy = copy.bones[uuid] = []
					kfs.forEach(kf => {
						kfs_copy.push(kf.undoCopy())
					})
				}
			}
		}
		return copy;
	}
	select() {
		var scope = this;
		var selected_bone = selected_group
		Animator.animations.forEach(function(a) {
			a.selected = false;
		})
		Prop.active_panel = 'animations'
		this.selected = true
		Animator.selected = this
		unselectAll()
		BarItems.slider_animation_length.update()

		function iterate(arr) {
			arr.forEach((it) => {
				if (it.type === 'group') {
					Animator.selected.getBoneAnimator(it)
					if (it.children && it.children.length) {
						iterate(it.children)
					}
				}
			})
		}
		iterate(TreeElements)

		if (selected_bone) {
			selected_bone.select()
		}
		Animator.preview()
		return this;
	}
	rename() {
		var scope = this;
		Blockbench.textPrompt('message.rename_animation', this.name, function(name) {
			if (name) {
				scope.name = name
			}
		})
		return this;
	}
	editUpdateVariable() {
		var scope = this;
		Blockbench.textPrompt('message.animation_update_var', this.anim_time_update, function(name) {
			if (name) {
				scope.anim_time_update = name
			}
		})
		return this;
	}
	showContextMenu(event) {
		this.select();
		this.menu.open(event, this);
		return this;
	}
	getBoneAnimator(group) {
		if (!group && selected_group) {
			group = selected_group
		} else if (!group) {
			return;
		}
		var uuid = group.uuid
		if (!this.bones[uuid]) {
			var ba = this.bones[uuid] = new BoneAnimator()
			ba.uuid = uuid
		}
		return this.bones[uuid];
	}
	displayFrame(time) {
		for (var uuid in this.bones) {
			this.bones[uuid].displayFrame(time)
		}
		if (selected_group) {
			centerTransformer()
		}
		Blockbench.dispatchEvent('display_animation_frame')
	}
	add() {
		if (!Animator.animations.includes(this)) {
			Animator.animations.push(this)
		}
		return this;
	}
	remove() {
		if (Animator.selected === this) {
			Animator.selected = false
		}
		Animator.animations.remove(this)
		Blockbench.dispatchEvent('remove_animation', {animation: this})
		return this;
	}
	getMaxLength() {
		var len = this.length||0

		for (var uuid in this.bones) {
			var bone = this.bones[uuid]
			var i = 0;
			while (i < bone.keyframes.length) {
				len = Math.max(len, bone.keyframes[i].time)
				i++;
			}
		}
		this.length = len
		if (this == Animator.selected) {
			BarItems.slider_animation_length.update()
		}
		return len
	}
}
	Animation.prototype.menu = new Menu([
		{name: 'generic.rename', icon: 'text_format', click: function(animation) {
			animation.rename()
		}},
		{name: 'menu.animation.loop', icon: (a) => (a.loop?'check_box':'check_box_outline_blank'), click: function(animation) {
			animation.loop = !animation.loop
		}},
		{name: 'menu.animation.override', icon: (a) => (a.override?'check_box':'check_box_outline_blank'), click: function(animation) {
			animation.override = !animation.override
		}},
		{name: 'menu.animation.anim_time_update', icon: 'update', click: function(animation) {
			animation.editUpdateVariable()
		}},
		{name: 'generic.delete', icon: 'delete', click: function(animation) {
			animation.remove()
		}},
		/*
			rename
			Loop: checkbox
			Override: checkbox
			anim_time_update:
				WalkPosition
			delete
		*/
	])
class BoneAnimator {
	constructor() {
		this.keyframes = []
		this.uuid;
	}
	getGroup() {
		this.group = TreeElements.findRecursive('uuid', this.uuid)
		if (!this.group) {
			console.log('no group found for '+this.uuid)
		}
		return this.group
	}
	addKeyframe(values, time, channel) {
		var keyframe = new Keyframe({
			time: time,
			channel: channel
		})
		if (values && typeof values === 'object') {
			keyframe.extend({
				x: values[0],
				y: values[1],
				z: values[2]
			})
			if (values[3]) {
				keyframe.extend({w: values[3], isQuaternion: true})
			}
		} else if (typeof values === 'number' || typeof values === 'string') {
			keyframe.extend({
				x: values
			})
		} else {
			var ref = this.interpolate(time, channel, true)
			if (ref) {
				let e = 1e2
				ref.forEach((r, i) => {
					if (!isNaN(r)) {
						ref[i] = Math.round(parseFloat(r)*e)/e
					}
				})
				keyframe.extend({
					x: ref[0],
					y: ref[1],
					z: ref[2],
					w: ref.length === 4 ? ref[3] : undefined,
					isQuaternion: ref.length === 4
				})
			}
		}
		this.keyframes.push(keyframe)
		keyframe.parent = this;
		return keyframe;
	}
	pushKeyframe(keyframe) {
		this.keyframes.push(keyframe)
		keyframe.parent = this;
		return this;
	}
	doRender() {
		this.getGroup()
		if (this.group && this.group.children && this.group.mesh) {
			let mesh = this.group.mesh
			return (mesh && mesh.fix_rotation)
		}
	}
	displayRotation(arr) {
		var bone = this.group.mesh
		bone.rotation.copy(bone.fix_rotation)

		if (!arr) {
		} else if (arr.length === 4) {
			var added_rotation = new THREE.Euler().setFromQuaternion(new THREE.Quaternion().fromArray(arr), 'ZYX')
			bone.rotation.x -= added_rotation.x
			bone.rotation.y -= added_rotation.y
			bone.rotation.z += added_rotation.z
		} else {
			arr.forEach((n, i) => {
				bone.rotation[getAxisLetter(i)] += Math.PI / (180 / n) * (i == 2 ? 1 : -1)
			})
		}
		return this;
	}
	displayPosition(arr) {
		var bone = this.group.mesh
		bone.position.copy(bone.fix_position)
		if (arr) {
			bone.position.add(new THREE.Vector3().fromArray(arr))
		}
		return this;
	}
	displayScale(arr) {
		var bone = this.group.mesh
		if (arr) {
			bone.scale.x = bone.scale.y = bone.scale.z = arr[0] ? arr[0] : 0.00001
		} else {
			bone.scale.x = bone.scale.y = bone.scale.z = 1
		}
		return this;
	}
	interpolate(time, channel, allow_expression) {
		var i = 0;
		var before = false
		var after = false
		var result = false
		while (i < this.keyframes.length) {
			var keyframe = this.keyframes[i]

			if (keyframe.channel !== channel) {
			} else if (keyframe.time < time) {

				if (!before || keyframe.time > before.time) {
					before = keyframe
				}
			} else  {
				if (!after || keyframe.time < after.time) {
					after = keyframe
				}
			}
			i++;
		}
		if (before && Math.abs(before.time - time) < 1/1200) {
			result = before
		} else if (after && Math.abs(after.time - time) < 1/1200) {
			result = after
		} else if (before && !after) {
			result = before
		} else if (after && !before) {
			result = after
		} else if (!before && !after) {
			//
		} else {
			let alpha = Math.lerp(before.time, after.time, time)
			result = [
				before.getLerp(after, 'x', alpha, allow_expression)
			]
			if (before.channel !== 'scale')	{
				result[1] = before.getLerp(after, 'y', alpha, allow_expression)
				result[2] = before.getLerp(after, 'z', alpha, allow_expression)
			}
			if (before.isQuaternion && after.isQuaternion) {
				result[3] = before.getLerp(after, 'q', alpha, allow_expression)
			}
		}
		if (result && result.type === 'keyframe') {
			let keyframe = result
			let method = allow_expression ? 'get' : 'calc'
			result = [
				keyframe[method]('x')
			]
			if (keyframe.channel !== 'scale')	{
				result[1] = keyframe[method]('y')
				result[2] = keyframe[method]('z')
			}
			if (keyframe.isQuaternion)	 	{
				result[3] = keyframe[method]('w')
			}
		}
		return result
	}
	displayFrame(time) {
		if (!this.doRender()) return;
		this.getGroup()
		for (var channel in Animator.possible_channels) {
			var result = this.interpolate(time, channel)
			if (channel === 'rotation') {
				this.displayRotation(result)
			} else if (channel === 'position') {
				this.displayPosition(result)
			} else if (channel === 'scale') {
				this.displayScale(result)
			}
		}
		this.group.mesh.updateMatrixWorld()
	}
	select() {
		var duplicates;
		function iterate(arr) {
			arr.forEach((it) => {
				if (it.type === 'group' && !duplicates) {
					if (it.name === selected_group.name && it !== selected_group) {
						duplicates = true
					} else if (it.children && it.children.length) {
						iterate(it.children)
					}
				}
			})
		}
		iterate(TreeElements)
		if (duplicates) {
			Blockbench.showMessageBox({
				translateKey: 'duplicate_groups',
				icon: 'folder',
				buttons: [tl('dialog.ok')],
			})
		}
		Timeline.animator = this;
		Timeline.keyframes.forEach(function(kf) {
			kf.selected = false
		})
		Timeline.selected.length = 0
		Timeline.keyframes = Timeline.vue._data.keyframes = this.keyframes
		if (this.keyframes[0]) {
			this.keyframes[0].select()
		} else {
			updateKeyframeSelection()
		}
		if (this.group && this.group.parent && this.group.parent !== 'root') {
			this.group.parent.openUp()
		}
		Vue.nextTick(Timeline.update)
		return this;
	}
}
class Keyframe {
	constructor(data) {
		this.type = 'keyframe'
		this.channel = 'rotation'//, 'position', 'scale'
		this.channel_index = 0;
		this.time = 0;
		this.selected = 0;
		this.x = '0';
		this.y = '0';
		this.z = '0';
		this.w = '0';
		this.isQuaternion = false;
		this.uuid = guid()
		if (typeof data === 'object') {
			this.extend(data)
			if (this.channel === 'scale' && data.x === undefined) {
				this.x = 1
			}
		}
	}
	get(axis) {
		if (!this[axis]) {
			return 0;
		} else if (!isNaN(this[axis])) {
			return parseFloat(this[axis])
		} else {
			return this[axis]
		}
	}
	calc(axis) {
		return parseMolang(this[axis])
	}
	set(axis, value) {
		if (axis === 'x' || axis === 'y' || axis === 'z' || axis === 'w') {
			this[axis] = value
		}
		return this;
	}
	offset(axis, amount) {
		var value = this.get(axis)
		if (!value || value === '0') {
			this.set(axis, amount)
		}
		if (typeof value === 'number') {
			this.set(axis, value+amount)
			return value+amount
		}
		var start = value.match(/^-?\s*\d*(\.\d+)?\s*(\+|-)/)
		if (start) {
			var number = parseFloat( start[0].substr(0, start[0].length-1) ) + amount
			value = trimFloatNumber(number) + value.substr(start[0].length-1)
		} else {

			var end = value.match(/(\+|-)\s*\d*(\.\d+)?\s*$/)
			if (end) {
				var number = (parseFloat( end[0] ) + amount)+''
				value = value.substr(0, end.index) + (number.substr(0,1)=='-'?'':'+') + trimFloatNumber(number)
			} else {
				value = trimFloatNumber(amount) +(value.substr(0,1)=='-'?'':'+')+ value
			}
		}
		this.set(axis, value)
		return value;

		/*
		function iterate(string, index) {
			if (!isNaN(string)) {
				return [index, string.length]
			}
			var splices = splitUpMolang(string, ['+', '-'])
			if (!splices) return false;

			var result = iterate(splices[1], index+splices[0].length)
			if (result) return result;

			result = iterate(splices[0], index)
			if (result) return result;
		}

		var p = iterate(value, 0)
		if (p) {
			value = value.substr(0, p[0]) + amount + value.substr(p[0]+p[1])
			this.set(axis, value)
		} else {
			amount = ''+amount
			if (amount.substr(0, 1) !== '-') amount = '+'+amount
			this.set(axis, value+amount)
		}*/
	}
	getLerp(other, axis, amount, allow_expression) {
		if (allow_expression && this.get(axis) === other.get(axis)) {
			return this.get(axis)
		} else {
			let calc = this.calc(axis)
			return calc + (other.calc(axis) - calc) * amount
		}
	}
	getArray() {
		if (this.channel === 'scale') {
			return this.get('x')
		}
		var arr = [
			this.get('x'),
			this.get('y'),
			this.get('z'),
		]
		if (this.channel === 'rotation' && this.isQuaternion) {
			arr.push(this.get('w'))
		}
		return arr;
	}
	select(event) {
		var scope = this;
		if (this.dragging) {
			delete this.dragging
			return this;
		}
		if (!event || (!event.shiftKey && !event.ctrlKey)) {
			Timeline.selected.forEach(function(kf) {
				kf.selected = false
			})
			Timeline.selected.length = 0
		}
		if (event && event.shiftKey && Timeline.selected.length) {
			var last = Timeline.selected[Timeline.selected.length-1]
			if (last && last.channel === scope.channel) {
				Timeline.keyframes.forEach((kf) => {
					if (kf.channel === scope.channel &&
						Math.isBetween(kf.time, last.time, scope.time) &&
						!kf.selected
					) {
						kf.selected = true
						Timeline.selected.push(kf)
					}
				})
			}
		}
		if (Timeline.selected.indexOf(this) == -1) {
			Timeline.selected.push(this)
		}
		this.selected = true
		updateKeyframeSelection()
		return this;
	}
	callMarker() {
		Timeline.setTime(this.time)
		Animator.preview()
		return this;
	}
	findNearest(distance, channel, direction) {
		if (!this.parent) return [];
		//channel: all, others, this, 0, 1, 2
		//direction: true>, false<, undefined<>
		var scope = this
		function getDelta(kf, abs) {
			if (abs) {
				return Math.abs(kf.time - scope.time)
			} else {
				return kf.time - scope.time
			}
		}
		var matches = []
		var i = 0;
		while (i < scope.parent.keyframes.length) {
			var kf = scope.parent.keyframes[i]
			let delta = getDelta(kf)

			let delta_match = Math.abs(delta) <= distance &&
				(delta>0 == direction || direction === undefined)

			let channel_match = (
				(channel === 'all') ||
				(channel === 'others' && kf.channel !== scope.channel) ||
				(channel === 'this' && kf.channel === scope.channel) ||
				(channel === kf.channel_index) ||
				(channel === kf.channel)
			)

			if (channel_match && delta_match) {
				matches.push(kf)
			}
			i++;
		}

		matches.sort((a, b) => {
			return getDelta(a, true) - getDelta(b, true)
		})

		return matches
	}
	showContextMenu(event) {
		if (!this.selected) {
			this.select();
		}
		this.menu.open(event, this);
		return this;
	}
	remove() {
		if (this.parent) {
			this.parent.keyframes.remove(this)
		}
		Timeline.selected.remove(this)
	}
	extend(data) {
		if (data.channel && Animator.possible_channels[data.channel]) {
			Merge.string(this, data, 'channel')
		} else if (typeof data.channel === 'number') {
			this.channel = Animator.channel_index[data.channel]
		}
		Merge.number(this, data, 'time')

		Merge.string(this, data, 'x')
		Merge.string(this, data, 'y')
		Merge.string(this, data, 'z')
		Merge.string(this, data, 'w')
		Merge.boolean(this, data, 'isQuaternion')

		this.channel_index = Animator.channel_index.indexOf(this.channel)
		return this;
	}
	undoCopy() {
		var copy = {
			channel: this.channel_index,
			time: this.time,
			x: this.x,
			//uuid: this.uuid
		}
		if (this.channel_index !== 2) {//Not Scale
			copy.y = this.y
			copy.z = this.z
		}
		if (this.channel_index === 0 && this.isQuaternion) {
			copy.w = this.w
		}
		return copy;
	}
}
	Keyframe.prototype.menu = new Menu([
		{name: 'menu.keyframe.quaternion',
			icon: (keyframe) => (keyframe.isQuaternion ? 'check_box' : 'check_box_outline_blank'),
			condition: (keyframe) => keyframe.channel === 'rotation',
			click: function(keyframe) {
				keyframe.select()
				var state = !keyframe.isQuaternion
				Timeline.keyframes.forEach((kf) => {
					kf.isQuaternion = state
				})
				updateKeyframeSelection()
			}
		},
		{name: 'generic.delete', icon: 'delete', click: function(keyframe) {
			keyframe.select({shiftKey: true})
			removeSelectedKeyframes()
		}},
		/*
			settotimestamp
			delete
		*/
	])

function updateKeyframeValue(obj) {
	var axis = $(obj).attr('axis')
	var value = $(obj).val()
	Timeline.selected.forEach(function(kf) {
		kf.set(axis, value)
	})
	BARS.updateConditions()
	Animator.preview()
}
function updateKeyframeSelection() {
	if (!selected_group) {
		Timeline.keyframes = Timeline.vue._data.keyframes = []
		Timeline.animator = undefined
		Timeline.selected.length = 0
	}
	var multi_channel = false;
	var channel = false;
	Timeline.selected.forEach((kf) => {
		if (channel === false) {
			channel = kf.channel
		} else if (channel !== kf.channel) {
			multi_channel = true
		}
	})
	if (Timeline.selected.length && !multi_channel) {
		var first = Timeline.selected[0]
		$('#keyframe_type_label').text(tl('panel.keyframe.type', [tl('timeline.'+first.channel)] ))
		$('#keyframe_bar_x').show()
		$('#keyframe_bar_y, #keyframe_bar_z').toggle(first.channel !== 'scale')
		$('#keyframe_bar_w').toggle(first.channel === 'rotation' && first.isQuaternion) 

		var values = [
			first.get('x'),
			first.get('y'),
			first.get('z'),
			first.get('w')
		]
		values.forEach((v, vi) => {
			if (typeof v === 'number') {
				values[vi] = trimFloatNumber(v)
			}
		})
		$('#keyframe_bar_x input').val(values[0])
		$('#keyframe_bar_y input').val(values[1])
		$('#keyframe_bar_z input').val(values[2])
		$('#keyframe_bar_w input').val(values[3])

		BarItems.slider_keyframe_time.update()
	} else {
		$('#keyframe_type_label').text('')
		$('#keyframe_bar_x, #keyframe_bar_y, #keyframe_bar_z, #keyframe_bar_w').hide()
	}
	BARS.updateConditions()
}
function selectAllKeyframes() {
	if (!Animator.selected) return;
	var state = Timeline.selected.length !== Timeline.keyframes.length
	Timeline.keyframes.forEach((kf) => {
		if (state && !kf.selected) {
			Timeline.selected.push(kf)
		} else if (!state && kf.selected) {
			Timeline.selected.remove(kf)
		}
		kf.selected = state
	})
	updateKeyframeSelection()
}
function removeSelectedKeyframes() {
	Undo.initEdit({keyframes: Timeline.selected, keep_saved: true})
	var i = Timeline.keyframes.length;
	while (i > 0) {
		i--;
		let kf = Timeline.keyframes[i]
		if (Timeline.selected.includes(kf)) {
			kf.remove()
		}
	}
	updateKeyframeSelection()
	Undo.finishEdit('remove keyframes')
}

const Animator = {
	possible_channels: {rotation: true, position: true, scale: true},
	channel_index: ['rotation', 'position', 'scale'],
	open: false,
	animations: [],
	frame: 0,
	interval: false,
	join: function() {

		Animator.open = true;
		selected.length = 0
		updateSelection()

		if (quad_previews.enabled) {
			quad_previews.enabled_before = true
		}
		main_preview.fullscreen()
		main_preview.setNormalCamera()

		$('body').addClass('animation_mode')
		$('.m_edit').hide()
		if (!Animator.timeline_node) {
			Animator.timeline_node = $('#timeline').get(0)
		}
		$('#preview').append(Animator.timeline_node)
		updateInterface()
		if (!Timeline.is_setup) {
			Timeline.setup()
		}
		Timeline.update()
		if (outlines.children.length) {
			outlines.children.length = 0
			Canvas.updateAllPositions()
		}
		if (Animator.selected) {
			Animator.selected.select()
		}
		if (isApp && !Prop.animation_path && !Animator.animations.length && Prop.file_path) {
			//Load
			findBedrockAnimation()
		}
	},
	leave: function (argument) {
		Timeline.pause()
		Animator.open = false;
		Canvas.updateAllPositions()
		$('#timeline').detach()
		$('.m_edit').show()
		$('body').removeClass('animation_mode')
		resizeWindow()
		updateInterface()
		if (quad_previews.enabled_before) {
			openQuadView()
		}
	},
	preview: function() {
		if (Animator.selected) {
			Animator.selected.displayFrame(Timeline.second)
		}
	},
	loadFile: function(file) {
		var json = autoParseJSON(file.content)
		if (json && typeof json.animations === 'object') {
			for (var ani_name in json.animations) {
				//Animation
				var a = json.animations[ani_name]
				var animation = new Animation({
					name: ani_name,
					loop: a.loop,
					override: a.override_previous_animation,
					anim_time_update: a.anim_time_update,
					length: a.animation_length,
					blend_weight: a.blend_weight
				}).add()
				//Bones
				for (var bone_name in a.bones) {
					var b = a.bones[bone_name]
					var group = TreeElements.findRecursive('name', bone_name)
					if (group) {
						var ba = new BoneAnimator()
						animation.bones[group.uuid] = ba
						ba.uuid = group.uuid;
						//Channels
						for (var channel in b) {
							if (Animator.possible_channels[channel]) {
								if (typeof b[channel] === 'string' || typeof b[channel] === 'number' || (typeof b[channel] === 'object' && b[channel].constructor.name === 'Array')) {
									ba.addKeyframe(b[channel], 0, channel)
								} else if (typeof b[channel] === 'object') {
									for (var timestamp in b[channel]) {
										ba.addKeyframe(b[channel][timestamp], parseFloat(timestamp), channel)
									}
								}
							}
						}
					}
				}
				if (!Animator.selected) {
					animation.select()
				}
			}
			if (isApp && file.path) {
				Prop.animation_path = file.path
			}
		}
	},
	buildFile: function(options) {
		if (typeof options !== 'object') {
			options = {}
		}
		var animations = {}
		Animator.animations.forEach(function(a) {
			var ani_tag = animations[a.name] = {}
			if (a.loop) ani_tag.loop = true
			if (a.length) ani_tag.animation_length = a.length
			if (a.override) ani_tag.override = true
			if (a.anim_time_update) ani_tag.anim_time_update = a.anim_time_update
			ani_tag.bones = {}
			for (var uuid in a.bones) {
				var group = a.bones[uuid].getGroup()
				if (group && a.bones[uuid].keyframes.length) {

					var bone_tag = ani_tag.bones[group.name] = {}
					var channels = {}
					//Saving Keyframes
					a.bones[uuid].keyframes.forEach(function(kf) {
						if (!channels[kf.channel]) {
							channels[kf.channel] = {}
						}
						let timecode = trimFloatNumber(Math.round(kf.time*60)/60) + ''
						if (!timecode.includes('.')) {
							timecode = timecode + '.0'
						}
						channels[kf.channel][timecode] = kf.getArray()
					})
					//Sorting keyframes
					for (var channel in Animator.possible_channels) {
						if (channels[channel]) {
							let timecodes = Object.keys(channels[channel])
							if (timecodes.length === 1) {
								bone_tag[channel] = channels[channel][timecodes[0]]
							} else {
								timecodes.sort().forEach((time) => {
									if (!bone_tag[channel]) {
										bone_tag[channel] = {}
									}
									bone_tag[channel][time] = channels[channel][time]
								})
							}
						}
					}
				}
			}
		})
		return {
			format_version: '1.8.0',
			animations: animations
		}
	}
}
const Timeline = {
	keyframes: [],//frames
	selected: [],//frames
	second: 0,
	playing: false,
	setTime: function(seconds, editing) {
		seconds = limitNumber(seconds, 0, 1000)
		Timeline.vue._data.marker = seconds
		Timeline.second = seconds
		if (!editing) {
			Timeline.setTimecode(seconds)
		}
		Timeline.updateSize()
		//Scroll
		var scroll = $('#timeline_inner').scrollLeft()
		var marker = Timeline.second * Timeline.vue._data.size + 8
		if (marker < scroll || marker > scroll + $('#timeline_inner').width()) {
			$('#timeline_inner').scrollLeft(marker-16)
		}
	},
	setTimecode: function(time) {
		let m = Math.floor(time/60)
		let s = Math.floor(time%60)
		let f = Math.floor((time%1) * 30)
		if ((s+'').length === 1) {s = '0'+s}
		if ((f+'').length === 1) {f = '0'+f}
		$('#timeline_corner').text(m + ':' + s  + ':' + f)
	},
	setup: function() {
		/*
		$('#timeline_inner #timeline_marker').draggable({
			axis: 'x',
			distance: 2,
			start: function(event, ui) {
				Timeline.pause()
			},
			drag: function(event, ui) {
				var difference = (ui.position.left - ui.originalPosition.left) / Timeline.vue._data.size;
				Timeline.second = limitNumber(Timeline.vue._data.marker + difference, 0, 1000)
				Timeline.setTimecode(Timeline.second)
				Timeline.updateSize()
				if (Animator.selected) {
					Animator.preview() 
				}
			},
			stop: function(event, ui) {
				Timeline.setTime(Timeline.second)
			}
		})*/
		$('#timeline_inner #timeline_time').mousedown(e => {
			Timeline.dragging_marker = true;
			let time = e.offsetX / Timeline.vue._data.size
			Timeline.setTime(time)
			if (Animator.selected) {
				Animator.preview()
			}
		})
		$(document).mousemove(e => {
			if (Timeline.dragging_marker) {
				let offset = mouse_pos.x - $('#timeline_inner #timeline_time').offset().left
				let time = offset / Timeline.vue._data.size
				Timeline.setTime(time)
				Animator.preview()
			}
		})
		.mouseup(e => {
			if (Timeline.dragging_marker) {
				delete Timeline.dragging_marker
			}
		})
		//Keyframe inputs
		$('.keyframe_input').click(e => {
			Undo.initEdit({keyframes: Timeline.selected, keep_saved: true})
		}).focusout(e => {
			Undo.finishEdit('edit keyframe')
		})
		//Enter Time
		$('#timeline_corner').click(e => {
			if ($('#timeline_corner').attr('contenteditable') == 'true') return;

			$('#timeline_corner').attr('contenteditable', true).focus().select()
			var times = $('#timeline_corner').text().split(':')
			while (times.length < 3) {
				times.push('00')
			}
			var node = $('#timeline_corner').get(0).childNodes[0]
			var selection = window.getSelection();        
			var range = document.createRange();

			var sel = [0, node.length]
			if (e.offsetX < 24) {
				sel = [0, times[0].length]
			} else if (e.offsetX < 54) {
				sel = [times[0].length+1, times[1].length]
			} else if (e.offsetX < 80) {
				sel = [times[0].length+times[1].length+2, times[2].length]
			}
			sel[1] = limitNumber(sel[0]+sel[1], sel[0], node.length)

			range.setStart(node, sel[0])
			range.setEnd(node, sel[1])
			selection.removeAllRanges();
			selection.addRange(range);
		})
		.on('focusout keydown', e => {
			if (e.type === 'focusout' || Keybinds.extra.confirm.keybind.isTriggered(e) || Keybinds.extra.cancel.keybind.isTriggered(e)) {
				$('#timeline_corner').attr('contenteditable', false)
				Timeline.setTimecode(Timeline.second)
			}
		})
		.on('keyup', e => {
			var times = $('#timeline_corner').text().split(':')
			times.forEach((t, i) => {
				times[i] = parseInt(t)
				if (isNaN(times[i])) {
					times[i] = 0
				}
			})
			while (times.length < 3) {
				times.push(0)
			}
			var seconds
				= times[0]*60
				+ limitNumber(times[1], 0, 59)
				+ limitNumber(times[2]/30, 0, 29)
			if (Math.abs(seconds-Timeline.second) > 1e-3 ) {
				Timeline.setTime(seconds, true)
				if (Animator.selected) {
					Animator.preview()
				}
			}
		})

		Timeline.is_setup = true
		Timeline.setTime(0)
	},
	update: function() {
		//Draggable
		$('#timeline_inner .keyframe').draggable({
			axis: 'x',
			distance: 10,
			start: function(event, ui) {
				Undo.initEdit({keyframes: Timeline.keyframes, keep_saved: true})
				var id = $(ui.helper).attr('id')
				var i = 0;
				while (i < Timeline.vue._data.keyframes.length) {
					var kf = Timeline.vue._data.keyframes[i]
					if (kf.uuid === id || kf.selected) {
						kf.time_before = kf.time
					}
					i++;
				}
			},
			drag: function(event, ui) {
				var difference = (ui.position.left - ui.originalPosition.left - 8) / Timeline.vue._data.size;
				var id = $(ui.helper).attr('id')
				var snap_value = false
				var nearest
				var i = 0;
				while (i < Timeline.vue._data.keyframes.length) {
					var kf = Timeline.vue._data.keyframes[i]
					if (kf.uuid === id) {
						i = Infinity
						kf.time = limitNumber(kf.time_before + difference, 0, 256)
						nearest = kf.findNearest(8 / Timeline.vue._data.size, 'others')
					}
					i++;
				}
				if (nearest && nearest.length) {
					snap_value = nearest[0].time
					difference = snap_value - kf.time_before;
				}

				var i = 0;
				while (i < Timeline.vue._data.keyframes.length) {
					var kf = Timeline.vue._data.keyframes[i]
					if (kf.uuid === id || kf.selected) {
						var t = limitNumber(kf.time_before + difference, 0, 256)
						if (kf.uuid === id) {
							ui.position.left = t * Timeline.vue._data.size + 8
						}
						kf.time = t
					}
					i++;
				}
				BarItems.slider_keyframe_time.update()
				Animator.preview()
			},
			stop: function(event, ui) {
				var id = $(ui.helper).attr('id')
				var i = 0;
				while (i < Timeline.vue._data.keyframes.length) {
					var kf = Timeline.vue._data.keyframes[i]
					if (kf.uuid === id) {
						kf.dragging = true
					}
					i++;
				}
				Undo.finishEdit('drag keyframes')
			}
		})
	},
	updateSize: function() {
		let size = Timeline.vue._data.size
		var max_length = ($('#timeline_inner').width()-8) / Timeline.vue._data.size;
		Timeline.vue._data.keyframes.forEach((kf) => {
			max_length = Math.max(max_length, kf.time)
		})
		max_length = Math.max(max_length, Timeline.second)
		Timeline.vue._data.length = max_length
		Timeline.vue._data.timecodes.length = 0

		var step = 1
		if (size < 1) {step = 1}
		else if (size < 20) {step = 4}
		else if (size < 40) {step = 2}
		else if (size < 90) {step = 1}
		else if (size < 180) {step = 0.5}
		else if (size < 400) {step = 0.2}
		else if (size < 800) {step = 0.1}
		else {step = 0.05}


		var i = 0;
		while (i < Timeline.vue._data.length) {
			Timeline.vue._data.timecodes.push({
				time: i,
				text: Math.round(i*100)/100
			})
			i += step;
		}
	},
	unselect: function(e) {
		if (!Animator.selected) return;
		Timeline.keyframes.forEach((kf) => {
			if (kf.selected) {
				Timeline.selected.remove(kf)
			}
			kf.selected = false
		})
		updateKeyframeSelection()
	},
	start: function() {
		if (!Animator.selected) return;
		Animator.selected.getMaxLength()
		Timeline.pause()
		Timeline.playing = true
		BarItems.play_animation.setIcon('pause')
		Timeline.loop()
	},
	loop: function() {
		Animator.preview()
		if (Animator.selected && Timeline.second < (Animator.selected.length||1e3)) {
			Animator.interval = setTimeout(Timeline.loop, 16.66)
			Timeline.setTime(Timeline.second + 1/60)
		} else {
			Timeline.setTime(0)
			if (Animator.selected && Animator.selected.loop) {
				Timeline.start()
			} else {
				Timeline.pause()
			}
		}
	},
	pause: function() {
		Timeline.playing = false;
		BarItems.play_animation.setIcon('play_arrow')
		if (Animator.interval) {
			clearInterval(Animator.interval)
			Animator.interval = false
		}
	},
	addKeyframe: function(channel) {
		if (!Animator.selected) { 
			Blockbench.showQuickMessage('message.no_animation_selected')
			return
		}
		var bone = Animator.selected.getBoneAnimator()
		if (!bone) { 
			Blockbench.showQuickMessage('message.no_bone_selected')
			return
		}
		Undo.initEdit({keyframes: bone.keyframes, keep_saved: true})
		var kf = bone.addKeyframe(false, Timeline.second, channel?channel:'rotation')
		kf.select()
		Undo.finishEdit('add_keyframe')
		Vue.nextTick(Timeline.update)
	},
	showMenu: function(event) {
		if (event.target.id === 'timeline_inner') {
			Timeline.menu.open(event, event);
		}
	},
	menu: new Menu([
		{name: 'menu.timeline.add', icon: 'add', click: function(context) {
			var time = (context.offsetX+$('#timeline_inner').scrollLeft()-8) / Timeline.vue._data.size
			var row = Math.floor((context.offsetY-32) / 31 + 0.15)
			if (!Animator.selected) {
				Blockbench.showQuickMessage('message.no_animation_selected')
				return;
			}
			var bone = Animator.selected.getBoneAnimator()
			if (bone) {
				Undo.initEdit({keyframes: bone.keyframes, keep_saved: true})
				var kf = bone.addKeyframe(false, Math.round(time*30)/30, row === 2 ? 'scale' : (row === 1 ? 'position' : 'rotation'))
				kf.select().callMarker()
				Vue.nextTick(Timeline.update)
				Undo.finishEdit('add_keyframe')
			} else {
				Blockbench.showQuickMessage('message.no_bone_selected')
			}
		}}
	])
}

onVueSetup(function() {
	Animator.vue = new Vue({
		el: '#animations_list',
		data: {
			animations: Animator.animations
		}
	})
	Timeline.vue = new Vue({
		el: '#timeline_inner',
		data: {
			size: 150,
			length: 10,
			timecodes: [],
			keyframes: [],
			marker: Timeline.second
		}
	})
})

BARS.defineActions(function() {
	new Action({
		id: 'add_animation',
		icon: 'fa-plus-circle',
		category: 'animation',
		condition: () => Animator.open,
		click: function () {
			var animation = new Animation({
				name: 'animation.' + (Project.parent||'model') + '.new'
			}).add().select()

		}
	})
	new Action({
		id: 'load_animation_file',
		icon: 'fa-file-video-o',
		category: 'animation',
		condition: () => Animator.open,
		click: function () {
			var path = Prop.file_path
			if (isApp) {
				var exp = new RegExp(osfs.replace('\\', '\\\\')+'models'+osfs.replace('\\', '\\\\'))
				var m_index = path.search(exp)
				if (m_index > 3) {
					path = path.substr(0, m_index) + osfs + 'animations' + osfs + pathToName(Prop.file_path).replace(/\.geo/, '.animation')
				}
			}
			Blockbench.import({
				extensions: ['json'],
				type: 'JSON Animation',
				startpath: path
			}, function(files) {
				Animator.loadFile(files[0])
			})
		}
	})
	new Action({
		id: 'export_animation_file',
		icon: 'save',
		category: 'animation',
		condition: () => Animator.open,
		click: function () {
			var content = autoStringify(Animator.buildFile())
			var path = Prop.animation_path

			if (isApp && !path) {
				path = Prop.file_path
				var exp = new RegExp(osfs.replace('\\', '\\\\')+'models'+osfs.replace('\\', '\\\\'))
				var m_index = path.search(exp)
				if (m_index > 3) {
					path = path.substr(0, m_index) + osfs + 'animations' + osfs +  pathToName(Prop.file_path, true)
				}
			}
			Blockbench.export({
				type: 'JSON Animation',
				extensions: ['json'],
				name: Project.parent||'animation',
				startpath: path,
				content: content
			})

		}
	})
	new Action({
		id: 'play_animation',
		icon: 'play_arrow',
		category: 'animation',
		keybind: new Keybind({key: 32}),
		condition: () => Animator.open,
		click: function () {
			
			if (!Animator.selected) {
				Blockbench.showQuickMessage('message.no_animation_selected')
				return;
			}
			if (Timeline.playing) {
				Timeline.pause()
			} else {
				Timeline.start()
			}
		}
	})
	new NumSlider({
		id: 'slider_animation_length',
		category: 'animation',
		condition: () => Animator.open && Animator.selected,
		get: function() {
			return Animator.selected.length
		},
		change: function(value, fixed) {
			if (!fixed) {
				value += Animator.selected.length
			}
			Animator.selected.length = limitNumber(value, 0, 1e4)
		}
	})
	new NumSlider({
		id: 'slider_keyframe_time',
		category: 'animation',
		condition: () => Animator.open && Timeline.selected.length,
		get: function() {
			return Timeline.selected[0] ? Timeline.selected[0].time : 0
		},
		change: function(value, fixed) {
			Timeline.selected.forEach((kf) => {
				if (!fixed) {
					value += kf.time
				}
				kf.time = limitNumber(value, 0, 1e4)
			})
			Animator.preview()
		},
		onBefore: function() {
			Undo.initEdit({keyframes: Timeline.selected, keep_saved: true})
		},
		onAfter: function() {
			Undo.finishEdit('edit keyframe')
		}
	})
	new Action({
		id: 'select_all_keyframes',
		icon: 'select_all',
		category: 'animation',
		condition: () => Animator.open,
		keybind: new Keybind({key: 65, ctrl: true}),
		click: function () {selectAllKeyframes()}
	})
	new Action({
		id: 'delete_keyframes',
		icon: 'delete',
		category: 'animation',
		condition: () => Animator.open,
		keybind: new Keybind({key: 46}),
		click: function () {removeSelectedKeyframes()}
	})
})