index.html

<html>

<head>
<title> Friend Mapper!</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta property="og:title" content="Friend Mapper"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://petercottle.com/friendMapper2/index.html"/>
<meta property="og:image" content="http://petercottle.com/friendMapper2/friendMapperIcon.PNG"/>
<meta property="og:site_name" content="FriendMapper"/>
<meta property="og:description" content="Map your friends in 3D with WebGl and the Facebook Graph API! Coded by Peter Cottle"/>

<link href="jquery.bubblepopup.v2.3.1.css" rel="stylesheet" type="text/css"/>
<link href="style.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bubblepopup.v2.3.1.min.js"></script>

<script id="white-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>

<script id="white-fs" type="x-shader/x-fragment">

precision mediump float;

void main(void) {
    gl_FragColor = vec4(1,1,1,1);
}

</script>

<script id="shader-box-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec4 vColor;

void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vColor = aVertexColor;
}
</script>

<script id="shader-box-fs" type="x-shader/x-fragment">
precision mediump float;

varying vec4 vColor;

void main(void) {
    gl_FragColor = vColor;
}

</script>


<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;

    varying vec2 vTextureCoord;
    varying vec3 vLightWeighting;
    varying vec3 vNormal;

    uniform sampler2D uSampler;

    void main(void) {
        vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        float intensity = 1.05 - dot(vNormal,vec3(0,0,1));
        vec3 atmosphere = vec3(1,1,1) * pow(intensity,3.0);
        //gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);
        gl_FragColor = vec4(textureColor.rgb * vLightWeighting + atmosphere, textureColor.a);
    }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    attribute vec3 aVertexNormal;
    attribute vec2 aTextureCoord;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
    uniform mat3 uNMatrix;

    uniform vec3 uAmbientColor;

    uniform vec3 uLightingDirection;
    uniform vec3 uDirectionalColor;

    uniform bool uUseLighting;

    varying vec2 vTextureCoord;
    varying vec3 vLightWeighting;
    varying vec3 vNormal;

    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vTextureCoord = aTextureCoord;

        if (!uUseLighting) {
            vLightWeighting = vec3(1.0, 1.0, 1.0);
        } else {
            vec3 transformedNormal = uNMatrix * aVertexNormal;
            vNormal = transformedNormal;
            float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
            vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
        }
    }
</script>


<script type="text/javascript">

var gl;
$j = jQuery.noConflict();

//arc dimensions and colors
var arcBaseRadius = 2;
var arcBaseThickness = 0.04;
var arcBaseHeight = 0.1;

var arcAlpha = 0.75;

var bubbleTheme = 'all-blue';
var white = [1,1,1,arcAlpha];
var blue = [0,0,1,arcAlpha];
var green = [0,1,0,arcAlpha];
var red = [1,0,0,arcAlpha];
var yellow = [1,1,0,arcAlpha];

var categoryToFromColor = { 'hometown':blue,
                            'current':green,
                            'education':yellow,
                            'workplace':red};

var categoryToToColor = {   'hometown':white,
                            'current':white,
                            'education':white,
                            'workplace':white};

//globals
var shouldCircuit = true;
var thePopup = null;
var canvas = null;

var arcUnderMouse = null;

var masterArcList = [];

var hometownArcList = [];
var currentArcList = [];
var workplaceArcList = [];
var educationArcList = [];

var categoryToArcList = {   'education':educationArcList,
                            'workplace':workplaceArcList,
                            'hometown':hometownArcList,
                            'current':currentArcList
                        };

var currentDisplayCategory = 'hometown';

var globalColorLookup = {};
var globalColorTaken = {};

//camera stuff
var zoomAmount = -6;
var currentZoomLevel = -6;

var scaleAmount = 1;
var ourScaleTween = null;
var scaleVariablesForTween = null;

var globalYrotate = 180;
var globalXrotate = 0;
var angleLimit = 85;
var rotateOn = false;

var rotVariablesForTween = {'x':globalXrotate,'y':globalYrotate};
var ourTween = null;
var tweenTime = 1000;
var tweenEasing = TWEEN.Easing.Cubic.EaseInOut;
var ourTweenOn = false;


/*****************CLASSES*******************/

function arcObj(gpsFrom,gpsTo,baseRadius,startColor,endColor,thickness,maxHeight) {
    this.alternateForStrips = false;
    this.gpsFrom = gpsFrom;
    this.gpsTo = gpsTo;
    this.baseRadius = baseRadius;
    this.startColor = startColor;
    this.endColor = endColor;
    this.isDoneAnimating = false;
    this.animateDirection = 1;
    this.thickness = thickness;
    this.divisions = 25;
    this.maxHeight = maxHeight;
    this.isHidden = false;

    //animate stuff
    this.animateStep = 0;
    this.totalAnimateSteps = null;
    this.animateVertexAmount = 0;

    //find the vectors
    var pos1 = getPosFromGps(gpsFrom);
    var pos2 = getPosFromGps(gpsTo);

    //our vectors are the normalized versions of these
    this.startVec = vec3.create();
    vec3.normalize(pos1,this.startVec);

    this.endVec = vec3.create();
    vec3.normalize(pos2,this.endVec);

    this.crossVec = vec3.create();
    vec3.cross(this.startVec,this.endVec,this.crossVec);
    vec3.normalize(this.crossVec);
    
    //get the total amount of angle between
    var dotProduct = vec3.dot(this.startVec,this.endVec);
    var dotProductNormal = dotProduct / (vec3.length(this.startVec) * vec3.length(this.endVec));

    this.totalTheta = Math.acos(dotProductNormal);
    this.currentTheta = 0;

    //make the buffers
    this.myVertexBuffer = gl.createBuffer();
    this.myNormalBuffer = gl.createBuffer();
    this.myColorBuffer = gl.createBuffer();
    this.myPickBuffer = gl.createBuffer();

    this.myVertices = [];
    this.myNormals = [];
    this.myColors = [];
    this.myPickColors = [];

    //for the picking
    this.uniqueColor = getUniqueColorObject();
    this.cString = this.uniqueColor.cString;

    globalColorLookup[this.uniqueColor.cString] = this;
}

arcObj.prototype.initAnimate = function () {
    //ok so the initial animate thing is dependent on the number of divisions
    this.totalAnimateSteps = this.divisions;
    this.animateStep = 0;

}

arcObj.prototype.expandArc = function () {
    this.isHidden = false;
    this.isDoneAnimating = false;
    this.animateDirection = 1;
    this.animateStep = 0;
}

arcObj.prototype.retractArc = function () {
    this.isDoneAnimating = false;
    this.animateDirection = -4;
}

arcObj.prototype.hideArc = function () {
    this.isDoneAnimating = true;
    this.isHidden = true;
    this.animateVertexAmount = 0;
}

arcObj.prototype.animateArc = function() {
    //check in case we got called badly
    if(this.isDoneAnimating)
    {
        return true;
    }
    //ok so i did a bit of refactoring here. animateArc doesn't do any of the complicated
    //math to generate the points, it just decides which points to display.

    //ok so basically we just have two triangles per division, so update that number
    this.animateStep += this.animateDirection;
    this.animateVertexAmount = this.animateStep * 2;

    //if we are done
    if(this.animateStep >= this.totalAnimateSteps || this.animateStep <= 0)
    {
        //set the right flag and return
        this.isDoneAnimating = true;
        if(this.animateStep == 0)
        {
            this.isHidden = true;
        }
        return true;
    }
    //still have more to go
    return false;

}

arcObj.prototype.fixHeightAndWidth = function () {
    //adjust the maxheight and width depending on how long this thing is

    //basically, this is a function of theta. we scale width and height
    //depending on how short or long the thing is

    //ok so basically, we need to scale height up if its bigger and scale it down if
    //its smaller

    //get a number between 0 and 1 for how "long" the arc is
    //the max theta between two vectors on a plane is just pi
    var ourModifier = (this.totalTheta / (Math.PI));

    //now scale between -1 and 1
    var ourDelta = (ourModifier - 0.5) * 2;

    //now scale height
    this.maxHeight = this.maxHeight * 0.05 + this.maxHeight * ourModifier;

    //fix our width too
    this.thickness = this.thickness * 0.1 + this.thickness * ourModifier * 2;

    //also our divisions
    this.divisions = Math.round(200 * ourModifier) + 2;

}

arcObj.prototype.buildArc = function () {
    //this method generates the points and does some house keeping
    this.fixHeightAndWidth();
    this.generateArcPoints();
    //refresh buffers?
    this.refreshBuffers();
    this.initAnimate();
}

