var back_stage = new Kinetic.Stage({
	container: 'schematic_background',
	width: 1024,
	height: 768
});
var back_layer = new Kinetic.Layer();
var Images = {
	carets: 'js/app/schematics/NST/images/Carets-01.png',
	shifts: 'js/app/schematics/NST/images/Shifts-01.png',
	inlet_filter: 'js/app/schematics/NST/images/InletFilter-01.png',
	hydraulic_motor: 'js/app/schematics/NST/images/motor-01.png',
	grnStripe: 'js/app/schematics/NST/images/GreenStripe-01.png',
	compensator: 'js/app/schematics/NST/images/Compensator-01.png',
	handle: 'js/app/schematics/NST/images/LandingGearHandle-01.png',
	arrow: 'js/app/schematics/NST/images/WtArrow-01.png'
}

var imgCount = Object.keys(Images).length;
var i = 0;

for(var item in Images){
	window[item] = new Image();
	window[item].onload = function(){
		i = i + 1;
		if(i == imgCount){
			initAjax();
		}
	}
	window[item].src = Images[item];
}

Array.min = function( array ){
    return Math.min.apply( Math, array );
};
Array.max = function( array ){
    return Math.max.apply( Math, array );
};

function initAjax(){
	$.ajax({
		type: "GET",
		dataType: "xml",
		url: "js/app/schematics/NST/background.svg",
		success: function(xml){
			$(xml).find("g").each(function(){
				var id = $(this).attr("id");
				if(id == "LEGEND"){
					var legend_title = $(this).find("text").eq(0);
					var coords = legend_title.attr("transform");
					var matrix = coords.split(" ");
					var textX = parseInt(matrix[4]);
					var textY = matrix[5];
					textY = parseInt(textY.substr(0, textY.length - 1));
					var text = legend_title.text();

					var legend_text = new Kinetic.Text({
						x: textX,
						y: textY,
						text: text,
						fontSize: 16,
						fontFamily: 'Arial',
						fontStyle:'bold',
						fill: 'black'
					});

					back_layer.add(legend_text);


					$(this).find("rect").each(function(){
						var fill = $(this).attr("fill");
						var x = parseInt($(this).attr("x"));
						var y = parseInt($(this).attr("y"));
						var text = $(this).next().text();
						var legend_width = 150;
						var type = $(this).attr("id");
						
						
						var rect = new Kinetic.Rect({
							x:x,
							y:y+8,
							width:legend_width,
							height:30,
							fill:'#FFF',
							stroke:'#666',
							strokeWidth:1,
							cornerRadius:8
						});
						var text = new Kinetic.Text({
							x:x+5,
							y:y+10,
							text:text,
							width:legend_width-6,
							fontSize:12,
							fontFamily:'Arial',
							align:'center',
							fill:'black'
						})
						var line = new Kinetic.Rect({
							x:x+40,
							y:y+28,
							width:legend_width-80,
							height:5,
							fill:fill,
							stroke:'#000',
							strokeWidth:0.5
						})
						if(type == "stripe"){
							line.fill('')
							line.fillPatternImage(grnStripe);
						}
						back_layer.add(rect).add(text).add(line);
					})
				} else if(id == "SCHEMATIC"){
					$(this).find("rect").each(function(){
						var width = parseInt($(this).attr("width"));
						var height = parseInt($(this).attr("height"));
						var fill = $(this).attr("fill");
						var x = parseInt($(this).attr("x"));
						var y = parseInt($(this).attr("y"));
			
						var rect = new Kinetic.Rect({
							x: x,
							y: y,
							width: width,
							height: height,
							fill: fill
						});
						back_layer.add(rect);
					});

					$(this).find("line").each(function(){
						var type = $(this).attr("id");
						if(typeof type !== "undefined"){
							if(type.substr(0,4) == "thin"){
								type = "thin";
							}
						}

						var x1 = $(this).attr("x1");
						var y1 = $(this).attr("y1");
						var x2 = $(this).attr("x2");
						var y2 = $(this).attr("y2");
						var stroke = $(this).attr("stroke");
						var strokeW = 5;
						if(type == "thin"){
							strokeW = 1;
						}

						var line = new Kinetic.Line({
							points: [x1,y1,x2,y2],
							stroke: 'black',
							strokeWidth: strokeW
						});

						var innerLine = new Kinetic.Line({
							points: [x1,y1,x2,y2],
							stroke: stroke,
							strokeWidth: 3
						})				

						back_layer.add(line);
						if(type !== "thin"){
							back_layer.add(innerLine);
						}
						
					});
				
					$(this).find("polyline").each(function(){
						var points = $(this).attr("points").split(" ");
						var new_points = [];
						$.each(points,function(ind,item){
							if(item !== ""){
								var split_item = item.split(",");
								new_points.push(split_item[0],split_item[1]);
							}
						})
						var polyline = new Kinetic.Line({
							points: new_points,
							stroke: 'black',
							strokeWidth: 5
						});
						var innerPolyLine = new Kinetic.Line({
							points: new_points,
							stroke: 'white',
							strokeWidth: 3
						})
						back_layer.add(polyline);
						back_layer.add(innerPolyLine);
					});

					$(this).find("polygon").each(function(){
						var points = $(this).attr("points").split(" ");
						var new_points = [];
						$.each(points, function(ind,item){
							if(item !== ""){
								var split_item = item.split(",");
								new_points.push(split_item[0],split_item[1]);
							}
						})
						var polygon = new Kinetic.Line({
							points: new_points,
							closed: true,
							fill: 'black'
						})
						back_layer.add(polygon);
					})
		
					$(this).find("text").each(function(){						
						var coords = $(this).attr("transform");
						var matrix = coords.split(" ");
						var textX = parseInt(matrix[4]);
						var textY = matrix[5];
						textY = parseInt(textY.substr(0, textY.length - 1));
						
						var font = parseInt($(this).attr("font-size"));
						var tspan = $(this).find("tspan");
						var type = $(this).attr("id");
						//var rotation = parseInt(matrix[3]);
						var rotation = 0;
						var talign;						

						if(typeof $(this).attr("font-size") == "undefined"){
							font = parseInt(tspan.attr("font-size"));
						}
						
						if(typeof type !== "undefined"){
							if(type.substr(0,6) == "rotate"){
								textX = textX - 15;
								textY = textY + 5;
								type = "rotate";
							}
							if(type.substr(0,6) == "center"){
								talign = 'center';
							}
							if(type.substr(0,5) == "right"){
								talign = 'right';
							}
							if(type.substr(0,4) == "left"){
								talign = 'left';
							}
						}
						
						if(type === 'rotate'){
							rotation =  270;
						}

						var full_text = "";
						
						if(tspan.length > 0){
							var xDifs = [];
							var textWs = [];
							//approximate pixel width of 1 letter..
							var pixW = font - 2;

							tspan.each(function(i){
								var textW = $(this).text().length;
								var label = $(this).text();
								x = parseFloat($(this).attr("x"));
								xDifs.push(x);
								textWs.push(textW);
								if(i == tspan.length){
						 			//last one
						 			full_text += label
						 		}
								else{
						 			full_text += label+"\n"
						 		}
							});

							//find longest/shortest xDif
							var smallest = Array.min(xDifs);
							
							//adjust text box X position based on tspan x values
							textX = textX + smallest
						}
						else{
							full_text = $(this).text();
						}
						
						text = new Kinetic.Text({
							x: textX + 5,
							y: textY - 8,
							text: full_text,
							fontSize: font,
							fontFamily: 'Arial',
							fill: 'black',
							align: talign,
							rotation: rotation
						});
						
						back_layer.add(text);
					});
				}
			})

		},
		complete: function(){
			var lines = new Kinetic.Layer();
			var image_layer = new Kinetic.Layer();
			var red = "#FF0000";
			var green = "#009900";
			var width = 3;
			
			function drawImage(name, x, y, image, width, height){
				window[name] = new Kinetic.Image({
					x: x,		y: y,
					image: image,
					width: width, 	height: height,
					id:name
				});
			}
			function drawSprite(name, x, y, scaleX, scaleY, image, animation, white, red, green, pos1, pos2, pos3, pos4, pos5){
				window[name] = new Kinetic.Sprite({
					x: x, 	y: y,
					scaleX: scaleX, 	scaleY: scaleY,
					image: image,
					animation: animation,
					animations: {
						white: white,
						red: red,
						green: green,
						pos1: pos1,
						pos2: pos2,
						pos3: pos3,
						pos4: pos4,
						pos5: pos5
					},
					id:name
				});
			}
			function drawLine(name, points, fill, stroke, closed, strokeWidth){			
				window[name] = new Kinetic.Line({
					points: points,
					fill: fill,
					stroke: stroke,
					closed: closed,
					strokeWidth: strokeWidth,
					id: name
				});
				//var id = name;
				//console.log(id);
			}
			function drawRect(name, x, y, width, height, fill, stroke, scaleX, scaleY){
				window[name] = new Kinetic.Rect({
					x: x,
					y: y,
					width: width,
					height: height,
					fill: fill,
					stroke: stroke,
					fillPatternImage: grnStripe,
					fillPatternScaleX: scaleX,
					fillPatternScaleY: scaleY,
					id:name
				});
			}
			function drawBackground(){
				back_stage.add(back_layer);
				back_stage.add(lines);
				back_stage.add(image_layer);
			}
			
			drawSprite("caret1", 544, 242, 0.52, 0.52, carets, 'white', [13, 10, 44, 59], [55, 10, 44, 59]);
			drawSprite("caret2", 885, 68, 0.52, 0.52, carets, 'white', [13, 10, 44, 59]);
			drawSprite("caret3", 814, 393.5, 0.52, 0.52, carets, 'white', [13, 10, 44, 59]);
			drawSprite("caret4", 814, 483, 0.52, 0.52, carets, 'white', [13, 10, 44, 59]);
			drawSprite("caret5", 761, 210, 0.52, 0.52, carets, 'red', null, [159, 11, 44, 59]);
			drawSprite("ISV_Shift", 600, 221.5, 0.45, 0.47, shifts, 'pos1', null, null, null, [0, 0, 95, 220], [105, 0, 95, 220]);
			drawSprite("SOV1_Shift", 473.5, 135, 0.47, 0.47, shifts, 'pos1', null, null, null, [197, 0, 443, 92], [197, 104, 443, 92]);
			drawSprite("SCV_Shift", 418, 325, 0.45, 0.47, shifts, 'pos1', null, null, null, [700, 0, 479, 90], [700, 94, 479, 90], [700, 188, 479, 90], [700, 281, 479, 90]);
			drawSprite("SOV2_Shift", 274, 230, 0.52, 0.47, shifts, 'pos1', null, null, null, [1259, 0, 300, 90], [1259, 91, 300, 90], [1259, 195, 300, 90], [1259, 288, 300, 90]);
			drawSprite("WO_Shift", 545, 427.25, 0.52, 0.5, shifts, 'pos1', null, null, null, [1629, 0, 100, 245], [1734, 0, 100, 245], [1837, 0, 100, 245]);
			drawSprite("Compensator", 825, 136, 0.45, 0.45, compensator, 'white', [9, 9, 88, 146], null, [125, 9, 88, 146]);
			drawSprite("lgh", 937, 200, 0.55, 0.55, handle, 'pos1', null, null, null, [20, 0, 150, 195], [187, 0, 150, 195]);
			drawImage("filter", 811, 227, inlet_filter, 62, 62);
			drawImage("motor", 770, 417, hydraulic_motor, 148, 98);
			drawImage("whiteArrow", 895, 255, arrow, 25, 5);
			
			image_layer.add(caret1).add(caret2).add(caret3).add(caret4).add(caret5).add(ISV_Shift).add(SOV1_Shift).add(SCV_Shift).add(SOV2_Shift).add(WO_Shift).add(Compensator).add(lgh).add(filter).add(motor).add(whiteArrow);

			drawRect("WO_Box1", 557.5, 549, 19, 17, "#BBBDBF", "black");
			drawRect("WO_Box2", 567.5, 426, 19, 34, "#BBBDBF", "black");
			drawRect("WO_Box3", 567.5, 393, 19, 34, "#BBBDBF", "black");
			//drawRect("signal", 15, 683.35, 18, 18, "", "", 1, 15);
			drawLine("WO_Tri1", [567, 553, 563, 560, 571, 560], "black", "black", true);
			drawLine("WO_Tri2", [573, 440, 581, 440, 577, 446], "black", "black", true);
			drawLine("WO_Tri3", [573, 405, 581, 405, 577, 411], "black", "black", true);
			//Adds overlaying shapes to the layer
			lines.add(WO_Box1).add(WO_Box2).add(WO_Box3).add(WO_Tri1).add(WO_Tri2).add(WO_Tri3);
			
			drawLine("NST_R01", [938.4, 258.167, 868, 258.167], "", red, "", 3);
			drawLine("NST_R02", [816.367, 258.167, 640.383, 258.167, 770.833, 258.167, 770.833, 111.783, 621.283, 111.783, 621.283, 141.667], "", red, "", 3);
			drawRect("NST_R03a", 619.75, 177, 3, 25.5, "", "", 1.15, 1.15);
			drawLine("NST_R03", [621.283, 177.82, 621.283, 225.45], "", red, "", 3);
			drawLine("NST_R03b", [621.283, 177.82, 621.283, 225.45], "", "black", "", 5);
			drawLine("NST_R04", [604.267, 258.167, 604.267, 258.167], "", red, "", 3);
			drawLine("NST_R05", [549.1, 257.633, 549.1, 257.633], "", red, "", 3);
			drawLine("NST_R06", [504.233, 256.633, 504.233, 256.633], "", red, "", 3);
			drawLine("NST_R07", [582.817, 257.9, 582.817, 257.9], "", red, "", 3);
			drawLine("NST_R08", [582.817, 214.22, 582.817, 214.22], "", red, "", 3);
			drawLine("NST_R09", [380.033, 214.22, 380.033, 214.22], "", red, "", 3);
			drawLine("NST_R10", [477.5, 366, 477.5, 366], "", red, "", 3);
			drawLine("NST_R11", [477.5, 484.133, 477.5, 484.133], "", red, "", 3);
			drawRect("NST_R12", 378, 269, 3, 0, "", "", 1.15, 1.15);
			drawLine("NST_R12a", [379.42, 269.767, 379.42, 269.767], "", red, "", 3);
			drawRect("NST_R13", 379, 307, 0, 3, "", "", 0.75, 0.75);
			drawLine("NST_R13a", [379.42, 308.82, 379.42, 308.82], "", red, "", 3);
			drawRect("NST_R14", 343, 307, 3, 0, "", "", 1.15, 1.15);
			drawLine("NST_R14a", [344.73, 308.82, 344.73, 308.82], "", red, "", 3);
			drawRect("NST_R15", 343, 555.75, 0, 3, "", "", 0.75, 0.75);
			drawLine("NST_R15a", [344.73, 557.05, 344.73, 557.05], "", red, "", 3);
			drawLine("NST_R16", [588.37, 483.5, 588.37, 483.5], "", red, "", 3);
			drawLine("NST_R17", [646.6, 483.5, 646.6, 483.5], "", red, "", 3);
			drawLine("NST_R18", [646.6, 515, 646.6, 515], "", red, "", 3);
			drawLine("NST_R19", [804.33, 515, 804.33, 515], "", red, "", 3);
			drawLine("NST_R20", [804.33, 499.2, 804.33, 499.2], "", red, "", 3);
			drawLine("NST_R21", [601.05, 483, 601.05, 483], "", red, "", 3);
			drawLine("NST_R22", [601.05, 434.3, 601.05, 434.3], "", red, "", 3);
			//Adds each red line to the layer
			lines.add(NST_R01).add(NST_R02).add(NST_R03b).add(NST_R03).add(NST_R04).add(NST_R05).add(NST_R06).add(NST_R07).add(NST_R08).add(NST_R09).add(NST_R10).add(NST_R11).add(NST_R12).add(NST_R13).add(NST_R14).add(NST_R15).add(NST_R12a).add(NST_R13a).add(NST_R14a).add(NST_R15a).add(NST_R16).add(NST_R17).add(NST_R18).add(NST_R19).add(NST_R20).add(NST_R21).add(NST_R22);
			
			drawLine("NST_G01", [597.433, 141.667, 597.433, 141.667], "", green, "", 3);
			drawLine("NST_G02", [597.433, 111.267, 597.433, 111.267], "", green, "", 3);
			drawLine("NST_G03", [475.433, 111.267, 475.433, 111.267], "", green, "", 3);
			drawLine("NST_G04", [362.467, 111.267, 362.467, 111.267], "", green, "", 3);		
			drawLine("NST_G05", [208.8, 111.267, 208.8, 111.267], "", green, "", 3);
			drawLine("NST_G06", [191.217, 111.267, 191.217, 111.267], "", green, "", 3);
			drawLine("NST_G07", [191.217, 586.083, 191.217, 586.083], "", green, "", 3);
			drawLine("NST_G08", [645.017, 586.083, 645.017, 586.083], "", green, "", 3);
			drawLine("NST_G09", [645.017, 534.783, 645.017, 534.783], "", green, "", 3);
			drawLine("NST_G10", [866.617, 534.783, 866.617, 534.783], "", green, "", 3);
			drawLine("NST_G11", [866.617, 515.417, 866.617, 515.417], "", green, "", 3);
			drawLine("NST_G12", [849.25, 499.2, 849.25, 499.2], "", green, "", 3);
			drawLine("NST_G13", [849.25, 499.2, 849.25, 499.2], "", green, "", 3);
			drawLine("NST_G14", [849.25, 409.683, 849.25, 409.683], "", green, "", 3);
			drawLine("NST_G15", [360.033, 111.267, 360.033, 111.267], "", green, "", 3);
			drawLine("NST_G16", [360.033, 111.267, 360.033, 111.267], "", green, "", 3);
			drawLine("NST_G17", [360.033, 84.383, 360.033, 84.383], "", green, "", 3);
			drawLine("NST_G18", [209.8, 84.383, 209.8, 84.383], "", green, "", 3);
			drawLine("NST_G19", [209.8, 577.7, 209.8, 577.7], "", green, "", 3);
			drawLine("NST_G20", [566.5, 577.7, 566.5, 577.7], "", green, "", 3);
			drawLine("NST_G21", [566.5, 577.7, 566.5, 577.7], "", green, "", 3);
			drawLine("NST_G22", [611, 577.7, 611, 577.7], "", green, "", 3);
			drawLine("NST_G23", [611, 498.667, 611, 498.667], "", green, "", 3);
			drawLine("NST_G24", [360.033, 84.383, 360.033, 84.383], "", green, "", 3);
			drawLine("NST_G25", [478.05, 84.383, 478.05, 84.383], "", green, "", 3);
			drawLine("NST_G26", [793.083, 84.383, 793.083, 84.383], "", green, "", 3);
			drawLine("NST_G27", [793.083, 377.233, 793.083, 377.233], "", green, "", 3);
			drawLine("NST_G28", [576, 377.233, 576, 377.233], "", green, "", 3);
			drawLine("NST_G29", [793.083, 84.383, 793.083, 84.383], "", green, "", 3);
			drawLine("NST_G30", [843.32, 84.383, 843.32, 84.383], "", green, "", 3);
			drawLine("NST_G31", [843.32, 120.5, 843.32, 120.5], "", green, "", 3);
			drawLine("NST_G32", [478.05, 84.383, 478.05, 84.383], "", green, "", 3);
			drawLine("NST_G33", [504.233, 366, 504.233, 366], "", green, "", 3);
			drawLine("NST_G34", [504.233, 466.15, 504.233, 466.15], "", green, "", 3);
			drawLine("NST_G35", [587.37, 467.27, 587.37, 467.27], "", green, "", 3);
			drawLine("NST_G36", [646.07, 467.27, 646.07, 467.27], "", green, "", 3);
			drawLine("NST_G37", [646.07, 394.52, 646.07, 394.52], "", green, "", 3);
			drawLine("NST_G38", [804.43, 394.52, 804.43, 394.52], "", green, "", 3);
			drawLine("NST_G39", [803.4, 409.7, 803.4, 409.7], "", green, "", 3);
			drawLine("NST_G40", [622.52, 467.8, 622.52, 467.8], "", green, "", 3);
			drawLine("NST_G41", [622.52, 403.42, 622.52, 403.42], "", green, "", 3);
			//Adds each green line to the layer
			lines.add(NST_G01).add(NST_G02).add(NST_G03).add(NST_G04).add(NST_G05).add(NST_G06).add(NST_G07).add(NST_G08).add(NST_G09).add(NST_G10).add(NST_G11).add(NST_G12).add(NST_G13).add(NST_G14).add(NST_G15).add(NST_G16).add(NST_G17).add(NST_G18).add(NST_G19).add(NST_G20).add(NST_G21).add(NST_G22).add(NST_G23).add(NST_G24).add(NST_G25).add(NST_G26).add(NST_G27).add(NST_G28).add(NST_G29).add(NST_G30).add(NST_G31).add(NST_G32).add(NST_G33).add(NST_G34).add(NST_G35).add(NST_G36).add(NST_G37).add(NST_G38).add(NST_G39).add(NST_G40).add(NST_G41);
		
			drawBackground();

			var init = new TimelineLite({onUpdate:updateSlider});
			var sov1 = new TimelineLite();
			var sov1a = new TimelineLite();
			var start = new TimelineLite();
			var ISV_delay = new TimelineLite();
			var sov2 = new TimelineLite();
			var sov1b = new TimelineLite();
			var comp = new TimelineLite();
			var compa = new TimelineLite();
			var scv = new TimelineLite();
			var scv1 = new TimelineLite();
			var scv1a = new TimelineLite();
			var scv2 = new TimelineLite();
			var hm = new TimelineLite();
			var hm1 = new TimelineLite();
			var boxes = new TimelineLite();
			
			init.to(ISV_Shift, 1, {kinetic:{y: 198}, ease: Power0.easeInOut,				
				   onComplete: function(){
					ISV_Shift.animation('pos2');
				   },
				   onReverseComplete: function(){
					   ISV_Shift.animation('pos1');
					   lgh.animation('pos1');
				   }})
				.to(NST_R03, 1.1, {kinetic:{points: [621.283, 177.817, 621.283, 201.45]}, ease: Power0.easeInOut,
					onComplete: function(){
						lines.add(NST_R03a);
						NST_R03.stroke('none');
					},
					onReverseComplete: function(){
						lines.add(NST_R03);
						NST_R03.stroke(red);
					}}, 0)
				.to(NST_R03b, 1.1, {kinetic:{points: [621.283, 177.82, 621.283, 201.45]}, ease: Power0.easeInOut,
					onComplete: function(){
						NST_R03b.stroke('none');
					},
					onReverseComplete: function(){
						NST_R03b.stroke('black');
					}
				}, 0)
				.append(sov1).append(start).append(ISV_delay);
				
			start.to(NST_R04, 0.75, {kinetic:{points: [604.267, 258.167, 563.967, 258.167]}, ease: Power0.easeInOut})
				.set(caret1, {kinetic:{},
					onComplete: function(){
						caret1.animation('red');
					},
					onReverseComplete: function(){
						caret1.animation('white');
					}})
				
				.to(NST_R05, 0.75, {kinetic:{points: [549.1, 257.633, 503.233, 257.633]}, ease: Power0.easeInOut})
				.to(NST_R06, 1, {kinetic:{points: [504.233, 257.633, 504.233, 330.883]}, ease: Power0.easeInOut})
					.set(SCV_Shift, {kinetic:{},
						onComplete: function(){
							SCV_Shift.animation('pos2');
						},
						onReverseComplete: function(){
							SCV_Shift.animation('pos1');
						}
					});
			
			ISV_delay.to(NST_R07, 0.75, {kinetic:{points: [582.817, 257.9, 582.817, 213.22]}, ease: Power0.easeInOut}, 0.5)
				.to(NST_R08, 1.75, {kinetic:{points: [582.817, 214.22, 379.033, 214.22]}, ease: Power0.easeInOut})
				.to(NST_R09, 0.25, {kinetic:{points: [380.033, 214.22, 380.033, 236.4]}, ease: Power0.easeInOut})
					.set(SOV2_Shift, {kinetic:{},
						onComplete: function(){
							SOV2_Shift.animation('pos3');
						},
						onReverseComplete: function(){
							SOV2_Shift.animation('pos2');
						}
					});
				
			init.to(SOV1_Shift, 1, {kinetic:{x: 516}, ease: Power0.easeInOut,
				onComplete: function(){
					SOV1_Shift.animation('pos2');
				},
				onReverseComplete: function(){
					SOV1_Shift.animation('pos1');
				}}, 0);
				
			sov1.to(NST_G01, 0.25, {kinetic:{points: [597.433, 141.667, 597.433, 110.267]}, ease: Power0.easeInOut})
				.to(NST_G02, 0.75, {kinetic:{points: [597.433, 111.267, 480.333, 111.267]}, ease: Power0.easeInOut})
				.to(NST_G03, 0.75, {kinetic:{points: [475.433, 111.267, 362.467, 111.267]}, ease: Power0.easeInOut})
				.append(sov1a).append(sov1b)
				.to(NST_G04, 0.75, {kinetic:{points: [362.467, 111.267, 212.467, 111.267]}, ease: Power0.easeInOut})
				.to(NST_G05, 0.25, {kinetic:{points: [208.8, 111.267, 190.217, 111.267]}, ease: Power0.easeInOut})
				.to(NST_G06, 2, {kinetic:{points: [191.217, 111.267, 191.217, 587.083]}, ease: Power0.easeInOut})
				.to(NST_G07, 2, {kinetic:{points: [191.217, 586.083, 646.017, 586.083]}, ease: Power0.easeInOut})
				.to(NST_G08, 0.5, {kinetic:{points: [645.017, 586.083, 645.017, 533.783]}, ease: Power0.easeInOut})
				.to(NST_G09, 1.25, {kinetic:{points: [645.017, 534.783, 867.617, 534.783]}, ease: Power0.easeInOut})
				.to(NST_G10, 0.25, {kinetic:{points: [866.617, 534.783, 866.617, 514.417]}, ease: Power0.easeInOut})
				.to(NST_G11, 0.25, {kinetic:{points: [866.617, 515.417, 849.25, 499.2]}, ease: Power0.easeInOut})
				.to(NST_G12, 0.2, {kinetic:{points: [849.25, 499.2, 832.483, 499.2]}, ease: Power0.easeInOut})
				.to(NST_G13, 0.5, {kinetic:{points: [849.25, 499.2, 849.25, 407.683]}, ease: Power0.easeInOut})
				.to(NST_G14, 0.2, {kinetic:{points: [849.25, 409.683, 834.167, 409.683]}, ease: Power0.easeInOut});
				
			sov1a.to(NST_G15, 0.75, {kinetic:{points: [360.033, 111.267, 360.033, 236.067]}, ease: Power0.easeInOut})
				.set(SOV2_Shift, {kinetic:{},
					onComplete: function(){
						SOV2_Shift.animation('pos2');
					},
					onReverseComplete: function(){
						SOV2_Shift.animation('pos1');
					}})
				.append(sov2);
				
			sov1b.to(NST_G16, 0.25, {kinetic:{points: [360.033, 111.267, 360.033, 83.383]}, ease: Power0.easeInOut})
				.append(comp)
				.to(NST_G17, 1.5, {kinetic:{points: [360.033, 84.383, 208.8, 84.383]}, ease: Power0.easeInOut})
				.to(NST_G18, 3.5, {kinetic:{points: [209.8, 84.383, 209.8, 578.7]}, ease: Power0.easeInOut})
				.to(NST_G19, 2.5, {kinetic:{points: [209.8, 577.7, 567.5, 577.7]}, ease: Power0.easeInOut})
				.to(NST_G20, 0.2, {kinetic:{points: [566.5, 577.7, 566.5, 565.15]}, ease: Power0.easeInOut}, 7.7)
				.to(NST_G21, 0.5, {kinetic:{points: [566.5, 577.7, 612, 577.7]}, ease: Power0.easeInOut}, 7.7)
				.to(NST_G22, 0.75, {kinetic:{points: [611, 577.7, 611, 497.667]}, ease: Power0.easeInOut})
				.to(NST_G23, 0.25, {kinetic:{points: [611, 498.667, 590.467, 498.667]}, ease: Power0.easeInOut});			
				
			comp.to(NST_G24, 1, {kinetic:{points: [360.033, 84.383, 479.05, 84.383]}, ease: Power0.easeInOut})
				.append(scv)
				.to(NST_G25, 2.25, {kinetic:{points: [478.05, 84.383, 794.083, 84.383]}, ease: Power0.easeInOut})
				.append(compa)
				.to(NST_G26, 2, {kinetic:{points: [793.083, 84.383, 793.083, 378.233]}, ease: Power0.easeInOut})
				.to(NST_G27, 1.5, {kinetic:{points: [793.083, 377.233, 575, 377.233]}, ease: Power0.easeInOut})
				.to(NST_G28, .25, {kinetic:{points: [576, 377.233, 576, 392]}, ease: Power0.easeInOut});
				
			compa.to(NST_G29, 1, {kinetic:{points: [793.083, 84.383, 890.68, 84.383]}, ease: Power0.easeInOut})
				.to(NST_G30, 0.75, {kinetic:{points: [843.32, 84.383, 843.32, 137]}, ease: Power0.easeInOut}, 0.5)
					.set(Compensator, {kinetic:{},
						 onComplete: function(){
							 Compensator.animation('green');
						 },
						 onReverseComplete: function(){
							 Compensator.animation('white');
						 }
					})
				.to(NST_G31, 0.2, {kinetic:{points: [843.32, 120.5, 854.4, 120.5]}, ease: Power0.easeInOut}, 1);
				
			scv.to(NST_G32, 2.5, {kinetic:{points: [478.05, 84.383, 478.05, 332.02]}, ease: Power0.easeInOut})
				.set(SCV_Shift, {kinetic:{},
					onComplete: function(){
						SCV_Shift.animation('pos3');
					},
					onReverseComplete: function(){
						SCV_Shift.animation('pos2');
					}
				})
			.to(SCV_Shift, 1, {kinetic:{x: 461}, ease: Power0.easeInOut})
				.set(SCV_Shift, {kinetic:{},
					onComplete: function(){
						SCV_Shift.animation('pos1');
					},
					onReverseComplete: function(){
						SCV_Shift.animation('pos3');
					}
				})
			.to(SCV_Shift, 1, {kinetic:{x: 380}, ease: Power0.easeInOut}, 4.25)
				.set(SCV_Shift, {kinetic:{},
					onComplete: function(){
						SCV_Shift.animation('pos4');
					},
					onReverseComplete: function(){
						SCV_Shift.animation('pos1');
					}
				})
			.append(scv1)
			.to(NST_R10, 1, {kinetic:{points: [477.5, 366, 477.5, 485.133]}, ease: Power0.easeInOut})
			.to(NST_R11, 1, {kinetic:{points: [477.5, 484.133, 548.72, 484.133]}, ease: Power0.easeInOut})
				.set(WO_Shift, {kinetic:{},
					onComplete: function(){
						WO_Shift.animation('pos2');
					},
					onReverseComplete: function(){
						WO_Shift.animation('pos1');
					}
				})
			.to(SCV_Shift, 1, {kinetic:{x: 418}, ease: Power0.easeInOut})
				.set(SCV_Shift, {kinetic:{},
					onComplete: function(){
						SCV_Shift.animation('pos3');
						WO_Shift.animation('pos1');
					},
					onReverseComplete: function(){
						SCV_Shift.animation('pos4');
						WO_Shift.animation('pos2');
					}
				})
			.to(NST_R11, 0, {kinetic:{points: [477.5, 484.133, 477.5, 484.133]}, ease: Power4})
			.to(NST_R10, 0, {kinetic:{points: [477.5, 366, 477.5, 366]}, ease: Power4})
			.to(NST_G33, 0, {kinetic:{points: [504.233, 365, 504.233, 366]}, ease: Power4})
			.to(NST_G34, 0, {kinetic:{points: [504.233, 466.15, 504.233, 466.15]}, ease: Power4})
			.to(NST_R12, 0, {kinetic:{height: 0}, ease: Power4})
			.to(NST_R13, 0, {kinetic:{width: 0}, ease: Power4})
			.to(NST_R14, 0, {kinetic:{height: 0}, ease: Power4})
			.to(NST_R15, 0, {kinetic:{width: 0}, ease: Power4})
			.to(SOV2_Shift, 1, {kinetic:{x: 313}, ease: Power0.easeInOut})	
				.set(SOV2_Shift, {kinetic:{},
					onComplete: function(){
						SOV2_Shift.animation('pos4');
					},
					onReverseComplete: function(){
						SOV2_Shift.animation('pos3');
					}
				})
			.to(NST_R12a, 0.75, {kinetic:{points: [379.42, 269.767, 379.42, 309.82]}, ease: Power0.easeInOut})
			.append(scv2)
			.to(NST_R13a, 0.75, {kinetic:{points: [379.42, 308.82, 343.73, 308.82]}, ease: Power0.easeInOut})
			.to(NST_R14a, 2, {kinetic:{points: [344.73, 308.82, 344.73, 558.05]}, ease: Power0.easeInOut})
			.to(NST_R15a, 2, {kinetic:{points: [344.73, 557.05, 556.6, 557.05]}, ease: Power0.easeInOut})
			.append(boxes)
			.to(WO_Shift, 1, {kinetic:{y: 379, scaleY: 0.51}, ease: Power0.easeInOut})
				.set(SCV_Shift, {kinetic:{},
					onComplete: function(){
						SCV_Shift.animation('pos4');
					},
					onReverseComplete: function(){
						SCV_Shift.animation('pos1');
					}
				})
			.append(scv1a)
			.to(NST_R10, 1, {kinetic:{points: [477.5, 366, 477.5, 485.133]}, ease: Power0.easeInOut})
			.to(NST_R11, 1, {kinetic:{points: [477.5, 484.133, 548.72, 484.133]}, ease: Power0.easeInOut})
				.set(WO_Shift, {kinetic:{},
					onComplete: function(){
						WO_Shift.animation('pos3');
					},
					onReverseComplete: function(){
						WO_Shift.animation('pos1');
					}
				})
			.append(hm)
			.append(hm1)	
			
			scv1.to(NST_G33, 1, {kinetic:{points: [504.233, 366, 504.233, 467.15]}, ease: Power0.easeInOut})
				.to(NST_G34, 1, {kinetic:{points: [504.233, 466.15, 548.62, 466.15]}, ease: Power0.easeInOut})
			
			scv1a.to(NST_G33, 1, {kinetic:{points: [504.233, 366, 504.233, 467.15]}, ease: Power0.easeInOut})
				.to(NST_G34, 1, {kinetic:{points: [504.233, 466.15, 548.62, 466.15]}, ease: Power0.easeInOut})
	
			scv2.to(SCV_Shift, 1, {kinetic:{x: 380}, ease: Power0.easeInOut}, 2)
				.set(SCV_Shift, {kinetic:{},
					onComplete: function(){
						SCV_Shift.animation('pos1')
					},
					onReverseComplete: function(){
						SCV_Shift.animation('pos3');
					}
				})
				
			sov2.to(NST_R12, 0.5, {kinetic:{height: 40}, ease: Power0.easeInOut})
				.to(NST_R13, 0.25, {kinetic:{width: -35}, ease: Power0.easeInOut})
				.to(NST_R14, 1.75, {kinetic:{height: 252}, ease: Power0.easeInOut})
				.to(NST_R15, 1.25, {kinetic:{width: 214}, ease: Power0.easeInOut});
																	
			hm.to(NST_G35, 1, {kinetic:{points:[587.37, 467.27, 647.07, 467.27]}, ease: Power0.easeInOut})							
				.to(NST_G36, 1.5, {kinetic:{points:[646.07, 467.27, 646.07, 393.52]}, ease: Power0.easeInOut})
				.to(NST_G37, 1.75, {kinetic:{points:[646.07, 394.52, 805.43, 394.52]}, ease: Power0.easeInOut})
				.to(NST_G38, 0.5, {kinetic:{points:[804.43, 394.52, 804.43, 421.32]}, ease: Power0.easeInOut})
				.to(NST_G39, 0.2, {kinetic:{points: [803.4, 409.7, 819.07, 409.7]}, ease: Power0.easeInOut}, 4.5)
				.to(NST_G40, 1, {kinetic:{points: [622.52, 467.8, 622.52, 402.42]}, ease: Power0.easeInOut}, 0.5)
				.to(NST_G41, 0.75, {kinetic:{points: [622.52, 403.42, 586.83, 403.42]}, ease: Power0.easeInOut}, 1.5)
				
			hm1.to(NST_R16, 1, {kinetic:{points: [588.37, 483.5, 647.6, 483.5]}, ease: Power0.easeInOut}, 0)
				.to(NST_R17, 1.5, {kinetic:{points: [646.6, 483.5, 646.6, 516]}, ease: Power0.easeInOut})
				.to(NST_R18, 1.75, {kinetic:{points: [646.6, 515, 805.33, 515]}, ease: Power0.easeInOut})
				.to(NST_R19, 0.5, {kinetic:{points: [804.33, 515, 804.33, 485.067]}, ease: Power0.easeInOut})
				.to(NST_R20, 0.2, {kinetic:{points: [804.33, 499.2, 818.7, 499.2]}, ease: Power0.easeInOut}, 4.5)
				.to(NST_R21, 1, {kinetic:{points: [601.05, 483, 601.05, 433.3]}, ease: Power0.easeInOut}, 0.15)
				.to(NST_R22, 0.2, {kinetic:{points: [601.05, 434.3, 590.83, 434.3]}, ease: Power0.easeInOut}, 1.13)
				
			boxes.to(WO_Box1, 1, {kinetic:{y: 503, height: 62}, ease: Power0.easeInOut})
				.to(WO_Box2, 1, {kinetic:{y: 395, height: 17}, ease: Power0.easeInOut}, 0)
				.to(WO_Box3, 1, {kinetic:{y: 382, height: 16}, ease: Power0.easeInOut}, 0)
				.to(NST_G28, 1, {kinetic:{points: [576, 377.233, 576, 381.5]}, ease: Power0.easeInOut}, 0)
				.to(WO_Tri2, 1, {kinetic:{y: -38}, ease: Power0.easeInOut}, 0)
				.to(WO_Tri3, 1, {kinetic:{y: -18}, ease: Power0.easeInOut}, 0);

			var playBtn = $("#schem_play");
				rewindBtn = $("#schem_rewind");
				forwardBtn = $("#schem_forward");
				pauseBtn = $("#schem_pause");
				
			$("#schematic_slider").slider({
				range: false,
				min: 0,
				max: 100,
				step:0.1,
				value:0,
				slide: function ( event, ui ) {
					init.progress( ui.value/100 ).pause();
				}
			});          
			function updateSlider() {
				$("#schematic_slider").slider("value", init.progress() *100);
			} 
			init.pause();
			lgh.on("click touchstart", function(ev){
				lgh.animation('pos2');
				init.timeScale(0.6).play();
				ev.preventDefault();
			});
			playBtn.on("vclick", function(ev){
				lgh.animation('pos2');
				init.timeScale(0.6).play();
				ev.preventDefault();
			});
			rewindBtn.on("vclick", function(ev){
				init.timeScale(1.8).reverse();
				ev.preventDefault();
			});
			forwardBtn.on("vclick", function(ev){
				init.timeScale(1.8).play();
				ev.preventDefault();
			});
			pauseBtn.on("vclick", function(ev){
				init.pause();
				ev.preventDefault();
			});

			var itemData = {
				SOV1_Shift: {
					title:"SOV 1 Normal Open"
				},
				SOV2_Shift: {
					title:"SOV 2 Normal Closed"
				},
				ISV_Shift : {
					title:"Inlet Shutoff Valve"
				},
				SCV_Shift: {
					title:"Servo Control Valve"
				},
				WO_Shift: {
					title:"Bypass Relief Damping Valve"
				},
				motor: {
					title:"Hydraulic Motor"
				},
				filter: {
					title:"Inlet Filter"
				},
				lgh: {
					title:"Landing Gear Handle"
				},
				Compensator: {
					title:"Compensator"
				}
			}

			back_stage.on("click touchstart", function(ev){
				var tar = ev.targetNode;
				drawCallout(tar.getId(),ev);
				//print ID to console for development
				console.log(tar.getId());
			})

			function drawCallout(item,ev){
				$(".callout").remove();

				if(item in itemData){
					var item_data = itemData[item];
					var title = item_data.title;
					var x = ev.pageX+5;
					var y = ev.pageY+5;

					if(x+155 > window.innerWidth){
						x = x-150;
					}

					$("#schematic_load").append("<div class='callout' style='top:"+y+"px;left:"+x+"px'>"+title+"</div>");					
				}
			}
		}
	});

	$("#schema