var canvas;
var gl;

var numVertices  = 24;

var pointsBox = [];

var movement = false;     // Do we rotate?
var spinX = 0;
var spinY = 0;
var origX;
var origY;
var x1 = -0.1;
var x2 = -1.0;
var x3 = -1.0;

var zView = 2.0;


var matrixLoc;
var colorLoc;

var yRot;
var zRot;

var mv;
var mv1 = mat4();
var mv2 = mat4();
var mv3 = mat4();

var intervalBreyta = 0.0;



window.onload = function init()
{
    canvas = document.getElementById( "gl-canvas" );

    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    var hitdetBox = [
        vec3(false, false, false),
    ]

    var verticesBox = [ // Hnit horna í kassanum
        vec3( -3.0, -10.0,  3.0 ),
        vec3( -3.0,  10.0,  3.0 ),
        vec3( -3.0, -10.0,  3.0 ),
        vec3( -3.0, -10.0, -3.0 ),
        vec3( -3.0, -10.0,  3.0 ),
        vec3(  3.0, -10.0,  3.0 ),

        vec3(  3.0,  10.0,  3.0 ),
        vec3( -3.0,  10.0,  3.0 ),
        vec3(  3.0,  10.0,  3.0 ),
        vec3(  3.0, -10.0,  3.0 ),
        vec3(  3.0,  10.0,  3.0 ),
        vec3(  3.0,  10.0, -3.0 ),

        vec3(  3.0,  10.0, -3.0 ),
        vec3( -3.0,  10.0, -3.0 ),
        vec3(  3.0,  10.0, -3.0 ),
        vec3(  3.0, -10.0, -3.0 ),
        vec3( -3.0,  10.0, -3.0 ),
        vec3( -3.0,  10.0,  3.0 ),

        vec3( -3.0,  10.0, -3.0 ),
        vec3( -3.0, -10.0, -3.0 ),
        vec3(  3.0, -10.0, -3.0 ),
        vec3( -3.0, -10.0, -3.0 ),
        vec3(  3.0, -10.0, -3.0 ),
        vec3(  3.0, -10.0,  3.0 )
///////////////////////////////////////////////


        /*vec3(  -1.0, -1.0,  0.0 ),
        vec3(  -1.0,  0.0,  0.0 ),
        vec3(  0.0,  0.0,  0.0 ),
        vec3(  0.0, -1.0,  0.0 ),
        vec3(  -1.0, -1.0, -1.0 ),
        vec3(  0.0,  0.0, -1.0 ),
        vec3(  0.0,  0.0, -1.0 ),
        vec3(  0.0, -1.0, -1.0 )*/
    /*
        vec3( -1.0, -1.0,  1.0 ), 0
        vec3( -1.0,  1.0,  1.0 ), 1
        vec3(  1.0,  1.0,  1.0 ), 2
        vec3(  1.0, -1.0,  1.0 ), 3
        vec3( -1.0, -1.0, -1.0 ), 4
        vec3( -1.0,  1.0, -1.0 ), 5
        vec3(  1.0,  1.0, -1.0 ), 6
        vec3(  1.0, -1.0, -1.0 )  7
    */
    ];

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 0.9, 1.0, 1.0, 1.0 );

    gl.enable(gl.DEPTH_TEST);

    //
    //  Load shaders and initialize attribute buffers
    //
    var program = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram( program );

    var vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(verticesBox), gl.STATIC_DRAW );

    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    matrixLoc = gl.getUniformLocation( program, "rotation" );
    colorLoc = gl.getUniformLocation( program, "fColor" );

    //event listeners for mouse
    canvas.addEventListener("mousedown", function(e){
        movement = true;
        origX = e.offsetX;
        origY = e.offsetY;
        e.preventDefault();         // Disable drag and drop
    } );

    canvas.addEventListener("mouseup", function(e){
        movement = false;
    } );

    canvas.addEventListener("mousemove", function(e){
        if(movement) {
    	    spinY = ( spinY + (e.offsetX - origX) ) % 360;
            spinX = ( spinX + (e.offsetY - origY) ) % 360;
            origX = e.offsetX;
            origY = e.offsetY;
        }
    } );

    // Atburðafall fyrir músarhjól
    window.addEventListener("mousewheel", function(e){
        if( e.wheelDelta > 0.0 ) {
            zView *= 1.1;
        } else {
            zView *= 0.9;
        }
    }  );

    render();

}


function hreyfa(placeholder) {
    placeholder = mult( placeholder, translate(0.0, x1, 0.0));
    gl.uniformMatrix4fv(matrixLoc, false, flatten(placeholder));
    gl.drawArrays( gl.LINES, 0, numVertices );
    console.log(x1);
    x1 = x1 - 0.1;
}

/*function hreyfa2() {


    mv2 = mult( mv2, translate (0.0, x2, 0.0));
    gl.uniformMatrix4fv(matrixLoc, false, flatten(mv2));
    gl.drawArrays( gl.LINES, 0, numVertices );
    console.log(x2);
    x2 = x2 - 1.0;
}


function hreyfa3() {


    mv3 = mult( mv3, translate (0.0, x3, 0.0));
    gl.uniformMatrix4fv(matrixLoc, false, flatten(mv3));
    gl.drawArrays( gl.LINES, 0, numVertices );
    console.log(x3);
    x3 = x3 - 1.0;
}*/




function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    mv = mat4();
    mv = mult( mv, rotateX(spinX) );
    mv = mult( mv, rotateY(spinY) );
    mv = mult( mv, scalem(zView, zView, zView));
    gl.uniform4fv( colorLoc, vec4(0.0, 0.0, 0.0, 1.0) );
    gl.uniformMatrix4fv(matrixLoc, false, flatten(mv));
    gl.drawArrays( gl.LINES, 0, numVertices );
    //var mv1 = mat4();

    mv1 = mult( mv, translate(2.5, 9.5, 2.5));
    mv1 = mult( mv1, scalem( 0.166, 0.05, 0.166));
   // gl.uniformMatrix4fv(matrixLoc, false, flatten(mv1));
   // gl.drawArrays( gl.LINES, 0, numVertices );

    hreyfa(mv1);



    //var mv2 = mat4();

    mv2 = mult( mv, translate(2.5, 8.5, 2.5));
    mv2 = mult( mv2, scalem( 0.166, 0.05, 0.166));
   // gl.uniformMatrix4fv(matrixLoc, false, flatten(mv2));
   // gl.drawArrays( gl.LINES, 0, numVertices );

    //var mv3 = mat4();

    hreyfa(mv2);


    mv3 = mult( mv, translate(2.5, 7.5, 2.5));
    mv3 = mult( mv3, scalem( 0.166, 0.05, 0.166));
  //  gl.uniformMatrix4fv(matrixLoc, false, flatten(mv3));
  //  gl.drawArrays( gl.LINES, 0, numVertices );

    hreyfa(mv3);
    requestAnimFrame( render );

}