arcObj.prototype.generateArcPoints = function () {

    //the idea is that we want to loop through theta with the correct number of
    //divisions and generate those points
    for(var genStep = 0; genStep < this.divisions; genStep++)
    {
        //stupid namespace things @_____@
        this.currentTheta = genStep * this.totalTheta / this.divisions;

        var progress = genStep / (this.divisions - 1);

        //ok so we will just compute the vertices for the current theta, add them, and then

        //first get the current radius
        var heightScaleAmount = Math.sin(progress * Math.PI);
        var thisRadius = this.baseRadius + heightScaleAmount * this.maxHeight;
        
        //first scale appropriately
        var adjVec = vec3.create(this.startVec);
        //these look way better with linear interp and sine-based height
        vec3.scale(adjVec,(1-progress));

        var oppVec = vec3.create(this.endVec);
        vec3.scale(oppVec,progress);

        //add these, normalize, scale by radius
        var thisNormal = vec3.create();
        vec3.add(adjVec,oppVec,thisNormal);
        vec3.normalize(thisNormal);

        var thisPoint = vec3.create();
        vec3.scale(thisNormal,thisRadius,thisPoint);
        
        //also get the point that is "thickness" away in cross direction
        var upperNormal = vec3.create(thisNormal);
        var addVec = vec3.create();
        vec3.scale(this.crossVec,this.thickness * heightScaleAmount,addVec);

        //add the addVec to the normal to get the upper point
        vec3.add(upperNormal,addVec,upperNormal);
        vec3.normalize(upperNormal);

        //get the point also
        var upperPoint = vec3.create(upperNormal);
        vec3.scale(upperPoint,thisRadius);
        
        //add them in the right order!
        var firstVertex;
        var secondVertex;
        var firstNormal;
        var secondNormal;

        //goddamnit webgl give me quad strips and not this shit!!!!
        if(!this.alternateForStrips)
        {
            firstVertex = thisPoint;
            secondVertex = upperPoint;
            firstNormal = thisNormal;
            secondNormal = upperNormal;
        }
        else
        {
            firstVertex = upperPoint;
            secondVertex = thisPoint;
            firstNormal = upperNormal;
            secondNormal = thisNormal;
        }
        //wtf why dont i have to do this?
        //this.alternateForStrips = !this.alternateForStrips;
        
        //these are our points!! yay. add them to the vertices and normals
        this.myVertices.push(firstVertex[0],firstVertex[1],firstVertex[2]);
        this.myNormals.push(firstNormal[0],firstNormal[1],firstNormal[2]);

        //add these points too
        this.myVertices.push(secondVertex[0],secondVertex[1],secondVertex[2]);
        this.myNormals.push(secondNormal[0],secondNormal[1],secondNormal[2]);

        //Colors!!
        var thisColor = [];
        for(var i = 0; i < 4; i++)
        {
            thisColor[i] = this.startColor[i] * Math.cos(this.currentTheta) + 
                            this.endColor[i] * Math.sin(this.currentTheta);
            //try out linear?
            thisColor[i] = this.startColor[i] * (1-progress) +
                            this.endColor[i] * (progress);
        }

        //push the color twice
        this.myColors.push(thisColor[0],thisColor[1],thisColor[2],thisColor[3]);
        this.myColors.push(thisColor[0],thisColor[1],thisColor[2],thisColor[3]);

        //push our unique color twice. dont forget about alpha!
        this.myPickColors.push(this.uniqueColor.rFloat,this.uniqueColor.gFloat,this.uniqueColor.bFloat,1);
        this.myPickColors.push(this.uniqueColor.rFloat,this.uniqueColor.gFloat,this.uniqueColor.bFloat,1);

    }
    //end of loop, we have filled up all of the arrays
    //now we return and selectively draw to animate

}


arcObj.prototype.refreshBuffers = function () {
    //buffer the data

    gl.bindBuffer(gl.ARRAY_BUFFER, this.myVertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.myVertices), gl.DYNAMIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, this.myNormalBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.myNormals), gl.DYNAMIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, this.myColorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.myColors), gl.DYNAMIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, this.myPickBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.myPickColors), gl.DYNAMIC_DRAW);
 
    //update the sizes
    this.myVertexBuffer.itemSize = 3;
    this.myVertexBuffer.numItems = this.myVertices.length / 3;

    this.myColorBuffer.itemSize = 4;
    this.myColorBuffer.numItems = this.myColors.length / 4;

    this.myNormalBuffer.itemSize = 3;
    this.myNormalBuffer.numItems = this.myNormals.length / 3;

    this.myPickBuffer.itemSize = 4;
    this.myPickBuffer.numItems = this.myPickColors.length / 4;

}

arcObj.prototype.drawArcStrips = function() {
    if(this.isHidden)
    {
        return;
    }
    this.drawArcStripsEither(false);
}

arcObj.prototype.drawArcStripsForPicking = function() {
    this.drawArcStripsEither(true);
}

arcObj.prototype.drawArcStripsWhite = function() {
    //bind buffers, use different program

    gl.bindBuffer(gl.ARRAY_BUFFER,this.myVertexBuffer);
    gl.vertexAttribPointer(whiteShaderProgram.vertexPositionAttribute,this.myVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, this.animateVertexAmount);

}

arcObj.prototype.drawArcStripsEither = function(forPicking) {
    //we just need to bind our buffers and then draw!

    //need to bind this vertex buffer
    gl.bindBuffer(gl.ARRAY_BUFFER,this.myVertexBuffer);
    gl.vertexAttribPointer(blendShaderProgram.vertexPositionAttribute,this.myVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
    //need to bind this color buffer
    if(!forPicking)
    {
        gl.bindBuffer(gl.ARRAY_BUFFER,this.myColorBuffer);
        gl.vertexAttribPointer(blendShaderProgram.vertexColorAttribute, this.myColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
    }
    else
    {
        gl.bindBuffer(gl.ARRAY_BUFFER,this.myPickBuffer);
        gl.vertexAttribPointer(blendShaderProgram.vertexColorAttribute, this.myPickBuffer.itemSize, gl.FLOAT, false, 0, 0);
    }

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, this.animateVertexAmount);
}


/***************End Classes!*****************************/


/********** Geometry Functions *******/

function getPosFromGps(gpsCoords)
{
    //gives you the position on the sphere (sans radius) from a gps location
    var lat = gpsCoords.latitude;
    var long = gpsCoords.longitude;

    var latRad = lat * Math.PI / 180;
    var longRad = long * Math.PI / 180;

    var theta = Math.PI/2 - latRad;
    var phi = Math.PI - longRad;

    var x = Math.cos(phi) * Math.sin(theta);
    var y = Math.cos(theta);
    var z = Math.sin(phi) * Math.sin(theta);

    var returnVec = vec3.create([x,y,z]);
    return returnVec;
}

function myColorRand() {
    return Math.round(Math.random() * 255);
}

function zeroPad(num,count)
{
    var numZeropad = String(num);
    while(numZeropad.length < count) {
        numZeropad = "0" + numZeropad;
    }
    return numZeropad;
}

function getRandomColor() {
    var r = myColorRand(); var rS = zeroPad(r,3);
    var g = myColorRand(); var gS = zeroPad(g,3);
    var b = myColorRand(); var bS = zeroPad(b,3);
    var rFloat = r / 255;
    var gFloat = g / 255;
    var bFloat = b / 255;
    
    var cString = rS + gS + bS;

    return {'r':r,'g':g,'b':b,'cString':cString,
            'rFloat':rFloat,'gFloat':gFloat,'bFloat':bFloat};
}

function getUniqueColorObject()
{
    //make a color object that doesnt exist, and go store it
    var aColor = getRandomColor();
    while(globalColorTaken[aColor.cString])
    {
        aColor = getRandomColor();
    }
    //ready for return
    globalColorTaken[aColor.cString] = true;
    return aColor;
}


/*******************Geometry Functions******************/

function initGL(canvas) {
    try {
        gl = canvas.getContext("experimental-webgl",{preserveDrawingBuffer:true});
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
    } catch (e) {
    }
    if (!gl || /Firefox/.test(navigator.userAgent)) {
        window.location = "http://petercottle.com/friendMapper2/browserFail.html";
    }
}

function determineIfInPopup(eventFragment) {
    if(!eventFragment)
    {
        return false;
    }
    //console.log("This level class " + eventFragment.className);
    if(/bubble/.test(eventFragment.className))
    {
        return true;
    }
    //dig deeper
    return determineIfInPopup(eventFragment.parentNode);
}

function onMouseWheel(event) {

    //first, check if this was a scroll inside a popup thing
    if(event.originalEvent && event.originalEvent.srcElement)
    {
        if(determineIfInPopup(event.originalEvent.srcElement))
        {
            //console.log("was in bubble div");
            //dont do stupid zoom stuff
            return;
        }
        else
        {
            //console.log("not in bubble div");
        }
    }

    var toZoom = 0;
    if(event.originalEvent.wheelDeltaY)
    {
        toZoom = event.originalEvent.wheelDeltaY * 0.003;
    }
    else
    {
        //friggin firefox...
        toZoom = -1 * event.originalEvent.detail * 0.06;
    }

    zoomAmount += toZoom;
    if(zoomAmount > -2.76)
    {
        zoomAmount = -2.76;
    }
}

function resizeWindow()
{
    //fix other frame buffer size...?
    initOtherFrameBuffer();

    //window sizes
    var wHeight = $j(window).height();
    var wWidth = $j(window).width();

    //viewport sizes
    vHeight = wHeight;
    vWidth = wWidth;

    //set the width to the canvas
    $j('#earth-canvas').attr('width',String(vWidth) + 'px');
    $j('#earth-canvas').attr('height',String(vHeight) + 'px');

    gl.viewportWidth = vWidth;
    gl.viewportHeight = vHeight; 
    gl.viewport(0,0,vWidth,vHeight);

    mat4.perspective(45,gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

    setMatrixUniforms();


     $j('.loadingGif').css('left',String(wWidth/2 - 220*0.5) + 'px');
    $j('.loadingGif').css('top',String(wHeight / 2 - 19*0.5) + 'px');
    //fix loading gif
    
}


function getShader(gl, id) {
    var shaderScript = document.getElementById(id);
    if (!shaderScript) {
        return null;
    }

    var str = "";
    var k = shaderScript.firstChild;
    while (k) {
        if (k.nodeType == 3) {
            str += k.textContent;
        }
        k = k.nextSibling;
    }

    var shader;
    if (shaderScript.type == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (shaderScript.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }

    gl.shaderSource(shader, str);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }

    return shader;
}

//global colors
var ambientR = 0.5;
var ambientG = 0.7;
var ambientB = 1.2;

var lDirectionX = -1.0;
var lDirectionY = -1.0;
var lDirectionZ = -1.0;

var lightingDirection = [
    lDirectionX,
    lDirectionY,
    lDirectionZ
];

var lColorR = 0.8;
var lColorG = 0.8;
var lColorB = 0.8;

var earthShaderProgram;
var blendShaderProgram;
var whiteShaderProgram;

function initShaders() {
    //earth shader
    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");

    //atmosphere shader
    var atmosphereVertexShader = getShader(gl,"shader-atmosphere-vs");
    var atmosphereFragShader = getShader(gl,"shader-atmosphere-fs");

    //box shadeer
    var blendVertexShader = getShader(gl, "shader-box-vs");
    var blendFragShader = getShader(gl, "shader-box-fs");

    //white shader
    var whiteVertexShader = getShader(gl, "white-vs");
    var whiteFragShader = getShader(gl, "white-fs");

    whiteShaderProgram = gl.createProgram();
    gl.attachShader(whiteShaderProgram, whiteVertexShader);
    gl.attachShader(whiteShaderProgram, whiteFragShader);
    gl.linkProgram(whiteShaderProgram);

    earthShaderProgram = gl.createProgram();
    gl.attachShader(earthShaderProgram, vertexShader);
    gl.attachShader(earthShaderProgram, fragmentShader);
    gl.linkProgram(earthShaderProgram);

    blendShaderProgram = gl.createProgram();
    gl.attachShader(blendShaderProgram, blendVertexShader);
    gl.attachShader(blendShaderProgram, blendFragShader);
    gl.linkProgram(blendShaderProgram);

    if (!gl.getProgramParameter(earthShaderProgram, gl.LINK_STATUS) || 
        !gl.getProgramParameter(whiteShaderProgram, gl.LINK_STATUS) || 
            !gl.getProgramParameter(blendShaderProgram, gl.LINK_STATUS)){
        alert("Could not initialise shaders");
    }

    gl.useProgram(earthShaderProgram);

    earthShaderProgram.vertexPositionAttribute = gl.getAttribLocation(earthShaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(earthShaderProgram.vertexPositionAttribute);

    earthShaderProgram.textureCoordAttribute = gl.getAttribLocation(earthShaderProgram, "aTextureCoord");
    gl.enableVertexAttribArray(earthShaderProgram.textureCoordAttribute);

    earthShaderProgram.vertexNormalAttribute = gl.getAttribLocation(earthShaderProgram, "aVertexNormal");
    gl.enableVertexAttribArray(earthShaderProgram.vertexNormalAttribute);

    earthShaderProgram.pMatrixUniform = gl.getUniformLocation(earthShaderProgram, "uPMatrix");
    earthShaderProgram.mvMatrixUniform = gl.getUniformLocation(earthShaderProgram, "uMVMatrix");
    earthShaderProgram.nMatrixUniform = gl.getUniformLocation(earthShaderProgram, "uNMatrix");
    earthShaderProgram.samplerUniform = gl.getUniformLocation(earthShaderProgram, "uSampler");
    earthShaderProgram.useLightingUniform = gl.getUniformLocation(earthShaderProgram, "uUseLighting");
    earthShaderProgram.ambientColorUniform = gl.getUniformLocation(earthShaderProgram, "uAmbientColor");
    earthShaderProgram.lightingDirectionUniform = gl.getUniformLocation(earthShaderProgram, "uLightingDirection");
    earthShaderProgram.directionalColorUniform = gl.getUniformLocation(earthShaderProgram, "uDirectionalColor");

    //our arcs
    gl.useProgram(blendShaderProgram);

    blendShaderProgram.vertexPositionAttribute = gl.getAttribLocation(blendShaderProgram,"aVertexPosition");
    gl.enableVertexAttribArray(blendShaderProgram.vertexPositionAttribute);

    blendShaderProgram.vertexColorAttribute = gl.getAttribLocation(blendShaderProgram,"aVertexColor");
    gl.enableVertexAttribArray(blendShaderProgram.vertexColorAttribute);

    blendShaderProgram.pMatrixUniform = gl.getUniformLocation(blendShaderProgram,"uPMatrix");
    blendShaderProgram.mvMatrixUniform = gl.getUniformLocation(blendShaderProgram,"uMVMatrix");

    //white shader
    gl.useProgram(whiteShaderProgram);

    whiteShaderProgram.vertexPositionAttribute = gl.getAttribLocation(whiteShaderProgram,"aVertexPosition");
    gl.enableVertexAttribArray(whiteShaderProgram.vertexPositionAttribute);

    whiteShaderProgram.pMatrixUniform = gl.getUniformLocation(whiteShaderProgram,"uPMatrix");
    whiteShaderProgram.mvMatrixUniform = gl.getUniformLocation(whiteShaderProgram,"uMVMatrix");

    gl.useProgram(earthShaderProgram);
}


function handleLoadedTexture(texture) {
    stopLoadingWithText();

    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
    gl.generateMipmap(gl.TEXTURE_2D);

    gl.bindTexture(gl.TEXTURE_2D, null);

    doEarthFlyin();
    tick();
}


var earthTexture;

var otherFramebuffer;
var otherTexture;

function initOtherFrameBuffer() {
    //make frame buffer
    otherFramebuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER,otherFramebuffer);
    otherFramebuffer.width = $j(window).width();
    otherFramebuffer.height = $j(window).height();

    //make texture
    otherTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, otherTexture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
    gl.generateMipmap(gl.TEXTURE_2D);

    //set it to rgba
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, otherFramebuffer.width, otherFramebuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

    //something with a render buffer?
    var renderbuffer = gl.createRenderbuffer();
    gl.bindRenderbuffer(gl.RENDERBUFFER,renderbuffer);
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, otherFramebuffer.width, otherFramebuffer.height);

    //for texture? set attached depth buffer also?
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, otherTexture, 0);
    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);

    //reset back to default
    gl.bindTexture(gl.TEXTURE_2D,null);
    gl.bindRenderbuffer(gl.RENDERBUFER, null);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

