'use strict';
var stage, viewLeft, viewRight, leftLayer, rightLayer, isVrDisplay = false, isSnipperCreated = false, retUrl = '';
var isIndoorShifted = false, isTourShifted = true, origGuid = '', shiftedGuid = '', shiftedTourId = '';
var counter;
function openVRWindow() {
    try {
        if (window.self != window.top && mql.matches == true) {
            window.open(VRredirectURL);
        }
        else {
            displayVrView();
        }
    } catch (e) {
        return false;
    }
}
function displayVrView() {
    hideInfoWindow();
    destrotAllObjects();
    $('#pano').html('');
    $('#VRTogglesTour2').hide();
    $('#info').hide();
    $('#infoMap').hide();
    $('#social-media').hide();
    $('.button_toggle').hide();
    $('#fullscreenTogglesTour2').hide();
    $('#imgDrone').hide();
    $('.bx-wrapper').hide();
    $('#HideVRTogglesTour2').show();
    // Create viewer. WebGL support is required to set the projection center.
    var viewerOpts = { stageType: 'webgl' };
    if (viewer != undefined) {
        try { viewer.destroy(); } catch (e) { }
    }
    viewer = new Marzipano.Viewer(document.getElementById('pano'), viewerOpts);
    // Register the custom control method.
    var deviceOrientationControlMethod = new DeviceOrientationControlMethod();
    var controls = viewer.controls();
    controls.registerMethod('deviceOrientation', deviceOrientationControlMethod);
    //var initialViewer = {
    //    yaw: startYaw,
    //    pitch: startPitch,
    //    fov: startFov
    //};
    // Create left and right layers

    if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hasSingleImage == true) {
        geometry = new Marzipano.EquirectGeometry([{ width: 256 }, { width: 4000 }]);
    }
    else {
        geometry = new Marzipano.CubeGeometry([{ tileSize: 256, size: 256, fallbackOnly: true }, { size: 1024, tileSize: 1024 }]);
    }

    //var geometry = new Marzipano.CubeGeometry([
    //  { tileSize: 256, size: 256, fallbackOnly: true },
    //  { tileSize: 512, size: 512 },
    //  { tileSize: 1024, size: 1024 }
    //]);

    // Create views.
    //var viewLimiter = Marzipano.RectilinearView.limit.traditional(3100, 100 * Math.PI / 180);
    //var viewLimiter = Marzipano.util.compose
    //(
    //    Marzipano.RectilinearView.limit.vfov($('#hdn_minFov').val(), toureSkinType == 2 ? 2.5 : $('#hdn_maxFov').val()),
    //    Marzipano.RectilinearView.limit.hfov($('#hdn_minFov').val(), toureSkinType == 2 ? 2.5 : $('#hdn_maxFov').val()),
    //    Marzipano.RectilinearView.limit.pitch(-Math.PI / 2, Math.PI / 2)
    //);
    viewLeft = new Marzipano.RectilinearView(initialView, limiter);
    viewRight = new Marzipano.RectilinearView(initialView, limiter);

    // Get the stage.
    stage = viewer.stage();

    // Create layers.
    leftLayer = createLayer(stage, viewLeft, geometry, 'left',
     { relativeWidth: 0.5, relativeX: 0 });
    rightLayer = createLayer(stage, viewRight, geometry, 'right',
     { relativeWidth: 0.5, relativeX: 0.5 });

    // Add layers to stage.
    stage.addLayer(leftLayer);
    stage.addLayer(rightLayer);

    function createLayer(stage, view, geometry, eye, rect) {
        var urlPrefix = $('#hdmarzipanoimgUrl').val(); //"https://d1huqkrctuvieh.cloudfront.net/panoramas/panoimages/f786ed15-3026-49d4-a2e9-859b4524747b/ecb0a842-9e97-4dda-b02e-ba586b394320_{f}.jpg";
        var source = new Marzipano.ImageUrlSource.fromString(
          urlPrefix//,
          //{ cubeMapPreviewUrl: urlPrefix + "/" + eye + "/preview.jpg" }
        );

        var textureStore = new Marzipano.TextureStore(geometry, source, stage);
        var layer = new Marzipano.Layer(stage, source, geometry, view, textureStore,
                                        { effects: { rect: rect } });

        layer.pinFirstLevel();

        return layer;
    }
    view = viewLeft;
    loadDetail(leftLayer, false);
    view = viewRight;
    loadDetail(rightLayer, false);



    var enabled = false;
    //var toggleElement = document.getElementById('toggleDeviceOrientation');
    //function enable() {
    if (mql.matches) {
        deviceOrientationControlMethod.getPitch(function (err, pitch) {
            if (!err) {
                viewLeft.setPitch(pitch);
                viewRight.setPitch(pitch);
            }
        });
    }
    controls.enableMethod('deviceOrientation');
    enabled = true;
    //toggleElement.className = 'enabled';
    //}
    //function disable() {
    //    controls.disableMethod('deviceOrientation');
    //    enabled = false;
    //    toggleElement.className = '';
    //}
    //function toggle() {
    //    if (enabled) {
    //        disable();
    //    } else {
    //        enable();
    //    }
    //}
    //toggleElement.addEventListener('click', toggle);
    if (isVrDisplay == false) {
        if (mql.matches == false) {
            toggleFullscreen();
        }
    }
    isVrDisplay = true;
    $("#viewIn").css('visibility', 'hidden');
    $("#viewOut").css('visibility', 'hidden');
    if (viewer != null) {
        viewer.addEventListener('viewChange', function () {
        });
    }
    //========= Add timer ==============
    counter = setInterval(timer, 100); //1000 will  run it every 1 second

}

