//ADD THE 'RECCOMENDED' ARRAY OF COURSES TO THE OG CLUSTERDATA FUNCTION RATHER THAN AS ITS OWN FUNCTION //NICE COLOR FOR PATHWAYS: #00ACD2 ...... ALSO COOL COLORS ARE #D2007B, #A000D2 //GET THE CLUSTER-TOOLTIP WORKING CORRECTLY AFTER THE PLACING ALGORITHM IS FIGURED OUT $(document).ready(function(){ // threejs var camera, scene, renderer, geometry, material, sphere; // kineticjs var stage, layer3D, layerGUI, layerBG; var animating = true; var clusterLabels = []; var runAnimation = true; var tooltipLayer, tooltip, clusterTooltip, courseTooltip; var clTtWidth, clTtHeight, coTtWidth, coTtHeight; var amplitude; var period = 6700*3;//2; // in ms var centerX, centerY; var cAmp; var anim, popAnim, popFromBoxAnim, popToBoxAnim; var hexagon; var gui, sphereControls, sphereFolder, clusterFolder, pathwayControls, pathFolder, courseControls, courseFolder, helixControls, helixFolder; var rotationSpeed = 0.02; var examining = false, atHome = true, clusterView; var cmds = []; var userPathway = {}, courseDown = "", courseUp = ""; var maxMatches = 10; var progressBar; //var reccomendedPath; function init() { //alert("check 0"); initUser(); setUpSphere(); //alert("check 0.5"); layerGUI = new Kinetic.Layer(); layerBG = new Kinetic.Layer(); amplitude = stage.getWidth() * (5.0/16.0); //alert("check 1"); centerX = stage.getWidth() / 2; centerY = stage.getHeight() / 2; addTwoOG(); addBigRecButton(); setUpTooltip(); //alert("check 2"); setUpClusterTooltip(); setUpCourseTooltip(); setUpProgressBar(); //alert("check 3"); //addHexagon(); addClusters(); //alert("check 4"); //popularityAnim(); setUpAnim(); anim.start(); //alert("check 5"); /* var circle1 = new Kinetic.Circle({ x: stage.getWidth()/2, y: stage.getHeight()/2, radius: 35, fill: '#F71BC4', stroke: 'black', strokeWidth: 4, opacity: 0.75, scale: 1, }); layerGUI.add(circle1); */ stage.on('mouseout', function() { tooltip.hide(); tooltipLayer.draw(); //courseDown = ""; //courseUp = ""; }); //stage.on('mouseup touchend', function() { //courseDown = ""; //courseUp = ""; //}); //stage.on('mousedown touchstart', function() { //courseDown = ""; //courseUp = ""; //}); stage.add(layerBG); stage.add(layer3D); stage.add(layerGUI); stage.add(tooltipLayer); createBoxGUI(); } function initUser() { userPathway.courses = []; userPathway.selected = []; } function setUpSphere() { //alert('s start'); stage = new Kinetic.Stage({ container: "container", width: 1000, height: 800 }); //alert('s1'); layer3D = new Kinetic.Layer(); scene = new THREE.Scene(); //alert('s2'); //alert("1"); /* var element = layer3D.getCanvas().getElement(); renderer = new THREE.CanvasRenderer({canvas: element}); renderer.setSize(stage.getWidth(), stage.getHeight()); */ var container = $('#container2'); //alert("s2.1"); renderer = new THREE.WebGLRenderer(); //alert("s2.2"); renderer.setSize(container.width(), container.height()); //alert("s2.3"); container.append(renderer.domElement); //alert("s2.4"); //alert('s3'); camera = new THREE.PerspectiveCamera(75, container.width() / container.height(), 1, 10000); camera.position.z = container.width(); scene.add(camera); //alert("2"); /* var texture = THREE.ImageUtils.loadTexture('globe.png', {}, function() { renderer.render(scene); }); */ /* var texture = THREE.ImageUtils.loadTexture('http://sep.stanford.edu/sep/jfisk/INE3/Globe_flat_grid_lilycli.jpg', {}, function() { renderer.render(scene); }); texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping; texture.repeat.set( 125, 125 ); texture.offset.set( 15, 15 ); texture.needsUpdate = true; */ /* var texture = new THREE.Texture('globe.png'); texture.needsUpdate = true; */ /* var texture = THREE.ImageUtils.loadTexture('globe.png', {}, function(){ renderer.render(scene, camera); }); texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping; texture.repeat.set( 125, 125 ); texture.offset.set( 15, 15 ); texture.needsUpdate = true; */ //alert('s mid'); var texture = THREE.ImageUtils.loadTexture('http://sep.stanford.edu/sep/jfisk/INE3/globe.jpg', {}, function(){ renderer.render(scene, camera); }); texture.needsUpdate = true; //geometry = new THREE.CubeGeometry(200, 200, 200); //material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); //alert(stage.getWidth() * (3.25/6.0)); geometry = new THREE.SphereGeometry(510, 50, 50); //material = new THREE.MeshBasicMaterial({ color: '#FFCC00', wireframe: true, wireframeLinewidth: 1 }); //material = new THREE.MeshNormalMaterial(); material = new THREE.MeshBasicMaterial({map: texture}); /* material = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture('http://www.html5canvastutorials.com/demos/assets/crate.jpg') }); */ sphere = new THREE.Mesh(geometry, material); sphere.overdraw = true; sphere.rotation.x += 0.7; //sphere.position.x -= 210; //sphere.position.y -= 75; scene.add(sphere); //alert("3"); var pointLight = new THREE.PointLight( 0xFFFFFF ); // set its position pointLight.position.x = 10; pointLight.position.y = 50; pointLight.position.z = 130; // add to the scene scene.add(pointLight); renderer.render(scene, camera); requestAnimationFrame(render); //alert('s final'); //alert("4"); /* var layer = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function() { var yoda = new Kinetic.Image({ x: 200, y: 50, image: imageObj //width: 106, //height: 118 }); // add the shape to the layer layer.add(yoda); // add the layer to the stage stage.add(layer); }; imageObj.src = 'http://stemkoski.github.io/Three.js/images/moon.jpg'; */ /* var moonGeom = new THREE.SphereGeometry( 40, 32, 16 ); // basic moon var moonTex = new THREE.Texture(layer.getCanvas().toDataURL()); moonTex.wrapS = THREE.RepeatWrapping; moonTex.wrapT = THREE.RepeatWrapping; moonTex.repeat.set( 4, 4 ); var moonTexture = THREE.ImageUtils.loadTexture('http://stemkoski.github.io/Three.js/images/moon.jpg' ); var moonMaterial = new THREE.MeshBasicMaterial( { wireframe: true });//map: moonTexture } ); var moon = new THREE.Mesh( moonGeom, moonMaterial ); moon.position.set(-100, 50, 0); scene.add( moon ); */ /* // material var cubeTex = new THREE.Texture(layer.getCanvas().toDataURL()); var cubeMaterial = new THREE.MeshLambertMaterial({ //map: THREE.ImageUtils.loadTexture('http://www.html5canvastutorials.com/demos/assets/crate.jpg') //map: cubeTex }); // cube var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), cubeMaterial); cube.overdraw = true; cube.rotation.x = Math.PI * 0.1; scene.add(cube); */ } function addSingleCourse(cData, xPos, yPos, key, idTag, opac) { if (opac == undefined) opac = 1; var courseName = cData.name; var courseDesc = cData.description; var courseReqs = cData.req; var curr = new Kinetic.Group({ x: xPos, y: yPos, //x: centerX, //y: centerY, opacity: opac, scaleX: 1, scaleY: 1, name: 'course', //CUSTOMS!!! key: key, id: idTag, //finalX: coursePositions[idTag].xPos, //Math.random() * stage.getWidth() * (9.0/10.0) + 30, //finalY: coursePositions[idTag].yPos, //Math.random() * stage.getHeight() * (3.1/4.0) + 60, courseName: courseName, courseDesc: courseDesc, courseReqs: courseReqs }); var currColor; if (userPathway.selected.indexOf(idTag) == -1) { currColor = COLORS().COURSE; } else { currColor = COLORS().COURSE_SELECTED; } var node = new Kinetic.Circle({ x: 0, y: 0, radius: 23, fill: currColor, stroke: COLORS().COURSE_OUTLINE, strokeWidth: 4, opacity: 0.80, //EDIT OPACITY AND SCALE WHEN TESTING ANIMATION scale: 1, name: 'courseCircle', //CUSTOM!!! key: key, idTag: idTag, courseName: courseName, courseDesc: courseDesc, courseReqs: courseReqs }); node.on('mouseenter', function(){ document.body.style.cursor = 'pointer'; var children = this.getParent().getChildren(); children.each(function(child) { if(child.getClassName() == 'Label'){ child.setVisible(false); } }); this.setOpacity(1.0); layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, this.attrs.key + ' (' + this.getParent().attrs.courseName + ')');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); node.on('mouseleave', function(){ document.body.style.cursor = 'default'; var children = this.getParent().getChildren(); children.each(function(child) { if(child.getClassName() == 'Label'){ child.setVisible(true); } }); this.setOpacity(0.80); layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); node.on('mousemove', function(evt) { //var shape = evt.targetNode; var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, this.attrs.key + ' (' + this.getParent().attrs.courseName + ')');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); node.on('mousedown touchstart', function() { courseDown = this.getParent().attrs.id; //alert('mousedown/touchstart begin on ' + courseDown); //showCourseTooltip(this); }); //node.off('mousedown touchstart', function() { // alert('mousedown/touchstart end on ' + this.attrs.key); //}); node.on('mouseup touchend', function() { //WHAT'S LEFT: courseUp = this.getParent().attrs.id; //alert('mouseup/touchend begin on ' + courseUp + ' from ' + courseDown); if (courseUp == courseDown) { if (pathwayControls.createPath) { if (userPathway.selected.indexOf(this.attrs.idTag) == -1) { userPathway.selected.push(this.attrs.idTag); this.setFill(COLORS().COURSE_SELECTED); } else { userPathway.selected.splice(userPathway.selected.indexOf(this.attrs.idTag),1); //this.setFill(COLORS().COURSE); highlightSelectedCourses(); } } else { showCourseTooltip(this); } } else if (layerGUI.get('#'+courseDown).length != -1 && layerGUI.get('#'+courseUp).length != -1) { //DRAW A LINE BETWEEN THE TWO COURSES using curr.attrs.idTag //add a struct containing the from idTag, to idTag, the line itself, and the hierarchy numbers of the from/to classes //var max = -1; var fromIndex = -1, toIndex = -1; //alert('check 0'); for (var j = 0; j < userPathway.courses.length; j++) { var currConnect = userPathway.courses[j]; //if (j > max) { // max = j; //} if (currConnect.indexOf(courseDown) != -1) { fromIndex = j; //break; } if (currConnect.indexOf(courseUp) != -1) { toIndex = j; } //FIGURE OUT A WAY TO CHECK IF BOTH courseDown AND courseUp ARE ALREADY ACCOUNTED FOR!!!!!!!! //if (currConnect.indexOf(courseUp) != -1) { // alert('illegal connection... can\'t go backwards in time!'); // return; //} } //alert('fromIndex: '+fromIndex+'\ttoIndex: '+toIndex); if (fromIndex != -1 && toIndex != -1) { //alert('case 1'); return; } else if (fromIndex != -1) { //alert('case 2'); if (fromIndex+1 >= userPathway.courses.length) { userPathway.courses[fromIndex+1] = new Array(); } userPathway.courses[fromIndex+1].push(courseUp); addUserPathCourseLabel(courseUp, fromIndex+1, this.getAbsolutePosition().x, this.getAbsolutePosition().y); } else if (toIndex != -1) { //alert('case 3'); if (toIndex == 0) { var starter = new Array(); userPathway.courses.unshift(starter); userPathway.courses[0].push(courseDown); addUserPathCourseLabel(courseDown, 0, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().x, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().y); //FIX!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! } else { userPathway.courses[toIndex-1].push(courseDown); addUserPathCourseLabel(courseDown, toIndex-1, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().x, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().y); //FIX!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! } } else { //alert('case 4'); fromIndex = userPathway.courses.length; userPathway.courses[fromIndex] = new Array(); userPathway.courses[fromIndex].push(courseDown); addUserPathCourseLabel(courseDown, fromIndex, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().x, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().y); //FIX!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! //alert('mid-case 4'); userPathway.courses[fromIndex+1] = new Array(); //alert('2nd mid-case 4'); userPathway.courses[fromIndex+1].push(courseUp); addUserPathCourseLabel(courseUp, fromIndex+1, this.getAbsolutePosition().x, this.getAbsolutePosition().y); //FIX!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! //alert('end of case 4'); } //alert(userPathway.courses); var coursesLength = userPathway.courses.length; //alert('coursesLength: '+coursesLength); for (var j = 0; j < coursesLength; j++) { var fromCourses = userPathway.courses[j]; //alert('userPathway.courses['+j+'].length == '+userPathway.courses[j]); for (var m = 0; m < userPathway.courses[j].length; m++) { if (layerGUI.get('#'+userPathway.courses[j][m]).length == 0) { //alert('from course not on layer'); continue; } if (j+1 == userPathway.courses.length) continue; for (var n = 0; n < userPathway.courses[j+1].length; n++) { if (layerGUI.get('#'+userPathway.courses[j+1][n]).length == 0) { //alert('to course not on layer'); continue; } //alert('making a connectLine'); var fromX = layerGUI.get('#'+userPathway.courses[j][m])[0].getAbsolutePosition().x; var fromY = layerGUI.get('#'+userPathway.courses[j][m])[0].getAbsolutePosition().y; var toX = layerGUI.get('#'+userPathway.courses[j+1][n])[0].getAbsolutePosition().x; var toY = layerGUI.get('#'+userPathway.courses[j+1][n])[0].getAbsolutePosition().y; var connectLine = new Kinetic.Line({ points: [fromX, fromY, toX, toY], stroke: COLORS().FORGED_LINE, strokeWidth: 5, lineCap: 'round', lineJoin: 'round', shadowColor: COLORS().FORGED_SHADOW, shadowBlur: 10, shadowOffset: 5, shadowOpacity: 0.3, opacity: 0.6, name: 'connectLine', //CUSTOMS!!!!! highlighted: false }); connectLine.on('mouseenter touchstart', function() { //recommendedLine.moveToTop(); document.body.style.cursor = 'pointer'; var connectLines = layerGUI.get('.connectLine'); connectLines.each(function(line) { line.moveToTop(); line.setOpacity(0.75); line.setShadowOpacity(0.5); }); var orderLabels = layerGUI.get('.connOrderLabel'); orderLabels.each(function(label) { label.setVisible(true); label.moveToTop(); }); }); connectLine.on('mouseleave touchend', function() { document.body.style.cursor = 'default'; if(!this.attrs.highlighted){ //recommendedLine.moveToBottom(); var connectLines = layerGUI.get('.connectLine'); connectLines.each(function(line) { line.moveToBottom(); line.setOpacity(0.6); line.setShadowOpacity(0.3); }); //this.moveToBottom(); //this.setOpacity(0.6); //this.setShadowOpacity(0.3); var orderLabels = layerGUI.get('.connOrderLabel'); orderLabels.each(function(label) { label.setVisible(false); }); layerGUI.draw(); } }); layerGUI.add(connectLine); connectLine.moveToBottom(); layerGUI.draw(); } } } } }); curr.add(node); var tag = new Kinetic.Label({ x: 0, y: -33, opacity: 0.50, listening: true, name: tag, //CUSTOM key: key }); tag.add(new Kinetic.Tag({ fill: 'black', pointerDirection: 'down', pointerWidth: 0, pointerHeight: 0, lineJoin: 'round', shadowColor: 'black', shadowBlur: 10, shadowOffset: 10, shadowOpacity: 0.5 })); tag.add(new Kinetic.Text({ text: key, fontFamily: 'Calibri', fontSize: 18, padding: 5, fill: 'white' })); curr.add(tag); layerGUI.add(curr); //}); layerGUI.draw(); } function setUpTooltip() { tooltipLayer = new Kinetic.Layer(); tooltip = new Kinetic.Label({ opacity: 0.50, visible: false, listening: false }); tooltip.add(new Kinetic.Tag({ fill: 'black', pointerDirection: 'down', pointerWidth: 0, pointerHeight: 0, lineJoin: 'round', shadowColor: 'black', shadowBlur: 10, shadowOffset: 10, shadowOpacity: 0.5 })); tooltip.add(new Kinetic.Text({ text: '', fontFamily: 'Calibri', fontSize: 18, padding: 5, fill: 'white',//, align: 'center', name: 'tooltipText' })); tooltipLayer.add(tooltip); } function setUpClusterTooltip() { clusterTooltip = new Kinetic.Group({ opacity: 0, //WILL BE 0 WHEN CODING FOR ANIMATION visible: true, //WILL BE FALSE WHEN CODING FOR ANIMATION listening: true, //WILL BE TRUE WHEN BUTTONS ARE CODED FOR //CUSTOM!!!!!!! cluster: null }); clusterTooltip.add(new Kinetic.Rect({ //x: 0, //y: 0, fill: COLORS().CLUSTER, cornerRadius: 8, opacity: 0.7, //stroke: '#00E1FF', stroke: COLORS().CLUSTER_TOOLTIP_OUTLINE, //GET BACK TO THIS!!!!!!!!!!!!!!!!!!!!! //strokeEnabled: false, strokeWidth: 3, width: 60, height: 35, name: 'base' })); clusterTooltip.add(new Kinetic.Text({ text: 'TESTER TEXT', fontFamily: 'Verdana', fontSize: 18, //padding: 5, fill: COLORS().CLUSTER_TEXT, //align: 'center', name: 'clusterTitle' })); /* clusterTooltip.add(new Kinetic.Circle({ x: 0, y: 0, radius: 20, fill: 'blue', stroke: 'white', strokeWidth: 5 })); */ var backShape = new Kinetic.RegularPolygon({ sides: 3, radius: clusterTooltip.get('.clusterTitle')[0].getHeight()/2, fill: COLORS().CLUSTER_TEXT, //'#D2007B', stroke: COLORS().CLUSTER_TEXT, strokeWidth: 3, opacity: 0, //SET TO 0 WHEN CODING FOR TRANSITION STUFFS shadowColor: COLORS().CLUSTER_TEXT, shadowBlur: 10, shadowOffset: 3, shadowOpacity: 0.3, name: 'backShape', listening: true, visible: false }); backShape.on('mouseeneter mouseover', function() { //this.setFontSize(22); document.body.style.cursor = 'pointer'; this.setRadius(this.getRadius() + 2); this.setOpacity(1.0); this.setShadowOpacity(0.8); //this.setFill('white'); tooltipLayer.batchDraw(); }); backShape.on('mouseleave', function() { //this.setFontSize(20); document.body.style.cursor = 'default'; this.setRadius(clusterTooltip.get('.clusterTitle')[0].getHeight()/2); this.setOpacity(0.6); this.setShadowOpacity(0.3); //this.setFill('white'); tooltipLayer.batchDraw(); }); backShape.on('click touchstart', function() { var toggleBackButton = new Kinetic.Tween({ node: clusterTooltip.get('.backShape')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); clusterTooltip.get('.descButton')[0].setVisible(true); var toggleDescButton = new Kinetic.Tween({ node: clusterTooltip.get('.descButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); clusterTooltip.get('.exploreButton')[0].setVisible(true); var toggleExploreButton = new Kinetic.Tween({ node: clusterTooltip.get('.exploreButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleDescText = new Kinetic.Tween({ node: clusterTooltip.get('.descText')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { clusterTooltip.get('.backShape')[0].setVisible(false); clusterTooltip.get('.descText')[0].setVisible(false); }, 550); }); clusterTooltip.add(backShape); /* var cancelX = new Kinetic.Group({ opacity: 1.0, listening: true, visible: true }); */ var cancelX = new Kinetic.Text({ text: 'X', fontFamily: 'Verdana', fontSize: 20, fill: COLORS().CLUSTER_TEXT, stroke: COLORS().CLUSTER_TEXT, fontStyle: 'bold', strokeWidth: 1, shadowColor: COLORS().CLUSTER_TEXT, shadowBlur: 10, shadowOffset: 3, shadowOpacity: 0.3, opacity: 0.6, name: 'cancelX', listening: true }); cancelX.on('mouseeneter mouseover', function() { document.body.style.cursor = 'pointer'; this.setFontSize(22); this.setOpacity(1.0); this.setShadowOpacity(0.8); //this.setFill('white'); tooltipLayer.batchDraw(); }); cancelX.on('mouseleave', function() { document.body.style.cursor = 'default'; this.setFontSize(20); this.setOpacity(0.6); this.setShadowOpacity(0.3); //this.setFill('white'); tooltipLayer.batchDraw(); }); cancelX.on('click touchstart', function() { var hideClusterTooltip = new Kinetic.Tween({ node: clusterTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); anim.start(); runAnimation = true; animating = true; setTimeout(function() { clusterTooltip.hide(); }, 500); tooltipLayer.draw(); }); clusterTooltip.add(cancelX); clusterTooltip.get('.clusterTitle')[0].setPosition(-(clusterTooltip.get('.clusterTitle')[0].getWidth()/2),5); clusterTooltip.get('.base')[0].setWidth(clusterTooltip.get('.clusterTitle')[0].getWidth() + 200); clusterTooltip.get('.base')[0].setHeight(clusterTooltip.get('.clusterTitle')[0].getHeight() + 90); clusterTooltip.get('.base')[0].setPosition(-clusterTooltip.get('.base')[0].getWidth()/2,0); clusterTooltip.get('.backShape')[0].setPosition(-clusterTooltip.get('.base')[0].getWidth()/2 + 20, 15); clusterTooltip.get('.backShape')[0].rotateDeg(30); clusterTooltip.get('.cancelX')[0].setPosition(clusterTooltip.get('.base')[0].getWidth()/2 - 25, 2); var descButton = new Kinetic.Group({ name: 'descButton', opacity: 1, visible: true, listening: true }); descButton.add(new Kinetic.Rect({ //fill: '#40FF40', opacity: 0.6, stroke: COLORS().CLUSTER_TOOLTIP_OUTLINE, strokeWidth: 2, cornerRadius: 8, shadowColor: COLORS().CLUSTER_TOOLTIP_OUTLINE, shadowBlur: 10, shadowOffset: 7, shadowOpacity: 0.0, shadowEnabled: false })); descButton.add(new Kinetic.Text({ text: 'see\ndescription', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().CLUSTER_TEXT, align: 'center', opacity: 0.9 })); descButton.on('mouseenter mouseover', function() { document.body.style.cursor = 'pointer'; this.get('Rect')[0].setShadowEnabled(true); //this.get('Rect')[0].setOpacity(0.8); this.get('Rect')[0].setShadowOpacity(0.6); this.get('Rect')[0].setFillEnabled(true); this.get('Rect')[0].setFill(COLORS().CLUSTER_TEXT); this.get('Text')[0].setFill(COLORS().CLUSTER); tooltipLayer.draw(); }); descButton.on('mouseleave', function() { document.body.style.cursor = 'default'; //this.get('Rect')[0].setOpacity(0.5); this.get('Rect')[0].setShadowOpacity(0); this.get('Rect')[0].setShadowEnabled(false); this.get('Rect')[0].setFillEnabled(false); this.get('Text')[0].setFill(COLORS().CLUSTER_TEXT); tooltipLayer.draw(); }); descButton.on('click touchstart', function() { clusterTooltip.get('.backShape')[0].setVisible(true); var toggleBackButton = new Kinetic.Tween({ node: clusterTooltip.get('.backShape')[0], duration: 0.5, opacity: 0.6, easing: Kinetic.Easings.EaseInOut }).play(); var toggleDescButton = new Kinetic.Tween({ node: clusterTooltip.get('.descButton')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleExploreButton = new Kinetic.Tween({ node: clusterTooltip.get('.exploreButton')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); clusterTooltip.get('.descText')[0].setVisible(true); var toggleDescText = new Kinetic.Tween({ node: clusterTooltip.get('.descText')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { clusterTooltip.get('.descButton')[0].setVisible(false); clusterTooltip.get('.exploreButton')[0].setVisible(false); }, 550); }); descButton.get('Text')[0].setPosition(-(descButton.get('Text')[0].getWidth()/2),8); descButton.get('Rect')[0].setWidth(descButton.get('Text')[0].getWidth() + 20); descButton.get('Rect')[0].setHeight(descButton.get('Text')[0].getHeight() + 20); descButton.get('Rect')[0].setPosition(-descButton.get('Rect')[0].getWidth()/2,0); clusterTooltip.add(descButton); descButton.setPosition(-descButton.get('Rect')[0].getWidth()/2 - 20,clusterTooltip.get('.clusterTitle')[0].getHeight() + 20); var exploreButton = new Kinetic.Group({ name: 'exploreButton', opacity: 1, visible: true, listening: true }); exploreButton.add(new Kinetic.Rect({ //fill: '40FF40', opacity: 0.6, stroke: COLORS().CLUSTER_TOOLTIP_OUTLINE, strokeWidth: 2, cornerRadius: 8, shadowColor: COLORS().CLUSTER_TOOLTIP_OUTLINE, shadowBlur: 10, shadowOffset: 7, shadowOpacity: 0.0, shadowEnabled: false })); exploreButton.add(new Kinetic.Text({ text: 'explore\ncluster', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().CLUSTER_TEXT, align: 'center', opacity: 0.9 })); exploreButton.on('mouseenter mouseover', function() { document.body.style.cursor = 'pointer'; this.get('Rect')[0].setShadowEnabled(true); //this.get('Rect')[0].setOpacity(0.8); this.get('Rect')[0].setShadowOpacity(0.6); this.get('Rect')[0].setFillEnabled(true); this.get('Rect')[0].setFill(COLORS().CLUSTER_TEXT); this.get('Text')[0].setFill(COLORS().CLUSTER); tooltipLayer.draw(); }); exploreButton.on('mouseleave', function() { document.body.style.cursor = 'default'; //this.get('Rect')[0].setOpacity(0.5); this.get('Rect')[0].setShadowOpacity(0); this.get('Rect')[0].setShadowEnabled(false); this.get('Rect')[0].setFillEnabled(false); this.get('Text')[0].setFill(COLORS().CLUSTER_TEXT); tooltipLayer.draw(); }); exploreButton.on('click touchstart', function() { //alert('explore started'); //if(examining){ MAY NEED TO BE UNCOMMENTED??? /* var allUserPathLabels = layerGUI.get('.connOrderLabel'); allUserPathLabels.each(function(label) { var togglePathLabels = new Kinetic.Tween({ node: label, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EasInOut }).play(); }); var allUserPathLines = layerGUI.get('.connectLine'); allUserPathLines.each(function(line) { var togglePathLabels = new Kinetic.Tween({ node: line, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EasInOut }).play(); }); */ destroyCourseNodes(); destroyRecPath(); destroyUserPath(); //alert('deleted old stuff'); //} MAY NEED TO BE UNCOMMENTED??? addCourseNodes(clusterTooltip.attrs.cluster); createHelixPath(clusterTooltip.attrs.cluster); transitionToCluster(); //alert('finished addCourseNodes and transitionToCluster'); createRecommendedPath(clusterTooltip.attrs.cluster); //alert('finished createRecommendedPath'); addUserPath(); //alert('finished addUserPath') examining = true; atHome = false; anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); var hideClusterTooltip = new Kinetic.Tween({ node: clusterTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { clusterTooltip.hide(); }, 500); tooltipLayer.draw(); }); exploreButton.get('Text')[0].setPosition(-(exploreButton.get('Text')[0].getWidth()/2),8); exploreButton.get('Rect')[0].setWidth(exploreButton.get('Text')[0].getWidth() + 40); exploreButton.get('Rect')[0].setHeight(exploreButton.get('Text')[0].getHeight() + 20); exploreButton.get('Rect')[0].setPosition(-exploreButton.get('Rect')[0].getWidth()/2,0); clusterTooltip.add(exploreButton); exploreButton.setPosition(exploreButton.get('Rect')[0].getWidth()/2 + 20,clusterTooltip.get('.clusterTitle')[0].getHeight() + 20); clusterTooltip.add(new Kinetic.Text({ width: clusterTooltip.get('.base')[0].getWidth() - 20, height: clusterTooltip.get('.base')[0].getHeight() - 30, opacity: 0.0, fontFamily: 'Verdana', fontSize: 17, fill: COLORS().CLUSTER_TEXT, align: 'left', visible: false, //padding: 20, //text: 'RAICHU IS THE BEST POKEMON EVER AND WILL DESTROY ANY OTHER POKEMON JUST BECAUSE HE FEELS LIKE IT AND YEAH SHUT UP.', name: 'descText' })); clusterTooltip.get('.descText')[0].setPosition(-(clusterTooltip.get('.descText')[0].getWidth()/2) + 10, 30); tooltipLayer.add(clusterTooltip); clusterTooltip.setPosition(centerX, centerY); //clusterTooltip.show(); clusterTooltip.hide(); tooltipLayer.batchDraw(); } function setUpCourseTooltip() { courseTooltip = new Kinetic.Group({ opacity: 1.0, //WILL BE 0 WHEN CODING FOR ANIMATION visible: true, //WILL BE FALSE WHEN CODING FOR ANIMATION listening: true, //WILL BE TRUE WHEN BUTTONS ARE CODED FOR //draggable: true, //CUSTOM!!!!!!! course: null }); courseTooltip.add(new Kinetic.Rect({ fill: COLORS().COURSE, cornerRadius: 8, opacity: .7, stroke: COLORS().COURSE_TOOLTIP_OUTLINE, strokeWidth: 3, width: 60, height: 35, name: 'base' })); courseTooltip.add(new Kinetic.Text({ text: 'TESTER TEXT', fontFamily: 'Verdana', fontSize: 18, //padding: 5, fill: COLORS().COURSE_TEXT, //align: 'center', name: 'clusterTitle' })); /* courseTooltip.add(new Kinetic.Circle({ x: 0, y: 0, radius: 20, fill: 'blue', stroke: 'white', strokeWidth: 5 })); */ var backShape = new Kinetic.RegularPolygon({ sides: 3, radius: courseTooltip.get('.clusterTitle')[0].getHeight()/2, fill: COLORS().COURSE_TEXT, //'#D2007B', stroke: COLORS().COURSE_TEXT, strokeEnabled: false, strokeWidth: 3, opacity: 0, //SET TO 0 WHEN CODING FOR TRANSITION STUFFS shadowColor: COLORS().COURSE_TEXT, shadowBlur: 10, shadowOffset: 3, shadowOpacity: 0.3, name: 'backShape', listening: true, visible: false }); backShape.on('mouseeneter mouseover', function() { //this.setFontSize(22); document.body.style.cursor = 'pointer'; this.setRadius(this.getRadius() + 2); this.setOpacity(1.0); this.setShadowOpacity(0.8); //this.setFill('white'); tooltipLayer.batchDraw(); }); backShape.on('mouseleave', function() { //this.setFontSize(20); document.body.style.cursor = 'default'; this.setRadius(courseTooltip.get('.clusterTitle')[0].getHeight()/2); this.setOpacity(0.6); this.setShadowOpacity(0.3); //this.setFill('white'); tooltipLayer.batchDraw(); }); backShape.on('click touchstart', function() { var toggleBackButton = new Kinetic.Tween({ node: courseTooltip.get('.backShape')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.descButton')[0].setVisible(true); var toggleDescButton = new Kinetic.Tween({ node: courseTooltip.get('.descButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.connectButton')[0].setVisible(true); var toggleExploreButton = new Kinetic.Tween({ node: courseTooltip.get('.connectButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleDescText = new Kinetic.Tween({ node: courseTooltip.get('.descText')[0], duration: 0.2, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleTooltipSize = new Kinetic.Tween({ node: courseTooltip.get('.base')[0], duration: 0.5, scaleX: 1, scaleY: 1, height: coTtHeight, x: -courseTooltip.get('.base')[0].getWidth()/2, easing: Kinetic.Easings.EaseInOut }).play(); var toggleTooltipPos = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, y: centerY, easing: Kinetic.Easings.EaseInOut }).play(); var toggleConnectToButton = new Kinetic.Tween({ node: courseTooltip.get('.connectsToButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleConnectFromButton = new Kinetic.Tween({ node: courseTooltip.get('.connectsFromButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var togglePathAddButton = new Kinetic.Tween({ node: courseTooltip.get('.pathAddButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleAddEndButton = new Kinetic.Tween({ node: courseTooltip.get('.addEndButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleAddEndButton = new Kinetic.Tween({ node: courseTooltip.get('.joinEndButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleAddEndButton = new Kinetic.Tween({ node: courseTooltip.get('.removeButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { courseTooltip.get('.backShape')[0].setVisible(false); courseTooltip.get('.descText')[0].setVisible(false); courseTooltip.get('.connectsToButton')[0].setVisible(false); courseTooltip.get('.connectsFromButton')[0].setVisible(false); courseTooltip.get('.pathAddButton')[0].setVisible(false); courseTooltip.get('.addEndButton')[0].setVisible(false); courseTooltip.get('.joinEndButton')[0].setVisible(false); courseTooltip.get('.removeButton')[0].setVisible(false); }, 550); }); courseTooltip.add(backShape); /* var cancelX = new Kinetic.Group({ opacity: 1.0, listening: true, visible: true }); */ var cancelX = new Kinetic.Text({ text: 'X', fontFamily: 'Verdana', fontSize: 20, fill: COLORS().COURSE_TEXT, stroke: COLORS().COURSE_TEXT, fontStyle: 'bold', strokeWidth: 1, shadowColor: COLORS().COURSE_TEXT, shadowBlur: 10, shadowOffset: 3, shadowOpacity: 0.3, opacity: 0.6, name: 'cancelX', listening: true }); cancelX.on('mouseeneter mouseover', function() { document.body.style.cursor = 'pointer'; this.setFontSize(22); this.setOpacity(1.0); this.setShadowOpacity(0.8); //this.setFill('white'); tooltipLayer.batchDraw(); }); cancelX.on('mouseleave', function() { document.body.style.cursor = 'default'; this.setFontSize(20); this.setOpacity(0.6); this.setShadowOpacity(0.3); //this.setFill('white'); tooltipLayer.batchDraw(); }); cancelX.on('click touchstart', function() { var toggleBackButton = new Kinetic.Tween({ node: courseTooltip.get('.backShape')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.descButton')[0].setVisible(true); var toggleDescButton = new Kinetic.Tween({ node: courseTooltip.get('.descButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.connectButton')[0].setVisible(true); var toggleExploreButton = new Kinetic.Tween({ node: courseTooltip.get('.connectButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleDescText = new Kinetic.Tween({ node: courseTooltip.get('.descText')[0], duration: 0.2, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleTooltipSize = new Kinetic.Tween({ node: courseTooltip.get('.base')[0], duration: 0.5, scaleX: 1, scaleY: 1, height: coTtHeight, x: -courseTooltip.get('.base')[0].getWidth()/2, easing: Kinetic.Easings.EaseInOut }).play(); var toggleTooltipPos = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, y: centerY, easing: Kinetic.Easings.EaseInOut }).play(); var toggleConnectToButton = new Kinetic.Tween({ node: courseTooltip.get('.connectsToButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleConnectFromButton = new Kinetic.Tween({ node: courseTooltip.get('.connectsFromButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var togglePathAddButton = new Kinetic.Tween({ node: courseTooltip.get('.pathAddButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var hideClusterTooltip = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleAddEndButton = new Kinetic.Tween({ node: courseTooltip.get('.addEndButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleAddEndButton = new Kinetic.Tween({ node: courseTooltip.get('.joinEndButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleAddEndButton = new Kinetic.Tween({ node: courseTooltip.get('.removeButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { courseTooltip.get('.backShape')[0].setVisible(false); courseTooltip.get('.descText')[0].setVisible(false); courseTooltip.get('.connectsToButton')[0].setVisible(false); courseTooltip.get('.connectsFromButton')[0].setVisible(false); courseTooltip.get('.pathAddButton')[0].setVisible(false); courseTooltip.get('.addEndButton')[0].setVisible(false); courseTooltip.get('.joinEndButton')[0].setVisible(false); courseTooltip.get('.removeButton')[0].setVisible(false); }, 400); /* anim.start(); runAnimation = true; animating = true; */ setTimeout(function() { courseTooltip.hide(); }, 500); tooltipLayer.draw(); }); courseTooltip.add(cancelX); courseTooltip.get('.clusterTitle')[0].setPosition(-(courseTooltip.get('.clusterTitle')[0].getWidth()/2),5); courseTooltip.get('.base')[0].setWidth(courseTooltip.get('.clusterTitle')[0].getWidth() + 200); courseTooltip.get('.base')[0].setHeight(courseTooltip.get('.clusterTitle')[0].getHeight() + 90); courseTooltip.get('.base')[0].setPosition(-courseTooltip.get('.base')[0].getWidth()/2,0); courseTooltip.get('.backShape')[0].setPosition(-courseTooltip.get('.base')[0].getWidth()/2 + 20, 15); courseTooltip.get('.backShape')[0].rotateDeg(30); courseTooltip.get('.cancelX')[0].setPosition(courseTooltip.get('.base')[0].getWidth()/2 - 25, 2); var descButton = new Kinetic.Group({ name: 'descButton', opacity: 1, visible: true, listening: true }); descButton.add(new Kinetic.Rect({ //fill: '#40FF40', opacity: 0.6, stroke: COLORS().COURSE_TOOLTIP_OUTLINE, strokeWidth: 2, cornerRadius: 8, shadowColor: COLORS().COURSE_TOOLTIP_OUTLINE, shadowBlur: 10, shadowOffset: 7, shadowOpacity: 0.0, shadowEnabled: false })); descButton.add(new Kinetic.Text({ text: 'description\nand WAYS', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().COURSE_TEXT, align: 'center', opacity: 0.9 })); descButton.on('mouseenter mouseover', function() { document.body.style.cursor = 'pointer'; this.get('Rect')[0].setShadowEnabled(true); //this.get('Rect')[0].setOpacity(0.8); this.get('Rect')[0].setShadowOpacity(0.6); this.get('Rect')[0].setFillEnabled(true); this.get('Rect')[0].setFill(COLORS().COURSE_TEXT); this.get('Text')[0].setFill(COLORS().COURSE); tooltipLayer.draw(); }); descButton.on('mouseleave', function() { document.body.style.cursor = 'default'; //this.get('Rect')[0].setOpacity(0.5); this.get('Rect')[0].setShadowOpacity(0); this.get('Rect')[0].setShadowEnabled(false); this.get('Rect')[0].setFillEnabled(false); this.get('Text')[0].setFill(COLORS().COURSE_TEXT); tooltipLayer.draw(); }); descButton.on('click touchstart', function() { courseTooltip.get('.backShape')[0].setVisible(true); var toggleBackButton = new Kinetic.Tween({ node: courseTooltip.get('.backShape')[0], duration: 0.5, opacity: 0.6, easing: Kinetic.Easings.EaseInOut }).play(); var toggleDescButton = new Kinetic.Tween({ node: courseTooltip.get('.descButton')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleExploreButton = new Kinetic.Tween({ node: courseTooltip.get('.connectButton')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); //setTimeout(function() { courseTooltip.get('.descText')[0].setVisible(true); courseTooltip.get('.descText')[0].setWidth(courseTooltip.get('.base')[0].getWidth()*1.5 - 20); //courseTooltip.get('.descText')[0].setHeight(courseTooltip.get('.base')[0].getHeight()*3.0 - 30); var toggleTooltipSize = new Kinetic.Tween({ node: courseTooltip.get('.base')[0], duration: 0.3, scaleX: 1.5, //scaleY: 3.0, height: courseTooltip.get('.descText')[0].getHeight() + 40, x: -courseTooltip.get('.base')[0].getWidth()*1.5/2, easing: Kinetic.Easings.EaseInOut }).play(); var toggleTooltipPos = new Kinetic.Tween({ node: courseTooltip, duration: 0.3, y: centerY - 80, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.descText')[0].setPosition(-(courseTooltip.get('.descText')[0].getWidth()/2) + 10, 30); var toggleDescText = new Kinetic.Tween({ node: courseTooltip.get('.descText')[0], duration: 0.6, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.backShape')[0].setPosition(-courseTooltip.get('.base')[0].getWidth()/2 + 20, 15); setTimeout(function() { courseTooltip.get('.descButton')[0].setVisible(false); courseTooltip.get('.connectButton')[0].setVisible(false); }, 550); //}, 200); }); descButton.get('Text')[0].setPosition(-(descButton.get('Text')[0].getWidth()/2),8); descButton.get('Rect')[0].setWidth(descButton.get('Text')[0].getWidth() + 20); descButton.get('Rect')[0].setHeight(descButton.get('Text')[0].getHeight() + 20); descButton.get('Rect')[0].setPosition(-descButton.get('Rect')[0].getWidth()/2,0); courseTooltip.add(descButton); descButton.setPosition(-descButton.get('Rect')[0].getWidth()/2 - 20,courseTooltip.get('.clusterTitle')[0].getHeight() + 20); var connectButton = new Kinetic.Group({ name: 'connectButton', opacity: 1, visible: true, listening: true }); connectButton.add(new Kinetic.Rect({ //fill: '40FF40', opacity: 0.6, stroke: COLORS().COURSE_TOOLTIP_OUTLINE, strokeWidth: 2, cornerRadius: 8, shadowColor: COLORS().COURSE_TOOLTIP_OUTLINE, shadowBlur: 10, shadowOffset: 7, shadowOpacity: 0.0, shadowEnabled: false })); connectButton.add(new Kinetic.Text({ text: 'examine\nconnections', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().COURSE_TEXT, align: 'center', opacity: 0.9 })); connectButton.on('mouseenter mouseover', function() { document.body.style.cursor = 'pointer'; this.get('Rect')[0].setShadowEnabled(true); //this.get('Rect')[0].setOpacity(0.8); this.get('Rect')[0].setShadowOpacity(0.6); this.get('Rect')[0].setFillEnabled(true); this.get('Rect')[0].setFill(COLORS().COURSE_TEXT); this.get('Text')[0].setFill(COLORS().COURSE); tooltipLayer.draw(); }); connectButton.on('mouseleave', function() { document.body.style.cursor = 'default'; //this.get('Rect')[0].setOpacity(0.5); this.get('Rect')[0].setShadowOpacity(0); this.get('Rect')[0].setShadowEnabled(false); this.get('Rect')[0].setFillEnabled(false); this.get('Text')[0].setFill(COLORS().COURSE_TEXT); tooltipLayer.draw(); }); /* exploreButton.on('click', function() { addCourseNodes(courseTooltip.attrs.cluster); transitionToCluster(); createRecommendedPath(courseTooltip.attrs.cluster); examining = true; anim.stop(); runAnimation = false; animating = false; layerGUI.draw();var hideClusterTooltip = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { courseTooltip.hide(); }, 500); tooltipLayer.draw(); }); */ connectButton.on('click touchstart', function() { courseTooltip.get('.backShape')[0].setVisible(true); var toggleBackButton = new Kinetic.Tween({ node: courseTooltip.get('.backShape')[0], duration: 0.5, opacity: 0.6, easing: Kinetic.Easings.EaseInOut }).play(); var toggleDescButton = new Kinetic.Tween({ node: courseTooltip.get('.descButton')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleConnectButton = new Kinetic.Tween({ node: courseTooltip.get('.connectButton')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.connectsToButton')[0].setVisible(true); var toggleConnectToButton = new Kinetic.Tween({ node: courseTooltip.get('.connectsToButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.connectsFromButton')[0].setVisible(true); var toggleConnectFromButton = new Kinetic.Tween({ node: courseTooltip.get('.connectsFromButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.pathAddButton')[0].setVisible(true); var togglePathAddButton = new Kinetic.Tween({ node: courseTooltip.get('.pathAddButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleTooltipSize = new Kinetic.Tween({ node: courseTooltip.get('.base')[0], duration: 0.3, scaleX: 1.3, //scaleY: 1.0, x: -courseTooltip.get('.base')[0].getWidth()*1.3/2, easing: Kinetic.Easings.EaseInOut }).play(); //var toggleTooltipPos = new Kinetic.Tween({ // node: courseTooltip, // duration: 0.3, // y: centerY - 80, // easing: Kinetic.Easings.EaseInOut //}).play(); //setTimeout(function() { courseTooltip.get('.backShape')[0].setPosition(-courseTooltip.get('.base')[0].getWidth()/2 + 20, 15); //courseTooltip.get('.descText')[0].setVisible(true); //courseTooltip.get('.descText')[0].setWidth(courseTooltip.get('.base')[0].getWidth()*1.5 - 20); //courseTooltip.get('.descText')[0].setHeight(courseTooltip.get('.base')[0].getHeight()*3.0 - 30); //courseTooltip.get('.descText')[0].setPosition(-(courseTooltip.get('.descText')[0].getWidth()/2) + 10, 30); //var toggleDescText = new Kinetic.Tween({ // node: courseTooltip.get('.descText')[0], // duration: 0.5, // opacity: 1.0, // easing: Kinetic.Easings.EaseInOut //}).play(); setTimeout(function() { courseTooltip.get('.descButton')[0].setVisible(false); courseTooltip.get('.connectButton')[0].setVisible(false); }, 550); //}, 200); }); connectButton.get('Text')[0].setPosition(-(connectButton.get('Text')[0].getWidth()/2),8); connectButton.get('Rect')[0].setWidth(connectButton.get('Text')[0].getWidth() + 20); connectButton.get('Rect')[0].setHeight(connectButton.get('Text')[0].getHeight() + 20); connectButton.get('Rect')[0].setPosition(-connectButton.get('Rect')[0].getWidth()/2,0); courseTooltip.add(connectButton); connectButton.setPosition(connectButton.get('Rect')[0].getWidth()/2 + 20,courseTooltip.get('.clusterTitle')[0].getHeight() + 20); courseTooltip.add(new Kinetic.Text({ width: courseTooltip.get('.base')[0].getWidth() - 20, //height: courseTooltip.get('.base')[0].getHeight() - 30, opacity: 0.0, fontFamily: 'Verdana', fontSize: 17, fill: COLORS().COURSE_TEXT, align: 'left', visible: false, padding: 0, //text: 'RAICHU IS THE BEST POKEMON EVER AND WILL DESTROY ANY OTHER POKEMON JUST BECAUSE HE FEELS LIKE IT AND YEAH SHUT UP.', name: 'descText' })); courseTooltip.get('.descText')[0].setPosition(-(courseTooltip.get('.descText')[0].getWidth()/2) + 15, 30); var connectsToButton = new Kinetic.Group({ name: 'connectsToButton', opacity: 0, visible: false, listening: true }); connectsToButton.add(new Kinetic.Rect({ //fill: '#40FF40', opacity: 0.6, stroke: COLORS().COURSE_TOOLTIP_OUTLINE, strokeWidth: 2, cornerRadius: 8, shadowColor: COLORS().COURSE_TOOLTIP_OUTLINE, shadowBlur: 10, shadowOffset: 7, shadowOpacity: 0.0, shadowEnabled: false })); connectsToButton.add(new Kinetic.Text({ text: 'connections\nto course', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().COURSE_TEXT, align: 'center', opacity: 0.9 })); connectsToButton.on('mouseenter mouseover', function() { document.body.style.cursor = 'pointer'; this.get('Rect')[0].setShadowEnabled(true); //this.get('Rect')[0].setOpacity(0.8); this.get('Rect')[0].setShadowOpacity(0.6); this.get('Rect')[0].setFillEnabled(true); this.get('Rect')[0].setFill(COLORS().COURSE_TEXT); this.get('Text')[0].setFill(COLORS().COURSE); tooltipLayer.draw(); }); connectsToButton.on('mouseleave', function() { document.body.style.cursor = 'default'; //this.get('Rect')[0].setOpacity(0.5); this.get('Rect')[0].setShadowOpacity(0); this.get('Rect')[0].setShadowEnabled(false); this.get('Rect')[0].setFillEnabled(false); this.get('Text')[0].setFill(COLORS().COURSE_TEXT); tooltipLayer.draw(); }); connectsToButton.on('click touchstart', function() { examining = false; sphereFolder.close(); clusterFolder.close(); pathFolder.close(); helixFolder.close(); courseFolder.open(); if (popFromBoxAnim != undefined) popFromBoxAnim.stop(); if (popToBoxAnim != undefined) popToBoxAnim.stop(); var recButton = layerGUI.get('#recButton')[0]; recButton.attrs.showingRec = false; invertRecButtonColors(); var recButtonTrans = new Kinetic.Tween({ node: recButton, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var allUserPathLabels = layerGUI.get('.connOrderLabel'); allUserPathLabels.each(function(label) { var togglePathLabels = new Kinetic.Tween({ node: label, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var allUserPathLines = layerGUI.get('.connectLine'); allUserPathLines.each(function(line) { var togglePathLabels = new Kinetic.Tween({ node: line, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var moveFocusNode = new Kinetic.Tween({ node: courseTooltip.attrs.course.getParent(), duration: 0.55, x: stage.getWidth()/2, y: stage.getHeight()/2, easing: Kinetic.Easings.EaseInOut }).play(); var allCourses = layerGUI.get('.course'); allCourses.each(function(course) { if (course.attrs.key != courseTooltip.attrs.course.attrs.key) { var toggleOtherCourses = new Kinetic.Tween({ node: course, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); } }); var allCPM = layerGUI.get('.cpm'); allCPM.each(function(cpm) { cpm.destroy(); }); var allPopBoxes = layerGUI.get('.popBox'); allPopBoxes.each(function(box) { box.destroy(); }); var allPopLines = layerGUI.get('.popLine'); allPopLines.each(function(line) { line.destroy(); }); var hideClusterTooltip = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); var recom = layerGUI.get('#recommended'); recom.each(function(rec) { var toggleRecc = new Kinetic.Tween({ node: rec, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var helixPath = layerGUI.get('#helix'); helixPath.each(function(helix) { var toggleHelix = new Kinetic.Tween({ node: helix, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); //WHERE THE REAL MEAT IS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! var tops = new Array(); var allClusters = getClusters(); for (var cluster in allClusters) { //alert('examining '+cluster+' cluster'); var coIDs = allClusters[cluster].courseIDs; for (var q = 0; q < coIDs.length; q++) { if (objectContains(getPopularity(coIDs[q]), courseTooltip.attrs.course.attrs.idTag) == -1) continue; var toStruct = {idTag: coIDs[q], pop: getPopularity(coIDs[q])[courseTooltip.attrs.course.attrs.idTag]}; //, popFrac: 0}; if (tops.indexOf(toStruct) == -1 && arrayContainsIdTag(tops, toStruct.idTag) == -1) { if (tops.length < maxMatches) { //alert('simply adding '+toStruct.idTag+'('+toStruct.pop+')'); tops.push(toStruct); if (tops.length == maxMatches) { tops.sort(function(a,b){return a.pop - b.pop}); } } else if (toStruct.pop > tops[0].pop) { //alert(toStruct.idTag+'('+toStruct.pop+') > '+tops[0].idTag+'('+tops[0].pop+')'); tops[0] = toStruct; tops.sort(function(a,b){return a.pop - b.pop}); } else { //alert(toStruct.idTag+'('+toStruct.pop+') <= '+tops[0].idTag+'('+tops[0].pop+')'); } } else { //alert('tops already contains '+toStruct.idTag+'('+toStruct.pop+')'); for (var r = 0; r < tops.length; r++) { if (tops[r].idTag == toStruct.idTag ) { //alert('match found...\nold pop: '+tops[r].pop+'\tnew pop?: '+toStruct.pop); if (tops[r].pop < toStruct.pop) { //alert('pop updated'); tops[r].pop = toStruct.pop; } } } } } } var printThing = 'tops: '; var totalPop = 0; for (var q = 0; q < tops.length; q++) { printThing += tops[q].idTag + '(' + tops[q].pop + '), '; totalPop += tops[q].pop; } //alert(printThing); var tiers = new Array(); for (var q = 0; q < tops.length; q++) { tops[q].popFrac = tops[q].pop/totalPop; tiers.push(tops[q].popFrac); } var finalTiers = colorTiers(tiers); setTimeout(function() { destroyUserPath(); //alert('does not print if broken'); destroyRecPath(); //alert('still alive'); recButton.setVisible(false); var cnt = 0; allCourses.each(function(course) { if (course.attrs.key != courseTooltip.attrs.course.attrs.key) { //var children = course.getParent().getChildren(); //children.each(function(child) { // child.setVisisble(false); // child.listening(false); //}); //alert('key '+cnt+': '+course.attrs.key+'\n at: ('+course.getAbsolutePosition().x+', '+course.getAbsolutePosition().y+')'); course.setVisible(false); course.destroy(); cnt++; } }); //alert('almost there'); //var allPopularities = getPopularities(clusterTooltip.attrs.cluster.key); //alert('made it far enough to get ' + allPopularities); //var topMatches = new Array(); courseTooltip.hide(); for (var q = 0; q < tops.length; q++) { for (var clus in allClusters) { if (allClusters[clus].courseIDs.indexOf(tops[q].idTag) == -1) continue; var cData = getCourseData(allClusters[clus].idTag, tops[q].idTag); var coIndex = allClusters[clus].courseIDs.indexOf(tops[q].idTag); var coKey = allClusters[clus].courses[coIndex]; //alert('tops['+q+'].idTag: '+tops[q].idTag+'\ncoKey: '+coKey); addSingleCourse(cData, centerX + 300 * Math.sin(q * 2 * Math.PI / tops.length), centerY - 300 * Math.cos(q * 2 * Math.PI / tops.length), coKey, tops[q].idTag, 0); break; } } highlightSelectedCourses(); connectsToPopAnim(tops, courseTooltip.attrs.course.attrs.idTag, totalPop, finalTiers); popToBoxAnim.start(); addUserPath(); var hiddenCourses = layerGUI.get('.course'); hiddenCourses.each(function(hidden) { if (hidden.attrs.key != courseTooltip.attrs.course.attrs.key) { var toggleHidden = new Kinetic.Tween({ node: hidden, duration: .50, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); } }); }, 550); }); connectsToButton.get('Text')[0].setPosition(-(connectsToButton.get('Text')[0].getWidth()/2),8); connectsToButton.get('Rect')[0].setWidth(connectsToButton.get('Text')[0].getWidth() + 20); connectsToButton.get('Rect')[0].setHeight(connectsToButton.get('Text')[0].getHeight() + 20); connectsToButton.get('Rect')[0].setPosition(-connectsToButton.get('Rect')[0].getWidth()/2,0); courseTooltip.add(connectsToButton); courseTooltip.get('.connectsToButton')[0].setPosition(-(courseTooltip.get('.descText')[0].getWidth()/2) + 20, 30); var connectsFromButton = new Kinetic.Group({ name: 'connectsFromButton', opacity: 0, visible: false, listening: true }); connectsFromButton.add(new Kinetic.Rect({ //fill: '#40FF40', opacity: 0.6, stroke: COLORS().COURSE_TOOLTIP_OUTLINE, strokeWidth: 2, cornerRadius: 8, shadowColor: COLORS().COURSE_TOOLTIP_OUTLINE, shadowBlur: 10, shadowOffset: 7, shadowOpacity: 0.0, shadowEnabled: false })); connectsFromButton.add(new Kinetic.Text({ text: 'connections\nfrom course', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().COURSE_TEXT, align: 'center', opacity: 0.9 })); connectsFromButton.on('mouseenter mouseover', function() { document.body.style.cursor = 'pointer'; this.get('Rect')[0].setShadowEnabled(true); //this.get('Rect')[0].setOpacity(0.8); this.get('Rect')[0].setShadowOpacity(0.6); this.get('Rect')[0].setFillEnabled(true); this.get('Rect')[0].setFill(COLORS().COURSE_TEXT); this.get('Text')[0].setFill(COLORS().COURSE); tooltipLayer.draw(); }); connectsFromButton.on('mouseleave', function() { document.body.style.cursor = 'default'; //this.get('Rect')[0].setOpacity(0.5); this.get('Rect')[0].setShadowOpacity(0); this.get('Rect')[0].setShadowEnabled(false); this.get('Rect')[0].setFillEnabled(false); this.get('Text')[0].setFill(COLORS().COURSE_TEXT); tooltipLayer.draw(); }); connectsFromButton.on('click touchstart', function() { examining = false; sphereFolder.close(); clusterFolder.close(); pathFolder.close(); helixFolder.close(); courseFolder.open(); if (popFromBoxAnim != undefined) popFromBoxAnim.stop(); if (popToBoxAnim != undefined) popToBoxAnim.stop(); var recButton = layerGUI.get('#recButton')[0]; recButton.attrs.showingRec = false; invertRecButtonColors(); var recButtonTrans = new Kinetic.Tween({ node: recButton, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var allUserPathLabels = layerGUI.get('.connOrderLabel'); allUserPathLabels.each(function(label) { var togglePathLabels = new Kinetic.Tween({ node: label, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var allUserPathLines = layerGUI.get('.connectLine'); allUserPathLines.each(function(line) { var togglePathLabels = new Kinetic.Tween({ node: line, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var moveFocusNode = new Kinetic.Tween({ node: courseTooltip.attrs.course.getParent(), duration: 0.55, x: stage.getWidth()/2, y: stage.getHeight()/2, easing: Kinetic.Easings.EaseInOut }).play(); var allCourses = layerGUI.get('.course'); allCourses.each(function(course) { if (course.attrs.key != courseTooltip.attrs.course.attrs.key) { var toggleOtherCourses = new Kinetic.Tween({ node: course, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); } }); var allCPM = layerGUI.get('.cpm'); allCPM.each(function(cpm) { cpm.destroy(); }); var allPopBoxes = layerGUI.get('.popBox'); allPopBoxes.each(function(box) { box.destroy(); }); var allPopLines = layerGUI.get('.popLine'); allPopLines.each(function(line) { line.destroy(); }); var hideClusterTooltip = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); var recom = layerGUI.get('#recommended'); recom.each(function(rec) { var toggleRec = new Kinetic.Tween({ node: rec, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var helixPath = layerGUI.get('#helix'); helixPath.each(function(helix) { var toggleHelix = new Kinetic.Tween({ node: helix, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var cPop = getPopularity(courseTooltip.attrs.course.attrs.idTag); //alert('for: '+courseTooltip.attrs.course.attrs.idTag+'\n\nusing id: '+getPopularity(courseTooltip.attrs.course.attrs.idTag)+' \nvs. \nusing key: '+getPopularity(courseTooltip.attrs.course.attrs.key)); var tops = new Array(); for (var towards in cPop) { //alert('examining '+towards+' with pop '+cPop[towards]+'...'); if (cPop[towards] == 0) continue; if (tops.length < maxMatches) { tops.push({idTag: towards, pop: cPop[towards], popFrac: 0}); //alert('added '+towards+'('+cPop[towards]+')'); if (tops.length == 10) { tops.sort(function(a,b){return a.pop - b.pop}); } } else if (cPop[towards] > tops[0].pop){ //alert('replacing '+tops[0].idTag+'('+tops[0].pop+') with '+towards+'('+cPop[towards]+')'); tops[0] = {idTag: towards, pop: cPop[towards], popFrac: 0}; tops.sort(function(a,b){return a.pop - b.pop}); } else { //alert(towards+'('+cPop[towards]+') <= '+tops[0].idTag+'('+tops[0].pop+')'); } } var printThing = 'tops: '; var totalPop = 0; for (var q = 0; q < tops.length; q++) { printThing += tops[q].idTag + '(' + tops[q].pop + '), '; totalPop += tops[q].pop; } //alert(printThing); //alert('total pop: '+totalPop); var tiers = new Array(); for (var q = 0; q < tops.length; q++) { tops[q].popFrac = tops[q].pop/totalPop; tiers.push(tops[q].popFrac); } var finalTiers = colorTiers(tiers); setTimeout(function() { destroyUserPath(); destroyRecPath(); recButton.setVisible(false); allCourses.each(function(course) { //alert('getting new course'); if (course.attrs.key != courseTooltip.attrs.course.attrs.key) { //alert('fixin things up!'); //var children = course.getParent().getChildren(); //children.each(function(child) { //child.setVisisble(false); //child.listening(false); //}); course.setVisible(false); course.destroy(); //course.listening(false); } }); courseTooltip.hide(); //FIGURE OUT HOW TO GET THIS PART WORKING!!!!!!!!!!!!! //FOR POSITIONING, USE SOME FORM OF x=centerX + sin(index * 2 * Math.PI / tops.length), y=centerY + cos(index * 2 * Math.PI / tops.length) //alert('centerX = '+centerX+' & centerY = '+centerY); //GET THESE NEW NODES TO BE IDENTICAL TO THE NORMAL COURSE NODES, AND WITH ALL NECESSARY INFORMATION FOR THE courseTooltip!!! for (var q = 0; q < tops.length; q++) { var allClusters = getClusters(); for (var clus in allClusters) { if (allClusters[clus].courseIDs.indexOf(tops[q].idTag) == -1) continue; var cData = getCourseData(allClusters[clus].idTag, tops[q].idTag); var coIndex = allClusters[clus].courseIDs.indexOf(tops[q].idTag); var coKey = allClusters[clus].courses[coIndex]; addSingleCourse(cData, centerX + 300 * Math.sin(q * 2 * Math.PI / tops.length), centerY - 300 * Math.cos(q * 2 * Math.PI / tops.length), coKey, tops[q].idTag, 0); break; } } highlightSelectedCourses(); connectsFromPopAnim(courseTooltip.attrs.course.attrs.idTag, tops, totalPop, finalTiers); popFromBoxAnim.start(); addUserPath(); //setTimeout(function() { var hiddenCourses = layerGUI.get('.course'); hiddenCourses.each(function(hidden) { if (hidden.attrs.key != courseTooltip.attrs.course.attrs.key) { var toggleHidden = new Kinetic.Tween({ node: hidden, duration: .50, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); } }); //}, 500); }, 550); }); connectsFromButton.get('Text')[0].setPosition(-(connectsFromButton.get('Text')[0].getWidth()/2),8); connectsFromButton.get('Rect')[0].setWidth(connectsFromButton.get('Text')[0].getWidth() + 20); connectsFromButton.get('Rect')[0].setHeight(connectsFromButton.get('Text')[0].getHeight() + 20); connectsFromButton.get('Rect')[0].setPosition(-connectsFromButton.get('Rect')[0].getWidth()/2,0); courseTooltip.add(connectsFromButton); courseTooltip.get('.connectsFromButton')[0].setPosition(-(courseTooltip.get('.descText')[0].getWidth()/2) + 162, 30); var pathAddButton = new Kinetic.Group({ name: 'pathAddButton', opacity: 0, visible: false, listening: true }); pathAddButton.add(new Kinetic.Rect({ //fill: '#40FF40', opacity: 0.6, stroke: COLORS().COURSE_TOOLTIP_OUTLINE, strokeWidth: 2, cornerRadius: 8, shadowColor: COLORS().COURSE_TOOLTIP_OUTLINE, shadowBlur: 10, shadowOffset: 7, shadowOpacity: 0.0, shadowEnabled: false })); pathAddButton.add(new Kinetic.Text({ text: 'change\npathway', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().COURSE_TEXT, align: 'center', opacity: 0.9 })); pathAddButton.on('mouseenter mouseover', function() { document.body.style.cursor = 'pointer'; this.get('Rect')[0].setShadowEnabled(true); //this.get('Rect')[0].setOpacity(0.8); this.get('Rect')[0].setShadowOpacity(0.6); this.get('Rect')[0].setFillEnabled(true); this.get('Rect')[0].setFill(COLORS().COURSE_TEXT); this.get('Text')[0].setFill(COLORS().COURSE); tooltipLayer.draw(); }); pathAddButton.on('mouseleave', function() { document.body.style.cursor = 'default'; //this.get('Rect')[0].setOpacity(0.5); this.get('Rect')[0].setShadowOpacity(0); this.get('Rect')[0].setShadowEnabled(false); this.get('Rect')[0].setFillEnabled(false); this.get('Text')[0].setFill(COLORS().COURSE_TEXT); tooltipLayer.draw(); }); pathAddButton.on('click touchstart', function() { var toggleConnectToButton = new Kinetic.Tween({ node: courseTooltip.get('.connectsToButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleConnectFromButton = new Kinetic.Tween({ node: courseTooltip.get('.connectsFromButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var togglePathAddButton = new Kinetic.Tween({ node: courseTooltip.get('.pathAddButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.addEndButton')[0].setVisible(true); var toggleAddEndButton = new Kinetic.Tween({ node: courseTooltip.get('.addEndButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.joinEndButton')[0].setVisible(true); var toggleAddEndButton = new Kinetic.Tween({ node: courseTooltip.get('.joinEndButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.removeButton')[0].setVisible(true); var toggleAddEndButton = new Kinetic.Tween({ node: courseTooltip.get('.removeButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { courseTooltip.get('.connectsToButton')[0].setVisible(false); courseTooltip.get('.connectsFromButton')[0].setVisible(false); courseTooltip.get('.pathAddButton')[0].setVisible(false); }, 550); }); //UPDATE THIS SO THAT USERS CAN USE THIS BUTTON TO ADD COURSES BOTH AFTER ANOTHER COURSE AND AT THE SAME TIME AS ANOTHER!!!!!!!!!!!!! pathAddButton.get('Text')[0].setPosition(-(pathAddButton.get('Text')[0].getWidth()/2),8); pathAddButton.get('Rect')[0].setWidth(pathAddButton.get('Text')[0].getWidth() + 20); pathAddButton.get('Rect')[0].setHeight(pathAddButton.get('Text')[0].getHeight() + 20); pathAddButton.get('Rect')[0].setPosition(-pathAddButton.get('Rect')[0].getWidth()/2,0); courseTooltip.add(pathAddButton); courseTooltip.get('.pathAddButton')[0].setPosition((courseTooltip.get('.descText')[0].getWidth()/2) - 10, 30); //GET connectsFromButton and connectsToButton to display when connectsButton clicked/touched pathAddButton.setVisible(false); var addEnd = new Kinetic.Group({ name: 'addEndButton', opacity: 0, visible: false, listening: true }); addEnd.add(new Kinetic.Rect({ //fill: '#40FF40', opacity: 0.6, stroke: COLORS().COURSE_TOOLTIP_OUTLINE, strokeWidth: 2, cornerRadius: 8, shadowColor: COLORS().COURSE_TOOLTIP_OUTLINE, shadowBlur: 10, shadowOffset: 7, shadowOpacity: 0.0, shadowEnabled: false })); addEnd.add(new Kinetic.Text({ text: 'add to\nend', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().COURSE_TEXT, align: 'center', opacity: 0.9 })); addEnd.on('mouseenter mouseover', function() { document.body.style.cursor = 'pointer'; this.get('Rect')[0].setShadowEnabled(true); //this.get('Rect')[0].setOpacity(0.8); this.get('Rect')[0].setShadowOpacity(0.6); this.get('Rect')[0].setFillEnabled(true); this.get('Rect')[0].setFill(COLORS().COURSE_TEXT); this.get('Text')[0].setFill(COLORS().COURSE); tooltipLayer.draw(); }); addEnd.on('mouseleave', function() { document.body.style.cursor = 'default'; //this.get('Rect')[0].setOpacity(0.5); this.get('Rect')[0].setShadowOpacity(0); this.get('Rect')[0].setShadowEnabled(false); this.get('Rect')[0].setFillEnabled(false); this.get('Text')[0].setFill(COLORS().COURSE_TEXT); tooltipLayer.draw(); }); addEnd.on('click touchstart', function() { var foundInd = -1; //userPathway.courses.indexOf(courseTooltip.attrs.course.attrs.idTag); for (var j = 0; j < userPathway.courses.length; j++) { var currConnect = userPathway.courses[j]; if (currConnect.indexOf(courseTooltip.attrs.course.attrs.idTag) != -1) { foundInd = j; break; } } //alert('for '+courseTooltip.attrs.course.attrs.idTag+' the foundInd is '+foundInd); if (foundInd == -1) { var endInd = userPathway.courses.length; userPathway.courses[endInd] = new Array(); userPathway.courses[endInd].push(courseTooltip.attrs.course.attrs.idTag); //addUserPathCourseLabel(courseTooltip.attrs.course.attrs.idTag, userPathway.courses.length, layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().x, layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().y); if (endInd == 0) { //alert('first!\nendInd: '+endInd+'\nidTag:'+courseTooltip.attrs.course.attrs.idTag+'\n(x,y): '+layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().x+','+layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().y); addUserPathCourseLabel(courseTooltip.attrs.course.attrs.idTag, endInd, layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().x, layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().y); } else { destroyUserPath(); addUserPath(); } for(var p = 0; p < courseTooltip.attrs.course.attrs.courseReqs.length; p++) { var bar = progressBar.get('#'+courseTooltip.attrs.course.attrs.courseReqs[p])[0]; if (bar.attrs.nMet < bar.attrs.nReq) { if (bar.attrs.nMet == 0) { bar.attrs.nMet++; bar.get('.progBar1')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText1')[0].setFill(COLORS().PROGRESS_BACKGROUND); } else if (bar.attrs.nMet == 1) { bar.attrs.nMet++; bar.get('.progBar2')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText2')[0].setFill(COLORS().PROGRESS_BACKGROUND); } } } } }); addEnd.get('Text')[0].setPosition(-(addEnd.get('Text')[0].getWidth()/2),8); addEnd.get('Rect')[0].setWidth(addEnd.get('Text')[0].getWidth() + 20); addEnd.get('Rect')[0].setHeight(addEnd.get('Text')[0].getHeight() + 20); addEnd.get('Rect')[0].setPosition(-addEnd.get('Rect')[0].getWidth()/2,0); courseTooltip.add(addEnd); courseTooltip.get('.addEndButton')[0].setPosition(-(courseTooltip.get('.descText')[0].getWidth()/2) + 20, 30); addEnd.setVisible(false); var joinEnd = new Kinetic.Group({ name: 'joinEndButton', opacity: 0, visible: false, listening: true }); joinEnd.add(new Kinetic.Rect({ //fill: '#40FF40', opacity: 0.6, stroke: COLORS().COURSE_TOOLTIP_OUTLINE, strokeWidth: 2, cornerRadius: 8, shadowColor: COLORS().COURSE_TOOLTIP_OUTLINE, shadowBlur: 10, shadowOffset: 7, shadowOpacity: 0.0, shadowEnabled: false })); joinEnd.add(new Kinetic.Text({ text: 'join to\nend', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().COURSE_TEXT, align: 'center', opacity: 0.9 })); joinEnd.on('mouseenter mouseover', function() { document.body.style.cursor = 'pointer'; this.get('Rect')[0].setShadowEnabled(true); //this.get('Rect')[0].setOpacity(0.8); this.get('Rect')[0].setShadowOpacity(0.6); this.get('Rect')[0].setFillEnabled(true); this.get('Rect')[0].setFill(COLORS().COURSE_TEXT); this.get('Text')[0].setFill(COLORS().COURSE); tooltipLayer.draw(); }); joinEnd.on('mouseleave', function() { document.body.style.cursor = 'default'; //this.get('Rect')[0].setOpacity(0.5); this.get('Rect')[0].setShadowOpacity(0); this.get('Rect')[0].setShadowEnabled(false); this.get('Rect')[0].setFillEnabled(false); this.get('Text')[0].setFill(COLORS().COURSE_TEXT); tooltipLayer.draw(); }); joinEnd.on('click touchstart', function() { var foundInd = -1; //userPathway.courses.indexOf(courseTooltip.attrs.course.attrs.idTag); for (var j = 0; j < userPathway.courses.length; j++) { var currConnect = userPathway.courses[j]; if (currConnect.indexOf(courseTooltip.attrs.course.attrs.idTag) != -1) { foundInd = j; break; } } if (foundInd == -1) { var endInd = userPathway.courses.length-1; userPathway.courses[endInd].push(courseTooltip.attrs.course.attrs.idTag); //addUserPathCourseLabel(courseTooltip.attrs.course.attrs.idTag, userPathway.courses.length, layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().x, layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().y); if (endInd == 0) { //alert('first!\nendInd: '+endInd+'\nidTag:'+courseTooltip.attrs.course.attrs.idTag+'\n(x,y): '+layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().x+','+layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().y); addUserPathCourseLabel(courseTooltip.attrs.course.attrs.idTag, endInd, layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().x, layerGUI.get('#'+courseTooltip.attrs.course.attrs.idTag)[0].getAbsolutePosition().y); } else { destroyUserPath(); addUserPath(); } //alert('reqs length: '+courseTooltip.attrs.course.attrs.courseReqs.length); for(var p = 0; p < courseTooltip.attrs.course.attrs.courseReqs.length; p++) { var bar = progressBar.get('#'+courseTooltip.attrs.course.attrs.courseReqs[p])[0]; if (bar.attrs.nMet < bar.attrs.nReq) { if (bar.attrs.nMet == 0) { bar.attrs.nMet++; bar.get('.progBar1')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText1')[0].setFill(COLORS().PROGRESS_BACKGROUND); } else if (bar.attrs.nMet == 1) { bar.attrs.nMet++; bar.get('.progBar2')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText2')[0].setFill(COLORS().PROGRESS_BACKGROUND); } } } } }); joinEnd.get('Text')[0].setPosition(-(joinEnd.get('Text')[0].getWidth()/2),8); joinEnd.get('Rect')[0].setWidth(joinEnd.get('Text')[0].getWidth() + 20); joinEnd.get('Rect')[0].setHeight(joinEnd.get('Text')[0].getHeight() + 20); joinEnd.get('Rect')[0].setPosition(-joinEnd.get('Rect')[0].getWidth()/2,0); courseTooltip.add(joinEnd); courseTooltip.get('.joinEndButton')[0].setPosition(-(courseTooltip.get('.descText')[0].getWidth()/2) + 162, 30); joinEnd.setVisible(false); var removeButton = new Kinetic.Group({ name: 'removeButton', opacity: 0, visible: false, listening: true }); removeButton.add(new Kinetic.Rect({ //fill: '#40FF40', opacity: 0.6, stroke: COLORS().COURSE_TOOLTIP_OUTLINE, strokeWidth: 2, cornerRadius: 8, shadowColor: COLORS().COURSE_TOOLTIP_OUTLINE, shadowBlur: 10, shadowOffset: 7, shadowOpacity: 0.0, shadowEnabled: false })); removeButton.add(new Kinetic.Text({ text: 'remove\ncourse', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().COURSE_TEXT, align: 'center', opacity: 0.9 })); removeButton.on('mouseenter mouseover', function() { document.body.style.cursor = 'pointer'; this.get('Rect')[0].setShadowEnabled(true); //this.get('Rect')[0].setOpacity(0.8); this.get('Rect')[0].setShadowOpacity(0.6); this.get('Rect')[0].setFillEnabled(true); this.get('Rect')[0].setFill(COLORS().COURSE_TEXT); this.get('Text')[0].setFill(COLORS().COURSE); tooltipLayer.draw(); }); removeButton.on('mouseleave', function() { document.body.style.cursor = 'default'; //this.get('Rect')[0].setOpacity(0.5); this.get('Rect')[0].setShadowOpacity(0); this.get('Rect')[0].setShadowEnabled(false); this.get('Rect')[0].setFillEnabled(false); this.get('Text')[0].setFill(COLORS().COURSE_TEXT); tooltipLayer.draw(); }); removeButton.on('click touchstart', function() { var foundInd = [-1, -1]; //userPathway.courses.indexOf(courseTooltip.attrs.course.attrs.idTag); for (var j = 0; j < userPathway.courses.length; j++) { var currConnect = userPathway.courses[j]; if (currConnect.indexOf(courseTooltip.attrs.course.attrs.idTag) != -1) { foundInd[0] = j; foundInd[1] = currConnect.indexOf(courseTooltip.attrs.course.attrs.idTag); break; } } if (foundInd[0] != -1) { userPathway.courses[foundInd[0]].splice(foundInd[1], 1); if (userPathway.courses[foundInd[0]].length == 0) { userPathway.courses.splice(foundInd[0], 1); } destroyUserPath(); addUserPath(); var progGroups = progressBar.get('.progGroup'); progGroups.each(function(group) { group.attrs.nMet = 0; }); var progBars = progressBar.get('.progBar1'); progBars.each(function(bar) { bar.setFill(COLORS().PROGRESS_BACKGROUND); }); var progBars = progressBar.get('.progBar2'); progBars.each(function(bar) { bar.setFill(COLORS().PROGRESS_BACKGROUND); }); var progText = progressBar.get('.progText1'); progText.each(function(text) { text.setFill(COLORS().PROGRESS_TEXT); }); var progText = progressBar.get('.progText2'); progText.each(function(text) { text.setFill(COLORS().PROGRESS_TEXT); }); for(var r = 0; r < userPathway.courses.length; r++) { for(var q = 0; q < userPathway.courses[r].length; q++) { var currCourse = layerGUI.get('#'+userPathway.courses[r][q]); //alert('presence of '+userPathway.courses[r][q]+' is '+currCourse.length); if (currCourse.length == 0) continue; for(var p = 0; p < currCourse[0].attrs.courseReqs.length; p++) { var bar = progressBar.get('#'+currCourse[0].attrs.courseReqs[p])[0]; //alert(userPathway.courses[r][q]+' meets '+currCourse[0].attrs.courseReqs[p]+', which has now been met '+(bar.attrs.nMeq+1)+' many times'); if (bar.attrs.nMet < bar.attrs.nReq) { if (bar.attrs.nMet == 0) { bar.attrs.nMet++; bar.get('.progBar1')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText1')[0].setFill(COLORS().PROGRESS_BACKGROUND); } else if (bar.attrs.nMet == 1) { bar.attrs.nMet++; bar.get('.progBar2')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText2')[0].setFill(COLORS().PROGRESS_BACKGROUND); } } } } } layerGUI.draw(); } //bar.get('.progBar1')[0].setFill(COLORS().PROGRESS_TEXT); //bar.get('.progText1')[0].setFill(COLORS().PROGRESS_BACKGROUND); }); removeButton.get('Text')[0].setPosition(-(removeButton.get('Text')[0].getWidth()/2),8); removeButton.get('Rect')[0].setWidth(removeButton.get('Text')[0].getWidth() + 20); removeButton.get('Rect')[0].setHeight(removeButton.get('Text')[0].getHeight() + 20); removeButton.get('Rect')[0].setPosition(-removeButton.get('Rect')[0].getWidth()/2,0); courseTooltip.add(removeButton); courseTooltip.get('.removeButton')[0].setPosition((courseTooltip.get('.descText')[0].getWidth()/2) - 10, 30); removeButton.setVisible(false); tooltipLayer.add(courseTooltip); courseTooltip.setPosition(centerX, centerY); //courseTooltip.show(); courseTooltip.hide(); tooltipLayer.batchDraw(); coTtWidth = courseTooltip.get('.base')[0].getWidth(); coTtHeight = courseTooltip.get('.base')[0].getHeight(); } function addTwoOG() { var group = new Kinetic.Group({ id: 'back', opacity: 0 }); var rect = new Kinetic.Rect({ x: 5, y: 5, width: 80, height: 40, stroke: "black", strokeWidth: 4, fill: "#444444", cornerRadius: 10 }); var text = new Kinetic.Text({ x: 5, y: 16, text: "back", fontSize: 16, fontFamily: "Calibri", fill: "white", width: 80, align: 'center', fontStyle: 'bold' }); group.add(rect); group.add(text); group.on('click touchstart', function() { layerGUI.get('.course').each(function(course) { course.off('mouseenter mouseleave mousemove'); }); anim.stop(); runAnimation = false; animating = false; tooltip.hide(); tooltipLayer.draw(); resetSphereGUI(); var hideCourseTooltip = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { courseTooltip.setVisible(false); }, 500); transitionBack(); examining = false; atHome = true; //setUpAnim(); //anim.start(); }); layerGUI.add(group); group.setVisible(false); var group2 = new Kinetic.Group({ id: 'toggle' }); var text2 = new Kinetic.Text({ x: centerX - 100, y: 10, text: "toggle animation", fontSize: 16, fontFamily: "Calibri", fill: "white", padding: 15, width: 200, align: 'center', fontStyle: 'bold' }); group2.add(new Kinetic.Rect({ x: centerX - 100, y: 10, width: 200, height: text2.getHeight(), stroke: "black", strokeWidth: 4, fill: "#444", cornerRadius: 10 })); group2.add(text2); group2.on("click touchstart", function () { if(animating && runAnimation){ anim.stop(); //hexagon.setFill(hexagon.attrs.pauseColor); } else if(!animating && !runAnimation){ anim.start(); //hexagon.setFill(hexagon.attrs.goColor); } runAnimation = !runAnimation; animating = !animating; sphereControls.animate = !sphereControls.animate; layerGUI.draw(); }); // layerGUI.add(group2); //TOGGLE ANIMATION BUTTON!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! } function addBigRecButton() { var group = new Kinetic.Group({ id: 'recButton', opacity: 0, showingRec: false, }); var rect = new Kinetic.Rect({ x: -25, y: 0, width: 160, height: 40, stroke: "black", strokeWidth: 4, fill: "#444444", cornerRadius: 10 }); var text = new Kinetic.Text({ x: 0, y: 11, text: "recommended way through the WAYS", fontSize: 16, fontFamily: "Calibri", fill: "white", //width: 80, //align: 'center', fontStyle: 'bold' }); rect.setWidth(text.getWidth()+50); group.add(rect); group.add(text); group.setPosition(stage.getWidth()-rect.getWidth()-5,5); layerGUI.add(group); group.on('mousedown touchstart', function() { if(examining) { var allRec = layerGUI.get('#recommended'); var allCPM = layerGUI.get('.cpm'); if(this.attrs.showingRec) { this.attrs.showingRec = false; pathwayControls.showRec = false; pathwayControls.highlightRec = false; allRec.each(function(rec) { var toggleRecc = new Kinetic.Tween({ node: rec, duration: .5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { rec.setVisible(false); rec.attrs.highlighted = false; }, 500); }); allCPM.each(function(cpm) { var toggleRecc = new Kinetic.Tween({ node: cpm, duration: .5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { cpm.setVisible(false); }, 500); }); var orderLabels = layerGUI.get('.orderLabel'); orderLabels.each(function(label) { var toggleOrdLab = new Kinetic.Tween({ node: label, duration: .5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { label.setVisible(false); }, 500); }); layerGUI.draw(); } else { this.attrs.showingRec = true; pathwayControls.showRec = true; pathwayControls.highlightRec = true; allRec.each(function(rec) { rec.setVisible(true); rec.attrs.highlighted = true; var toggleRecc = new Kinetic.Tween({ node: rec, duration: .5, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); }); allCPM.each(function(cpm) { cpm.setVisible(true); cpm.moveToBottom(); var toggleRecc = new Kinetic.Tween({ node: cpm, duration: .5, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); }); layerGUI.draw(); allRec.moveToTop(); var recLines = layerGUI.get('.recLine'); recLines.each(function(line) { line.setOpacity(0.9); line.setShadowOpacity(0.5); }); var orderLabels = layerGUI.get('.orderLabel'); orderLabels.each(function(label) { label.setVisible(true); var toggleOrdLab = new Kinetic.Tween({ node: label, duration: .5, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); }); } invertRecButtonColors(); } }); } function invertRecButtonColors() { var recButton = layerGUI.get('#recButton')[0]; if (recButton.attrs.showingRec) { recButton.get('Rect')[0].setFill('white'); recButton.get('Text')[0].setFill('#444444'); } else { recButton.get('Rect')[0].setFill('#444444'); recButton.get('Text')[0].setFill('white'); } } function setUpProgressBar(){ var progWidth = 80; var progHeight = 30; progressBar = new Kinetic.Group({ id: 'progress', opacity: 1, x: 5, //CHANGE THIS y: stage.getHeight() - progHeight - 10 //AND CHANGE THIS }); var aestheticProg = new Kinetic.Group({ id: 'aesthetic', opacity: 1, x: 0, y: 0, name: 'progGroup', // CUSTOMS nReq: 2, nMet: 0 }); aestheticProg.add(new Kinetic.Rect({ name: 'progBar1', opacity: 1, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var aestheticText1 = new Kinetic.Text({ name: 'progText1', opacity: 1, text: 'AII', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); aestheticProg.add(aestheticText1); aestheticText1.setPosition((progWidth-aestheticText1.getWidth())/2, (progHeight-aestheticText1.getHeight())/2); aestheticProg.add(new Kinetic.Rect({ name: 'progBar2', opacity: 1, x: progWidth, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var aestheticText2 = new Kinetic.Text({ name: 'progText2', opacity: 1, text: 'AII', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); aestheticProg.add(aestheticText2); aestheticText2.setPosition((progWidth-aestheticText2.getWidth())/2 + progWidth, (progHeight-aestheticText1.getHeight())/2); progressBar.add(aestheticProg); var aestheticCover = new Kinetic.Rect({ name: 'cover', opacity: 0, x: 0, y: 0, width: progWidth*2, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, strokeEnabled: false }); aestheticProg.add(aestheticCover); aestheticCover.on('mouseenter touchstart', function(){ layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Aesthetic and Interpretive Inquiry');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); aestheticCover.on('mouseleave touchend', function(){ layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); aestheticCover.on('mousemove touchmove', function(evt) { var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Aesthetic and Interpretive Inquiry');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); var socialProg = new Kinetic.Group({ id: 'social', opacity: 1, x: progWidth * 9, y: 0, name: 'progGroup', // CUSTOMS nReq: 2, nMet: 0 }); socialProg.add(new Kinetic.Rect({ name: 'progBar1', opacity: 1, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var socialText1 = new Kinetic.Text({ name: 'progText1', opacity: 1, text: 'SI', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); socialProg.add(socialText1); socialText1.setPosition((progWidth-socialText1.getWidth())/2, (progHeight-socialText1.getHeight())/2); socialProg.add(new Kinetic.Rect({ name: 'progBar2', opacity: 1, x: progWidth, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var socialText2 = new Kinetic.Text({ name: 'progText2', opacity: 1, text: 'SI', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); socialProg.add(socialText2); socialText2.setPosition((progWidth-socialText2.getWidth())/2 + progWidth, (progHeight-socialText1.getHeight())/2); progressBar.add(socialProg); var socialCover = new Kinetic.Rect({ name: 'cover', opacity: 0, x: 0, y: 0, width: progWidth*2, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, strokeEnabled: false }); socialProg.add(socialCover); socialCover.on('mouseenter touchstart', function(){ layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Social Inquiry');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); socialCover.on('mouseleave touchend', function(){ layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); socialCover.on('mousemove touchmove', function(evt) { var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Social Inquiry');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); var scienceProg = new Kinetic.Group({ id: 'science', opacity: 1, x: progWidth * 7, y: 0, name: 'progGroup', // CUSTOMS nReq: 2, nMet: 0 }); scienceProg.add(new Kinetic.Rect({ name: 'progBar1', opacity: 1, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var scienceText1 = new Kinetic.Text({ name: 'progText1', opacity: 1, text: 'SMA', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); scienceProg.add(scienceText1); scienceText1.setPosition((progWidth-scienceText1.getWidth())/2, (progHeight-scienceText1.getHeight())/2); scienceProg.add(new Kinetic.Rect({ name: 'progBar2', opacity: 1, x: progWidth, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var scienceText2 = new Kinetic.Text({ name: 'progText2', opacity: 1, text: 'SMA', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); scienceProg.add(scienceText2); scienceText2.setPosition((progWidth-scienceText2.getWidth())/2 + progWidth, (progHeight-scienceText1.getHeight())/2); progressBar.add(scienceProg); var scienceCover = new Kinetic.Rect({ name: 'cover', opacity: 0, x: 0, y: 0, width: progWidth*2, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, strokeEnabled: false }); scienceProg.add(scienceCover); scienceCover.on('mouseenter touchstart', function(){ layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Scientific Method and Analysis');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); scienceCover.on('mouseleave touchend', function(){ layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); scienceCover.on('mousemove touchmove', function(evt) { var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Scientific Method and Analysis');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); var formalReasProg = new Kinetic.Group({ id: 'formalReas', opacity: 1, x: progWidth * 6, y: 0, name: 'progGroup', // CUSTOMS nReq: 1, nMet: 0 }); formalReasProg.add(new Kinetic.Rect({ name: 'progBar1', opacity: 1, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var formalReasText1 = new Kinetic.Text({ name: 'progText1', opacity: 1, text: 'FR', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); formalReasProg.add(formalReasText1); formalReasText1.setPosition((progWidth-formalReasText1.getWidth())/2, (progHeight-formalReasText1.getHeight())/2); progressBar.add(formalReasProg); var formalCover = new Kinetic.Rect({ name: 'cover', opacity: 0, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, strokeEnabled: false }); formalReasProg.add(formalCover); formalCover.on('mouseenter touchstart', function(){ layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Formal Reasoning');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); formalCover.on('mouseleave touchend', function(){ layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); formalCover.on('mousemove touchmove', function(evt) { var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Formal Reasoning');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); var appQuantProg = new Kinetic.Group({ id: 'appQuant', opacity: 1, x: progWidth * 2, y: 0, name: 'progGroup', // CUSTOMS nReq: 1, nMet: 0 }); appQuantProg.add(new Kinetic.Rect({ name: 'progBar1', opacity: 1, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var appQuantText1 = new Kinetic.Text({ name: 'progText1', opacity: 1, text: 'AQR', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); appQuantProg.add(appQuantText1); appQuantText1.setPosition((progWidth-appQuantText1.getWidth())/2, (progHeight-appQuantText1.getHeight())/2); progressBar.add(appQuantProg); var appQuantCover = new Kinetic.Rect({ name: 'cover', opacity: 0, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, strokeEnabled: false }); appQuantProg.add(appQuantCover); appQuantCover.on('mouseenter touchstart', function(){ layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Applied Quantitative Reasoning');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); appQuantCover.on('mouseleave touchend', function(){ layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); appQuantCover.on('mousemove touchmove', function(evt) { var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Applied Quantitative Reasoning');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); var diversityProg = new Kinetic.Group({ id: 'diversity', opacity: 1, x: progWidth * 4, y: 0, name: 'progGroup', // CUSTOMS nReq: 1, nMet: 0 }); diversityProg.add(new Kinetic.Rect({ name: 'progBar1', opacity: 1, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var diversityText1 = new Kinetic.Text({ name: 'progText1', opacity: 1, text: 'ED', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); diversityProg.add(diversityText1); diversityText1.setPosition((progWidth-diversityText1.getWidth())/2, (progHeight-diversityText1.getHeight())/2); progressBar.add(diversityProg); var diversityCover = new Kinetic.Rect({ name: 'cover', opacity: 0, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, strokeEnabled: false }); diversityProg.add(diversityCover); diversityCover.on('mouseenter touchstart', function(){ layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Engaging Diversity');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); diversityCover.on('mouseleave touchend', function(){ layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); diversityCover.on('mousemove touchmove', function(evt) { var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Engaging Diversity');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); var ethicsProg = new Kinetic.Group({ id: 'ethics', opacity: 1, x: progWidth * 5, y: 0, name: 'progGroup', // CUSTOMS nReq: 1, nMet: 0 }); ethicsProg.add(new Kinetic.Rect({ name: 'progBar1', opacity: 1, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var ethicsText1 = new Kinetic.Text({ name: 'progText1', opacity: 1, text: 'ER', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); ethicsProg.add(ethicsText1); ethicsText1.setPosition((progWidth-ethicsText1.getWidth())/2, (progHeight-ethicsText1.getHeight())/2); progressBar.add(ethicsProg); var ethicsCover = new Kinetic.Rect({ name: 'cover', opacity: 0, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, strokeEnabled: false }); ethicsProg.add(ethicsCover); ethicsCover.on('mouseenter touchstart', function(){ layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Ethical Reasoning');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); ethicsCover.on('mouseleave touchend', function(){ layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); ethicsCover.on('mousemove touchmove', function(evt) { var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Ethical Reasoning');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); var creativeExProg = new Kinetic.Group({ id: 'creativeEx', opacity: 1, x: progWidth * 3, y: 0, name: 'progGroup', // CUSTOMS nReq: 1, nMet: 0 }); creativeExProg.add(new Kinetic.Rect({ name: 'progBar1', opacity: 1, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, })); var creativeExText1 = new Kinetic.Text({ name: 'progText1', opacity: 1, text: 'CE', fontFamily: 'Verdana', fontSize: 18, fill: COLORS().PROGRESS_TEXT, }); creativeExProg.add(creativeExText1); creativeExText1.setPosition((progWidth-creativeExText1.getWidth())/2, (progHeight-creativeExText1.getHeight())/2); progressBar.add(creativeExProg); var creativeExCover = new Kinetic.Rect({ name: 'cover', opacity: 0, x: 0, y: 0, width: progWidth, height: progHeight, fill: COLORS().PROGRESS_BACKGROUND, strokeWidth: 5, strokeEnabled: false }); creativeExProg.add(creativeExCover); creativeExCover.on('mouseenter touchstart', function(){ layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Creative Expression');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); creativeExCover.on('mouseleave touchend', function(){ layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); creativeExCover.on('mousemove touchmove', function(evt) { var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, 'Creative Expression');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); layerGUI.add(progressBar); progressBar.setPosition((stage.getWidth() - progWidth*11 - 10)/2, stage.getHeight() - progHeight - 10) } function addHexagon() { hexagon = new Kinetic.RegularPolygon({ //x: stage.getWidth() / 2, //y: stage.getHeight() / 2, x: window.innerWidth / 2, y: window.innerHeight / 2, sides: 6, radius: 70, fill: '#0DBF37', stroke: 'black', strokeWidth: 4, opacity: 0.50, // CUSTOMS key: 'poptart', goColor: '#0DBF37', pauseColor: '#D91818' //showing: true }); layerGUI.add(hexagon); hexagon.on('mousemove', function() { var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; //var text = $(this).data('name'); updateTooltip(tooltip, x, y, hexagon.attrs.key); tooltipLayer.batchDraw(); }); hexagon.on('mouseout', function() { tooltip.hide(); tooltipLayer.draw(); }); hexagon.on('click', function() { if(animating && runAnimation){ anim.stop(); hexagon.setFill(hexagon.attrs.pauseColor); } else if(!animating && !runAnimation){ anim.start(); hexagon.setFill(hexagon.attrs.goColor); } runAnimation = !runAnimation; animating = !animating; layerGUI.draw(); }); } function setUpAnim() { anim = new Kinetic.Animation(function(frame) { /* hexagon.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX); //CODE TO GET THIS ELLIPSE WORKING var k = window.innerHeight / 2; var b2 = Math.pow(window.innerHeight * (3.0/16.0), 2); var a2 = Math.pow(window.innerWidth * (7.0/32.0), 2); var h = window.innerWidth / 2; var xh = Math.pow(hexagon.getX() - h, 2); var y = k + Math.sqrt(b2 * (1 - (xh / a2))); hexagon.setY(y); if((hexagon.getX() >= centerX + amplitude - 0.5) && hexagon.isVisible()){ //hexagon.attrs.showing = false; hexagon.setVisible(false); } else if((hexagon.getX() <= centerX - amplitude + 0.5) && !hexagon.isVisible()){ hexagon.setVisible(true); } var scaleX = Math.sqrt((amplitude - Math.abs(hexagon.getX() - centerX)) / amplitude); var scaleY = 1 - (0.3 * Math.pow((Math.abs(hexagon.getX() - centerX)) / amplitude, 2)); hexagon.setScale(scaleX, scaleY); */ //OH DEAR LORD HAVE SWEET MERCY ON MY SOUL (read: I hate geometry) /* // select shapes by type var shapes = layerGUI.get('Circle'); // apply transition to all nodes in the array shapes.each(function(shape) { cAmp = Math.sqrt(Math.abs(Math.pow(amplitude, 2) - Math.pow(window.innerHeight / 2 - Math.abs(shape.attrs.finalYPos), 2))); shape.setX(cAmp * Math.sin(Math.abs((frame.time + shape.attrs.tOff) * 2 * Math.PI / period)) + centerX); var ck = shape.attrs.finalYPos; var cb2scale = 1.0 - (0.7 * Math.pow(Math.abs(ck - (window.innerHeight / 2)) / amplitude, 2)); var cb2 = Math.pow(window.innerHeight * (3.0/16.0) * cb2scale, 2); var ca2 = Math.pow(cAmp, 2); var ch = window.innerWidth / 2; var cxh = Math.pow(shape.getX() - ch, 2); var cy = ck + Math.sqrt(cb2 * (1 - (cxh / ca2))); shape.setY(cy); if((shape.getX() >= centerX + cAmp - 1) && shape.isVisible()){ //hexagon.attrs.showing = false; shape.setVisible(false); } else if((shape.getX() <= centerX - cAmp + 0.2) && !shape.isVisible()){ shape.setVisible(true); } var scaleX = Math.sqrt((cAmp - Math.abs(shape.getX() - centerX)) / cAmp); var scaleY = 1 - (0.3 * Math.pow((Math.abs(shape.getX() - centerX)) / cAmp, 2)); shape.setScale(scaleX, scaleY); var angleScale; if(shape.getX() > centerX){ after = true; } if(shape.attrs.finalYPos <= window.innerHeight / 2){ angleScale = -(Math.PI / 4.7) * (Math.abs(shape.attrs.finalYPos - (window.innerHeight / 2)) / cAmp); } else{ angleScale = (Math.PI / 4.7) * (Math.abs(shape.attrs.finalYPos - (window.innerHeight / 2)) / cAmp); } var angleDif = angleScale * Math.sin((frame.time + shape.attrs.tOff) * 2 * Math.PI / period); shape.setRotation(angleDif); }); */ if(runAnimation){ var allGroups = layerGUI.get('.cluster'); allGroups.each(function(group) { cAmp = Math.sqrt(Math.abs(Math.pow(amplitude, 2) - Math.pow(centerY - Math.abs(group.attrs.finalYPos), 2))); var tx = cAmp * Math.sin(Math.abs((frame.time + group.attrs.tOff) * 2 * Math.PI / period)) + centerX; //group.setX(cAmp * Math.sin(Math.abs((frame.time + group.attrs.tOff) * 2 * Math.PI / period)) + centerX); if(tx < group.getX()){ group.setVisible(false); } else { group.setVisible(true); } var ck = group.attrs.finalYPos; var cb2scale = 1.0 - (0.7 * Math.pow(Math.abs(ck - (stage.getHeight() / 2)) / amplitude, 2)); var cb2 = Math.pow(stage.getHeight() * (3.0/16.0) * cb2scale, 2); var ca2 = Math.pow(cAmp, 2); var ch = stage.getWidth() / 2; var cxh = Math.pow(tx - ch, 2); var cy = ck + Math.sqrt(cb2 * (1 - (cxh / ca2))); //group.setY(cy); group.setPosition(tx, cy); //group.setPosition(tx, group.attrs.finalYPos); var children = group.getChildren(); children.each(function(child) { if(child.getClassName() == 'Label'){ child.setPosition(0, -38); }else{ child.setPosition(0, 0); //UNCOMMENT THIS AFTER TESTING IS DONE!!!!! var scaleX = Math.sqrt((cAmp - Math.abs(tx - centerX)) / cAmp); var scaleY = 1 - (0.3 * Math.pow((Math.abs(tx - centerX)) / cAmp, 2)); child.setScale(scaleX, scaleY); if(child.attrs.finalYPos <= stage.getHeight() / 2){ angleScale = -(Math.PI / 4.7) * (Math.abs(child.attrs.finalYPos - (stage.getHeight() / 2)) / cAmp); }else{ angleScale = (Math.PI / 4.7) * (Math.abs(child.attrs.finalYPos - (stage.getHeight() / 2)) / cAmp); } var angleDif = angleScale * Math.sin((frame.time + child.attrs.tOff) * 2 * Math.PI / period); child.setRotation(angleDif); } }); if((group.getX() >= centerX + cAmp - 1) && group.isVisible()){ //hexagon.attrs.showing = false; group.setVisible(false); } else if((group.getX() <= centerX - cAmp + 0.2) && !group.isVisible()){ group.setVisible(true); } //group.get('.tag').setPosition(tx, cy-38); }); //THIS IS WHERE TO INCLUDE THE ANIMATION CODE FOR THE SPHERE //sphere.rotation.y += rotationSpeed; sphere.rotation.y = (1.6 * Math.PI * frame.time / period); renderer.render(scene, camera); } /* var tags = stage.get('Label'); tags.each(function(tag) { cAmp = Math.sqrt(Math.abs(Math.pow(amplitude, 2) - Math.pow(window.innerHeight / 2 - Math.abs(tag.attrs.finalYPos), 2))); var tx = cAmp * Math.sin(Math.abs((frame.time + tag.attrs.tOff) * 2 * Math.PI / period)) + centerX; //tag.setX(cAmp * Math.sin(Math.abs((frame.time + tag.attrs.tOff) * 2 * Math.PI / period)) + centerX); var ck = tag.attrs.finalYPos; var cb2scale = 1.0 - (0.7 * Math.pow(Math.abs(ck - (window.innerHeight / 2)) / amplitude, 2)); var cb2 = Math.pow(window.innerHeight * (3.0/16.0) * cb2scale, 2); var ca2 = Math.pow(cAmp, 2); var ch = window.innerWidth / 2; var cxh = Math.pow(tx - ch, 2); var cy = ck + Math.sqrt(cb2 * (1 - (cxh / ca2))); //tag.setY(cy); tag.setPosition(tx, cy); if((tag.getX() >= centerX + cAmp - 1) && tag.isVisible()){ //hexagon.attrs.showing = false; tag.setVisible(false); } else if((tag.getX() <= centerX - cAmp + 0.2) && !tag.isVisible()){ tag.setVisible(true); } }); */ /* for(int i = 0; i < clusterLabels.length; i++){ cAmp = Math.sqrt(Math.abs(Math.pow(amplitude, 2) - Math.pow(window.innerHeight / 2 - Math.abs(clusterLabels[i].attrs.finalYPos), 2))); var tx = cAmp * Math.sin(Math.abs((frame.time + clusterLabels[i].attrs.tOff) * 2 * Math.PI / period)) + centerX; //clusterLabels[i].setX(cAmp * Math.sin(Math.abs((frame.time + clusterLabels[i].attrs.tOff) * 2 * Math.PI / period)) + centerX); var ck = clusterLabels[i].attrs.finalYPos; var cb2scale = 1.0 - (0.7 * Math.pow(Math.abs(ck - (window.innerHeight / 2)) / amplitude, 2)); var cb2 = Math.pow(window.innerHeight * (3.0/16.0) * cb2scale, 2); var ca2 = Math.pow(cAmp, 2); var ch = window.innerWidth / 2; var cxh = Math.pow(tx - ch, 2); var cy = ck + Math.sqrt(cb2 * (1 - (cxh / ca2))); //clusterLabels[i].setY(cy); clusterLabels[i].setPosition(tx, cy); } */ /* var allTags = stage.get('.tag'); allTags.each(function(tag) { cAmp = Math.sqrt(Math.abs(Math.pow(amplitude, 2) - Math.pow(window.innerHeight / 2 - Math.abs(tag.attrs.finalYPos), 2))); var tx = cAmp * Math.sin(Math.abs((frame.time + tag.attrs.tOff) * 2 * Math.PI / period)) + centerX; //tag.setX(cAmp * Math.sin(Math.abs((frame.time + tag.attrs.tOff) * 2 * Math.PI / period)) + centerX); var ck = tag.attrs.finalYPos; var cb2scale = 1.0 - (0.7 * Math.pow(Math.abs(ck - (window.innerHeight / 2)) / amplitude, 2)); var cb2 = Math.pow(window.innerHeight * (3.0/16.0) * cb2scale, 2); var ca2 = Math.pow(cAmp, 2); var ch = window.innerWidth / 2; var cxh = Math.pow(tx - ch, 2); var cy = ck + Math.sqrt(cb2 * (1 - (cxh / ca2))); //tag.setY(cy); tag.setPosition(tx, cy); if((tag.getX() >= centerX + cAmp - 1) && tag.isVisible()){ //hexagon.attrs.showing = false; tag.setVisible(false); } else if((tag.getX() <= centerX - cAmp + 0.2) && !tag.isVisible()){ tag.setVisible(true); } }); */ }, layerGUI); //alert('finished anim!'); } function addClusters() { var clusters = getClusters(); for(var key in clusters){ var cluster = clusters[key]; var courses = cluster.courses; var xPos = cluster.xPos; var yPos = (stage.getHeight()/2.0) + cluster.yPos; var desc = cluster.description; var tOff = cluster.timeOffset; //FIX THIS PART!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! cAmp = Math.sqrt(Math.abs(Math.pow(amplitude, 2) - Math.pow(stage.getHeight() / 2 - Math.abs(yPos), 2))); var initX = cAmp * Math.sin(Math.abs(tOff * 2 * Math.PI / period)) + centerX; var ck = yPos; var cb2scale = 1.0 - (0.7 * Math.pow(Math.abs(ck - (stage.getHeight() / 2)) / amplitude, 2)); var cb2 = Math.pow(stage.getHeight() * (3.0/16.0) * cb2scale, 2); var ca2 = Math.pow(cAmp, 2); var ch = stage.getWidth() / 2; var cxh = Math.pow(initX - ch, 2); var cy = ck + Math.sqrt(cb2 * (1 - (cxh / ca2))); var curr = new Kinetic.Group({ /* x: initX, y: cy, */ x: centerX, y: yPos, name: 'cluster', //CUSTOMS!!! key: key, finalYPos: yPos, tOff: tOff, origTOff: tOff, initShow: cluster.initShow, initX: initX, initY: cy, idTag: cluster.idTag, courseIDs: cluster.courseIDs, }); /* var circle1 = new Kinetic.Circle({ x: stage.getWidth()/2, y: stage.getHeight()/2, radius: 35, fill: '#F71BC4', stroke: 'black', strokeWidth: 4, opacity: 0.75, scale: 1, }); layerGUI.add(circle1); */ /* //alert('for '+cluster.idTag+'...'); var currColor = COLORS().CLUSTER; for (var i = 0; i < userPathway.selected.length; i++) { //alert('course of subject: '+userPathway.selected[i]); if (cluster.courseIDs.indexOf(userPathway.selected[i]) != 1) { //alert('color changed for selected!'); currColor = COLORS().COURSE_SELECTED; } } for (var i = 0; i < userPathway.courses.length; i++) { //alert('course of subject: '+userPathway.courses[i]); if (cluster.courseIDs.indexOf(userPathway.courses[i]) != 1) { //alert('color changed for forged path!'); currColor = COLORS().FORGED_LINE; } } */ var circle = new Kinetic.Circle({ //x: stage.getWidth() / 2, //y: stage.getHeight() / 2, //x: xPos, //y: yPos, //x: initX, //y: cy, x: 0, y: 0, radius: 35, fill: COLORS().CLUSTER, stroke: COLORS().CLUSTER_INNER_OUTLINE, strokeWidth: 4, opacity: 0.65, scale: 1, id: cluster.idTag, name: 'innerCircle', //CUSTOMS!!! type: 'cluster', key: key, courses: courses, finalXPos: xPos, finalYPos: yPos, desc: desc, tOff: tOff, courseIDs: cluster.courseIDs, helix: cluster.helix }); /* if(!cluster.initShow){ circle.setVisible(false); } */ circle.on('mouseenter', function(){ //alert('helix: '+this.attrs.helix); if(this.isVisible()){ document.body.style.cursor = 'pointer'; anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); var children = this.getParent().getChildren(); children.each(function(child) { if(child.getClassName() == 'Label'){ child.setVisible(false); } }); this.setOpacity(0.85); layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; //if(animating && runAnimation){ updateTooltip(tooltip, x, y, this.attrs.key); //} else if(!animating && !runAnimation){ // updateTooltip(tooltip, x, y, this.attrs.key + "\n\n" + this.attrs.desc); //} tooltipLayer.batchDraw(); } }); circle.on('mouseleave', function(){ document.body.style.cursor = 'default'; if(!clusterTooltip.isVisible()){ anim.start(); runAnimation = true; animating = true; } layerGUI.draw(); var children = this.getParent().getChildren(); children.each(function(child) { if(child.getClassName() == 'Label'){ child.setVisible(true); } }); this.setOpacity(0.65); layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); circle.on('click touchstart', function(){ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //THIS IS WHERE TO CODE FOR THE TRANSITION!!!!!!! //layer3D.setVisible(false); //clusterTooltip.attrs.cluster = this.id; //alert('clusterTooltip.attrs.cluster == '+clusterTooltip.attrs.cluster); showClusterTooltip(this); /* addCourseNodes(this); transitionToCluster(); createRecommendedPath(this); examining = true; anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); */ /* clusterTooltip.setVisible(true); clusterTooltip.setPosition(this.getX(), this.getY()); tooltipLayer.batchDraw(); */ }); circle.on('mousemove', function(evt) { //var shape = evt.targetNode; var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; //if(animating && runAnimation){ updateTooltip(tooltip, x, y, this.attrs.key); //} else if(!animating && !runAnimation){ // updateTooltip(tooltip, x, y, this.attrs.key + "\n\n" + this.attrs.desc); //} tooltipLayer.batchDraw(); }); /* circle.setX(circle.x); circle.setY(circle.y); */ var outer = new Kinetic.Circle({ //x: initX, //y: cy, x: 0, y: 0, radius: 60, fill: COLORS().CLUSTER_OUTER, stroke: COLORS().CLUSTER_OUTER_OUTLINE, strokeWidth: 6, opacity: 0, //was 0.5 scale: 1, //CUSTOMS finalYPos: yPos, tOff: tOff }); /* if(!cluster.initShow){ outer.setVisible(false); } */ outer.on('click', function(){ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //CODE FOR THE TRANSITION HERE TOO!!!!!! }); outer.on('mouseenter', function(){ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); }); outer.on('mouseleave', function(){ if(!clusterTooltip.isVisible()){ anim.start(); runAnimation = true; animating = true; layerGUI.draw(); } }); var tag = new Kinetic.Label({ x: 0, y: -38, opacity: 0.50, listening: true, name: tag, //draggable: true, //CUSTOM key: key, desc: desc, finalYPos: yPos, tOff: tOff }); tag.add(new Kinetic.Tag({ fill: 'black', pointerDirection: 'down', pointerWidth: 0, pointerHeight: 0, lineJoin: 'round', shadowColor: 'black', shadowBlur: 10, shadowOffset: 10, shadowOpacity: 0.5 })); tag.add(new Kinetic.Text({ text: key, fontFamily: 'Calibri', fontSize: 18, padding: 5, fill: 'white' })); //tag.setPosition(initX, cy-35); //tag.show(); tag.setVisible(true); /* if(!cluster.initShow){ tag.setVisible(false); } */ clusterLabels.push(tag); /* curr.trans = new Kinetic.Tween({ node: curr, duration: 1, opacity: 0, easing: Kinetic.Easings.EaseInOut }); */ curr.add(outer); curr.add(circle); curr.add(tag); if(!cluster.initShow){ curr.setVisible(false); } layerGUI.add(curr); } //layerGUI.draw(); } function updateTooltip(tooltip, x, y, text) { tooltip.getText().setText(text); tooltip.setPosition(x, y); if (tooltip.get('.tooltipText')[0].getWidth() > 250) { //alert('boop make text box smaller'); tooltip.get('.tooltipText')[0].setWidth(250); tooltip.get('Tag')[0].setWidth(250); tooltip.get('Tag')[0].setHeight(tag.get('.tooltipText')[0].getHeight() ); tooltip.get('Tag')[0].setAbsolutePosition(-125, -tag.get('.tooltipText')[0].getHeight()-33); tooltip.get('.tooltipText')[0].setAbsolutePosition(-125, -tag.get('.tooltipText')[0].getHeight()-33); //tag.get('.tagText')[0].align('center'); } tooltip.show(); } function transitionToCluster() { resetPathwayGUI(); resetHelixGUI(); //pathwayControls.showHelix = true; resetCourseGUI(); var recButton = layerGUI.get('#recButton')[0]; recButton.attrs.showingRec = false; invertRecButtonColors(); var allGroups = layerGUI.get('.cluster'); allGroups.each(function(group) { //group.trans.play(); var clusterTrans = new Kinetic.Tween({ node: group, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); //group.setVisible(false); }); /* var toggleButton = layerGUI.get('#toggle')[0]; var toggleButtonTrans = new Kinetic.Tween({ node: toggleButton, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); */ var backButton = layerGUI.get('#back')[0]; backButton.setVisible(true); backButton.getChildren().each(function(thing) { thing.setVisible(true); }); var backButtonTrans = new Kinetic.Tween({ node: backButton, duration: 1, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); var recButton = layerGUI.get('#recButton')[0]; recButton.setVisible(true); recButton.getChildren().each(function(thing) { thing.setVisible(true); }); var recButtonTrans = new Kinetic.Tween({ node: recButton, duration: 1, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); var allCourses = layerGUI.get('.course'); allCourses.each(function(course) { var courseTrans = new Kinetic.Tween({ node: course, duration: 3, opacity: 1, scaleX: 1, scaleY: 1, x: course.attrs.finalX, y: course.attrs.finalY, easing: Kinetic.Easings.EaseInOut }).play(); }); /* var helixPath = layerGUI.get('#helix'); helixPath.each(function(helix) { helix.setVisible(true); var helixToggle = new Kinetic.Tween({ node: helix, duration: 3, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); }); */ /* var sphereTrans = new Kinetic.Tween({ node: layer3D, duration: 1, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); */ //layer3D.setVisible(false); sphereFolder.close(); clusterFolder.close(); pathFolder.open(); helixFolder.open(); courseFolder.open(); setTimeout(function() { layer3D.setVisible(false); sphere.visible = false; allGroups.each(function(group) { group.setVisible(false); var children = group.getChildren(); children.each(function(thing) { thing.setVisible(false); }); }); /* toggleButton.setVisible(false); var toggleChildren = toggleButton.getChildren(); toggleChildren.each(function(thing) { thing.setVisible(false); }); toggleButton.setVisible(false); var toggleChildren = toggleButton.getchildren(); toggleChildren.each(function(thing) { thing.setVisible(false); }); */ }, 550); /* var background = layerBG.get('#bg')[0]; var backgroundTrans = new Kinetic.Tween({ node: background, duration: 0.55, opacity: 0.5, easing: Kinetic.Easings.EaseInOut }).play(); */ } function addCourseNodes(cluster) { var imageObj = new Image(); imageObj.onload = function() { var background = new Kinetic.Image({ x: 0, y: 0, image: imageObj, width: stage.getWidth(), height: stage.getHeight(), opacity: 1.0, id: 'bg' }); layerBG.add(background); layerBG.draw(); }; imageObj.src = getBackground(cluster.attrs.key); //cluster.attrs.courses.each(function(course) { var allCourses = cluster.attrs.courses; var allCourseIDs = cluster.attrs.courseIDs; var coursePositions = getCoursePositions(cluster); //OH GOD PLEASE LET THIS WORK //alert('PASS 1'); for(var i = 0; i < allCourses.length; i++){ var key = allCourses[i]; var idTag = allCourseIDs[i]; //alert('trial 2'); //alert(idTag + '\'s location: \n\nxPos: ' + coursePositions[idTag].xPos + '\nyPos: ' + coursePositions[idTag].yPos); var courseData = getCourseData(cluster.attrs.key, idTag); var courseName = courseData.name; var courseDesc = courseData.description; var courseReqs = courseData.req; var curr = new Kinetic.Group({ x: Math.random() * stage.getWidth() * (9.0/10.0) + 30, //SET X & Y TO 0, WITH FINALX & FINALY = TO THIS y: Math.random() * stage.getHeight() * (3.1/4.0) + 60, //x: centerX, //y: centerY, opacity: 0, scaleX: 0, scaleY: 0, name: 'course', //CUSTOMS!!! key: key, id: idTag, finalX: coursePositions[idTag].xPos, //Math.random() * stage.getWidth() * (9.0/10.0) + 30, finalY: coursePositions[idTag].yPos, //Math.random() * stage.getHeight() * (3.1/4.0) + 60, courseName: courseName, courseDesc: courseDesc, courseReqs: courseReqs }); var currColor; if (userPathway.selected.indexOf(idTag) == -1) { if (!helixControls.showHelix || cluster.attrs.helix.indexOf(idTag) == -1) { currColor = COLORS().COURSE; } else { currColor = COLORS().COURSE_HELIX; } } else { currColor = COLORS().COURSE_SELECTED; } var node = new Kinetic.Circle({ x: 0, y: 0, radius: 23, fill: currColor, stroke: COLORS().COURSE_OUTLINE, strokeWidth: 4, opacity: 0.80, //EDIT OPACITY AND SCALE WHEN TESTING ANIMATION scale: 1, name: 'courseCircle', //CUSTOM!!! key: key, idTag: idTag, courseName: courseName, courseDesc: courseDesc, courseReqs: courseReqs }); node.on('mouseenter', function(){ document.body.style.cursor = 'pointer'; var children = this.getParent().getChildren(); children.each(function(child) { if(child.getClassName() == 'Label'){ child.setVisible(false); } }); this.setOpacity(1.0); layerGUI.draw(); var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, this.attrs.key + ' (' + this.getParent().attrs.courseName + ')');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); node.on('mouseleave', function(){ document.body.style.cursor = 'default'; var children = this.getParent().getChildren(); children.each(function(child) { if(child.getClassName() == 'Label'){ child.setVisible(true); } }); this.setOpacity(0.80); layerGUI.draw(); tooltip.hide(); tooltipLayer.draw(); }); node.on('mousemove', function(evt) { //var shape = evt.targetNode; var mousePos = stage.getMousePosition(); var x = mousePos.x; var y = mousePos.y - 5; updateTooltip(tooltip, x, y, this.attrs.key + ' (' + this.getParent().attrs.courseName + ')');//\n\n' + this.getParent().attrs.courseDesc); tooltipLayer.batchDraw(); }); node.on('mousedown touchstart', function() { courseDown = this.getParent().attrs.id; //alert('mousedown/touchstart begin on ' + courseDown); //showCourseTooltip(this); }); //node.off('mousedown touchstart', function() { // alert('mousedown/touchstart end on ' + this.attrs.key); //}); node.on('mouseup touchend', function() { //WHAT'S LEFT: courseUp = this.getParent().attrs.id; //alert('mouseup/touchend begin on ' + courseUp + ' from ' + courseDown + '\n\nfrom addCourseNodes'); if (courseUp == courseDown) { if (pathwayControls.createPath) { if (userPathway.selected.indexOf(this.attrs.idTag) == -1) { userPathway.selected.push(this.attrs.idTag); this.setFill(COLORS().COURSE_SELECTED); updateProgressFromSelected(); } else { userPathway.selected.splice(userPathway.selected.indexOf(this.attrs.idTag),1); //this.setFill(COLORS().COURSE); highlightSelectedCourses(); updateProgressFromSelected(); } } else { showCourseTooltip(this); } } else if (layerGUI.get('#'+courseDown).length != -1 && layerGUI.get('#'+courseUp).length != -1) { //DRAW A LINE BETWEEN THE TWO COURSES using curr.attrs.idTag //add a struct containing the from idTag, to idTag, the line itself, and the hierarchy numbers of the from/to classes //var max = -1; var fromIndex = -1, toIndex = -1; //alert('check 0'); for (var j = 0; j < userPathway.courses.length; j++) { var currConnect = userPathway.courses[j]; //if (j > max) { // max = j; //} if (currConnect.indexOf(courseDown) != -1) { fromIndex = j; //break; } if (currConnect.indexOf(courseUp) != -1) { toIndex = j; } //FIGURE OUT A WAY TO CHECK IF BOTH courseDown AND courseUp ARE ALREADY ACCOUNTED FOR!!!!!!!! //if (currConnect.indexOf(courseUp) != -1) { // alert('illegal connection... can\'t go backwards in time!'); // return; //} } //alert('fromIndex: '+fromIndex+'\ttoIndex: '+toIndex); if (fromIndex != -1 && toIndex != -1) { //alert('case 1'); return; } else if (fromIndex != -1) { //alert('case 2'); if (fromIndex+1 >= userPathway.courses.length) { userPathway.courses[fromIndex+1] = new Array(); } userPathway.courses[fromIndex+1].push(courseUp); addUserPathCourseLabel(courseUp, fromIndex+1, this.getAbsolutePosition().x, this.getAbsolutePosition().y); /* //alert(this.attrs.courseReqs); // DELETE!!! for(var p = 0; p < this.attrs.courseReqs.length; p++) { //this.attrs.courseReqs.each(function(requirement) { //alert('current req: '+this.attrs.courseReqs); var bar = progressBar.get('#'+this.attrs.courseReqs[p])[0]; //alert('nMet: '+bar.attrs.nMet+'\t nReq: '+bar.attrs.nReq); //DELETE!!! if (bar.attrs.nMet < bar.attrs.nReq) { if (bar.attrs.nMet == 0) { bar.attrs.nMet++; bar.get('.progBar1')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText1')[0].setFill(COLORS().PROGRESS_BACKGROUND); } else if (bar.attrs.nMet == 1) { bar.attrs.nMet++; bar.get('.progBar2')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText2')[0].setFill(COLORS().PROGRESS_BACKGROUND); } } } */ //}); } else if (toIndex != -1) { //alert('case 3'); //if (toIndex == 0) return; if (toIndex == 0) { var starter = new Array(); userPathway.courses.unshift(starter); userPathway.courses[0].push(courseDown); //addUserPathCourseLabel(courseDown, 0, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().x, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().y); //FIX!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! //alert('woah there'); destroyUserPath(); addUserPath(); } else { userPathway.courses[toIndex-1].push(courseDown); addUserPathCourseLabel(courseDown, toIndex-1, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().x, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().y); //FIX!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! } /* for(var p = 0; p < layerGUI.get('#'+courseDown)[0].attrs.courseReqs.length; p++) { var bar = progressBar.get('#'+layerGUI.get('#'+courseDown)[0].attrs.courseReqs[p])[0]; //alert('current req: '+this.attrs.courseReqs); var bar = progressBar.get('#'+this.attrs.courseReqs[p])[0]; //alert('nMet: '+bar.attrs.nMet+'\t nReq: '+bar.attrs.nReq); //DELETE!!! if (bar.attrs.nMet < bar.attrs.nReq) { if (bar.attrs.nMet == 0) { bar.attrs.nMet++; bar.get('.progBar1')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText1')[0].setFill(COLORS().PROGRESS_BACKGROUND); } else if (bar.attrs.nMet == 1) { bar.attrs.nMet++; bar.get('.progBar2')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText2')[0].setFill(COLORS().PROGRESS_BACKGROUND); } } } */ } else { //alert('case 4'); fromIndex = userPathway.courses.length; userPathway.courses[fromIndex] = new Array(); userPathway.courses[fromIndex].push(courseDown); addUserPathCourseLabel(courseDown, fromIndex, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().x, layerGUI.get('#'+courseDown)[0].getAbsolutePosition().y); //FIX!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! //alert('mid-case 4'); userPathway.courses[fromIndex+1] = new Array(); //alert('2nd mid-case 4'); userPathway.courses[fromIndex+1].push(courseUp); addUserPathCourseLabel(courseUp, fromIndex+1, this.getAbsolutePosition().x, this.getAbsolutePosition().y); //FIX!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! //alert('end of case 4'); /* for(var p = 0; p < layerGUI.get('#'+courseDown)[0].attrs.courseReqs.length; p++) { var bar = progressBar.get('#'+layerGUI.get('#'+courseDown)[0].attrs.courseReqs[p])[0]; if (bar.attrs.nMet < bar.attrs.nReq) { if (bar.attrs.nMet == 0) { bar.attrs.nMet++; bar.get('.progBar1')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText1')[0].setFill(COLORS().PROGRESS_BACKGROUND); } else if (bar.attrs.nMet == 1) { bar.attrs.nMet++; bar.get('.progBar2')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText2')[0].setFill(COLORS().PROGRESS_BACKGROUND); } } } for(var p = 0; p < this.attrs.courseReqs.length; p++) { var bar = progressBar.get('#'+this.attrs.courseReqs[p])[0]; if (bar.attrs.nMet < bar.attrs.nReq) { if (bar.attrs.nMet == 0) { bar.attrs.nMet++; bar.get('.progBar1')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText1')[0].setFill(COLORS().PROGRESS_BACKGROUND); } else if (bar.attrs.nMet == 1) { bar.attrs.nMet++; bar.get('.progBar2')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText2')[0].setFill(COLORS().PROGRESS_BACKGROUND); } } } */ }/* if (fromIndex == -1) { fromIndex = userPathway.courses.length; userPathway.courses[fromIndex] = new Array(); userPathway.courses[fromIndex].push(courseDown); userPathway.courses[fromIndex+1] = new Array(); userPathway.courses[fromIndex+1].push(courseUp); //alert(userPathway.courses[fromIndex]); }*/ //alert('check 2'); //alert(userPathway.courses); var coursesLength = userPathway.courses.length; //alert('coursesLength: '+coursesLength); for (var j = 0; j < coursesLength; j++) { //var fromCourses = userPathway.courses[j]; for (var m = 0; m < userPathway.courses[j].length; m++) { if (layerGUI.get('#'+userPathway.courses[j][m]).length == 0) { continue; } //alert('adding lines from ' + userPathway.courses[j][m]); //alert('adding label for '+userPathway.courses[j][m]); /* var currOrderLabel = new Kinetic.Group({ x: layerGUI.get('#'+userPathway.courses[j][m])[0].attrs.finalX, y: layerGUI.get('#'+userPathway.courses[j][m])[0].attrs.finalY, visible: false, listening: true, name: 'connOrderLabel' }); currOrderLabel.add(new Kinetic.Circle({ x: 0, y: 0, radius: 12, fill: 'black', stroke: 'black', opacity: 1.0 })); var num = j+1; var numText = ''+num; var orderText = new Kinetic.Text({ x: 0, y: 0, text: num, fontFamily: 'Verdana', fontSize: 14, //padding: 5, fill: '#F53DF2', stroke: '#F53DF2' //align: 'center' }); currOrderLabel.add(orderText); orderText.setPosition(-orderText.getWidth()/2, -orderText.getHeight()/2); layerGUI.add(currOrderLabel); */ if (j+1 == userPathway.courses.length) continue; for (var n = 0; n < userPathway.courses[j+1].length; n++) { if (layerGUI.get('#'+userPathway.courses[j+1][n]).length == 0) { continue; } //var orderLabels = layerGUI.get('.connOrderLabel'); //orderLabels.each(function(label) { // delete(label); //}); var fromX = layerGUI.get('#'+userPathway.courses[j][m])[0].getAbsolutePosition().x; var fromY = layerGUI.get('#'+userPathway.courses[j][m])[0].getAbsolutePosition().y; var toX = layerGUI.get('#'+userPathway.courses[j+1][n])[0].getAbsolutePosition().x; var toY = layerGUI.get('#'+userPathway.courses[j+1][n])[0].getAbsolutePosition().y; var connectLine = new Kinetic.Line({ points: [fromX, fromY, toX, toY], stroke: COLORS().FORGED_LINE, strokeWidth: 5, lineCap: 'round', lineJoin: 'round', shadowColor: COLORS().FORGED_SHADOW, shadowBlur: 10, shadowOffset: 5, shadowOpacity: 0.3, opacity: 0.6, name: 'connectLine', //CUSTOMS!!!!! highlighted: false }); connectLine.on('mouseenter touchstart', function() { //recommendedLine.moveToTop(); document.body.style.cursor = 'pointer'; var connectLines = layerGUI.get('.connectLine'); connectLines.each(function(line) { line.moveToTop(); line.setOpacity(0.75); line.setShadowOpacity(0.5); }); //this.moveToTop(); //this.setOpacity(0.75); //this.setShadowOpacity(0.5); var orderLabels = layerGUI.get('.connOrderLabel'); orderLabels.each(function(label) { label.setVisible(true); label.moveToTop(); }); }); connectLine.on('mouseleave touchend', function() { document.body.style.cursor = 'default'; if(!this.attrs.highlighted){ //recommendedLine.moveToBottom(); var connectLines = layerGUI.get('.connectLine'); connectLines.each(function(line) { line.moveToBottom(); line.setOpacity(0.6); line.setShadowOpacity(0.3); }); //this.moveToBottom(); //this.setOpacity(0.6); //this.setShadowOpacity(0.3); var orderLabels = layerGUI.get('.connOrderLabel'); orderLabels.each(function(label) { label.setVisible(false); }); layerGUI.draw(); } }); layerGUI.add(connectLine); connectLine.moveToBottom(); } } } /* var connection { from: courseDown, to: courseUp, fromIndex: fromIndex, toIndex: fromIndex+1 } //userPathway.add(connection); var connectingLine = new Kinetic.Line({ points: [layerGUI.get('#'+courseDown)[0].attrs.finalX,layerGUI.get('#'+courseDown)[0].attrs.finalY,'#'+courseUp)[0].attrs.finalX,layerGUI.get('#'+courseUp)[0].attrs.finalY], stroke: '#F53DF2', strokeWidth: 5, lineCap: 'round', lineJoin: 'round', shadowColor: 'white', shadowBlur: 10, shadowOffset: 5, shadowOpacity: 0.3, opacity: 1, name: 'connectLine', //CUSTOMS!!!!! highlighted: false }); */ } }); //node.off('mouseup touchend', function() { //courseUp = node.attrs.idTag; //alert('mouseup/touchend end on ' + this.attrs.key); //}); curr.add(node); var tag = new Kinetic.Label({ x: 0, y: -33, opacity: 0.50, listening: true, name: 'tag', //CUSTOM key: key }); tag.add(new Kinetic.Tag({ fill: 'black', pointerDirection: 'down', pointerWidth: 0, pointerHeight: 0, lineJoin: 'round', shadowColor: 'black', shadowBlur: 10, shadowOffset: 10, shadowOpacity: 0.5 })); tag.add(new Kinetic.Text({ text: courseName, fontFamily: 'Calibri', fontSize: 18, padding: 5, fill: 'white', name: 'tagText', align: 'center' })); if (tag.get('.tagText')[0].getWidth() > 250) { //alert('boop make text box smaller'); tag.get('.tagText')[0].setWidth(250); tag.get('Tag')[0].setWidth(250); tag.get('Tag')[0].setHeight(tag.get('.tagText')[0].getHeight() ); tag.get('Tag')[0].setAbsolutePosition(-125, -tag.get('.tagText')[0].getHeight()-33); tag.get('.tagText')[0].setAbsolutePosition(-125, -tag.get('.tagText')[0].getHeight()-33); //tag.get('.tagText')[0].align('center'); } curr.add(tag); layerGUI.add(curr); } //}); layerGUI.draw(); //createReccomendedPath(cluster); } function addUserPathCourseLabel(idTag, index, xPos, yPos) { //alert('addUserPathCourseLabel start'); var currOrderLabel = new Kinetic.Group({ x: xPos, y: yPos, visible: false, //CHANGE TO FALSE WHEN DEBUGGING OVER!!!!!!!!! listening: true, name: 'connOrderLabel' }); currOrderLabel.add(new Kinetic.Circle({ x: 0, y: 0, radius: 12, fill: 'black', stroke: 'black', opacity: 1.0 })); var num = index+1; var numText = ''+num; //alert('created circle and group'); var orderText = new Kinetic.Text({ x: 0, y: 0, text: num, fontFamily: 'Verdana', fontSize: 14, //padding: 5, fill: COLORS().FORGED_LINE, stroke: COLORS().FORGED_LINE //align: 'center' }); //alert('created text'); currOrderLabel.add(orderText); orderText.setPosition(-orderText.getWidth()/2, -orderText.getHeight()/2); layerGUI.add(currOrderLabel); layerGUI.draw(); //alert('\"added\" and drawn'); } function transitionBack() { var allGroups = layerGUI.get('.cluster'); allGroups.each(function(group) { //group.trans.play(); group.setPosition(group.attrs.initX, group.attrs.initY); var children = group.getChildren(); children.each(function(thing) { thing.setVisible(true); }); if(group.attrs.initShow){ group.setVisible(true); } //alert('for '+group.attrs.idTag+'...'); var currColor = COLORS().CLUSTER; for (var i = 0; i < userPathway.selected.length; i++) { //alert('course of subject: '+userPathway.selected[i]); if (group.attrs.courseIDs.indexOf(userPathway.selected[i]) != -1) { //alert('color changed for selected!'); currColor = COLORS().COURSE_SELECTED; break; } } //alert('for '+group.attrs.idTag+' courseIDs is: '+group.attrs.courseIDs); for (var i = 0; i < userPathway.courses.length; i++) { for (var j = 0; j < userPathway.courses[i].length; j++) { //alert('course of subject: '+userPathway.courses[i][j]); if (group.attrs.courseIDs.indexOf(userPathway.courses[i][j]) != -1) { //alert('color changed for forged path!'); currColor = COLORS().FORGED_LINE; break; } } } group.get('.innerCircle')[0].setFill(currColor); var clusterTrans = new Kinetic.Tween({ node: group, duration: .55, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); //group.setVisible(false); }); /* var toggleButton = layerGUI.get('#toggle')[0]; toggleButton.setVisible(true); var toggleChildren = toggleButton.getChildren(); toggleChildren.each(function(thing) { thing.setVisible(true); }); var toggleButtonTrans = new Kinetic.Tween({ node: toggleButton, duration: .55, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); */ var backButton = layerGUI.get('#back')[0]; var backButtonTrans = new Kinetic.Tween({ node: backButton, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var recButton = layerGUI.get('#recButton')[0]; recButton.attrs.showingRec = false; invertRecButtonColors(); var recButtonTrans = new Kinetic.Tween({ node: recButton, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setUpAnim(); runAnimation = true; anim.start(); sphereFolder.open(); clusterFolder.open(); pathFolder.close(); helixFolder.close(); courseFolder.close(); resetSphereGUI(); resetPathwayGUI(); resetHelixGUI(); resetCourseGUI(); setTimeout(function() { layer3D.setVisible(true); sphere.visible = true; animating = true; }, 200); var recPath = layerGUI.get('#recommended'); var helixPath = layerGUI.get('#helix'); setTimeout(function() { layer3D.setVisible(true); sphere.visible = true; backButton.setVisible(false); backButton.getChildren().each(function(thing) { thing.setVisible(false); }); destroyCourseNodes(); destroyUserPath(); //FIGURE OUT WHAT .get() RETURNS WHEN THE THING BEING SEARCHED FOR DOESN'T EXIST /* alert(layerGUI.get('#recommended')[0]); if(layerGUI.get('#recommended')[0] == null){ alert('BITCHES BE NULL'); } destroyRecPath(); //} */ animating = true; recPath.each(function(recom) { recom.setVisible(false); }); helixPath.each(function(helix) { helix.setVisible(false); }); //layerGUI.get('#recommended')[0].setVisible(false); }, 550); var allCourses = layerGUI.get('.course'); allCourses.each(function(course) { course.off('mouseenter mouseleave mousemove'); var courseTrans = new Kinetic.Tween({ node: course, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var backgroundTrans = new Kinetic.Tween({ node: layerBG.get('#bg')[0], duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); recPath.each(function(recom) { var toggleRecc = new Kinetic.Tween({ node: recom, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); helixPath.each(function(helix) { var toggleHelix = new Kinetic.Tween({ node: helix, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var allCPM = layerGUI.get('.cpm'); allCPM.each(function(cpm) { var toggleCPM = new Kinetic.Tween({ node: cpm, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var allPopBoxes = layerGUI.get('.popBox'); allPopBoxes.each(function(box) { var togglePop = new Kinetic.Tween({ node: box, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }); }); var allPopLines = layerGUI.get('.popLine'); allPopLines.each(function(line) { var togglePop = new Kinetic.Tween({ node: line, duration: .55, opacity: 0, easing: Kinetic.Easings.EaseInOut }); }); var allUserPathLabels = layerGUI.get('.connOrderLabel'); allUserPathLabels.each(function(label) { var togglePathLabels = new Kinetic.Tween({ node: label, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); var allUserPathLines = layerGUI.get('.connectLine'); allUserPathLines.each(function(line) { var togglePathLabels = new Kinetic.Tween({ node: line, duration: 0.55, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); }); } function destroyCourseNodes(){ var allCourses = layerGUI.get('.course'); allCourses.each(function(course) { course.destroy(); }); var allCPM = layerGUI.get('.cpm'); allCPM.each(function(cpm) { cpm.destroy(); }); var allPopBoxes = layerGUI.get('.popBox'); allPopBoxes.each(function(box) { box.destroy(); }); var allPopLines = layerGUI.get('.popLine'); allPopLines.each(function(line) { line.destroy(); }); var backgroundImage = layerBG.get('#bg'); backgroundImage.each(function(bg) { bg.destroy(); }); //layerBG.get('#bg')[0].destroy(); layerGUI.draw(); } function destroyUserPath() { var allUserPathLabels = layerGUI.get('.connOrderLabel'); allUserPathLabels.each(function(label) { label.destroy(); }); var allUserPathLines = layerGUI.get('.connectLine'); allUserPathLines.each(function(line) { line.destroy(); }); } function destroyRecPath() { var recPath = layerGUI.get('#recommended'); recPath.each(function(path) { path.destroy(); }); var helixPath = layerGUI.get('#helix'); helixPath.each(function(helix) { helix.destroy(); }); } function createBoxGUI(){ gui = new dat.GUI({ autoPlace: false }); gui.domElement.style.position = 'absolute'; gui.domElement.style.top = '0px'; gui.domElement.style.left = '0px'; var customContainer = document.getElementById('guiContainer'); customContainer.appendChild(gui.domElement); /* var parameters = { a: 200, // numeric b: 200, // numeric slider c: "Hello, GUI!", // string d: false, // boolean (checkbox) e: "#ff8800", // color (hex) f: function() { alert("Hello!") }, g: function() { alert( parameters.c ) }, v : 0, // dummy value, only type is important w: "...", // dummy value, only type is important x: 0, y: 0, z: 0 }; */ var clickers = { energy: function(){ //alert('1'); //destroyCourseNodes(); //alert('2'); //if(examining){ // alert('2.1'); // destroyRecPath(); // alert('2.2'); //} //alert('3'); anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //alert('4'); //clusterTooltip.attrs.cluster = layerGUI.get('#energy')[0].attrs.idTag; //alert('cluster: '+clusterTooltip.attrs.cluster); showClusterTooltip(layerGUI.get('#energy')[0]); //alert('5'); //addCourseNodes(layerGUI.get('#energy')[0]); //transitionToCluster(); //createRecommendedPath(layerGUI.get('#energy')[0]); }, oceans: function(){ /* destroyCourseNodes(); if(examining){ destroyRecPath(); } */ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //clusterTooltip.attrs.cluster = layerGUI.get('#oceans')[0].attrs.idTag; //alert('cluster: '+clusterTooltip.attrs.cluster); showClusterTooltip(layerGUI.get('#oceans')[0]); /* addCourseNodes(layerGUI.get('#oceans')[0]); transitionToCluster(); createRecommendedPath(layerGUI.get('#oceans')[0]); */ }, builtEnvi: function(){ /* destroyCourseNodes(); if(examining){ destroyRecPath(); } */ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //clusterTooltip.attrs.cluster = layerGUI.get('#builtEnvi')[0].attrs.idTag; //alert('cluster: '+clusterTooltip.attrs.cluster); showClusterTooltip(layerGUI.get('#builtEnvi')[0]); /* addCourseNodes(layerGUI.get('#builtEnvi')[0]); transitionToCluster(); createRecommendedPath(layerGUI.get('#builtEnvi')[0]); */ }, freshwater: function(){ /* destroyCourseNodes(); if(examining){ destroyRecPath(); } */ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //clusterTooltip.attrs.cluster = layerGUI.get('#freshwater')[0].attrs.idTag; showClusterTooltip(layerGUI.get('#freshwater')[0]); /* addCourseNodes(layerGUI.get('#freshwater')[0]); transitionToCluster(); createRecommendedPath(layerGUI.get('#freshwater')[0]); */ }, /* amerEnvi: function(){ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //clusterTooltip.attrs.cluster = layerGUI.get('#amerEnvi')[0].attrs.idTag; showClusterTooltip(layerGUI.get('#amerEnvi')[0]); }, */ sustainability: function(){ /* destroyCourseNodes(); if(examining){ destroyRecPath(); } */ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //clusterTooltip.attrs.cluster = layerGUI.get('#sustainability')[0].attrs.idTag; showClusterTooltip(layerGUI.get('#sustainability')[0]); /* addCourseNodes(layerGUI.get('#sustainability')[0]); transitionToCluster(); createRecommendedPath(layerGUI.get('#sustainability')[0]); */ }, food: function(){ /* destroyCourseNodes(); if(examining){ destroyRecPath(); } */ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //clusterTooltip.attrs.cluster = layerGUI.get('#food')[0].attrs.idTag; showClusterTooltip(layerGUI.get('#food')[0]); /* addCourseNodes(layerGUI.get('#food')[0]); transitionToCluster(); createRecommendedPath(layerGUI.get('#food')[0]); */ }, /* poverty: function(){ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); showClusterTooltip(layerGUI.get('#poverty')[0]); }, */ infect: function(){ /* destroyCourseNodes(); if(examining){ destroyRecPath(); } */ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //clusterTooltip.attrs.cluster = layerGUI.get('#infect')[0].attrs.idTag; showClusterTooltip(layerGUI.get('#infect')[0]); /* addCourseNodes(layerGUI.get('#infect')[0]); transitionToCluster(); createRecommendedPath(layerGUI.get('#infect')[0]); */ }, /* devCountries: function(){ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); //clusterTooltip.attrs.cluster = layerGUI.get('#devCountries')[0].attrs.idTag; showClusterTooltip(layerGUI.get('#devCountries')[0]); }, */ risk: function(){ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); showClusterTooltip(layerGUI.get('#risk')[0]); }, climate: function(){ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); showClusterTooltip(layerGUI.get('#climate')[0]); } } sphereControls = { speed: 1.0, animate: true } sphereFolder = gui.addFolder('globe controls'); var sphereAnimate = sphereFolder.add(sphereControls, 'animate').name('animate').listen(); sphereAnimate.onChange(function(value) { if(atHome) { if(value){ anim.start(); runAnimation = true; animating = true; layerGUI.draw(); }else{ anim.stop(); runAnimation = false; animating = false; layerGUI.draw(); } } else { sphereControls.animate = true; } }); var sphereSpeed = sphereFolder.add(sphereControls, 'speed').min(0.5).max(1.5).step(0.1).name('speed multiplier').listen(); /* sphereSpeed.onChange(function(value) { period = 6700*2 / value; rotationSpeed = 0.013 * value; var allGroups = layerGUI.get('.cluster'); allGroups.each(function(group) { group.attrs.tOff = group.attrs.origTOff * value; }); }); */ sphereFolder.open(); // gui.add( parameters ) //gui.add( parameters, 'a' ).name('Number'); //gui.add( parameters, 'b' ).min(128).max(256).step(16).name('Slider'); //gui.add( parameters, 'c' ).name('String'); //gui.add( parameters, 'd' ).name('Boolean'); //gui.addColor( parameters, 'e' ).name('Color'); //var numberList = [1, 2, 3]; //gui.add( parameters, 'v', numberList ).name('List'); //var stringList = ["One", "Two", "Three"]; //gui.add( parameters, 'w', stringList ).name('List'); //gui.add( parameters, 'f' ).name('Say "Hello!"'); //gui.add( parameters, 'g' ).name("Alert Message"); /* var folder1 = gui.addFolder('clusters'); var energyFolder = folder1.addFolder('energy'); energyFolder.add(clickers, 'energy').name('explore cluster'); var oceansFolder = folder1.addFolder('oceans'); oceansFolder.add(clickers, 'oceans').name('explore cluster'); var builtEnviFolder = folder1.addFolder('built environment'); builtEnviFolder.add(clickers, 'builtEnvi').name('explore cluster'); var freshwaterFolder = folder1.addFolder('freshwater'); freshwaterFolder.add(clickers, 'freshwater').name('explore cluster'); var amerEnviFolder = folder1.addFolder('american environment'); amerEnviFolder.add(clickers, 'amerEnvi').name('explore cluster'); var sustainFolder = folder1.addFolder('sustainability'); sustainFolder.add(clickers, 'sustainability').name('explore cluster'); var foodFolder = folder1.addFolder('food'); foodFolder.add(clickers, 'food').name('explore cluster'); var povertyFolder = folder1.addFolder('poverty'); povertyFolder.add(clickers, 'poverty').name('explore cluster'); var infectFolder = folder1.addFolder('infectious diseases'); infectFolder.add(clickers, 'infect').name('explore cluster'); var devCountriesFolder = folder1.addFolder('developing countries'); devCountriesFolder.add(clickers, 'devCountries').name('explore cluster'); */ clusterFolder = gui.addFolder('clusters'); //FIX NAME PLACEMENT!!! clusterFolder.add(clickers, 'energy').name('Energy'); clusterFolder.add(clickers, 'oceans').name('Oceans'); clusterFolder.add(clickers, 'builtEnvi').name('BuiltEnvironment'); clusterFolder.add(clickers, 'freshwater').name('Freshwater'); //clusterFolder.add(clickers, 'amerEnvi').name('AmericanEnvironment'); clusterFolder.add(clickers, 'sustainability').name('Sustainability'); clusterFolder.add(clickers, 'food').name('Food'); //clusterFolder.add(clickers, 'poverty').name('Poverty'); clusterFolder.add(clickers, 'infect').name('InfectiousDiseases'); //clusterFolder.add(clickers, 'devCountries').name('DevelopingCountries'); clusterFolder.add(clickers, 'risk').name('Risk'); clusterFolder.add(clickers,'climate').name('Climate Change'); //folder1.add( parameters, 'x' ); //folder1.add( parameters, 'y' ); //folder1.close(); clusterFolder.open(); helixControls = { showHelix: false } helixFolder = gui.addFolder('helices'); var showHelix = helixFolder.add(helixControls, 'showHelix').name('show helix').listen(); showHelix.onChange(function(value) { if (examining) { var helixPath = layerGUI.get('#helix'); if (value) { helixPath.each(function(helix) { helix.setVisible(true); var helixToggle = new Kinetic.Tween({ node: helix, duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); }); setTimeout(function() { highlightSelectedCourses(); }, 200); } else { helixPath.each(function(helix) { var helixToggle = new Kinetic.Tween({ node: helix, duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { helix.setVisible(false); }, 500); }); setTimeout(function() { highlightSelectedCourses(); }, 300); } } else { helixControls.showHelix = false; } }); helixFolder.close(); courseControls = { aesthetic: false, social: false, science: false, formalReas: false, appQuant: false, diversity: false, ethics: false, creativeEx: false } courseFolder = gui.addFolder('WAYS'); var aesthetic = courseFolder.add(courseControls, 'aesthetic').name('AII').listen(); aesthetic.onChange(function(value) { if(!atHome) { highlightSelectedCourses(); //alert('post-highlight'); //courseControls.aesthetic = value; } else { courseControls.aesthetic = false; } }); var appQuant = courseFolder.add(courseControls, 'appQuant').name('AQR').listen(); appQuant.onChange(function(value) { if(!atHome) { highlightSelectedCourses(); } else { courseControls.appQuant = false; } }); var creativeEx = courseFolder.add(courseControls, 'creativeEx').name('CE').listen(); creativeEx.onChange(function(value) { if(!atHome) { highlightSelectedCourses(); } else { courseControls.creativeEx = false; } }); var diversity = courseFolder.add(courseControls, 'diversity').name('ED').listen(); diversity.onChange(function(value) { if(!atHome) { highlightSelectedCourses(); } else { courseControls.diversity = false; } }); var ethics = courseFolder.add(courseControls, 'ethics').name('ER').listen(); ethics.onChange(function(value) { if(!atHome) { highlightSelectedCourses(); } else { courseControls.ethics = false; } }); var formalReas = courseFolder.add(courseControls, 'formalReas').name('FR').listen(); formalReas.onChange(function(value) { if(!atHome) { highlightSelectedCourses(); } else { courseControls.formalReas = false; } }); var science = courseFolder.add(courseControls, 'science').name('SMA').listen(); science.onChange(function(value) { if(!atHome) { highlightSelectedCourses(); //alert('post-highlight'); //courseControls.science = value; } else { courseControls.science = false; } }); var social = courseFolder.add(courseControls, 'social').name('SI').listen(); social.onChange(function(value) { if(!atHome) { highlightSelectedCourses(); //alert('post-highlight'); //courseControls.social = value; } else { courseControls.social = false; } }); courseFolder.close(); pathwayControls = { showLines: true, showRec: false, highlightRec: false, numPaths: 0, createPath: false, personalPath: '#1800D2', //'#FFCC00' showHelix: false, } pathFolder = gui.addFolder('pathway controls'); //pathFolder.add(pathwayControls, 'showLines').name('show pathways'); var showRec = pathFolder.add(pathwayControls, 'showRec').name('recommended').listen(); showRec.onChange(function(value) { if(examining) { var allRec = layerGUI.get('#recommended'); var allCPM = layerGUI.get('.cpm'); if(value && !pathwayControls.highlightRec){ //alert('could it possibly be this!?\n\n'+pathwayControls.highlightRec); allRec.each(function(rec) { //layerGUI.get('#recommended')[0].setVisible(true); rec.setVisible(true); //layerGUI.get('#recommended')[0].moveToBottom(); rec.moveToBottom(); var toggleRecc = new Kinetic.Tween({ //node: layerGUI.get('#recommended')[0], node: rec, duration: .5, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); }); allCPM.each(function(cpm) { //layerGUI.get('#recommended')[0].setVisible(true); cpm.setVisible(true); //layerGUI.get('#recommended')[0].moveToBottom(); cpm.moveToBottom(); var toggleRecc = new Kinetic.Tween({ //node: layerGUI.get('#recommended')[0], node: cpm, duration: .5, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); }); //layerGUI.get('#recommended')[0].setVisible(true); layerGUI.draw(); }else{ //alert('is this the problem?\n\n'+pathwayControls.highlightRec); pathwayControls.highlightRec = false; pathwayControls.showRec = false; allRec.each(function(rec) { //rec.attrs.highlighted = false; var toggleRecc = new Kinetic.Tween({ //node: layerGUI.get('#recommended')[0], node: rec, duration: .5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { //layerGUI.get('#recommended')[0].setVisible(false); rec.setVisible(false); //layerGUI.get('#recommended')[0].attrs.highlighted = false; rec.attrs.highlighted = false; }, 500); }); allCPM.each(function(cpm) { var toggleRecc = new Kinetic.Tween({ //node: layerGUI.get('#recommended')[0], node: cpm, duration: .5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { //layerGUI.get('#recommended')[0].setVisible(false); cpm.setVisible(false); //layerGUI.get('#recommended')[0].attrs.highlighted = false; //cpm.attrs.highlighted = false; }, 500); }); var orderLabels = layerGUI.get('.orderLabel'); orderLabels.each(function(label) { var toggleOrdLab = new Kinetic.Tween({ node: label, duration: .5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { label.setVisible(false); }, 500); }); //layerGUI.get('#recommended')[0].setVisible(false); layerGUI.draw(); } layerGUI.get('#recButton')[0].attrs.showingRec = pathwayControls.showRec; invertRecButtonColors(); } else { pathwayControls.showRec = false; } }); var highlightRec = pathFolder.add(pathwayControls, 'highlightRec').name('highlight recs').listen(); highlightRec.onChange(function(value) { if(examining) { var allRec = layerGUI.get('#recommended'); var allCPM = layerGUI.get('.cpm'); if(!pathwayControls.showRec && value) { //alert('or is this the problem?\n\n'+pathwayControls.showRec); pathwayControls.showRec = true; //alert('highlight selected when show not'); allRec.each(function(rec) { rec.setVisible(true); //rec.moveToBottom(); rec.attrs.highlighted = true; var toggleRecc = new Kinetic.Tween({ node: rec, duration: .5, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); }); allCPM.each(function(cpm) { cpm.setVisible(true); cpm.moveToBottom(); var toggleRecc = new Kinetic.Tween({ node: cpm, duration: .5, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); }); layerGUI.draw(); //var recommendedPath = layerGUI.get('#recommended') allRec.moveToTop(); var recLines = layerGUI.get('.recLine'); recLines.each(function(line) { line.setOpacity(0.9); line.setShadowOpacity(0.5); }); var orderLabels = layerGUI.get('.orderLabel'); orderLabels.each(function(label) { label.setVisible(true); var toggleOrdLab = new Kinetic.Tween({ node: label, duration: .5, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); }); } else { //alert('oooorrrrrrrr is this the problem?\n\n'+pathwayControls.showRec); allRec.each(function(rec) { rec.attrs.highlighted = false; }); if(value) { //alert('highlight selected when show was also'); allRec.moveToTop(); var recLines = layerGUI.get('.recLine'); recLines.each(function(line) { line.setOpacity(0.9); line.setShadowOpacity(0.5); }); var orderLabels = layerGUI.get('.orderLabel'); orderLabels.each(function(label) { label.setVisible(true); var toggleOrdLab = new Kinetic.Tween({ node: label, duration: .5, opacity: 1, easing: Kinetic.Easings.EaseInOut }).play(); }); } else { //alert('highlight unselected when show was selected'); allRec.moveToBottom(); var recLines = layerGUI.get('.recLine'); recLines.each(function(line) { line.setOpacity(0.75); line.setShadowOpacity(0.3); }); var orderLabels = layerGUI.get('.orderLabel'); orderLabels.each(function(label) { var toggleOrdLab = new Kinetic.Tween({ node: label, duration: .5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { label.setVisible(false); }, 500); }); layerGUI.draw(); } } layerGUI.get('#recButton')[0].attrs.showingRec = pathwayControls.showRec; invertRecButtonColors(); } else { pathwayControls.highlightRec = false; } }); /* var numPaths = pathFolder.add(pathwayControls, 'numPaths').min(0).max(6).step(1).name('# of pathways').listen(); numPaths.onChange(function(value) { //PUT CODE IN HERE LATER!!!!!!!!!!!!!!!!!!!!!!! }); */ var select = pathFolder.add(pathwayControls, 'createPath').name('select courses').listen(); select.onChange(function(value) { //PUT CODE IN HERE LATER!!!!!!!!!!!!!!!!!!!!!!! //actually, don't need to right now! }); /* var helixToggle = pathFolder.add(pathwayControls, 'showHelix').name('show helix').listen(); helixToggle.onChange(function(value) { if (examining) { var helixPath = layerGUI.get('#helix'); if (value) { helixPath.each(function(helix) { helix.setVisible(true); var helixToggle = new Kinetic.Tween({ node: helix, duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); }); setTimeout(function() { highlightSelectedCourses(); }, 200); } else { helixPath.each(function(helix) { var helixToggle = new Kinetic.Tween({ node: helix, duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { helix.setVisible(false); }, 500); }); setTimeout(function() { highlightSelectedCourses(); }, 300); } } else { pathwayControls.showHelix = false; } }); */ /* var personalColor = pathFolder.addColor(pathwayControls, 'personalPath').name('personal color').listen(); personalColor.onChange(function(color) { if(examining){ layerGUI.get('#recLine')[0].setStroke(color); layerGUI.draw(); } }); */ pathFolder.close(); gui.open(); } function resetSphereGUI(){ sphereControls.speed = 1.0; sphereControls.animate = true; } function resetPathwayGUI(){ pathwayControls.showRec = false; pathwayControls.highlightRec = false; pathwayControls.createPath = false; //pathwayControls.showHelix = false; //pathwayControls.numPaths = 0; //pathwayControls.createPath = false; } function resetHelixGUI(){ helixControls.showHelix = false; } function resetCourseGUI(){ /* courseControls.each(function(control) { control = false; }); */ courseControls.aesthetic = false; courseControls.social = false; courseControls.science = false; courseControls.formalReas = false; courseControls.appQuant = false; courseControls.diversity = false; courseControls.ethics = false; courseControls.creativeEx = false; } function createRecommendedPath(cluster){ //var courseIDs = cluster.attrs.courseIDs; //alert('createRecommendedPath started'); var courseIDs = getRecommended(cluster.attrs.key); var recommendedPath = new Kinetic.Group({ id: 'recommended', opacity: 1, highlighted: false }); if(courseIDs.length <= 0){ //alert('NOTHING!!!!!!!!!!'); //FOR DEBUGGING return; }else{ //alert('LENGTH IS: ' + courseIDs.length); } /* for(var i = 0; i < courseIDs.length; i++){ var curr = layerGUI.get('#'+courseIDs[i])[0]; curr.setVisible(false); } */ //alert('GROUP CREATED'); //var n = 0; /* var first = courseIDs[0]; for(var i = 1; i < courseIDs.length; i++){ var second = courseIDs[i]; //layerGUI.get('#'+second)[0].setFill('#3BF5FF'); var currLine = new Kinetic.Line({ points: [[layerGUI.get('#'+first)[0].attrs.finalX,layerGUI.get('#'+first)[0].attrs.finalY],[layerGUI.get('#'+second)[0].attrs.finalX,layerGUI.get('#'+second)[0].attrs.finalY]], stroke: #1800D2, strokeWidth: 5, lineCap: 'round', lineJoin: 'round', shadowColor: 'white', shadowBlur: 10, shadowOffset: 10, shadowOpacity: 0.2, opacity: 0.4 }); recommendedPath.add(currLine); //n++; //alert(i + ' LINE ADDED'); first = second; } */ /* for(var i = 0; i < courseIDs.length; i++){ layerGUI.get('#'+courseIDs[i])[0].setStroke(#1800D2); } */ // REVISE THE FOLLOWING TO BE COMPATIBLE WITH RECOMMENDED PATH /* var totalPop = 0; for (var q = 0; q < tops.length; q++) { printThing += tops[q].idTag + '(' + tops[q].pop + '), '; totalPop += tops[q].pop; } var tiers = new Array(); for (var q = 0; q < tops.length; q++) { tops[q].popFrac = tops[q].pop/totalPop; tiers.push(tops[q].popFrac); } var finalTiers = colorTiers(tiers); */ /* var totalPop = 0; for (var q = 1; q < courseIDs.length; q++) { //printThing += tops[q].idTag + '(' + tops[q].pop + '), '; totalPop += getPopularity(courseIDs[q-1])[courseIDs[q]]; //tops[q].pop; } var tiers = new Array(); for (var q = 1; q < courseIDs.length; q++) { //tops[q].popFrac = tops[q].pop/totalPop; tiers.push(getPopularity(courseIDs[q-1])[courseIDs[q]]/totalPop); } var finalTiers = colorTiers(tiers); */ var points = []; var numbering = []; for(var i = 0; i < courseIDs.length; i++){ //alert(courseIDs[i]); points.push(layerGUI.get('#'+courseIDs[i])[0].attrs.finalX); points.push(layerGUI.get('#'+courseIDs[i])[0].attrs.finalY); //layerGUI.get('#'+courseIDs[i])[0].setFill(#1800D2); var curr = new Kinetic.Group({ x: layerGUI.get('#'+courseIDs[i])[0].attrs.finalX, y: layerGUI.get('#'+courseIDs[i])[0].attrs.finalY, visible: false, listening: true, name: 'orderLabel' }); curr.add(new Kinetic.Circle({ x: 0, y: 0, radius: 12, fill: 'black', stroke: 'black', opacity: 1.0 })); var num = i+1; var numText = ''+num; var orderText = new Kinetic.Text({ x: 0, y: 0, text: num, fontFamily: 'Verdana', fontSize: 14, //padding: 5, fill: TIER_COLORS(2), //COLORS().REC, stroke: TIER_COLORS(2), //COLORS().REC //align: 'center' }); curr.add(orderText); orderText.setPosition(-orderText.getWidth()/2, -orderText.getHeight()/2); numbering.push(curr); } //alert('order labels made'); var totalPop = 0; for (var q = 1; q < courseIDs.length; q++) { //printThing += tops[q].idTag + '(' + tops[q].pop + '), '; totalPop += getPopularity(courseIDs[q-1])[courseIDs[q]]; //tops[q].pop; } var tiers = new Array(); for (var q = 1; q < courseIDs.length; q++) { //tops[q].popFrac = tops[q].pop/totalPop; tiers.push(getPopularity(courseIDs[q-1])[courseIDs[q]]/totalPop); } var finalTiers = colorTiers(tiers); for (var q = 1; q < courseIDs.length; q++) { var pop = getPopularity(courseIDs[q-1])[courseIDs[q]]; var colorIndex = firstIndexInDoubleArray(finalTiers, pop/totalPop); var x1 = layerGUI.get('#'+courseIDs[q-1])[0].attrs.finalX; var y1 = layerGUI.get('#'+courseIDs[q-1])[0].attrs.finalY; var x2 = layerGUI.get('#'+courseIDs[q])[0].attrs.finalX; var y2 = layerGUI.get('#'+courseIDs[q])[0].attrs.finalY; var currRecLine = new Kinetic.Line({ points: [x1, y1, x2, y2], stroke: TIER_COLORS(colorIndex), strokeWidth: 5, lineCap: 'round', lineJoin: 'round', shadowColor: COLORS().REC_SHADOW, shadowBlur: 10, shadowOffset: 5, shadowOpacity: 0.3, opacity: 0.75, name: 'recLine', //CUSTOMS!!!!! courses: courseIDs, highlighted: false }); recommendedPath.add(currRecLine); } //alert('lines made'); //alert('POINTS ADDED'); /* var recommendedLine = new Kinetic.Line({ points: points, stroke: COLORS().REC, strokeWidth: 5, lineCap: 'round', lineJoin: 'round', shadowColor: COLORS().REC_SHADOW, shadowBlur: 10, shadowOffset: 5, shadowOpacity: 0.3, opacity: 0, id: 'recLine', //CUSTOMS!!!!! courses: courseIDs, highlighted: false }); */ //recommendedLine.add(lineThing); //alert('CREATED ' + n + ' LINES'); //recommendedLine.setVisible(false); /* setTimeout(function() { layerGUI.add(recommendedLine); layerGUI.draw(); }, 450); */ //recommendedPath.add(recommendedLine); for(var i = 0; i < numbering.length; i++){ recommendedPath.add(numbering[i]); } //recommendedPath.add(numbering); layerGUI.add(recommendedPath); //layerGUI.add(recommendedLine); //recommendedLine.moveToBottom(); recommendedPath.moveToBottom(); //alert('numbering and recommendedPath added'); recommendedPath.on('mouseenter', function() { //recommendedLine.moveToTop(); document.body.style.cursor = 'pointer'; recommendedPath.moveToTop(); var recLines = recommendedPath.get('.recLine'); recLines.each(function(line) { line.setOpacity(0.9); line.setShadowOpacity(0.5); }); var orderLabels = recommendedPath.get('.orderLabel'); orderLabels.each(function(label) { label.setVisible(true); }); }); recommendedPath.on('mouseleave', function() { document.body.style.cursor = 'default'; if(!recommendedPath.attrs.highlighted){ //recommendedLine.moveToBottom(); recommendedPath.moveToBottom(); var recLines = recommendedPath.get('.recLine'); recLines.each(function(line) { line.setOpacity(0.75); line.setShadowOpacity(0.3); }); var orderLabels = recommendedPath.get('.orderLabel'); orderLabels.each(function(label) { label.setVisible(false); }); layerGUI.draw(); } }); recommendedPath.on('click touchstart', function() { if(recommendedPath.attrs.highlighted){ //recommendedLine.moveToBottom(); recommendedPath.moveToBottom(); var recLines = recommendedPath.get('.recLine'); recLines.each(function(line) { line.setOpacity(0.75); line.setShadowOpacity(0.3); }); var orderLabels = recommendedPath.get('.orderLabel'); orderLabels.each(function(label) { label.setVisible(false); }); recommendedPath.attrs.highlighted = false; }else{ //recommendedLine.moveToTop(); recommendedPath.moveToTop(); var recLines = recommendedPath.get('.recLine'); recLines.each(function(line) { line.setOpacity(0.9); line.setShadowOpacity(0.5); }); var orderLabels = recommendedPath.get('.orderLabel'); orderLabels.each(function(label) { label.setVisible(true); }); recommendedPath.attrs.highlighted = true; } }); //alert('functions created'); popularityAnim(courseIDs, cluster); popAnim.start(); //alert('animation made'); layerGUI.draw(); /* var toggleRecc = new Kinetic.Tween({ node: recommendedLine, duration: 1, opacity: 0.6, easing: Kinetic.Easings.EaseInOut }).play(); layerGUI.draw(); */ var allRec = layerGUI.get('#recommended'); var allCPM = layerGUI.get('.cpm'); allRec.each(function(rec) { //layerGUI.get('#recommended')[0].setVisible(true); rec.setVisible(false); //layerGUI.get('#recommended')[0].moveToBottom(); rec.moveToBottom(); }); //alert('allRec made invisible'); allCPM.each(function(cpm) { //layerGUI.get('#recommended')[0].setVisible(true); cpm.setVisible(false); //layerGUI.get('#recommended')[0].moveToBottom(); cpm.moveToBottom(); }); //alert('allCPM made invisible'); //layerGUI.get('#recommended')[0].setVisible(true); layerGUI.draw(); } function createHelixPath(cluster) { var courseIDs = cluster.attrs.helix; var helixPath = new Kinetic.Group({ id: 'helix', opacity: 0, //highlighted: false }); for (var i = 0; i < courseIDs.length; i++) { var x1 = layerGUI.get('#'+courseIDs[i])[0].attrs.finalX; var y1 = layerGUI.get('#'+courseIDs[i])[0].attrs.finalY; for (var j = i+1; j < courseIDs.length; j++) { var x2 = layerGUI.get('#'+courseIDs[j])[0].attrs.finalX; var y2 = layerGUI.get('#'+courseIDs[j])[0].attrs.finalY; var currHelLine = new Kinetic.Line({ points: [x1, y1, x2, y2], stroke: COLORS().COURSE_HELIX, strokeWidth: 5, lineCap: 'round', lineJoin: 'round', shadowColor: COLORS().REC_SHADOW, shadowBlur: 10, shadowOffset: 5, shadowOpacity: 0.3, opacity: 0.75, name: 'helixLine', //CUSTOMS!!!!! courses: courseIDs, //highlighted: false }); helixPath.add(currHelLine); } } layerGUI.add(helixPath); helixPath.moveToBottom(); } function addUserPath() { for (var i = 0; i < userPathway.courses.length; i++) { for (var j = 0; j < userPathway.courses[i].length; j++) { if (layerGUI.get('#'+userPathway.courses[i][j]).length != 0) { var course = layerGUI.get('#'+userPathway.courses[i][j])[0]; addUserPathCourseLabel(userPathway.courses[i][j], i, course.attrs.finalX, course.attrs.finalY); } if (i == userPathway.courses.length - 1) { continue; } for (var k = 0; k < userPathway.courses[i+1].length; k++) { if (layerGUI.get('#'+userPathway.courses[i][j]).length == 0 || layerGUI.get('#'+userPathway.courses[i+1][k]).length == 0) { continue; } var fromX = layerGUI.get('#'+userPathway.courses[i][j])[0].attrs.finalX; var fromY = layerGUI.get('#'+userPathway.courses[i][j])[0].attrs.finalY; var toX = layerGUI.get('#'+userPathway.courses[i+1][k])[0].attrs.finalX; var toY = layerGUI.get('#'+userPathway.courses[i+1][k])[0].attrs.finalY; var connectLine = new Kinetic.Line({ points: [fromX, fromY, toX, toY], stroke: COLORS().FORGED_LINE, strokeWidth: 5, lineCap: 'round', lineJoin: 'round', shadowColor: COLORS().FORGED_SHADOW, shadowBlur: 10, shadowOffset: 5, shadowOpacity: 0.3, opacity: 0.6, name: 'connectLine', //CUSTOMS!!!!! highlighted: false }); connectLine.on('mouseenter touchstart', function() { //recommendedLine.moveToTop(); document.body.style.cursor = 'pointer'; var connectLines = layerGUI.get('.connectLine'); connectLines.each(function(line) { line.moveToTop(); line.setOpacity(0.75); line.setShadowOpacity(0.5); }); var orderLabels = layerGUI.get('.connOrderLabel'); orderLabels.each(function(label) { label.setVisible(true); label.moveToTop(); }); }); connectLine.on('mouseleave touchend', function() { document.body.style.cursor = 'default'; if(!this.attrs.highlighted){ var connectLines = layerGUI.get('.connectLine'); connectLines.each(function(line) { line.moveToBottom(); line.setOpacity(0.6); line.setShadowOpacity(0.3); }); var orderLabels = layerGUI.get('.connOrderLabel'); orderLabels.each(function(label) { label.setVisible(false); }); layerGUI.draw(); } }); layerGUI.add(connectLine); connectLine.moveToBottom(); } } } } function showClusterTooltip(cluster){ var pause = 0; if(clusterTooltip.isVisible()){ var hideClusterTooltip = new Kinetic.Tween({ node: clusterTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); pause = 550; } else { clusterTooltip.setVisible(true); } clusterTooltip.attrs.cluster = cluster; setTimeout(function() { clusterTooltip.get('.clusterTitle')[0].setText(cluster.attrs.key); clusterTooltip.get('.clusterTitle')[0].setPosition(-(clusterTooltip.get('.clusterTitle')[0].getWidth()/2),5); clusterTooltip.get('.descText')[0].setText(cluster.attrs.desc); if(courseTooltip.isVisible()){ var hideCourseTooltip = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { courseTooltip.setVisible(false); }, 500); } var revealClusterTooltip = new Kinetic.Tween({ node: clusterTooltip, duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); }, pause); } function showCourseTooltip(course){ var pause = 0; //alert('FIRST COURSE TOOLTIP CHECK'); if(courseTooltip.isVisible()){ //alert('IS VISIBLE B/C OF COURSE'); var toggleBackButton = new Kinetic.Tween({ node: courseTooltip.get('.backShape')[0], duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.descButton')[0].setVisible(true); var toggleDescButton = new Kinetic.Tween({ node: courseTooltip.get('.descButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); courseTooltip.get('.connectButton')[0].setVisible(true); var toggleExploreButton = new Kinetic.Tween({ node: courseTooltip.get('.connectButton')[0], duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleDescText = new Kinetic.Tween({ node: courseTooltip.get('.descText')[0], duration: 0.2, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleTooltipSize = new Kinetic.Tween({ node: courseTooltip.get('.base')[0], duration: 0.5, scaleX: 1, scaleY: 1, height: coTtHeight, x: -courseTooltip.get('.base')[0].getWidth()/2, easing: Kinetic.Easings.EaseInOut }).play(); var toggleTooltipPos = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, y: centerY, easing: Kinetic.Easings.EaseInOut }).play(); var toggleConnectToButton = new Kinetic.Tween({ node: courseTooltip.get('.connectsToButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleConnectFromButton = new Kinetic.Tween({ node: courseTooltip.get('.connectsFromButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var togglePathAddButton = new Kinetic.Tween({ node: courseTooltip.get('.pathAddButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleAddEndButton = new Kinetic.Tween({ node: courseTooltip.get('.addEndButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleJoinEndButton = new Kinetic.Tween({ node: courseTooltip.get('.joinEndButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var toggleRemoveButton = new Kinetic.Tween({ node: courseTooltip.get('.removeButton')[0], duration: 0.5, opacity: 0, easing: Kinetic.Easings.EaseInOut }).play(); var hideClusterTooltip = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { courseTooltip.get('.backShape')[0].setVisible(false); courseTooltip.get('.descText')[0].setVisible(false); courseTooltip.get('.connectsToButton')[0].setVisible(false); courseTooltip.get('.connectsFromButton')[0].setVisible(false); courseTooltip.get('.pathAddButton')[0].setVisible(false); courseTooltip.get('.addEndButton')[0].setVisible(false); courseTooltip.get('.joinEndButton')[0].setVisible(false); courseTooltip.get('.removeButton')[0].setVisible(false); }, 400); var hideClusterTooltip = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); pause = 550; } else { courseTooltip.setVisible(true); } courseTooltip.attrs.course = course; //alert('MEEP MERP BLAHHH'); setTimeout(function() { courseTooltip.get('.clusterTitle')[0].setText(course.attrs.key); courseTooltip.get('.clusterTitle')[0].setPosition(-(courseTooltip.get('.clusterTitle')[0].getWidth()/2),5); var descText = course.attrs.courseName + '\n\n' + course.attrs.courseDesc + '\n\nWAYS: '; if(course.attrs.courseReqs.length == 0){ descText += "NONE"; } for(var i = 0; i < course.attrs.courseReqs.length; i++){ if(i != 0){ descText += ", "; } descText += reqMap(course.attrs.courseReqs[i]); } courseTooltip.get('.descText')[0].setText(descText); //courseTooltip.get('.descText')[0].setText(course.attrs.courseDesc); if(clusterTooltip.isVisible()){ var hideClusterTooltip = new Kinetic.Tween({ node: clusterTooltip, duration: 0.5, opacity: 0.0, easing: Kinetic.Easings.EaseInOut }).play(); setTimeout(function() { clusterTooltip.setVisible(false); }, 500); } var revealCourseTooltip = new Kinetic.Tween({ node: courseTooltip, duration: 0.5, opacity: 1.0, easing: Kinetic.Easings.EaseInOut }).play(); }, pause); //alert('MADE IT TO THE END?'); } function colorTiers(popFracs) { var tiers = new Array(); for (var i = 0; i < popFracs.length; i++) { if (tiers.indexOf(popFracs[i]) == -1) { tiers.push(popFracs[i]); } } tiers.sort(function(a,b){return a - b}); //alert('tiers: '+tiers+'\nlength: '+tiers.length); var finalTiers = new Array(); var subTierMult = Math.floor(tiers.length/5); var leftovers = tiers.length%5; var numArr; if (subTierMult >= 1) { numArr = 5; } else { numArr = leftovers; } for (var i = 0; i < numArr; i++) { finalTiers.push(new Array()); } var i=0, j=0, k=0; while (i < subTierMult) { for (var j = 0; j < numArr; j++) { if (j < leftovers) { k = j; } else { k = leftovers; } finalTiers[j].push(tiers[i+j*subTierMult+k]); } i++; } for (i = 0; i < leftovers; i++) { finalTiers[i].push(tiers[(i+1)*subTierMult + i]); } //alert('finalTiers: '+finalTiers+'\n\nnumArr: '+numArr+'\n\nsubTierMult: '+subTierMult+'\n\nleftovers: '+leftovers); return finalTiers; } function connectsFromPopAnim(fromID, toInfo, totalPop, finalTiers) { var xa = centerX;//layerGUI.get('#'+fromID)[0].getAbsolutePosition().x; var ya = centerY;//layerGUI.get('#'+fromID)[0].getAbsolutePosition().y; for (var q = 0; q < toInfo.length; q++) { var xb = layerGUI.get('#'+toInfo[q].idTag)[0].getAbsolutePosition().x; var yb = layerGUI.get('#'+toInfo[q].idTag)[0].getAbsolutePosition().y; var ampX = (xb - xa)/2; var ampY = (yb - ya)/2; var period = 4000; var midX = (xa + xb)/2; var midY = (ya + yb)/2; var colorIndex = firstIndexInDoubleArray(finalTiers, toInfo[q].pop/totalPop); //alert('colorIndex: '+colorIndex+'\n\n for popFrac: '+toInfo[q].pop/totalPop); var curr = new Kinetic.Rect({ x: midX - 32*(2.0/3)/2, y: midY - 20*(2.0/3)/2, //stroke: TIER_COLORS(colorIndex), //COLORS().POP_BOX, strokeWidth: 2, //strokeEnabled: false, fill: TIER_COLORS(colorIndex), //COLORS().POP_BOX, cornerRadius: 4, width: 32*(2.0/3), height: 20*(2.0/3), opacity: 1, name: 'popBox', //CUSTOMS!!!! xa: xa, ya: ya, xb: xb, yb: yb, ampX: ampX, ampY: ampY, midX: midX, midY: midY, pop: toInfo[q].pop, popFrac: toInfo[q].pop/totalPop }); var currLine = new Kinetic.Line({ points: [xa, ya, xb, yb], fill: TIER_COLORS(colorIndex), strokeWidth: 2, width: 6, height: 6, lineCap: 'round', lineJoin: 'round', shadowColor: COLORS().REC_SHADOW, shadowBlur: 10, shadowOffset: 5, shadowOpacity: 0.3, opacity: 0.85, name: 'popLine', //CUSTOMS!!!!! }); layerGUI.add(curr); layerGUI.add(currLine); currLine.moveToBottom(); } popFromBoxAnim = new Kinetic.Animation(function(frame) { var allPopBoxes = layerGUI.get('.popBox'); allPopBoxes.each(function(box) { var currPeriod = period / (box.attrs.popFrac * 2); //* 6); var tx = box.attrs.ampX * 2 * (1.0*(frame.time * 2 * Math.PI) % currPeriod)/currPeriod + box.attrs.xa; var ty = box.attrs.ampY * 2 * (1.0*(frame.time * 2 * Math.PI) % currPeriod)/currPeriod + box.attrs.ya; box.setPosition(tx - box.getWidth()/2, ty - box.getHeight()/2); }); }, layerGUI); } function connectsToPopAnim(fromInfo, toID, totalPop, finalTiers) { var xb = centerX; var yb = centerY; for (var q = 0; q < fromInfo.length; q++) { var xa = layerGUI.get('#'+fromInfo[q].idTag)[0].getAbsolutePosition().x; var ya = layerGUI.get('#'+fromInfo[q].idTag)[0].getAbsolutePosition().y; var ampX = (xb - xa)/2; var ampY = (yb - ya)/2; var period = 4000; var midX = (xa + xb)/2; var midY = (ya + yb)/2; //alert('from '+q+': '+fromInfo[q].idTag+'\nwith pop: '+fromInfo[q].pop+'\nxa, ya: '+xa+', '+ya+'ampX, ampY: '+ampX+', '+ampY); var colorIndex = firstIndexInDoubleArray(finalTiers, fromInfo[q].pop/totalPop); //alert('colorIndex: '+colorIndex+'\n\n for popFrac: '+fromInfo[q].pop/totalPop); var curr = new Kinetic.Rect({ x: midX - 32*(2.0/3)/2, y: midY - 20*(2.0/3)/2, //stroke: TIER_COLORS(colorIndex), //COLORS().POP_BOX, strokeWidth: 2, //strokeEnabled: false, fill: TIER_COLORS(colorIndex), //COLORS().POP_BOX, cornerRadius: 4, width: 32*(2.0/3), height: 20*(2.0/3), opacity: 1, name: 'popBox', //CUSTOMS!!!! xa: xa, ya: ya, xb: xb, yb: yb, ampX: ampX, ampY: ampY, midX: midX, midY: midY, pop: fromInfo[q].pop, popFrac: fromInfo[q].pop/totalPop }); var currLine = new Kinetic.Line({ points: [xa, ya, xb, yb], //stroke: TIER_COLORS(colorIndex), strokeWidth: 2,//5, lineCap: 'round', lineJoin: 'round', shadowColor: COLORS().REC_SHADOW, shadowBlur: 10, shadowOffset: 5, shadowOpacity: 0.3, opacity: 0.85, name: 'popLine', //CUSTOMS!!!!! }); layerGUI.add(curr); layerGUI.add(currLine); currLine.moveToBottom(); } popToBoxAnim = new Kinetic.Animation(function(frame) { var allPopBoxes = layerGUI.get('.popBox'); allPopBoxes.each(function(box) { var currPeriod = period / (box.attrs.popFrac * 2);//6); var tx = box.attrs.ampX * 2 * (1.0*(frame.time * 2 * Math.PI) % currPeriod)/currPeriod + box.attrs.xa; var ty = box.attrs.ampY * 2 * (1.0*(frame.time * 2 * Math.PI) % currPeriod)/currPeriod + box.attrs.ya; box.setPosition(tx - box.getWidth()/2, ty - box.getHeight()/2); }); }, layerGUI); } function popularityAnim(courseIDs, cluster) { //var cPop = getPopularities(cluster.attrs.key); var total = 0; var totalPop = 0; for (var q = 1; q < courseIDs.length; q++) { //printThing += tops[q].idTag + '(' + tops[q].pop + '), '; totalPop += getPopularity(courseIDs[q-1])[courseIDs[q]]; //tops[q].pop; } var tiers = new Array(); for (var q = 1; q < courseIDs.length; q++) { //tops[q].popFrac = tops[q].pop/totalPop; tiers.push(getPopularity(courseIDs[q-1])[courseIDs[q]]/totalPop); } var finalTiers = colorTiers(tiers); /* for(var i = 0; i < cPop.length; i++){ for(var j = 0; j < cPop[i].length; j++){ total += cPop[i][j]; } } */ //alert('total: ' + total); for(var i = 1; i < courseIDs.length; i++){ var xa = layerGUI.get('#'+courseIDs[i-1])[0].attrs.finalX; var ya = layerGUI.get('#'+courseIDs[i-1])[0].attrs.finalY; var xb = layerGUI.get('#'+courseIDs[i])[0].attrs.finalX; var yb = layerGUI.get('#'+courseIDs[i])[0].attrs.finalY; var ind1 = cluster.attrs.courseIDs.indexOf(courseIDs[i-1]); var ind2 = cluster.attrs.courseIDs.indexOf(courseIDs[i]); //alert('ind1: '+ind1+'\nind2: '+ind2); //var popFrac = (cPop[ind1][ind2]*1.0)/total; //alert('popFrac: ' + popFrac); //var pop = cPop[ind1][ind2]; var pop = getPopularity(courseIDs[i-1])[courseIDs[i]]; //FOR NEW VERSION!!!!!!!!! //alert('within script.js'); total += pop; var colorIndex = firstIndexInDoubleArray(finalTiers, pop/totalPop); var ampX = (xb - xa)/2; var ampY = (yb - ya)/2; var period = 4000; //THIS WILL BE WHAT CHANGES WITH POPULARITY var midX = (xa+xb)/2; var midY = (ya+yb)/2; //alert('for: '+courseIDs[i-1]+' to '+courseIDs[i]+'\nmidX: '+midX+', midY: '+midY+', ampX: '+ampX+', ampY: '+ampY); var curr = new Kinetic.Rect({ x: midX - 32*(2.0/3)/2, y: midY - 20*(2.0/3)/2, //stroke: TIER_COLORS(colorIndex), strokeWidth: 2, //strokeEnabled: false, fill: TIER_COLORS(colorIndex), cornerRadius: 4, width: 32*(2.0/3), height: 20*(2.0/3), opacity: 1, name: 'cpm', //CUSTOMS!!!! xa: xa, ya: ya, xb: xb, yb: yb, ampX: ampX, ampY: ampY, midX: midX, midY: midY, pop: pop, popFrac: 0 }); layerGUI.add(curr); } //USE FOLLOWING RECT TO DEBUG popAnim /* layerGUI.add(new Kinetic.Rect({ x: 0, y: 0, fill: '#D2007B', width: 90, height: 60, opacity: 1, cornerRadius: 10 })); */ //alert('total: '+total); var allCPMS = layerGUI.get('.cpm'); allCPMS.each(function(cpm) { var popFrac = (cpm.attrs.pop*1.0)/total; cpm.attrs.popFrac = popFrac; //alert('popFrac: '+popFrac); }); popAnim = new Kinetic.Animation(function(frame) { var allCPMs = layerGUI.get('.cpm'); allCPMs.each(function(cpm) { //var currPeriod = period + (500*(1-cpm.attrs.pop)); //var currPeriod = 125 * Math.sqrt(period*(9.0/7.0) + (3000*(1-cpm.attrs.popFrac))); var currPeriod = period / (cpm.attrs.popFrac); //* 5); //alert('period is: '+currPeriod+'\ndistance is: '+Math.sqrt(Math.pow(cpm.attrs.xb-cpm.attrs.xa, 2) + Math.pow(cpm.attrs.yb-cpm.attrs.ya, 2))); var currSpeed = 0.55 * Math.pow(cpm.attrs.popFrac, 2); var currDist = Math.sqrt(Math.pow(cpm.attrs.xb-cpm.attrs.xa, 2) + Math.pow(cpm.attrs.yb-cpm.attrs.ya, 2)); currPeriod = currDist / currSpeed; //alert('currPeriod: ' + currPeriod); //var tx = cpm.attrs.ampX * Math.sin(Math.abs((frame.time) * 2 * Math.PI / currPeriod)) + cpm.attrs.midX; //var ty = cpm.attrs.ampY * Math.sin(Math.abs((frame.time) * 2 * Math.PI / currPeriod)) + cpm.attrs.midY; var tx = cpm.attrs.ampX * 2 * (1.0*(frame.time * 2 * Math.PI) % currPeriod)/currPeriod + cpm.attrs.xa; var ty = cpm.attrs.ampY * 2 * (1.0*(frame.time * 2 * Math.PI) % currPeriod)/currPeriod + cpm.attrs.ya; /* if((ampX > 0 && tx < cpm.getX()) || (ampX < 0 && tx > cpm.getX())){ cpm.setVisible(false); layerGUI.draw(); } else if((ampX > 0 && tx > cpm.getX()) || (ampX < 0 && tx < cpm.getX())){ cpm.setVisible(true); layerGUI.draw(); } else if((ampY < 0 && ty < cpm.getY()) || (ampY > 0 && ty > cpm.getY())){ cpm.setVisible(true); layerGUI.draw(); } else if((ampY < 0 && ty > cpm.getY()) || (ampY > 0 && ty < cpm.getY())){ cpm.setVisible(false); layerGUI.draw(); } */ /* if(((ampX > 0 && tx < cpm.getX()) || (ampX < 0 && tx > cpm.getX())) && ((ampY < 0 && ty > cpm.getY()) || (ampY > 0 && ty < cpm.getY()))){ cpm.setVisible(false); layerGUI.draw(); } else if(((ampX > 0 && tx > cpm.getX()) || (ampX < 0 && tx < cpm.getX())) && ((ampY < 0 && ty < cpm.getY()) || (ampY > 0 && ty > cpm.getY()))){ cpm.setVisible(true); layerGUI.draw(); } */ /* if(cpm.attrs.xb - cpm.attrs.xa > 0 && cpm.attrs.yb - cpm.attrs.ya < 0){ if(tx - cpm.getWidth()/2 > cpm.attrs.xb - 2 && ty - cpm.getHeight()/2 > cpm.attrs.yb + 2){ cpm.setVisible(false); }else if(tx - cpm.getWidth()/2 > cpm.attrs.xa + 2 && ty - cpm.getHeight()/2 > cpm.attrs.ya - 2){ cpm.setVisible(true); } } else if(cpm.attrs.xb - cpm.attrs.xa < 0 && cpm.attrs.yb - cpm.attrs.ya < 0){ if(tx - cpm.getWidth()/2 > cpm.attrs.xb + 2 && ty - cpm.getHeight()/2 > cpm.attrs.yb + 2){ cpm.setVisible(false); }else if(tx - cpm.getWidth()/2 > cpm.attrs.xa - 2 && ty - cpm.getHeight()/2 > cpm.attrs.ya - 2){ cpm.setVisible(true); } } else if(cpm.attrs.xb - cpm.attrs.xa < 0 && cpm.attrs.yb - cpm.attrs.ya > 0){ if(tx - cpm.getWidth()/2 > cpm.attrs.xb + 2 && ty - cpm.getHeight()/2 > cpm.attrs.yb - 2){ cpm.setVisible(false); }else if(tx - cpm.getWidth()/2 > cpm.attrs.xa - 2 && ty - cpm.getHeight()/2 > cpm.attrs.ya + 2){ cpm.setVisible(true); } } else if(cpm.attrs.xb - cpm.attrs.xa > 0 && cpm.attrs.yb - cpm.attrs.ya > 0){ if(tx - cpm.getWidth()/2 > cpm.attrs.xb - 2 && ty - cpm.getHeight()/2 > cpm.attrs.yb - 2){ cpm.setVisible(false); }else if(tx - cpm.getWidth()/2 > cpm.attrs.xa + 2 && ty - cpm.getHeight()/2 > cpm.attrs.ya + 2){ cpm.setVisible(true); } } */ cpm.setPosition(tx - cpm.getWidth()/2, ty - cpm.getHeight()/2); }); }, layerGUI); } function updateProgressFromSelected() { var progGroups = progressBar.get('.progGroup'); progGroups.each(function(group) { group.attrs.nMet = 0; }); var progBars = progressBar.get('.progBar1'); progBars.each(function(bar) { bar.setFill(COLORS().PROGRESS_BACKGROUND); }); var progBars = progressBar.get('.progBar2'); progBars.each(function(bar) { bar.setFill(COLORS().PROGRESS_BACKGROUND); }); var progText = progressBar.get('.progText1'); progText.each(function(text) { text.setFill(COLORS().PROGRESS_TEXT); }); var progText = progressBar.get('.progText2'); progText.each(function(text) { text.setFill(COLORS().PROGRESS_TEXT); }); for(var q = 0; q < userPathway.selected.length; q++) { var currCourse = layerGUI.get('#'+userPathway.selected[q]); //alert('presence of '+userPathway.courses[r][q]+' is '+currCourse.length); if (currCourse.length == 0) continue; for(var p = 0; p < currCourse[0].attrs.courseReqs.length; p++) { var bar = progressBar.get('#'+currCourse[0].attrs.courseReqs[p])[0]; //alert(userPathway.courses[r][q]+' meets '+currCourse[0].attrs.courseReqs[p]+', which has now been met '+(bar.attrs.nMeq+1)+' many times'); if (bar.attrs.nMet < bar.attrs.nReq) { if (bar.attrs.nMet == 0) { bar.attrs.nMet++; bar.get('.progBar1')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText1')[0].setFill(COLORS().PROGRESS_BACKGROUND); } else if (bar.attrs.nMet == 1) { bar.attrs.nMet++; bar.get('.progBar2')[0].setFill(COLORS().PROGRESS_TEXT); bar.get('.progText2')[0].setFill(COLORS().PROGRESS_BACKGROUND); } } } } layerGUI.draw(); } function highlightSelectedCourses(){ /* aesthetic: false, social: false, science: false, formalReas: false, appQuant: false, diversity: false, ethics: false, creativeEx: false */ var allCourses = layerGUI.get('.courseCircle'); var helix = []; if (examining) { //var //var currClust = getClusters()[clusterTooltip.attrs.cluster]; helix = clusterTooltip.attrs.cluster.attrs.helix; //alert('helix: '+helix); } //alert('all courses: ' + allCourses); allCourses.each(function(course) { var highlighted = false; var allReqs = course.attrs.courseReqs; //alert('curr course: ' + course.attrs.key + '\n\nall reqs: ' + allReqs + '\n\nsize: ' + allReqs.length + '\n\ntype: ' + course.getClassName()); //alert('all reqs: ' + allReqs); for(var i=0; i < allReqs.length; i++) { var req = allReqs[i]; /* if(highlighted == true){ break; }*/ //alert('req: ' + req); switch(req) { case 'creativeEx': //alert('case creative'); if(courseControls.creativeEx){ //alert('change color'); highlighted = true; } break; case 'aesthetic': //alert('case aesthetic'); if(courseControls.aesthetic){ //alert('change color'); highlighted = true; } break; case 'social': //alert('case social'); if(courseControls.social){ //alert('change color'); highlighted = true; } break; case 'appQuant': //alert('case appQuant'); if(courseControls.appQuant){ //alert('change color'); highlighted = true; } break; case 'science': if(courseControls.science){ //alert('change color'); highlighted = true; } break; case 'formalReas': if(courseControls.formalReas){ //alert('change color'); highlighted = true; } break; case 'ethics': if(courseControls.ethics){ //alert('change color'); highlighted = true; } break; case 'diversity': if(courseControls.diversity){ //alert('change color'); highlighted = true; } break; default: break; } } //alert('children'); //var children = course.getChildren(); //alert('got children'); //children.toArray(); //alert('to array'); //children.each(function(child) { //if(child.getClassName() == 'Circle'){ //alert('circle found'); //if(highlighted){ //alert('to highlight'); //child.fill(null); //alert('nulled'); //course.setFill(COLORS().WAYS_HIGHLIGHT); //alert('highlighted'); //} else { //if (!highlighted) { //alert('not to highlight'); var currColor; if (userPathway.selected.indexOf(course.attrs.idTag) == -1) { if (highlighted) { currColor = COLORS().WAYS_HIGHLIGHT; } else if (helix.indexOf(course.attrs.idTag) == -1 || !helixControls.showHelix) { currColor = COLORS().COURSE; } else { currColor = COLORS().COURSE_HELIX; } } else { currColor = COLORS().COURSE_SELECTED; } course.setFill(currColor); //alert('not highlighted'); //} else { // course.setFill(COLORS().WAYS_HIGHLIGHT); //} //} //}); }); } function animate() { // note: three.js includes requestAnimationFrame shim requestAnimationFrame(animate); render(); } function render() { if (animating) { //sphere.rotation.x += 0.01; sphere.rotation.y += rotationSpeed; } renderer.render(scene, camera); layerGUI.draw(); } $(function () { //alert('start'); //alert('start 2'); init(); //alert('passed init'); //animate(); //POSSIBLY KEEP THIS!!! //alert('passed animate'); /* $('body').append('
THIS IS TAB 1
THIS IS TAB 2
THIS IS TAB 3