function initTexture() {
    earthTexture = gl.createTexture();
    earthTexture.image = new Image();
    earthTexture.image.onload = function () {
        handleLoadedTexture(earthTexture)
    }

    earthTexture.image.src = "world.jpg";
    startLoadingWithText("Initializing WebGL...");
}

var mvMatrix = mat4.create();
var mvMatrixStack = [];
var pMatrix = mat4.create();

function mvPushMatrix() {
    var copy = mat4.create();
    mat4.set(mvMatrix, copy);
    mvMatrixStack.push(copy);
}

function mvPopMatrix() {
    if (mvMatrixStack.length == 0) {
        throw "Invalid popMatrix!";
    }
    mvMatrix = mvMatrixStack.pop();
}

function setMatrixUniforms() {
    gl.uniformMatrix4fv(earthShaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(earthShaderProgram.mvMatrixUniform, false, mvMatrix);

    gl.uniformMatrix4fv(blendShaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(blendShaderProgram.mvMatrixUniform, false, mvMatrix);

    gl.uniformMatrix4fv(whiteShaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(whiteShaderProgram.mvMatrixUniform, false, mvMatrix);

    var normalMatrix = mat3.create();
    mat4.toInverseMat3(mvMatrix, normalMatrix);
    mat3.transpose(normalMatrix);
    gl.uniformMatrix3fv(earthShaderProgram.nMatrixUniform, false, normalMatrix);
    gl.uniformMatrix3fv(earthShaderProgram.nMatrixUniform, false, normalMatrix);
}


function degToRad(degrees) {
    return degrees * Math.PI / 180;
}


var mouseDown = false;
var lastMouseX = null;
var lastMouseY = null;

var earthRotationMatrix = mat4.create();
mat4.identity(earthRotationMatrix);

function handleMouseDown(event) {
    event.preventDefault();
    mouseDown = true;

    if(event.which == 1)
    {
        //primary click
        mouseClickPick(event);
        //return;
    }

    //otherwise, move with mouse
    lastMouseX = event.clientX;
    lastMouseY = event.clientY;
}

function fmButtonClick() {
    //get the id
    var myCategory = $j(this).attr('id');
    if(myCategory)
    {
        currentDisplayCategory = myCategory;
    }

    //if we are already pressed
    if($j(this).hasClass('depressed'))
    {
        //hide our arcs and peace
        retractArcsOfList(categoryToArcList[myCategory]);
        $j(this).removeClass('depressed');
        return;
    }

    if(thePopup.IsBubblePopupOpen())
    {
        thePopup.HideBubblePopup();
    }

    var otherButtons = $j('.fmButton:not(#' + myCategory + ')');
    var myButton = $j(this);

    //unpress all other buttons, add depressed to this one
    otherButtons.removeClass('depressed');
    otherButtons.addClass('popped');

    myButton.removeClass('popped');
    myButton.addClass('depressed');
    expandArcsOfList(categoryToArcList[myCategory]);

    //go through and hide others...
    for(var i = 0; i < categories.length; i++)
    {
        var theCat = categories[i];
        if(theCat != myCategory)
        {
            retractArcsOfList(categoryToArcList[theCat]);
        }
    }

    //go ahead and tween my hometown or whatever if its open
    if(myCategory == 'hometown')
    {
        if(myHometown)
        {
            tweenToHometown();
        }
        else
        {
            askForHometown();
        }
    }
    if(myCategory == 'current')
    {
        if(myCurrent)
        {
            tweenToCurrent();
        }
        else
        {
            askForCurrent();
        }
    }
    if(myCategory == 'workplace')
    {
        //do some more logic to find a workplace
        if(myWorkplaces.length)
        {
            tweenToWork();
        }
        else
        {
            askForWorkplace();
        }
    }
    if(myCategory == 'education')
    {
        if(myEducations.length)
        {
            tweenToEducation();
        }
        else
        {
            askForEducation();
        }
    }

}

function handleMouseUp(event) {
    mouseDown = false;
}


function handleMouseMove(event) {
    //phantom events
    if(event.clientX == lastMouseX && event.clientY == lastMouseY)
    {
        return;
    }

    //want to stop the tween if we are right now
    arcUnderMouse = getArcAtMousePos(event.clientX,event.clientY);
    if(arcUnderMouse)
    {
        //go ahead and set the cursor
        $j('body').css('cursor','pointer');
    }
    else
    {
        $j('body').css('cursor','auto');
    }

    if (!mouseDown) {
        lastMouseX = event.clientX;
        lastMouseY = event.clientY;
        return;
    }
    //this here only executes when we are clicking and dragging mouse

    if(thePopup.IsBubblePopupOpen())
    {
        thePopup.HideBubblePopup();
    }

    var newX = event.clientX;
    var newY = event.clientY;

    var deltaX = newX - lastMouseX;
    var deltaY = newY - lastMouseY;

    globalYrotate += deltaX / 10;
    globalXrotate += deltaY / 10;

    if(globalXrotate > angleLimit)
    {
        globalXrotate = angleLimit;
    }
    else if (globalXrotate < -angleLimit)
    {
        globalXrotate = -angleLimit;
    }

    lastMouseX = newX
    lastMouseY = newY;
}


var earthVertexPositionBuffer;
var earthVertexNormalBuffer;
var earthVertexTextureCoordBuffer;
var earthVertexIndexBuffer;

var boxVertexPositionBuffer;
var boxVertexColorBuffer;

var vertices;
var colors;

function initEarthBuffers() {
    var latitudeBands = 30;
    var longitudeBands = 30;
    var radius = 2;

    var vertexPositionData = [];
    var normalData = [];
    var textureCoordData = [];
    for (var latNumber=0; latNumber <= latitudeBands; latNumber++) {
        var theta = latNumber * Math.PI / latitudeBands;
        var sinTheta = Math.sin(theta);
        var cosTheta = Math.cos(theta);

        for (var longNumber=0; longNumber <= longitudeBands; longNumber++) {
            var phi = longNumber * 2 * Math.PI / longitudeBands;
            var sinPhi = Math.sin(phi);
            var cosPhi = Math.cos(phi);

            var x = cosPhi * sinTheta;
            var y = cosTheta;
            var z = sinPhi * sinTheta;

            var u = 1 - (longNumber / longitudeBands);
            var v = 1 - (latNumber / latitudeBands);

            var xSquared = Math.pow(x,2);
            var ySquared = Math.pow(y,2);
            var zSquared = Math.pow(z,2);
            var mag = Math.sqrt(xSquared + ySquared + zSquared);

            normalData.push(x);
            normalData.push(y);
            normalData.push(z);

            textureCoordData.push(u);
            textureCoordData.push(v);

            vertexPositionData.push(radius * x);
            vertexPositionData.push(radius * y);
            vertexPositionData.push(radius * z);
        }
    }

    var indexData = [];
    for (var latNumber=0; latNumber < latitudeBands; latNumber++) {
        for (var longNumber=0; longNumber < longitudeBands; longNumber++) {
            var first = (latNumber * (longitudeBands + 1)) + longNumber;
            var second = first + longitudeBands + 1;
            indexData.push(first);
            indexData.push(second);
            indexData.push(first + 1);

            indexData.push(second);
            indexData.push(second + 1);
            indexData.push(first + 1);
        }
    }

    earthVertexNormalBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, earthVertexNormalBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData), gl.STATIC_DRAW);
    earthVertexNormalBuffer.itemSize = 3;
    earthVertexNormalBuffer.numItems = normalData.length / 3;

    earthVertexTextureCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, earthVertexTextureCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordData), gl.STATIC_DRAW);
    earthVertexTextureCoordBuffer.itemSize = 2;
    earthVertexTextureCoordBuffer.numItems = textureCoordData.length / 2;

    earthVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, earthVertexPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositionData), gl.STATIC_DRAW);
    earthVertexPositionBuffer.itemSize = 3;
    earthVertexPositionBuffer.numItems = vertexPositionData.length / 3;

    earthVertexIndexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, earthVertexIndexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), gl.STATIC_DRAW);
    earthVertexIndexBuffer.itemSize = 1;
    earthVertexIndexBuffer.numItems = indexData.length;

}