var vrsniperHotspotnewLeft, vrsniperHotspotnewRight, vrsniperHotspotnewLeftProgress, vrsniperHotspotnewRightProgress;
function addVRSnipper() {
    var parent = $('#pano');
    if (vrsniperHotspotnewLeft == undefined) {
        vrsniperHotspotnewLeft = document.createElement('img');
        vrsniperHotspotnewLeft.src = 'images/sniperVr.png';
        vrsniperHotspotnewLeft.setAttribute('id', "sniperHotspotnewLeft");
        $('#pano').append(vrsniperHotspotnewLeft);

        vrsniperHotspotnewLeftProgress = document.createElement('div');
        //vrsniperHotspotnewLeftProgress.src = 'images/ring.gif';
        vrsniperHotspotnewLeftProgress.setAttribute('id', "sniperHotspotnewLeftProgress");
        $('#pano').append(vrsniperHotspotnewLeftProgress);

        window.setTimeout(function () {
            var hs = 'position:absolute;';
            hs += 'transform-origin: 50% 50%;';
            hs += 'visibility: inherit;';
            if (parent) {
                var w = parent.width();
                hs += 'left:' + ((w / 4) - ($('#sniperHotspotnewLeft').outerWidth() / 2)) + 'px;';
                var h = parent.height();
                hs += 'top:' + (((h / 2)) - ($('#sniperHotspotnewLeft').outerHeight() / 2)) + 'px;';
                vrsniperHotspotnewLeft.setAttribute('style', hs);

                var hsSniper = 'position:absolute;';
                hsSniper += 'transform-origin: 50% 50%;';
                hsSniper += 'visibility: inherit;';
                hsSniper += 'left:' + ($('#sniperHotspotnewLeft').position().left - (($('#sniperHotspotnewLeftProgress').width() / 2) - ($('#sniperHotspotnewLeft').width() / 2)) - 3) + 'px;';
                hsSniper += 'top:' + ($('#sniperHotspotnewLeft').position().top - (($('#sniperHotspotnewLeftProgress').height() / 2) - ($('#sniperHotspotnewLeft').height() / 2)) - 3) + 'px;';
                hsSniper += "display:none;";
                vrsniperHotspotnewLeftProgress.setAttribute('style', hsSniper);
            }
        }, 100);
    }
    if (vrsniperHotspotnewRight == undefined) {
        vrsniperHotspotnewRight = document.createElement('img');
        vrsniperHotspotnewRight.src = 'images/sniperVr.png';
        vrsniperHotspotnewRight.setAttribute('id', "sniperHotspotnewRight");
        $('#pano').append(vrsniperHotspotnewRight);

        vrsniperHotspotnewRightProgress = document.createElement('div');
        //vrsniperHotspotnewRightProgress.src = 'images/ring.gif';
        vrsniperHotspotnewRightProgress.setAttribute('id', "sniperHotspotnewRightProgress");
        $('#pano').append(vrsniperHotspotnewRightProgress);
        window.setTimeout(function () {
            var hsRight = 'position:absolute;';
            hsRight += 'transform-origin: 50% 50%;';
            hsRight += 'visibility: inherit;';
            if (parent) {
                var w = parent.width();
                hsRight += 'left:' + (((w / 2) + (w / 4)) - ($('#sniperHotspotnewRight').outerWidth() / 2)) + 'px;';
                var h = parent.height();
                hsRight += 'top:' + (((h / 2)) - ($('#sniperHotspotnewRight').outerHeight() / 2)) + 'px;';
                vrsniperHotspotnewRight.setAttribute('style', hsRight);
                //hsRight += "display:none;";
                //vrsniperHotspotnewRightProgress.setAttribute('style', hsRight);


                var hsSniperRight = 'position:absolute;';
                hsSniperRight += 'transform-origin: 50% 50%;';
                hsSniperRight += 'visibility: inherit;';
                hsSniperRight += 'left:' + ($('#sniperHotspotnewRight').position().left - (($('#sniperHotspotnewRightProgress').width() / 2) - ($('#sniperHotspotnewRight').width() / 2)) - 4) + 'px;';
                hsSniperRight += 'top:' + ($('#sniperHotspotnewRight').position().top - (($('#sniperHotspotnewRightProgress').height() / 2) - ($('#sniperHotspotnewRight').height() / 2)) - 3) + 'px;';
                hsSniperRight += "display:none;";
                vrsniperHotspotnewRightProgress.setAttribute('style', hsSniperRight);
            }
        }, 100);
    }
    isSnipperCreated = true;
}
function isPointInCircle(centerPoint, pointB, title) {
    if (centerPoint != null && pointB != null) {
        var radius = 31;
        var d = Math.sqrt(Math.pow(((pointB.x) - (centerPoint.x)), 2) + Math.pow(((pointB.y) - (centerPoint.y)), 2));
        if (d <= radius) { return true; }
        else { return false; }
    }
    else { return false; }
}
var panoramacounter, firedPanoGuid, isTimerFired = false;
function timer() {
    if (isVrDisplay == true) {
        if (jsonHotSpot.length > 0) {
            if (isSnipperCreated == false) {
                addVRSnipper();
            }
            //addVRSnipper(viewRight);
            var isInmyRange = false;
            $.each(jsonHotSpot, function (ind, dat) {
                if (((dat.hotspoturl != '' && (dat.hotspoturl.toLowerCase().indexOf('stage.videoburst.com/shorturl') > -1 || dat.hotspoturl.toLowerCase().indexOf('fastout.com/p') > -1 || dat.hotspoturl.toLowerCase().indexOf('videoburst.com/v') > -1)) || (dat.marzipanoHotspot.destinationpanoguid != null)) && dat.hotspotpan != "" && dat.hotspotpan != undefined && dat.hotspotpan != null) {
                    var positionPointA = {
                        yaw: (dat.hotspotpan * (22 / 7)) / 180,
                        pitch: (dat.hotspottilt * (22 / 7)) / 180,
                        fov: view.fov()
                    };
                    var corPointA = viewLeft.coordinatesToScreen(positionPointA);
                    var SnipperLeftPos = { x: $('#sniperHotspotnewLeft').offset().left + 16, y: $('#sniperHotspotnewLeft').offset().top + 16 };
                    if (isPointInCircle(SnipperLeftPos, corPointA, dat.hotspotname) == true) {
                        isInmyRange = true;
                        //========= Add timer ==============
                        if (firedPanoGuid == undefined && isTimerFired == false) {
                            var tourId = $("#hdTourid").val();
                            if (dat.marzipanoHotspot.destinationpanoguid == null && dat.marzipanoHotspot.destinationpanoguid == undefined) {
                                var longUrl = getLongUrl(dat.hotspoturl);
                                if (longUrl != '') {
                                    firedPanoGuid = getTourUrlpanoguid(longUrl, 'panoguid');
                                    tourId = getTourUrlpanoguid(longUrl, 'tourid')
                                    shiftedGuid = firedPanoGuid;
                                    shiftedTourId = tourId;
                                    if (window.location.href.toLowerCase().indexOf("dynamicdroneview.aspx") > -1) {
                                        isTourShifted = false;
                                        origGuid = returnQueryString("panoguid");
                                        $('#hdTourid').val(origGuid);
                                    }
                                    isIndoorShifted = true;
                                }
                            } else {
                                firedPanoGuid = dat.marzipanoHotspot.destinationpanoguid;
                                if (isIndoorShifted == true) {
                                    shiftedGuid = firedPanoGuid;
                                    shiftedTourId = tourId;
                                }
                            }
                            if (retUrl == '') {
                                retUrl = location.href;
                            }
                            $('#sniperHotspotnewLeftProgress').show();
                            $('#sniperHotspotnewRightProgress').show();
                            panoramacounter = setInterval(function () {
                                //if (dat.marzipanoHotspot.destinationpanoguid != undefined && dat.marzipanoHotspot.destinationpanoguid != null) {
                                if (firedPanoGuid != undefined) {
                                    isTimerFired = true;
                                    showVRPanoDetail(firedPanoGuid, tourId);
                                    clearInterval(panoramacounter);
                                    //}
                                }
                                else {
                                    clearInterval(panoramacounter);
                                }
                            }, 3000); //1000 will  run it every 1 second
                        }
                    }
                }
            })
            if (isInmyRange == false) {
                firedPanoGuid = undefined;
                $('#sniperHotspotnewLeftProgress').hide();
                $('#sniperHotspotnewRightProgress').hide();
            }
        }
    }
    else {
        clearInterval(timer);
    }
}
function showVRPanoDetail(destinationpanoguid, tourId) {

    if (destinationpanoguid != firedPanoGuid) {
        //if (panoramacounter != undefined) {
        clearInterval(panoramacounter);
        panoramacounter = undefined;
        console.log("counter end");
        firedPanoGuid = undefined;
        //}
    }
    else {
        if (panoramacounter != undefined) {
            clearInterval(panoramacounter);
            panoramacounter = undefined;
        }
        $('#sniperHotspotnewLeftProgress').hide();
        if (tourId != undefined && tourId != null && tourId != 0) { $("#hdTourid").val(tourId); }
        //if (isPanoView == false) {
        //    getPanoramaDetail(destinationpanoguid);
        //} else {
        getPanoramaDetail(destinationpanoguid, tourId);

        //}
        displayVrView();
        firedPanoGuid = undefined;
        vrsniperHotspotnewLeft = undefined;
        vrsniperHotspotnewRight = undefined;
        vrsniperHotspotnewLeftProgress = undefined;
        vrsniperHotspotnewRightProgress = undefined;
    }
    isTimerFired = false;
}
function displayNormalView() {
    var isVrDisplayQrString = returnQueryString("isVrDisplay");
    if (isVrDisplayQrString != undefined && isVrDisplayQrString != '') {
        window.close();
        return;
    }
    if (isIndoorShifted == true) {
        if (retUrl != '') {
            if (mql.matches == false) {
                toggleFullscreen();
            }
            window.location.href = retUrl;
        }
        //if (isTourShifted == true) {
        //    window.location.href = "PreviewTour.aspx?panoguid=" + shiftedGuid + "&tourid=" + shiftedTourId + "";
        //}
        //else {
        //    window.location.href = "DynamicDroneView.aspx?panoguid=" + origGuid + "";
        //}
        return;
    }
    destrotAllObjects();
    removeVrSnipper();
    $('#pano').html('');
    if (counter != undefined) {
        clearInterval(counter);
    }
    firedPanoGuid = undefined;
    vrsniperHotspotnewLeft = undefined;
    vrsniperHotspotnewRight = undefined;
    $('#sniperHotspotnewLeft').remove();
    $('#sniperHotspotnewLeftProgress').remove();
    $('#sniperHotspotnewRight').remove();
    $('#sniperHotspotnewRightProgress').remove();
    $('#VRTogglesTour2').show();
    $('#info').show();
    if (isMapAllowed == true) {
        $('#infoMap').show();
    }
    $('#social-media').show();
    $('.button_toggle').show();
    $('#imgDrone').show();
    if (mql.matches == false) {
        $('#fullscreenTogglesTour2').show();
    }
    else {
        $('#fullscreenTogglesTour2').hide();
    }
    //$('.bx-wrapper').show();
    ////alert(activeSlideIndex)
    //bxSlider.goToSlide(activeSlideIndex);
    //bxSlider.reloadSlider();
    if (window.location.href.toLowerCase().indexOf("tour.aspx") > -1) {
        if (viewtype == 1) {
            $('.bx-wrapper').show();
            //alert(activeSlideIndex)
            bxSlider.goToSlide(activeSlideIndex);
            bxSlider.reloadSlider();
        }

    }
    if (viewtype == 1 || mql.matches == true) {
        $("#viewIn").css('visibility', 'hidden');
        $("#viewOut").css('visibility', 'hidden');
    }
    else {
        $("#viewIn").css('visibility', 'visible');
        $("#viewOut").css('visibility', 'visible');
    }
    $('#HideVRTogglesTour2').hide();
    //location.href = ("PreviewTour.aspx?panoguid=" + $('#hdn_PanoramaGuid').val() + "&tourid=" + $('#hdTourid').val() + "");

    if (viewer != undefined) {
        try { viewer.destroy(); } catch (e) { }
    }
    viewer = new Marzipano.Viewer(document.getElementById('pano'), {
        stage: { preserveDrawingBuffer: true }
    });
    view = new Marzipano.RectilinearView(initialView, limiter);
    scene = viewer.createScene({
        source: source,
        geometry: geometry,
        view: view,
        pinFirstLevel: true
    });
    scene.switchTo();
    loadDetail();
    if (isVrDisplay == true && mql.matches == false) {
        toggleFullscreen();
    }
    isVrDisplay = false;
    if (viewer != null) {
        viewer.addEventListener('viewChange', function () {
            addSniperHotSpot();
            //resetRightLevelPosition();
            updateCompass();
        });
    }

    stopTouchAndScrollEventPropagation(viewer);
}

