﻿// Declares the class that will be contained in the given div and all the variables
// associated to it
function PivotViewer(container, pivot, oneClick) {
    this.CurrentPos = 0;                // Current location being displayed
    this.AnchorPos = 0;                 // The photo a drag and drop began on
    this.AnchorX = 0;                   // The x location a drag and drop began on
    this.AnchorY = 0;                   // The y location a drag began on
    this.MouseIsDown = false;           // Whether a drag and drop is occuring
    this.container = container;         // The container this object is contained in
    this.pivot = pivot;                 // Whether this viewer pivots with given yaw values
    this.sensitivity = 1;               // The sensitivity of the stepping algorithm
    this.OneClick = oneClick;

    // Link the object to the div that contains it
    document.getElementById(container).object = this;
    document.getElementById(container).style.backgroundColor = "#111111";

    // interate through each photo to find which one is the bestphoto and save that as the 
    // current photo
    for (var i = 0; i < stepTracker.Steps[1].Photos.length; i++) {
        if (stepTracker.Steps[0].Id == stepTracker.Steps[1].Photos[i].ID) {
            if (stepTracker.Steps[1].Pivot)
                stepTracker.Steps[1].PivotActiveImage = i;
            else
                stepTracker.Steps[1].DriveByActiveImage = i;
        }
    }

    // Load the event handlers for drag and drop movement down the street
    document.getElementById(container).onmousemove = MouseMove;
    document.getElementById(container).onmousedown = MouseDown;
    document.getElementById(container).onmouseup = MouseUp;

    var center = stepTracker.Steps[1].PivotActiveImage;
    if (!stepTracker.Steps[1].Pivot)
        center = stepTracker.Steps[1].DriveByActiveImage;

    // Preloads all the photos to prevent tearing when switching between them
    for (var i = 0; i < stepTracker.Steps[1].Photos.length; i++) {
        var yaw = 0;

        // The location of the image, alternates which server to query
        if (center + i < stepTracker.Steps[1].Photos.length) {

            stepTracker.Steps[1].Photos[center + i].yaw = Math.round(stepTracker.Steps[1].Photos[center + i].yaw * 10) / 10;

            if (pivot)
                yaw = stepTracker.Steps[1].Photos[center + i].yaw;

            stepTracker.Steps[1].Photos[center + i].pitch = Math.round(stepTracker.Steps[0].POV.pitch * 10) / 10;
            stepTracker.Steps[1].Photos[center + i].fov = Math.round(stepTracker.Steps[0].POV.vfov);

            stepTracker.Steps[1].Photos[center + i].img = new Image();
            stepTracker.Steps[1].Photos[center + i].img.src = "http://ssi00" + stepTracker.Steps[1].Photos[center + i].ServerId + ".ilookabout.com/?ID=" + stepTracker.Steps[1].Photos[center + i].ID + "&w=" + document.getElementById(container).style.pixelWidth + "&h=" + document.getElementById(container).style.pixelHeight + "&y=" + yaw + "&f=" + Math.round(stepTracker.Steps[0].POV.vfov) + "&p=" + Math.round(stepTracker.Steps[0].POV.pitch * 10) / 10 + "&1cf=" + this.OneClick;
        }
        if ((center - i >= 0) && (i != 0)) {

            stepTracker.Steps[1].Photos[center - i].yaw = Math.round(stepTracker.Steps[1].Photos[center - i].yaw * 10) / 10;

            if (pivot)
                yaw = stepTracker.Steps[1].Photos[center - i].yaw;

            stepTracker.Steps[1].Photos[center - i].pitch = Math.round(stepTracker.Steps[0].POV.pitch * 10) / 10;
            stepTracker.Steps[1].Photos[center - i].fov = Math.round(stepTracker.Steps[0].POV.vfov);

            stepTracker.Steps[1].Photos[center - i].img = new Image();
            stepTracker.Steps[1].Photos[center - i].img.src = "http://ssi00" + stepTracker.Steps[1].Photos[center - i].ServerId + ".ilookabout.com/?ID=" + stepTracker.Steps[1].Photos[center - i].ID + "&w=" + document.getElementById(container).style.pixelWidth + "&h=" + document.getElementById(container).style.pixelHeight + "&y=" + yaw + "&f=" + Math.round(stepTracker.Steps[0].POV.vfov) + "&p=" + Math.round(stepTracker.Steps[0].POV.pitch * 10) / 10 + "&1cf=" + this.OneClick;
        }
    }

    if (stepTracker.Steps[1].Pivot) {
        stepTracker.Steps[1].PivotStart = 0;
        stepTracker.Steps[1].PivotEnd = stepTracker.Steps[1].Photos.length - 1;
    }
    else {
        stepTracker.Steps[1].DriveByStart = 0;
        stepTracker.Steps[1].DriveByEnd = stepTracker.Steps[1].Photos.length - 1;
    }
    // Sets the current photo
    document.getElementById(container).style.backgroundImage = "url(" + stepTracker.Steps[1].Photos[center].img.src + ")";
    if (stepTracker.Step == 1)
        document.getElementById(container).style.display = "";
}