function mouseClickPick(event) {
    //get the coordinates on our canvas
    var x = event.clientX;
    var y = event.clientY;

    var theArc = getArcAtMousePos(x,y);
    if(theArc)
    {
        arcClick(theArc);
    }
}

function getArcAtMousePos(x,y) {
    //flip y
    y = gl.viewportHeight - y;

    //real quick, render the frame but in pick mode into another buffer!
    gl.bindFramebuffer(gl.FRAMEBUFFER, otherFramebuffer);
    drawSceneIntoOtherBuffer();

    //go get the pixel data from the frame buffer
    var pixelValues = new Uint8Array(4);
    gl.readPixels(x,y,1,1,gl.RGBA,gl.UNSIGNED_BYTE,pixelValues);

    //now switch back
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);

    //console.log("R:" + pixelValues[0] + " G:" + pixelValues[1] + " B:" + pixelValues[2]);

    var r = pixelValues[0]; var rS = zeroPad(r,3);
    var g = pixelValues[1]; var gS = zeroPad(g,3);
    var b = pixelValues[2]; var bS = zeroPad(b,3);

    //get the string for this
    var cString = rS + gS + bS;
    
    //see if its there
    if(globalColorTaken[cString])
    {
        //also tell who it is
        var theArc = globalColorLookup[cString];
        return theArc;
    }
    return null;
}

function arcClick(anArc)
{
    if(anArc.myConnection)
    {
        //going there
        fbClickOnArc(anArc);
    }
    else
    {
        tweenToGps(anArc.gpsFrom.latitude,anArc.gpsFrom.longitude);
        anArc.retractArc();
        var showString = "This location at " + anArc.gpsFrom.latitude + " and " + anArc.gpsFrom.longitude;
        bubbleShow(showString);
    }
}

function fbClickOnArc(anArc) {
    //all the stuff for when you click on an arc that has a facebook connection
    var theGps = anArc.myConnection.toPlace.ourGps;
    tweenToGps(theGps.latitude,theGps.longitude);

    //go ahead and build the display string
    var innerHtml = buildHtmlForBubble(anArc.myConnection);
    bubbleShow(innerHtml);
}

function buildHtmlForBubble(aConnection) {
    var bHtml = "";
    bHtml += '<div style="max-height:300px;padding:10px;" class="bubbleDiv">';
    bHtml += '<p id="closeButton" style="float:right;display:inline-block;position:relative;top:-34px;left:7px;font-size:20px;cursor:pointer;" onclick="bubbleHide();"><b>X</b></p>'; 
    bHtml += "<b>" + aConnection.toPlace.name + '</b><div style="height:5px;"></div>';

    bHtml += '<div style="overflow:auto;max-height:250px;box-shadow:inset 0px 0px 12px #000;padding:15px;margin-bottom:10px">';
    bHtml += "<p>" + aConnection.category[0].toUpperCase() + aConnection.category.slice(1) + " Connection</p>";

    var catToVerb = {'hometown':'are from here',
                    'current':'live here',
                    'workplace':'have worked here',
                    'education':'have studied here'};

    bHtml += "<p> Friends who " + catToVerb[aConnection.category] + ":</p>";
    bHtml += "<ul>";
    
    var fList = aConnection.friendsInConnection;
    for(var i = 0; i < fList.length; i++)
    {
        bHtml += "<li>";
        bHtml += fList[i].name;
        bHtml += '<img class="profileImage" style="display:inline-block" src="' + fList[i].imageLink + '"/>';
        bHtml += "</li>";
    }
    bHtml += "</ul>";

    if((aConnection.category == 'hometown' || aConnection.category == 'current') &&
        aConnection.toPlace.locationJson.description)
    {
        bHtml += "<p>" + aConnection.toPlace.locationJson.description + "</p>";
    }
    if((aConnection.category == 'workplace' || aConnection.category == 'education')
        && aConnection.toPlace.ourJson.description)
    {
        bHtml += "<p>" + aConnection.toPlace.ourJson.description;
    }
    
    bHtml += "</div>";
    bHtml += "</div>";
    return bHtml;
}

function bubbleShow(textForBubble)
{
    thePopup.HideBubblePopup(10);
    thePopup.ShowBubblePopup({      'openingDelay':tweenTime*0.8,
                                    'closingSpeed':100,
                                    'position':'top',
                                    'align':'center',
                                    'distance':'0px',
                                    'innerHtml':textForBubble,
                                    'innerHtmlStyle':   {
                                                            'max-width':'500px',
                                                            'max-height':'400px',
                                                        },
                                    'themeName':bubbleTheme,
                                    'themePath':'jquerybubblepopup-theme'
            });
}

function bubbleHide()
{
    thePopup.HideBubblePopup();
}

function drawSceneIntoOtherBuffer() {
    drawSceneEither(true);
}

function drawScene() {
    drawSceneEither(false);
}

function drawSceneEither(forPicking) {

    cameraPerspectiveClear();
    lighting();
    translateAndRotate();

    gl.useProgram(earthShaderProgram);
    setMatrixUniforms();
    //here, we draw the earth, TODO: draw earth white?
    drawEarth();

    gl.useProgram(blendShaderProgram);
    setMatrixUniforms();

    //the 1500 is for when it gets crazay
    for(var i = 0; i < masterArcList.length && i < 1500; i++)
    {
        var theArc = masterArcList[i];
        theArc.animateArc();
        if(theArc == arcUnderMouse && !forPicking)
        {
            gl.useProgram(whiteShaderProgram);
            setMatrixUniforms();
            theArc.drawArcStripsWhite();
            gl.useProgram(blendShaderProgram);
            setMatrixUniforms();
        }
        else
        {
            //draw the arc
            if(forPicking)
            {
                theArc.drawArcStripsForPicking();
            }
            else
            {
                theArc.drawArcStrips();
            }
        }
    }

    if(false)
    {
        gl.useProgram(whiteShaderProgram);
        setMatrixUniforms();
        arcUnderMouse.drawArcStripsWhite();
        gl.useProgram(blendShaderProgram);
        setMatrixUniforms();
    }
}

function randomGps() {
    var lat = Math.random() * 180 + -90;
    var long = Math.random() * 360 - 180;

    return {'latitude':lat,'longitude':long};

}

function rubberBandBall() {
    for(var i = 0; i < 50; i++) { generateRandomArc(); }
}

function generateRandomArc() {
    var fromGps = randomGps();
    var toGps = randomGps();

    var thisArc = new arcObj(fromGps,toGps,2,[0,0,1,arcAlpha],[1,1,1,arcAlpha],0.04,0.1);
    thisArc.buildArc();

    masterArcList.push(thisArc);
}

function expandArcsOfList(theList) {
    for(var i = 0; i < theList.length; i++)
    {
        theList[i].expandArc();
    }
}

function retractArcsOfList(theList) {
    for(var i = 0; i < theList.length; i++)
    {
        theList[i].retractArc();
    }
}

function cameraPerspectiveClear() {

    gl.useProgram(earthShaderProgram);
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);

    //we set our clearColor to be 0 0 0 0, so its essentially transparent.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
}

function lighting() {

    //legacy
    var lighting = true;
    gl.uniform1i(earthShaderProgram.useLightingUniform, lighting);

    if (lighting) {
        gl.uniform3f(
            earthShaderProgram.ambientColorUniform,
            ambientR,
            ambientG,
            ambientB
        );

        var adjustedLD = vec3.create();
        vec3.normalize(lightingDirection, adjustedLD);
        vec3.scale(adjustedLD, -1);
        gl.uniform3fv(earthShaderProgram.lightingDirectionUniform, adjustedLD);

        gl.uniform3f(
            earthShaderProgram.directionalColorUniform,
            lColorR,
            lColorG,
            lColorB
        );
    }

}