$('body').on('keyup', function (e) {
    if (e.keyCode == 27) { // escape key maps to keycode `27`
        // alert('123');
        return false;
    }
});

//$('#pano').on('keyup', function (e) {
//    if (e.keyCode == 27) { // escape key maps to keycode `27`
//        alert('123');

//    }
//});
function destrotAllObjects() {
    if (typeof viewer != 'undefined') {
        try { viewer.destroy(); } catch (e) { }
    }
    if (typeof stage != 'undefined') {
        try { stage.destroy(); } catch (e) { }
    }
    if (typeof viewLeft != 'undefined') {
        try { viewLeft.destroy(); } catch (e) { }
    }
    if (typeof viewRight != 'undefined') {
        try { viewRight.destroy(); } catch (e) { }
    }
    if (typeof leftLayer != 'undefined') {
        try { leftLayer.destroy(); } catch (e) { }
    }
    if (typeof rightLayer != 'undefined') {
        try { rightLayer.destroy(); } catch (e) { }
    }
    isSnipperCreated = false;
}

$(window).resize(function () {
    if (isVrDisplay == true) {
        removeVrSnipper();
        addVRSnipper();
    }
});
function removeVrSnipper() {
    vrsniperHotspotnewLeft = undefined, vrsniperHotspotnewRight = undefined, vrsniperHotspotnewLeftProgress = undefined, vrsniperHotspotnewRightProgress = undefined;
    isSnipperCreated = false;
    $('#sniperHotspotnewLeft').remove();
    $('#sniperHotspotnewLeftProgress').remove();
    $('#sniperHotspotnewRight').remove();
    $('#sniperHotspotnewRightProgress').remove();
}
function getLongUrl(shortUrl) {
    if (shortUrl != "") {
        var url = 'api/tourpreview/GetLongUrlForTour?shortUrl=' + shortUrl;
        var response = MakeSyncWebCall(url, '', "Get");
        return response;
    }

}
function getTourUrlpanoguid(longUrl, returnKey) {
    var hash;
    var hashes = longUrl.slice(longUrl.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        if (hash[0].toLowerCase() == returnKey.toLowerCase()) {
            return hash[1];
        }
    }
}


//function returnQueryString(findKey) {
//    var querystring = "";
//    var url = window.location.search;
//    url = url.substring(1, url.length);
//    var urlarray = url.split('&');
//    if (urlarray.length > 0) {
//        for (var i = 0; i < urlarray.length; i++) {
//            var key = urlarray[i].split('=')[0];
//            if (key.toLowerCase() == findKey.toLowerCase()) {
//                querystring = urlarray[i].split('=')[1];
//            }
//        }
//    }
//    return querystring;
//}