// Starts the drag down the street
function MouseDown(event) {
    // Loads the event for all browsers
    if (!event) event = window.event;

    // Sets the mouse to focus on this div (even if leaving its boundaries) and cursor
    document.getElementById(this.object.container).setCapture();
    document.getElementById(this.object.container).style.cursor = "e-resize";

    // Begin dragging the mouse
    this.object.MouseIsDown = true;
    this.object.AnchorX = event.screenX;
    this.object.AnchorY = event.screenY;
    if (stepTracker.Steps[1].Pivot)
        this.object.AnchorPos = stepTracker.Steps[1].PivotActiveImage;
    else
        this.object.AnchorPos = stepTracker.Steps[1].DriveByActiveImage;
        
    // Ensure the browser does not attempt any default behaviour
    return false;
}

// Updates the location on the street
function MouseMove(event) {

    // If we're currently dragging the mouse
    if (this.object.MouseIsDown) {
        // Load the event for all browsers
        if (!event) event = window.event;

        // Find how much the mouse has moved
        var dx = event.screenX - this.object.AnchorX;
        var dy = event.screenY - this.object.AnchorY;

        // Find how many steps have been taken from the position we started dragging at
        if (stepTracker.Steps[1].pivot)
            var delta = (this.clientWidth / this.object.sensitivity) / (stepTracker.Steps[1].PivotStart - stepTracker.Steps[1].PivotEnd);
        else
            var delta = (this.clientWidth / this.object.sensitivity) / (stepTracker.Steps[1].DriveByStart - stepTracker.Steps[1].DriveByEnd);
            
        var nSteps = Math.round(dx / delta);
        var NewPos = this.object.AnchorPos + nSteps;


        if (stepTracker.Steps[1].Pivot) {
            // Make sure the new position exists inside the list of photos
            if (NewPos < stepTracker.Steps[1].PivotStart) NewPos = stepTracker.Steps[1].PivotStart;
            if (NewPos > stepTracker.Steps[1].PivotEnd) NewPos = stepTracker.Steps[1].PivotEnd;

            // If this position is new update the displayed image
            if (NewPos != stepTracker.Steps[1].PivotActiveImage) {
                stepTracker.Steps[1].PivotActiveImage = NewPos;
                modifyimage(this.object.container, stepTracker.Steps[1].PivotActiveImage);
                LoadSlider();
            }
        }
        else {
            // Make sure the new position exists inside the list of photos
            if (NewPos < stepTracker.Steps[1].DriveByStart) NewPos = stepTracker.Steps[1].DriveByStart;
            if (NewPos > stepTracker.Steps[1].DriveByEnd) NewPos = stepTracker.Steps[1].DriveByEnd;

            // If this position is new update the displayed image
            if (NewPos != stepTracker.Steps[1].DriveByActiveImage) {
                stepTracker.Steps[1].DriveByActiveImage = NewPos;
                modifyimage(this.object.container, stepTracker.Steps[1].DriveByActiveImage);
                LoadSlider();
            }
        }
    }
}

// Stops the drag down the street
function MouseUp(event) {
    // Ensure that all browsers have access to the event
    if (!event) event = window.event;

    // Make the container no longer have control of mouse events and return the cursor
    document.getElementById(this.object.container).releaseCapture()
    document.getElementById(this.object.container).style.cursor = "default";
    // the object is no longer being dragged
    this.object.MouseIsDown = false;
    updatePins();
}

// Loads the current picture into the background of the given div
function modifyimage(loadarea, imgindex, type) {
    if (document.getElementById(loadarea)) {
        var imgobj = document.getElementById(loadarea)
        imgobj.style.backgroundImage = "url(" + stepTracker.Steps[1].Photos[imgindex].img.src + ")";
        return false;
    }
}