function translateAndRotate() {

    mat4.identity(mvMatrix);

    mat4.translate(mvMatrix, [0, 0, zoomAmount]);

    //cap variables
    if(globalYrotate > 360)
    {
        globalYrotate -= 360;
    }
    if(globalYrotate < -360)
    {
        globalYrotate += 360;
    }

    //do rotation for camera
    var newRot = mat4.create();
    mat4.identity(newRot);

    //now need to get the other axis
    var secondRotAxis = vec3.create();
    var result = vec3.create();
    secondRotAxis[0] = 1;
    mat4.multiplyVec3(newRot,secondRotAxis,result);

    mat4.rotate(newRot,degToRad(globalXrotate), [result[0],result[1],result[2]]);
    mat4.rotate(newRot,degToRad(globalYrotate), [0,1,0]);

    //now multiply earth rotation
    mat4.identity(earthRotationMatrix);
    mat4.multiply(earthRotationMatrix,newRot);

    mat4.scale(mvMatrix,[scaleAmount,scaleAmount,scaleAmount]);

    mat4.multiply(mvMatrix, earthRotationMatrix);
    setMatrixUniforms();
}

function drawEarth() {

    gl.useProgram(earthShaderProgram);
    setMatrixUniforms();

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, earthTexture);
    gl.uniform1i(earthShaderProgram.samplerUniform, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, earthVertexPositionBuffer);
    gl.vertexAttribPointer(earthShaderProgram.vertexPositionAttribute, earthVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, earthVertexTextureCoordBuffer);
    gl.vertexAttribPointer(earthShaderProgram.textureCoordAttribute, earthVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, earthVertexNormalBuffer);
    gl.vertexAttribPointer(earthShaderProgram.vertexNormalAttribute, earthVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, earthVertexIndexBuffer);
    gl.drawElements(gl.TRIANGLES, earthVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

}


//slowly rotate
function slowRotate()
{
    if(rotateOn)
    {
        globalYrotate += 0.1;
    }
    return;
}

function convertGpsToRotVariables(lat,long) {
    //well globalYrotate is just 90 + that long
    var yRotate = 90 + -long;
    var xRotate = lat;

    return {'xRotate':xRotate,'yRotate':yRotate};
}

function tweenUpdate() {
    globalXrotate = rotVariablesForTween.x;
    globalYrotate = rotVariablesForTween.y;
}

function tweenDone() {
    ourTweenOn = false;
}

function tweenToGps(lat,long) {
    var rotCorrespondingToGps = convertGpsToRotVariables(lat,long);

    //we need to avoid the 360 spin thing
    var ySpin = rotCorrespondingToGps.yRotate;
    var ySpinDistance = ySpin - globalYrotate;

    if(ySpinDistance > 180)
    {
        rotCorrespondingToGps.yRotate -= 360;
    }
    else if (ySpinDistance < -180)
    {
        globalYrotate -= 360;
    }

    //refresh our current rotvaribales
    rotVariablesForTween = {'x':globalXrotate,'y':globalYrotate};

    var x = rotCorrespondingToGps.xRotate;
    var y = rotCorrespondingToGps.yRotate;

    if(ourTween)
    {
        ourTween.stop();
    }

    ourTween = new TWEEN.Tween(rotVariablesForTween).to({x:x,y:y},tweenTime).onUpdate(tweenUpdate).onComplete(tweenDone);
    ourTween.easing(tweenEasing);
    ourTweenOn = true;
    ourTween.start();

}

function tick() {
    requestAnimFrame(tick);
    drawScene();
    slowRotate();
}


function webGLStart() {
    canvas = document.getElementById("earth-canvas");
    initGL(canvas);
    initShaders();
    initEarthBuffers();
    initTexture();
    initOtherFrameBuffer();

    gl.clearColor(0.0, 0.0, 0.0, 0.0);
    gl.enable(gl.BLEND);
    gl.enable(gl.DEPTH_TEST);
    gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);

    document.onmousedown = handleMouseDown;
    document.onmouseup = handleMouseUp;
    document.onmousemove = handleMouseMove;

    //tick();
    //zoom in to earth
    //doEarthFlyin();
}

function doEarthFlyin() {
    scaleAmount = 0.01;
    if(ourScaleTween)
    {
        ourScaleTween.stop();
    }

    scaleVariablesForTween = {'scale':scaleAmount};

    ourScaleTween = new TWEEN.Tween(scaleVariablesForTween).to({'scale':1},tweenTime*1.5).onUpdate(scaleTweenUpdate);
    setTimeout('scaleTweenComplete()',tweenTime*0.5);
    ourScaleTween.easing(TWEEN.Easing.Quartic.EaseInOut);
    ourScaleTween.start();
} 

function scaleTweenComplete()
{
    rubberBandBall();
    if(!shouldCircuit)
    {
        setTimeout('initFacebook()',1500);
    }
}

function scaleTweenUpdate() {
    scaleAmount = scaleVariablesForTween.scale;
}

$j(document).ready(function(){
    TWEEN.start();
    webGLStart();

    theBatchSender = new batchSenderObj();

    $j(window).resize(function(){resizeWindow();});
    //initial resize
    resizeWindow();

    //var container = document.getElementById('earth-canvas');
    $j(document).bind('mousewheel',onMouseWheel);
    $j(document).bind('DOMMouseScroll',onMouseWheel);
    

    //buttons also
    $j('.fmButton').click(fmButtonClick);

    //make popup for that little pixel
    $j('.popupAnchor').CreateBubblePopup({
            innerHtml:'hi',
            innerHtmlStyle:{'text-align':'center'},
            themeName:bubbleTheme,
            themePath:'jquerybubblepopup-theme'
        });
   thePopup = $j('.popupAnchor'); 


});

</script>


</head>


<body>
 <div id="fb-root"></div>
<script>

//fblobals
var hometownConnections = [];
var workplaceConnections = [];
var currentConnections = [];
var educationConnections = [];

var uniqueWorkplaceConnections = {};
var uniqueEducationConnections = {};

var connectionFromByPlace = {};
var connectionToByPlace = {};

var globalPlaceDict = {};
var globalFriendDict = {};
var friendsQueried = 0;

var theBatchSender = null;

var boxTimeout = null;
var notifyTimeout = null;
var isLoading = false;

//me stuff
var meObject = null;
var myHometown = null;
var myCurrent = null;
var myWorkplaces = [];
var myEducations = [];

//the lookup
categories = ['hometown','workplace','current','education'];
categoryToList = {'hometown':hometownConnections,'workplace':workplaceConnections,
                'current':currentConnections,'education':educationConnections};

//the login response
var fbLoginResponse = null;

/******************************CLASSES**********************/

function batchSenderObj() {
    this.currentBatchNum = 0;
    this.batchReferences = [];
    this.currentBatch = [];
    this.myTimeout = null;
}

batchSenderObj.prototype.addSearchQuery = function(objFunctionCallback,searchString) {
    //ok add this thing to our current batch
    var theSearch = {'cb':objFunctionCallback,'searchString':searchString};
    this.currentBatch.push(theSearch);

    this.sendOrResetTimer();
}

batchSenderObj.prototype.sendOrResetTimer = function() {
    if(this.currentBatch.length < 50)
    {
        this.resetTimer();
        return;
    }
    //we should actually go send!
    
    //to do this, just clear the timer we have and send
    if(this.myTimeout)
    {
        clearTimeout(this.myTimeout);
    }
    this.sendBatch();
}

batchSenderObj.prototype.resetTimer = function() {
    //just clear our timeout if we have it and make a new one to send
    if(this.myTimeout)
    {
        clearTimeout(this.myTimeout);
    }
    this.myTimeout = setTimeout('theBatchSender.sendBatch()',10*1000);
}

function makeBatchCallback(referenceToBatch,batchNum) {
    var toReturn = function(response) { referenceToBatch.processBatchBack(batchNum,response); }
    return toReturn;
}

batchSenderObj.prototype.sendBatch= function() {
    this.batchReferences.push(this.currentBatch); 
    var batchNum = this.currentBatchNum;

    //make a new empty batch for future requests
    this.currentBatch = [];
    this.currentBatchNum += 1;

    var listOfReq = this.batchReferences[batchNum];

    var batchToSend = [];
    for(var i = 0; i < listOfReq.length; i++)
    {
        var theObj = {'method':'GET','relative_url':listOfReq[i].searchString};
        batchToSend.push(theObj);
    }

    var ourClosure = makeBatchCallback(this,batchNum);
    FB.api('/','POST',{'batch':batchToSend},function(response) { ourClosure(response); });
}

batchSenderObj.prototype.processBatchBack = function(batchNum,response) {
    /*console.log("Batch search back!!");
    console.log("number" + batchNum);
    console.log(" and data");
    console.log(response);*/

    var ourBatch = this.batchReferences[batchNum];

    for(var i = 0; i < response.length; i++)
    {
        var theData = response[i];
        if(theData.code == 200)
        {
            var toHandle = JSON.parse(theData.body);
            ourBatch[i].cb(toHandle);
        }
        else
        {
            console.log("error on facebook graph");
            console.log(theData);
        }
    }
    //should be done
}


function connectionObj(category,fromPlace,toPlace) {
    this.myArc = null;
    this.category = category;
    this.fromPlace = fromPlace;
    this.toPlace = toPlace;
    this.friendsInConnection = [];
    this.weAreBuilt = false;

    //depending on the category
    //add it to the right list
    if(!categoryToList[category])
    {   throw "Invalid category added " + category; return;}

    //add to hometown connections, etc
    categoryToList[category].push(this);
    //but also, we need to add ourselves to the unique lists
    //if we are a workplace or education because those
    //get cloned 
    if(category == 'workplace')
    {
        if(!uniqueWorkplaceConnections[this.toPlace.id])
        {
            uniqueWorkplaceConnections[this.toPlace.id] = this;
        }
    }
    if(category == 'education')
    {
        if(!uniqueEducationConnections[this.toPlace.id])
        {
            uniqueEducationConnections[this.toPlace.id] = this;
        }
    }


    //also, add these to the reverse lookup objects
    this.setFromPlace(fromPlace);
    this.setToPlace(toPlace);
}
//short constructor, most of the work is done over here
connectionObj.prototype.addFriend = function(friend) {
    if(!friend)
    {
        throw "invalid friend on addfriend";
    }
    this.friendsInConnection.push(friend);
}

connectionObj.prototype.checkPlace = function(which) {
    if(this[which] && this[which].id)
    {
        var id = this[which].id;
        if(globalPlaceDict[id] && globalPlaceDict[id].ourGps && globalPlaceDict[id].ourGps.latitude)
        {
            return true;
        }
    }
    return false;
}

connectionObj.prototype.buildIfReady = function () {
    if(this.weAreBuilt)
    {
        return false;
    }

    if(!this.isReadyForBuild())
    {
        //did not succeed, we aren't ready
        return {'response':false,'arc':null};
    }

    //let's go ahead and build our arc!
    //get our from gps
    var fromId = this.fromPlace.id;
    var fromGps = globalPlaceDict[fromId].ourGps;

    var toId = this.toPlace.id;
    var toGps = globalPlaceDict[toId].ourGps;
    
    //ok these two are good, lets make the arc
    var fromColor = categoryToFromColor[this.category];
    var toColor = categoryToToColor[this.category];

    var myArc = new arcObj(fromGps,toGps,arcBaseRadius,fromColor,toColor,arcBaseThickness,arcBaseHeight);
    myArc.buildArc();

    myArc.myConnection = this;
    this.myArc = myArc;

    this.weAreBuilt = true;
    //by default dont show anything
    this.myArc.isDoneAnimating = true;
    this.myArc.isHidden = true;

    //add to necessary lists
    var ourListToAdd = categoryToArcList[this.category];
    ourListToAdd.push(myArc);
    masterArcList.push(myArc);
    //also, if we are displaying this, show it
    if(this.category == currentDisplayCategory)
    {
        this.myArc.expandArc();
        //hide loading gif if this is the first arc back
        if(isLoading)
        {
            //not loading anymore!
            stopLoadingWithText();
        }
    }


    //return the response and the arc
    return {'response':true,'arc':this.myArc};
}

connectionObj.prototype.isReadyForBuild = function() {

    //ok so we need to lookup our two places and see if they both have a GPS
    var fromHasGps = this.checkPlace('fromPlace');
    var toHasGps = this.checkPlace('toPlace');

    return fromHasGps && toHasGps;
}

connectionObj.prototype.checkIfImInList = function(aList) {
    for(var i = 0; i < aList.length; i++)
    {
        if(aList[i] == this)
        {
            return true;
        }
    }
    return false;
}

connectionObj.prototype.setFromPlace = function(place) {
    this.fromPlace = place;
    //if we have a valid id and everything
    if(!place || !place.id)
    {
        return;
    }
    if(!connectionFromByPlace[place.id])
    {
        connectionFromByPlace[place.id] = [];
    }
    //only add yourself to this list if you arent there already
    var theList = connectionFromByPlace[place.id];
    if(!this.checkIfImInList(theList))
    {
        theList.push(this); //this should update the main one right?
    }
}

connectionObj.prototype.setToPlace = function(place) {
    this.toPlace = place;
    //now check if the place has an id
    if(!place.id)
    {
        return;
    }
    if(!connectionToByPlace[place.id])
    {
        connectionToByPlace[place.id] = [];
    }
    var theList = connectionToByPlace[place.id];
    if(!this.checkIfImInList(theList))
    {
        theList.push(this);
    }
    //DRY i know i know, but it would have been too abstracted if i had a third lookup for the global variables
}


connectionObj.prototype.cloneConnectionWithNewFrom = function(newFromPlace) {
    var newConnection = new connectionObj(this.category,newFromPlace,this.toPlace);

    for(var i = 0; i < this.friendsInConnection.length; i++)
    {
        newConnection.addFriend(this.friendsInConnection[i]);
    }
    //should be enough....?
    return newConnection;
}

connectionObj.prototype.cloneConnectionWithNewTo = function(newToPlace) {
    var newConnection = new connectionObj(this.category,this.fromPlace,newToPlace);

    for(var i = 0; i < this.friendsInConnection.length; i++)
    {
        newConnection.addFriend(this.friendsInConnection[i]);
    }
    //should be enough....?
    return newConnection;
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~ end connectionObjection ~~~~~~~~~~~~~~~~~~~~~~~~~

function placeObj(ourJson,placeType) {
    this.type = placeType;
    this.category = placeType;

    //this holds stuff like employer, position, start_date, etc
    this.ourJson = ourJson;

    //this holds stuff like the actual location of this employer for instance
    this.locationJson = null;

    //assign our location jsons, and our id''s
    if(this.type == 'hometown' || this.type == 'current')
    {
        this.locationJson = ourJson; //they are identical
        this.id = ourJson.id;
        this.name = ourJson.name;
    }
    else if(this.type == 'workplace')
    {
        if(this.ourJson && this.ourJson.location) //sometimes employers come with locations
        {
            this.locationJson = this.ourJson.location;
        }
        //our id is the employer id
        this.id = ourJson.employer.id;
        this.name = ourJson.employer.name;
    }
    else if(this.type == 'education')
    {
        if(this.ourJson && this.ourJson.location)
        {
            this.locationJson = this.ourJson.location;
        }
        this.id = ourJson.school.id;
        this.name = ourJson.school.name;
    }
    else
    {
        throw "invalid type " + this.type;
    }

    this.friendsInPlace = [];
    this.ourGps = null;

    globalPlaceDict[this.id] = this;
}

placeObj.prototype.refreshConnectionsWithMyPlace = function() {
    //loop through all connections that have my place
    //and tell them that details are now in!
    
    //loop through the fromPlaces
    if(connectionFromByPlace[this.id])
    {
        var theList = connectionFromByPlace[this.id];
        for(var i = 0; i < theList.length; i++)
        {
            theList[i].buildIfReady();
        }
    }
    if(connectionToByPlace[this.id])
    {
        var theList = connectionToByPlace[this.id];
        for(var j = 0; j < theList.length; j++)
        {
            theList[j].buildIfReady();
        }
    }
}

placeObj.prototype.easyLocationDeetsCb = function(response) {
    //error check
    if(response.error) { console.log("error on cb:"); console.log(response); return;}

    //go just store it basically
    this.locationJson = response;
    //check if theres a location here

    if(response.location)
    {
        this.ourGps = response.location;
        //go refresh these places
        this.refreshConnectionsWithMyPlace();

        //if we are displaying the hometown and this is our hometown, tween to it
        if(currentDisplayCategory == 'hometown' && this == myHometown)
        {
            tweenToHometown();
        }

        return;
    }
    //uh oh, the location deets didnt have a gps, this is weird....
    console.log("Weird, location deets didnt have a gps...");
    console.log("this is the response from fb");
    console.log(response);
    console.log("Stupid " + response.name + " not having GPS coords");
}

function tweenToHometown() {
    bubbleShow("Your hometown - " + myHometown.name);
    if(!myHometown.ourGps)
    {
        topNotify("The Facebook Graph was unable to resolve your hometown GPS - Try again in a bit");
        return;
    }
    tweenToGps(myHometown.ourGps.latitude,myHometown.ourGps.longitude);
}

function tweenToCurrent() {
    bubbleShow("Your current location - " + myCurrent.name);
    if(!myCurrent.ourGps)
    {
        topNotify("The Facebook Graph was unable to resolve your current location GPS - Try again in a bit");
        return;
    }
    tweenToGps(myCurrent.ourGps.latitude,myCurrent.ourGps.longitude);
}

function tweenToWork() {
    var workToTween = null;

    for(var i = 0; i < myWorkplaces.length; i++)
    {
        if(myWorkplaces[i].ourGps)
        {
            workToTween = myWorkplaces[i];
            break;
        }
    }

    if(!workToTween)
    {
        topNotify("The Facebook Graph was unable to resolve any of your workplace GPS coordinates - try again in a bit");
        return;
    }

    bubbleShow("One of your workplaces - " + workToTween.ourJson.employer.name);
    tweenToGps(workToTween.ourGps.latitude,workToTween.ourGps.longitude);
}

function tweenToEducation() {
    var educationToTween = null;

    for(var i = myEducations.length - 1; i > 0; i--)
    {
        if(myEducations[i].ourGps)
        {
            educationToTween = myEducations[i];
            break;
        }
    }

    if(!educationToTween)
    {
        topNotify("The Facebook Graph was unable to resolve any of your education location GPS coordinates - try again in a bit");
        return;
    }

    bubbleShow("One of your Educations - " + educationToTween.ourJson.school.name);
    tweenToGps(educationToTween.ourGps.latitude,educationToTween.ourGps.longitude);
}

function makeEasyLocationDeetsCallback(referenceToObject) {
    var toReturn = function(data) { referenceToObject.easyLocationDeetsCb(data); }
    return toReturn;
}

function makeYqlCallback(referenceToObject) {
    var toReturn = function(data,textStatus,jqXHR) { referenceToObject.yqlCallback(data,textStatus,jqXHR); }
    return toReturn;
}

placeObj.prototype.findGps = function () {
    //basically, if we have a starting locationJson, its easy
    if(this.locationJson)
    {
        //we are guaranteed to have a locaiton id, so go query that
        var ourCallbackClosure = makeEasyLocationDeetsCallback(this);
        //FB.api('/' + this.locationJson.id, function(response) { ourCallbackClosure(response); });
        theBatchSender.addSearchQuery(ourCallbackClosure,'/' + this.locationJson.id);
        return;
    }

    //now its a bit trickier. if we are a workplace, we should query like that
    if(this.type == 'workplace')
    {
        if(this.ourJson.employer.name) //pretty sure all of them have employer names
        {
            var employerName = this.ourJson.employer.name;
            //heuristic...
            employerName += " inc";

            this.makeFbGraphSearchForGps(this.ourJson.employer.name);
        }
    }
    else if(this.type == 'education')
    {
        //now we do the same query, but append the type of educational institution
        if(this.ourJson.school.name)
        {
            var schoolName = this.ourJson.school.name;
            if(this.ourJson.type)
            {
                schoolName = schoolName + " " + this.ourJson.type;
            }
            //now make query
            this.makeFbGraphSearchForGps(schoolName);
        }
    }
    //done with firing off requests for gps locations!
}

placeObj.prototype.lastDitchYql = function () {
    //TODO undo this:
    try {
        if(this.type == 'workplace')
        {
            //its funny, YQL is way better at returning good GPS results for crappy
            //employer names. im just going to go for it, sorry fb graph but
            //your search isnt amazing for stuff like this
            if(this.ourJson.employer.name) //pretty sure all of them have employer names
            {
                this.makeYqlForGps(this.ourJson.employer.name);
            }
        }
        else if(this.type == 'education')
        {
            //now we do the same query, but append the type of educational institution
            if(this.ourJson.school.name)
            {
                var schoolName = this.ourJson.school.name;
                if(this.ourJson.type)
                {
                    schoolName = schoolName + " " + this.ourJson.type;
                }
                //now make query
                this.makeYqlForGps(schoolName);
            }
        }
    } catch(err) {
        console.log("another yql error");
    }
}

function makeFbSearchCallback(referenceToObject) {
    var toReturn = function(data) { referenceToObject.fbGraphSearchCallback(data); }
    return toReturn;
}


placeObj.prototype.makeFbGraphSearchForGps = function(name) {
    var baseQuery = "/search?q=" + escape(name);
    baseQuery += "&type=place";
    var ourCallbackClosure = makeFbSearchCallback(this);

    //FB.api(baseQuery, function(response) { ourCallbackClosure(response); } );
    theBatchSender.addSearchQuery(ourCallbackClosure,baseQuery);

}

placeObj.prototype.fbGraphSearchCallback = function(response) {
    if(response.error)
    {
        console.log('error on fb graph query');
        console.log(response);
        return;
    }
    if(response.data && response.data[0] && response.data[0].location && response.data[0].location.latitude)
    {
        //we have a gps now
        var ourGps = response.data[0].location;
        this.ourGps = ourGps;
        this.refreshConnectionsWithMyPlace();
    }
    else
    {
        //oh no we should probably do the yql thing now
        this.lastDitchYql();
    }
}

placeObj.prototype.makeYqlForGps = function(textForYql) {

    var yqlLink = "http://query.yahooapis.com/v1/public/yql";
    var baseQuery = 'select centroid from geo.places where text = "' + textForYql + '"';

    //make the closure
    var ourClosure = makeYqlCallback(this);
    //now make this query
    $j.post(yqlLink,{'q':baseQuery,'format':'json'},ourClosure,'jsonp');

    /*$j.ajax(yqlLink,{'data':{'q':baseQuery,'format':'json'},'cache':true,'crossDomain':true,'success':function(data,textStatus,jqXHR){
        //go do the yql callback for this object
        ourClosure(data,textStatus,jqXHR);
    }});*/
}

placeObj.prototype.yqlCallback = function(data,textStatus,jqXHR) {
    //RAWRRRrrr
    //console.log("YQL callback");
    //console.log(textStatus);
    //console.log(jqXHR);
    //console.log(data);

    //go see if there are results, and if so, take the first one
    if(data.query && data.query.results && data.query.results.place && data.query.results.place[0])
    {
        //take first
        var ourGps = data.query.results.place[0].centroid; //has latitude and longitude
        this.ourGps = ourGps;
        //go build arcs that use this place!
        this.refreshConnectionsWithMyPlace();
    }
    //if it didnt work, we are out of options pretty much so give up :(
}

/****************************** END CLASSES ***************/

window.fbAsyncInit = function() {
    FB.init({
      appId      : '246595098746259', // App ID
      channelUrl : '//www.petermcottle.com/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true,  // parse XFBML
      oatuh      : true,
    });

    // Additional initialization code here
    //initFacebook();

  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));


function fbLogin() {
    FB.login(function(response)
    {
        if(response.authResponse) {

            console.log(response.authResponse);
            fbLoginResponse = response;

            removeAuthButton();

            launchFbAvalanche();

         } else {
             alert("You denied me");
         }
    },{scope:'user_about_me,friends_hometown,friends_location,friends_education_history,friends_work_history,friends_about_me,user_location,user_work_history,user_hometown,user_education_history'});
}

function removeAuthButton() {
    $j('#authBox').fadeOut();
    $j('#authBox').css('left','-300px');
    $j('#authBox').css('top','-300px');

}

function handleFriendsBack(response) {
    console.log("Friends back");
    console.log(response);

    if(response.friends.paging && response.friends.paging.next)
    {
        var pagingLink = response.friends.paging.next;
        //TODO: do the paging... I'm not sure if this is necessary :O
    }

    //loop through these friends
    var friendList = response.friends.data;

    
    //DO BATCH REQUESTS!!
    while(friendList.length > 0)
    {
        var aListToBatch = friendList.splice(0,50);
        queryBatchFriendList(aListToBatch);
    }

}

function queryBatchFriendList(friendList) {
    var theBatch = [];
    var theFields = '?fields=id,about,work,name,hometown,location,education';

    for(var i = 0; i < friendList.length; i++)
    {
        var theObj = {'method':'GET','relative_url': friendList[i].id + theFields};
        theBatch.push(theObj);
    }
    //now one giant query

    FB.api('/','POST',{'batch':theBatch},function(response) {handleFriendBatchBack(response);});
} 

function handleFriendBatchBack(response) {

    for(var i = 0; i < response.length; i++)
    {
        var theData = response[i];
        if(theData.code == 200)
        {
            //i think we need to make this a json object
            var toHandle = JSON.parse(theData.body);
            handleFriendBack(toHandle);
        }
    }
}

function updateFriendQueryBox(imageLink,friendName) {
    //disabled for now
    return;


    if(boxTimeout)
    {
        clearTimeout(boxTimeout);
    }

    $j('#friendQueryCounterBox').fadeIn();
    //some box that we animate to be flashy when another friend comes back

    //set the inner html of that thing
    $j('#friendQueryCounterNum').html(String(friendsQueried));

    var theId = 'friendNum' + String(friendsQueried);
    if(imageLink)
    {
        var imgString = '<img alt="' + friendName + '" id="' + theId + '" class="profileImage2" src="' + imageLink + '"/>';

        //prepend
        $j('#friendQueryCounterPics').html(imgString + $j('#friendQueryCounterPics').html());
    }
    //no bubble thing anymore
    /*
    $j('#'+ theId).CreateBubblePopup({
            innerHtml:friendName,
            innerHtmlStyle:{'text-align':'center'},
            themeName:'all-black',
            themePath:'jquerybubblepopup-theme'
        });
    */
    boxTimeout = setTimeout("fadeBox()",1500);
}

function fadeBox() {
    $j('#friendQueryCounterBox').fadeOut();
}

function handleFriendBack(response){
    //console.log("Individual friend back");
    //console.log(response);

    //if auth failed for some reason... like mid-session
    //im sure theres a better way to do this
    if(!response.name || response.error)
    {
        return;
    }

    //make the image link
    response.imageLink = "https:\/\/graph.facebook.com\/" + response.id
                            + "\/picture\/";

   
    friendsQueried += 1;
    updateFriendQueryBox(response.imageLink,response.name);
    

    //$j('body').append('<img src="' + response.imageLink + '" style="display:none"/>');

    globalFriendDict[response.id] = response;
    
    //here we start making that stuff 
    if(response.location)
    {
        handleFriendCurrent(response.location,response);
    }
    if(response.hometown)
    {
        handleFriendHometown(response.hometown,response);
    }
    if(response.work && response.work[0])
    {
        for(var i = 0; i < response.work.length; i++)
        {
            handleFriendWorkplace(response.work[i],response);
        }
    }
    if(response.education && response.education[0])
    {
        for(var j = 0; j < response.education.length; j++)
        {
            handleFriendEducation(response.education[j],response);
        }
    }
}

function getExistingOrMakeNew(connectionType,fromPlace,toPlace) {
    //gah this is hard. basically, either get the existing connection thats there
    //or make a new one and return it

    //get all the connections that have this to place

    //first check if they exist, if not, make and return
    if(!connectionToByPlace[toPlace.id])
    {
        return new connectionObj(connectionType,fromPlace,toPlace);
    }
    //ok so they exist, we need to loop through them
    var theList = connectionToByPlace[toPlace.id];
    for(var i = 0; i < theList.length; i++)
    {
        var theC = theList[i];
        //already checked to, just need type and from
        if(theC.category == connectionType && theC.fromPlace == fromPlace)
        {
            return theC;
        }
    }
    //not there, so make a new one 
    return new connectionObj(connectionType,fromPlace,toPlace);

}

function handleFriendCurrent(currentJson,friend) {
    //ok this is kinda like the others. basically, get or make the location
    //and make the connection
    var theirCurrent = getOrMake(currentJson,'current');
    //make the connection for this between the current and the users current
    var theConnection = getExistingOrMakeNew('current',myCurrent,theirCurrent);
    theConnection.addFriend(friend);

    theConnection.buildIfReady();

}

function handleFriendHometown(hometownJson,friend) {
    var theirHometown = getOrMake(hometownJson,'hometown');
    var theConnection = getExistingOrMakeNew('hometown',myHometown,theirHometown);
    theConnection.addFriend(friend);

    theConnection.buildIfReady();
}

function handleFriendWorkplace(workplaceJson,friend) {
    var theirWorkplace = getOrMake(workplaceJson,'workplace');

    //loop through all of my workplaces, adding new connections
    for(var i = 0; i < myWorkplaces.length; i++)
    {
        var theC = getExistingOrMakeNew('workplace',myWorkplaces[i],theirWorkplace);
        theC.addFriend(friend);
        theC.buildIfReady();
    }
}

function handleFriendEducation(educationJson,friend) {
    var theirEducationPlace = getOrMake(educationJson,'education');

    //loop through all of my educations
    for(var i = 0; i < myEducations.length; i++)
    {
        var theC = getExistingOrMakeNew('education',myEducations[i],theirEducationPlace);
        theC.addFriend(friend);
        theC.buildIfReady();
    }
}


function launchFbAvalanche() {

    //remove all the arcs there
    retractArcsOfList(masterArcList);

    //show our buttons
    $j('.fmButtonHolder').css('bottom','60px');

    //short circuit
    if(shouldCircuit)
    {
        return;
    }
    console.log(fbLoginResponse);
    console.log("***********You're logged in!***************");

    //start the "loading"
    startLoadingWithText("Querying the Facebook Graph...");


    //do a query for your friends
    FB.api('/me?fields=friends',handleFriendsBack);
    //get yourself too
    FB.api('/me',handleMeBack);
}

function startLoadingWithText(theText) {
    startLoading();

    topNotify(theText);
}

function stopLoadingWithText() {
    stopLoading();

    topNotifyClear();
}

function topNotify(theText) {
    topNotifyHtml("<h1>" + theText + "</h1>");
}

function topNotifyHtml(theText) {
    //and if someone is clicking fast, get rid of it
    if(notifyTimeout)
    {
        clearTimeout(notifyTimeout);
    }

    //basically, if its already displayed, hide it and come back in 700ms
    if(!$j('#topNotifyBarHolder').hasClass('topNotifyBarHidden'))
    {
        //clear and come back
        topNotifyClear();
        var jsToExecute = "topNotifyHtml('" + theText + "');";
        notifyTimeout = setTimeout(jsToExecute,700);
        console.log(jsToExecute);
        return;
    }

    $j('#topNotifyBar').html("<h1>" + theText + "</h1>");

    $j('#topNotifyBarHolder').removeClass('topNotifyBarHidden');
}

function askForHometown() {
    theHtml = "<h1>A Mysterious Past</h1>";
    theHtml += "<h4>You don\&#39;t seem to have a hometown listed on your Facebook profile. Try adding one and then coming back to the app!</h4>";
    topNotifyHtml(theHtml);
}

function askForCurrent() {
    theHtml = "<h1>Carmen Sandiego</h1>";
    theHtml += "<h4>You don\&#39;t seem to have a current location listed on your Facebook profile. Try adding one and then coming back to the app!</h4>";
    topNotifyHtml(theHtml);
}

function askForWorkplace() {
    theHtml = "<h1>Kramer</h1>";
    theHtml += "<h4>You don\&#39;t seem to have any workplaces listed on your Facebook profile. Try adding one and then coming back to the app!</h4>";
    topNotifyHtml(theHtml);
}

function askForEducation() {
    theHtml = "<h1>Self Schooled</h1>";
    theHtml += "<h4>You don\&#39;t seem to have any past educational institutions listed on your Facebook profile. Try adding one and then coming back!</h4>";
    topNotifyHtml(theHtml);
}

function topNotifyClear() {
    $j('#topNotifyBar').html('');
    $j('#topNotifyBarHolder').addClass('topNotifyBarHidden');
}

function startLoading() {
    isLoading = true;

    var wHeight = $j(window).height();
    var wWidth = $j(window).width();
    $j('.loadingGif').css('left',String(wWidth/2 - 220*0.5) + 'px');
    $j('.loadingGif').css('top',String(wHeight / 2 - 19*0.5) + 'px');
    $j('.loadingGif').fadeIn();
}

function stopLoading() {
    isLoading = false;
    $j('.loadingGif').fadeOut();
}

function getOrMake(placeJson,placeType) {
    var thePlace = null;

    var theId = "ruhrho";

    //the id actually will be different if its an employer or school
    if(placeType == 'current' || placeType == 'hometown')
    {
        theId = placeJson.id;
    }
    else if (placeType == 'workplace')
    {
        theId = placeJson.employer.id;
    }
    else if (placeType == 'education')
    {
        if(!placeJson.school)
        {
            /*console.log("trying to make this education and failed cause");
            console.log(placeJson);
            throw "wtf school wth no school id?";*/
        }
        else
        {
            theId = placeJson.school.id;
        }
    }

    if(!globalPlaceDict[theId])
    {
        //make it
        thePlace = new placeObj(placeJson,placeType);
        thePlace.findGps();
    }
    else
    {  
        thePlace = globalPlaceDict[theId];
    }
    return thePlace;
}

function setMyHometown(hometownJson) {
    myHometown = getOrMake(hometownJson,'hometown');
    //now loop through and set our hometown connections
    for(var i =0; i < hometownConnections.length; i++)
    {
        //set the "from" place
        var theConnection = hometownConnections[i];
        theConnection.setFromPlace(myHometown);
        //now check if we are done
        theConnection.buildIfReady();
    }
}

function setMyCurrent(currentJson) {
    myCurrent = getOrMake(currentJson,'current');
    //loop through and set our locaiton connecitons
    for(var i = 0; i < currentConnections.length; i++)
    {
        //set the from
        var theConnection = currentConnections[i];
        theConnection.setFromPlace(myCurrent);
        theConnection.buildIfReady();
    }
}

function setFirstEducation(educationJson) {
    var myEducation = getOrMake(educationJson,'education');
    myEducations.push(myEducation);

    for(var i = 0; i < educationConnections.length; i++)
    {
        var theC = educationConnections[i];
        theC.setFromPlace(myEducation);
        theC.buildIfReady();
    }
}

function setFirstWorkplace(workplaceJson) {
    var myWorkplace = getOrMake(workplaceJson,'workplace');
    myWorkplaces.push(myWorkplace);
    //loop through and set our workplace connections
    for(var i = 0; i < workplaceConnections.length; i++)
    {
        var theConnection = workplaceConnections[i];
        theConnection.setFromPlace(myWorkplace);
        theConnection.buildIfReady();
    }
}

function setOneOfMyWorkplaces(workplaceJson) {
    //the critical thing here is if you are the first or not
    if(!myWorkplaces.length)
    {
        //set first
        setFirstWorkplace(workplaceJson);
        return;
    }
    //we aren''t the first, so we have to clone a ton here and do all that

    duplicateWorkplaceConnections(workplaceJson);
}

function setOneOfMyEducations(educationJson) {
    if(!myEducations.length)
    {
        setFirstEducation(educationJson);
        return;
    }
    duplicateEducationConnections(educationJson);
}

function duplicateEducationConnections(educationJson) {
    var myEducation = getOrMake(educationJson,'education');
    myEducations.push(myEducation);

    for(key in uniqueEducationConnections)
    {
        var theC = uniqueEducationConnections[key];
        var theNewC = theC.cloneConnectionWithNewFrom(myEducation);
        //build if ready
        theNewC.buildIfReady();
    }
}

function duplicateWorkplaceConnections(workplaceJson) {
    //get the place first
    var myWorkplace = getOrMake(workplaceJson,'workplace');
    //this is a new workplace for me
    myWorkplaces.push(myWorkplace);

    //loop through all the unique workplace connections and duplicate them
    for(key in uniqueWorkplaceConnections)
    {
        var theC = uniqueWorkplaceConnections[key];
        var theNewC = theC.cloneConnectionWithNewFrom(myWorkplace);
        //build if its ready
        theNewC.buildIfReady();
    }
}

function handleMeBack(response){
    console.log("me back");
    console.log(response);
    meObject = response;

    if(response.hometown)
    {
        setMyHometown(response.hometown);
    }
    else
    {
        if(currentDisplayCategory == 'hometown')
        {
            askForHometown();
        }
    }
    if(response.location)
    {
        setMyCurrent(response.location);
    }
    else
    {
        if(currentDisplayCategory == 'current')
        {
            askForCurrent();
        }
    }

    if(response.work && response.work[0])
    {
        setFirstWorkplace(response.work[0]);
        for(var i = 1; i < response.work.length; i++)
        {
            var thisWork = response.work[i];
            duplicateWorkplaceConnections(thisWork);
        }
    }
    else
    {
        if(currentDisplayCategory == 'workplace')
        {
            askForWorkplace();
        }
    }
    if(response.education && response.education[0])
    {
        setFirstEducation(response.education[0]);
        for(var j = 1; j < response.education.length; j++)
        {
            var thisEducation = response.education[j];
            duplicateEducationConnections(thisEducation);
        }
    }
    else
    {
        if(currentDisplayCategory == 'education')
        {
            askForEducation();
        }
    }
}


function askForAuth() {
    //add that button thing
    $j('body').append('<div id="authBox"style="position:absolute;top:-300px;left:-300px;width:390px;height:66px;" class="bubbleToStop smooth"><div style="color:black;cursor:pointer"onclick="javascript:fbLogin()" class="fbLoginButton"></div></div>');
    var wHeight = $j(window).height();
    var wWidth = $j(window).width();
    $j('#authBox').css('left',String(wWidth/2 - 390*0.5) + 'px');
    $j('#authBox').css('top',String(wHeight / 2 - 66*0.5) + 'px');
}

function initFacebook(){
    //async check for logged in status
    FB.getLoginStatus(function(response) {
        if(response.status == 'connected')
        {
            //we are good to go, store this and go!
            fbLoginResponse = response;
            //get rid of the rubber band balls
            launchFbAvalanche();
        }
        else if (response.status == 'not_authorized')
        {
            //ask them to authenticate
            askForAuth();
        }
        else
        {
            //not even logged in
            askForAuth();
        }
    });
}

</script>

    <canvas id="earth-canvas" style="border: none;" width="500px" height="500px"></canvas>

<div class="fmButtonHolder bubbleToStop smooth" style="position:relative;bottom:-300px">
    <div id="hometown" class="fmButton buttonGradient depressed"> Hometown </div>
    <div id="current" class="fmButton buttonGradient popped"> Current </div>
    <div id="education" class="fmButton buttonGradient popped"> Education </div>
    <div id="workplace" class="fmButton buttonGradient popped"> Workplace </div>
</div>
<div class="popupAnchor">
</div>
<img src="loading.gif"class="loadingGif"/>

<div class="friendQueryHolder bubbleToStop">
    <div id="friendQueryCounterBox" class="friendQueryCounter">
        <p>Friends Queried:</p>
        <p id="friendQueryCounterNum">0</p>
        <div id="friendQueryCounterPics">
        </div>
    
    </div>
</div>

<div id="topNotifyBarWrapper" style="width:100%;text-align:center;position:absolute;top:0px;">
    <div id="topNotifyBarHolder" class="buttonGradient smooth topNotifyBar topNotifyBarHidden bubbleToStop" onclick="topNotifyClear()" style="display:inline-block;cursor:pointer">
        <div id="topNotifyBar">

        </div>
    </div>
</div>

</body>

</html>