var isPreview = false;
var Ostartpan;
var Ostarttilt;
var Ostartfov;
var GeometryType = "cube";
var HspotIndex = 1;
var selectedskin = 0;
var selectedskinurl = "";
var oldskinurl = 0;
var snapashotguid;
var mobile = new Object();
$(document).ready(function () {
    if (getQueryVariable("from") != "apps") {
        $("#btnBackToMap").attr("style", "display:none !important");        
    }
    if (window.location.toString().indexOf("type") > -1) {
        $("#btnBackToMap").text(btnBackText);
    }
    $("#btnBackToMap").click(function () {
        var sendurl = "Search.aspx?culture=" + culture;
        var url = window.location.toString();
        if (url.indexOf("type") > -1) {
            sendurl = "../CreatedLinks.aspx";
        }
        else if (url.indexOf("login") > -1) {
            sendurl = "../DroneViewBankSearch.aspx";
        }
        window.location.href = sendurl;
    });
    $('[data-toggle="tooltip"]').tooltip();
    function CallExisting() {
        var orderId = getQueryVariable("orderid");
        if (orderId != "") {
            GetExistingHotspots(orderId);
            $("#hdSavefov").val(Ostartpan);
            $("#hdSavepitch").val(Ostarttilt);
            $("#hdSaveyaw").val(Ostartfov);
            setSaveView();
        }
    }
    setTimeout(CallExisting(), 11000);
    canvasWidth = $(document.getElementsByTagName('canvas')[0]).width();
    canvasHeight = $(document.getElementsByTagName('canvas')[0]).height();
    // For mobile
    if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        mobile.matches = 1;
    }
        // For iPad
    else if (/iPad/i.test(navigator.userAgent)) {
        mobile.matches = 2;
    }
        // For desktop
    else {
        mobile.matches = 3;
    }
    if (mobile.matches == 1 || mobile.matches == 2) {
        // put your code         
        $("#showMore").hide();
        //$("#showLess").hide();
        $("#show-hideText").show();
        $('.blue2_droneview111').click(function () {
            $("#showMore").hide();
            $("#showLess").hide();
            if ($(this).attr('src') == '../images/instruction-hide.png') {
                $(this).attr('src', '../images/instruction-show.png');//change the button label to be 'Hide'.
                $('.list-unstyled').slideUp(1000);
                $("#showMore").show();
            } else {
                $(this).attr('src', '../images/instruction-hide.png');//change the button label to be 'Show'
                $('.list-unstyled').slideDown(1000);
                $("#showLess").show();
            }
        });
        $("#btnFake").attr("style", "display:none !important");//In mobile set this button display none, it will remove space from top header
    }
    else {
        $('.blue2_droneview111').hide();
        $("#show-hideText").hide();
    }
    $("#aHotSpot1").click(function () {
        hotspotimagename = "hs_center";
        hotspotcategoryname = "";
        GetHotSpotPosition();
        emptyHotspotNametextbox();
        $("#txtVideoUrl").val("");
        hotspotid = "";
        AddHotSpotToCollection();
    });

    $("#aHotSpot2").click(function () {

        hotspotimagename = "hs_left";
        GetHotSpotPosition();
        emptyHotspotNametextbox();
        $("#txtVideoUrl").val("");
        hotspotid = "";
        AddHotSpotToCollection();
    });

    $("#aHotSpot3").click(function () {

        hotspotimagename = "hs_right";
        GetHotSpotPosition();
        emptyHotspotNametextbox();
        $("#txtVideoUrl").val("");
        hotspotid = "";
        AddHotSpotToCollection();
    });
    $("#aHotSpotCircle").click(function () {
        hotspotimagename = "hs_hviewIndoor";
        GetHotSpotPosition();
        emptyHotspotNametextbox();
        $("#txtVideoUrl").val("");
        hotspotid = "";
        AddHotSpotToCollection();
        $('.out').css('border', '5px solid ' + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.animationcolor + '');
        $('.in-2').css('background-color', '' + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.animationcolor + '');
    });
    $('#aLeftArrow').click(function (e) {
        if (currentPage <= 1 || (hotspotpan != "" && hotspottilt != "" && hotspotfov != "")) {
            e.preventDefault();
            return false;
        }
        currentPage = currentPage - 1;
        $("#spanPageNo").text(currentPage);

        $("#txtHotSpotName").val(jsonHotSpot[currentPage - 1].hotspotname);

        view.setYaw(jsonHotSpot[currentPage - 1].marzipanoHotspot.position.yaw);
        view.setPitch(jsonHotSpot[currentPage - 1].marzipanoHotspot.position.pitch);
        view.setFov(jsonHotSpot[currentPage - 1].marzipanoHotspot.position.fov);


    });

    $('#aRightArrow').click(function (e) {
        if (currentPage >= jsonHotSpot.length || (hotspotpan != "" && hotspottilt != "" && hotspotfov != "")) {
            e.preventDefault();
            return false;
        }
        currentPage = currentPage + 1;
        $("#spanPageNo").text(currentPage);
        $("#txtHotSpotName").val(jsonHotSpot[currentPage - 1].hotspotname);

        view.setYaw(jsonHotSpot[currentPage - 1].marzipanoHotspot.position.yaw);
        view.setPitch(jsonHotSpot[currentPage - 1].marzipanoHotspot.position.pitch);
        view.setFov(jsonHotSpot[currentPage - 1].marzipanoHotspot.position.fov);
        //selectHotspotCategory(currentPage);

    });
    $("#aTop").click(function () {
        if (currentPage != 0) {
            marzipanoHotspot = jsonHotSpot[currentPage - 1].marzipanoHotspot;
            marzipanoHotspot.position.pitch = marzipanoHotspot.position.pitch - 0.05;
            $("div").remove('#' + jsonHotSpot[currentPage - 1].marzipanoHotspot.wrapperId);
            addSpotOnPosition(jsonHotSpot[currentPage - 1].hotspoturltarget, jsonHotSpot[currentPage - 1].hotspoturl, scene, marzipanoHotspot, true, true);
            jsonHotSpot[currentPage - 1].hotspottilt = (180 / 3.14159) * parseFloat(marzipanoHotspot.position.pitch);
        }
    });

    $("#aBottom").click(function () {
        if (currentPage != 0) {
            marzipanoHotspot = jsonHotSpot[currentPage - 1].marzipanoHotspot;
            marzipanoHotspot.position.pitch = marzipanoHotspot.position.pitch + 0.05;
            $("div").remove('#' + jsonHotSpot[currentPage - 1].marzipanoHotspot.wrapperId);
            addSpotOnPosition(jsonHotSpot[currentPage - 1].hotspoturltarget, jsonHotSpot[currentPage - 1].hotspoturl, scene, marzipanoHotspot, true, true);
            jsonHotSpot[currentPage - 1].hotspottilt = (180 / 3.14159) * parseFloat(marzipanoHotspot.position.pitch);
        }
    });

    $("#aLeft").click(function () {
        if (currentPage != 0) {
            marzipanoHotspot = jsonHotSpot[currentPage - 1].marzipanoHotspot;
            marzipanoHotspot.position.yaw = marzipanoHotspot.position.yaw - 0.05;
            $("div").remove('#' + jsonHotSpot[currentPage - 1].marzipanoHotspot.wrapperId);
            addSpotOnPosition(jsonHotSpot[currentPage - 1].hotspoturltarget, jsonHotSpot[currentPage - 1].hotspoturl, scene, marzipanoHotspot, true, true);
            jsonHotSpot[currentPage - 1].hotspotpan = (180 / 3.14159) * parseFloat(marzipanoHotspot.position.yaw);
        }
    });

    $("#aRight").click(function () {
        if (currentPage != 0) {
            marzipanoHotspot = jsonHotSpot[currentPage - 1].marzipanoHotspot;
            marzipanoHotspot.position.yaw = marzipanoHotspot.position.yaw + 0.05;
            $("div").remove('#' + jsonHotSpot[currentPage - 1].marzipanoHotspot.wrapperId);
            addSpotOnPosition(jsonHotSpot[currentPage - 1].hotspoturltarget, jsonHotSpot[currentPage - 1].hotspoturl, scene, marzipanoHotspot, true, true);
            jsonHotSpot[currentPage - 1].hotspotpan = (180 / 3.14159) * parseFloat(marzipanoHotspot.position.yaw);
        }
    });
       
    $("#btnNextCustomIcons").click(function () {
        $("#divCustomIcon").hide();
        $("#divCustomIconSpecific").show();
        $("#btnNextCustomIcons").hide();
        $("#btnbackCustomIcons").show();
    });
    $("#btnbackCustomIcons").click(function () {
        $("#divCustomIcon").show();
        $("#divCustomIconSpecific").hide();
        $("#btnNextCustomIcons").show();
        $("#btnbackCustomIcons").hide();
    });
    $("#btnSkin").click(function () {
        getGenericSkin();
        $("#divGenericSkins").modal('show');
    });
    $("#btnCancelProfileSkin,#btnCloseProfileSkin").click(function () {
        $("#divGenericSkins").modal('hide');
        selectedskin = 0;
        selectedskinurl = "";
    });
    $("#btnSaveProfileSkin").click(function () {
        $("#divGenericSkins").modal('hide');
        if (selectedskin > 0) {
            oldskinurl = $("#hdSkinBaseUrl").val();
            $("#hdSkinBaseUrl").val(selectedskinurl);
            $("#hdSkinId").val(selectedskin);
            getMarzipanoskinDetail();
            changeCustomIcons();
            changeIconsOnPanorama();
        }
    });
    setSettingsPopupHeight();
});
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (decodeURIComponent(pair[0]) == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
    return "";
}

function RequestSnapshot() {
    //$(".lblContinueError").hide().text("");
    //if (jsonHotSpot.length == 0) {
    //    $(".lblContinueError").show();
    //    $(".lblContinueError").text("Please select atleast one hotspot");
    //    return false;
    //}
    GetSnapshotStartPosition();
    var lstHotspots = [];
    for (var index in jsonHotSpot) {
        var coords = view.coordinatesToScreen(jsonHotSpot[index].marzipanoHotspot.position);
        lstHotspots.push(
            {
                hotspotfov: jsonHotSpot[index].hotspotfov,
                hotspotpan: jsonHotSpot[index].hotspotpan,
                hotspottilt: jsonHotSpot[index].hotspottilt,
                hotspotimagename: jsonHotSpot[index].hotspotimagename,
                hotspotname: jsonHotSpot[index].hotspotname,
                pointX: null ? 0 : coords.x,
                pointY: null ? 0 : coords.y,
                percentX: null ? 0 : coords.x / canvasWidth * 100,
                percentY: null ? 0 : coords.y / canvasHeight * 100,
                hotspoturl: jsonHotSpot[index].hotspoturl,
                hotspoturltarget: jsonHotSpot[index].hotspoturltarget,
                hotspotcategoryvalue: jsonHotSpot[index].hotspotcategoryvalue,
                marzipanoHotspot: jsonHotSpot[index].marzipanoHotspot,
                hotspotcomments: jsonHotSpot[index].hotspotcomments
            });
    }
    var startParameters = "&startpan=" + startpan + "&starttilt=" + starttilt + "&startfov=" + startfov + "&geometrytype=" + GeometryType + "&skinid=" + skinid()+"&culture=" + culture;
    var response = MakeSyncWebCall(urlToHit + startParameters, JSON.stringify(lstHotspots), "post");
    if (response != null && response.isSuccessful) {
        var urlToAppend = location.search;
        if (urlToAppend.indexOf('culture') < 0) {
            urlToAppend += "&culture=" + culture;    
        }
        //UrlReferrer = $.trim(UrlReferrer);
        //if (UrlReferrer == null || UrlReferrer == '') {
        //    UrlReferrer = "https://www.hitta.se/kartan/";
        //}
        var windowurl = "";
        if (getQueryVariable("orderid") == "")
            windowurl = clientPath + "consumer/Payment.aspx" + urlToAppend + "&orderid=" + response.snapshotGuid;// + "&UrlReferrer=" + UrlReferrer;
        else
            windowurl = clientPath + "consumer/Payment.aspx" + urlToAppend;
        if (getQueryVariable("from") == "apps" && isLogin == 'False') {
            window.open(windowurl);
        }
        else {
            window.location = windowurl;
        }

    }
    //else {
    //    $(".lblContinueError").show().text("Some error occured.\n" + response.error_message);
    //}
}
function GetHotSpotPosition() {
    if (isMarzipanoAllowed() == "True") {
        position = {
            yaw: view.yaw(),
            pitch: view.pitch(),
            fov: view.fov()
        };
        hotspotpan = (180 / 3.14159) * parseFloat(view.yaw());
        hotspottilt = (180 / 3.14159) * parseFloat(view.pitch());
        hotspotfov = view.fov();
    }
    else {
        hotspotpan = pano.getPan();
        hotspottilt = pano.getTilt();
        hotspotfov = pano.getFov();
    }    
}

function AddCustomHotSpot(hotspottitle, hotspotpan, hotspottilt, hotspotimagename) {
    
        if (view != null) {
            var position;
            if (hotspotpan != "" && hotspotpan != undefined && hotspotpan != null) {
                position = {
                    yaw: (hotspotpan * 3.14159) / 180,
                    pitch: (hotspottilt * 3.14159) / 180,
                    fov: view.fov()
                };
            }
            else {
                position = {
                    yaw: view.yaw(),
                    pitch: view.pitch(),
                    fov: view.fov()
                };
            }
            //var coords = view.coordinatesToScreen(position);
            var marzipanoHotspot = {
                HspotIndex: HspotIndex,
                position: position,
                imagePath: hotspotimagename,
                title: hotspottitle
                //xyCoordinates:
                //    {
                //        X: coords == null ? 0 : coords.x,
                //        Y: coords == null ? 0 : coords.y,
                //        percentX: coords == null ? 0 : coords.x / canvasWidth * 100,
                //        percentY: coords == null ? 0 : coords.y / canvasHeight * 100
                //    }
            };
            marzipanoHotspot = addNewHotSpot('', '', scene, marzipanoHotspot);
            return marzipanoHotspot;
        }
    
}
function ValidateHotspotName() {
    jsonHotSpot[currentPage - 1].hotspotname = $("#txtHotSpotName").val();
    jsonHotSpot[currentPage - 1].marzipanoHotspot.title = jsonHotSpot[currentPage - 1].hotspotname;
    UpdateMarzipanoHotspotTitle(jsonHotSpot[currentPage - 1].marzipanoHotspot.hotspotTitleId, jsonHotSpot[currentPage - 1].hotspotname);
    if ($("#txtHotSpotName").val() == "") {
        $("#lblHotspotPlaceholder").show();
    }
}
function ValidateHotspotNameWithEnter(e) {
    // look for window.event in case event isn't passed in
    if (typeof e == 'undefined' && window.event) { e = window.event; }
    if (e.keyCode == 13) {
        ValidateHotspotName();
        e.preventDefault();
        return false;
    }
}

function AddHotSpotToCollection() {
   
    var marzipanoHotspot = {};    
    marzipanoHotspot = AddCustomHotSpot($("#txtHotSpotName").val(), hotspotpan, hotspottilt, hotspotimagename);
    
    //var coords = view.coordinatesToScreen(marzipanoHotspot.position);
    jsonHotSpot.push({
        hotspotname: $("#txtHotSpotName").val(),
        hotspotpan: hotspotpan,
        hotspottilt: hotspottilt,
        hotspotfov: hotspotfov,
        hotspotimagename: hotspotimagename,
        hotspoturl: hotspoturl,        
        hotspotid: hotspotId,        
        hotspoturltarget: hotspoturltarget,
        hotspotcategoryname: hotspotcategoryname,
        hotspotcategorydisplayname: hotspotcategorydisplayname,
        marzipanoHotspot: marzipanoHotspot,
        hotspottype: 0
        //xyCoordinates:
        //    {
        //        X: coords == null ? 0 : coords.x,
        //        Y: coords == null ? 0 : coords.y,
        //        percentX: coords == null ? 0 : coords.x / canvasWidth * 100,
        //        percentY: coords == null ? 0 : coords.y / canvasHeight * 100
        //    }
    });

    currentPage = jsonHotSpot.length;
    $("#spanPageNo").text(currentPage);
    hotspotpan = "";
    hotspottilt = "";
    hotspotfov = "";
    hotspotimagename = "";
    hotspoturl = "";
    hotspoturltarget = "";
    hotspotcategoryname = "";
    hotspotcategorydisplayname = "";
    emptyHotspotNametextbox();    
}
//function OpenHotspotContainer(hotSpotImage) {
//    var $objCont = $('#cntHotspotText');
//    $objCont.slideDown('slow');
//    $("#txtHotSpotName").val('').removeClass('valid');
//    $('#txtHotspotText').val('');
//    $("#cntHotSpotButtons").slideUp('slow');
//    GetHotSpotPosition();
//    AddHotSpotToCollection(false, hotSpotImage);
//}

function DeleteHotSpotFromCollection() {
    if (currentPage != 0) {
        var id = jsonHotSpot[currentPage - 1].hotspotid;
        if (id != "") {
            if (deleteHotspotId == "") {
                deleteHotspotId = id;
            }
            else {
                deleteHotspotId = deleteHotspotId + "," + id;
            }
        }

        RemoveHotspot(currentPage - 1);
        jsonHotSpot.splice(currentPage - 1, 1);
        currentPage = currentPage - 1;
        $("#spanPageNo").text(currentPage);

        if (jsonHotSpot.length < 1) {

            emptyHotspotNametextbox();
            $("#txtVideoUrl").val("");


        } else if (currentPage < 1) {
            currentPage = 1;
            $("#spanPageNo").text(currentPage);
            $("#txtHotSpotName").val(jsonHotSpot[currentPage - 1].hotspotname);

        }
        else {
            $("#txtHotSpotName").val(jsonHotSpot[currentPage - 1].hotspotname);
            if (jsonHotSpot[currentPage - 1].hotspotname != "") {
                onFocus();
            }
            else {
                emptyHotspotNametextbox();
            }
        }
    }
}
function onFocus() { 
    $("#txtHotSpotName").focus();
}
function GetSnapshotStartPosition() {   
        startpan = (view.yaw() * 180) / 3.14159;
        starttilt = (view.pitch() * 180) / 3.14159;
        startfov = (view.fov() * 180) / 3.14159;   
}
function RemoveHotspot(currentIndex) {
    $("div").remove('#' + jsonHotSpot[currentIndex].marzipanoHotspot.wrapperId);
}
var height = parseInt($('#pano').width() / 1.5);
$('#div_Marzipano').height(height + 'px');
$(window).resize(function () {
    $('#div_Marzipano').height($('#pano').width() / 1.5 + 'px');    
});
//Marzipano start customization

//var isMouseMove = false;
//var MarzipanoSkinDetail = {};
//var view;
//var autorotate, hotspotId;
//var Marzipano = window.Marzipano;
// Create viewer.
//var startYaw = $('#hdn_startYaw').val(), startPitch = $('#hdn_startPitch').val(), startFov = $('#hdn_startFov').val();
//var initialView = {
//    yaw: startYaw,
//    pitch: startPitch,
//    fov: startFov
//};
//var scene;


//var viewer = new Marzipano.Viewer(document.getElementById('pano'));


//var fullscreenToggleElement = document.querySelector('#fullscreenToggles');


//MarzipanoSkinDetail = $.parseJSON($('#hdMarzipanoSkinDetail').val());
//'use strict';
//var imagesPath = $("#hdmarzipanoimgUrl").val(); 
//var source = Marzipano.ImageUrlSource.fromString(
//  imagesPath
//);

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

//if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hasSingleImage == false) {
//    $("#addhotspotpanel").hide();
//    $("#descriptionpanel").css({ "color": "red", "font-size": "17pt" }).addClass("col-md-12").text("This panorama does not support HD snapshot.");
//}

//var limiter = 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)
//    );
//view = new Marzipano.RectilinearView(initialView, limiter);
//scene = viewer.createScene({
//    source: source,
//    geometry: geometry,
//    view: view,
//    pinFirstLevel: true
//});
//var settings = {
//    "mouseViewMode": "drag",
//    "autorotateEnabled": false,
//    "fullscreenButton": true,
//    "viewControlButtons": false
//};

//scene.switchTo();

//$('#div_Marzipano').bind('drag', function () {
//    $('.line').css({ 'width': '0px', 'height': '0px', 'background-color': '' });
//    screenfull.toggle(this);
//});

//function toggleFullscreen() {
//    $('#div_Marzipano').trigger('drag');
//}

function ReturnToHitta() {
    if (hittaReturnPath != '') {
        window.location = hittaReturnPath;
    }
    else
    {
        window.close();
    }
}



// Prevent touch and scroll events from reaching the parent element.
//function stopTouchAndScrollEventPropagation(element, eventList) {
//    var eventList = ['touchstart', 'touchmove', 'touchend', 'touchcancel',
//                      'wheel', 'mousewheel'];
//    for (var i = 0; i < eventList.length; i++) {
//        element.addEventListener(eventList[i], function (event) {
//            event.stopPropagation();
//        });
//    }
//}

//============ hot spot region ==============

//function addNewHotSpot(target, hotspoturl, sceneId, marzipanoHotspot, customClassName) {
//    marzipanoHotspot = addSpotOnPosition(target, hotspoturl, sceneId, marzipanoHotspot, true, false, customClassName);
//    HspotIndex += 1;
//    return marzipanoHotspot;
//}

//function updateCompass() {
//    var panDiff = $('#hdn_panNorth').val();
//    var pan = ((-1) * (view.yaw() * 180) / 3.14159) - panDiff;
//    var compassAngle = (-1.0 * (1 * pan + 0));
//    $('#divCompassNiddle').css({ 'position': 'absolute', 'left': '-1px', 'top': '-2px', 'width': '83px', 'height': '83px', 'transform': 'rotate(' + compassAngle + 'deg)' });
//}




function AddHotspotForSnapshot(target, hotspoturl, hotspottitle, hotspotpan, hotspottilt, hotspotimagename) {
    if (isMarzipanoAllowed() == 'True') {
        var position;
        if (hotspotpan != "" && hotspotpan != undefined && hotspotpan != null) {
            position = {
                yaw: (hotspotpan * (22 / 7)) / 180,
                pitch: (hotspottilt * (22 / 7)) / 180,
                fov: view.fov()
            };
        }
        else {
            position = {
                yaw: view.yaw(),
                pitch: view.pitch(),
                fov: view.fov()
            };
        }
        var marzipanoHotspot = { HspotIndex: HspotIndex, position: position, imagePath: hotspotimagename, title: hotspottitle };
        marzipanoHotspot = addNewHotSpot(target, hotspoturl, scene, marzipanoHotspot);
        return marzipanoHotspot;
    }
}
function GetExistingHotspots(orderId) {
    var urlToGet = clientPath + 'api/Snapshot/GetSnapshotHotspots?orderGuid=' + orderId;
    var response = MakeSyncWebCall(urlToGet, "", "Get");
    if (response != null) {
        Ostartpan = startpan = response.startpan;
        Ostarttilt = starttilt = response.starttilt;
        Ostartfov = startfov = response.startfov;
        $("#hdSkinId").val(response.skinid);
        selectedskin = response.skinid;
        getMarzipanoskinDetail();
        oldskinurl = SkinBaseUrl();
        var version = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.skinversion == "0" ? "" : "/"+MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.skinversion ;
        $("#hdSkinBaseUrl").val(basepath + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.skinid + version + "/");
        selectedskinurl = SkinBaseUrl();
        changeCustomIcons();
        changeIconsOnPanorama();
        response = response.data;        
        for (var index in response) {
            var marzipanoHotspot= AddCustomHotSpot(response[index].hotspotname, response[index].hotspotpan, response[index].hotspottilt, response[index].hotspotimagename);
            //var position = {
            //    yaw: (response[index].hotspotpan * 3.14159) / 180,
            //    pitch: (response[index].hotspottilt * 3.14159) / 180,
            //    fov: response[index].hotspotfov
            //};
            jsonHotSpot.push({
                hotspotname: response[index].hotspotname,
                hotspotpan: response[index].hotspotpan,
                hotspottilt: response[index].hotspottilt,
                hotspotfov: response[index].hotspotfov,
                hotspotimagename: response[index].hotspotimagename,                
                hotspoturl: response[index].hotspoturl,
                hotspoturltarget: response[index].hotspoturltarget,
                hotspotcategoryvalue: response[index].hotspotcategoryvalue,               
                hotspotcomments: response[index].hotspotcomments,
                hotspotid: 'hotspotId_' + (parseInt(index) + 1),
                //xyCoordinates: {
                //    X: response[index].pointX,
                //    Y: response[index].pointY,
                //    percentX: response[index].percentX,
                //    percentY: response[index].percentY
                //},
                marzipanoHotspot:marzipanoHotspot             

            });
        }
        //setView();
        currentPage = jsonHotSpot.length;
        $("#spanPageNo").text(currentPage)
        //$("#spanPageNo").text(currentPage);
        $('.out').css('border', '5px solid ' + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.animationcolor + '');
        $('.in-2').css('background-color', '' + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.animationcolor + '');
    }
}
//Marzipano start customization end
function setSaveView() {
    view.setYaw((Ostartpan * 3.14159) / 180);
    view.setPitch((Ostarttilt * 3.14159) / 180);
    view.setFov((Ostartfov * 3.14159) / 180);
}
function setSettingsPopupHeight() {

    if (mobile.matches == 3) {
        $('.pano-iframe-height').css({ 'height': (($(window).height()) - 145) + 'px' });

        $(window).bind('resize', function () {
            $('.pano-iframe-height').css({ 'height': (($(window).height()) - 145) + 'px' });
        });
    }
        // For ipad
    else if (mobile.matches == 2) {
        $('.pano-iframe-height').css({ 'height': (($(window).height()) - 205) + 'px' });
        $(window).bind('resize', function () {
            $('.pano-iframe-height').css({ 'height': (($(window).height()) - 205) + 'px' });
        });
        $("#txtHotSpotName").prop('readonly', false);
    }
}
function emptyHotspotNametextbox() {
    $("#txtHotSpotName").val("");
    $("#lblHotspotPlaceholder").show();
}
function addSpecialHotspot(categoryvalue, categoryname) {
    $("#pHotSpotText").show();
    $("#pHotSpotStart").show();

    hotspotimagename = "hs_" + categoryvalue;
    hotspotcategoryname = categoryvalue;
    hotspotcategorydisplayname = categoryname;

    GetHotSpotPosition();
    emptyHotspotNametextbox();
    $("#txtVideoUrl").val("");
    hotspotid = "";
    $("#txtHotSpotName").val(categoryname);
    AddHotSpotToCollection();
    $("#txtHotSpotName").val(categoryname);;//This is added twice as emptyHotspotNametextbox() is called again in AddHotSpotToCollection() and it clears the textbox
    $("#divCustomIcons").modal('hide');
}
function getGenericSkin() {
    var url = "../api/consumer/genericskin?isgenericskin=1";
    var response = MakeSyncWebCall(url, "{}", "get");
    var html = "";
    $.each(response, function (key, value) {
        html += '<span class="float-left mx-1">';
        html += '<div class="ml-0">';
        html += '<img src="' + value.baseurl + 'images/hs_centerimage.png" class="img-fluid" style="height:2.563rem;" alt="" />';
        html += '</div>';
        html += '<div class="custom-control custom-checkbox custom-control-inline mr-0 ml-1">';
        html += '<input  id="chkSkin' + value.id + '"  type="checkbox" class="custom-control-input skincheckbox" value="' + value.id + '"';//skincheckbox is fake class
        if (selectedskin == value.id) {
            html += ' checked ';
        }
        html += 'skinurl="' + value.baseurl + '">';
        html += '<label class="custom-control-label custom-control-label" for="chkSkin' + value.id + '">&nbsp;</label>';
        html += '</div>';
        html += '</span>';
    });
    $("#divGenericSkinsHtml").html(html);
    $(".skincheckbox").click(function () {
        $(".skincheckbox").prop('checked', false)
        $(this).prop('checked', true);
        selectedskin = $(this).val();
        selectedskinurl = $(this).attr("skinurl")
    });
}
function getMarzipanoskinDetail() {
    var url = "../api/consumer/getmarzipanoskindetail?panobankguid=" + PanoBankGuid() + "&skinid=" + skinid();
    var response = MakeSyncWebCall(url, "{}", "get");
    $("#hdMarzipanoSkinDetail").val(response);
    MarzipanoSkinDetail = $.parseJSON($('#hdMarzipanoSkinDetail').val());
}
function changeCustomIcons() {
    $('#divCustomIcon').find("img").each(function (index) {
        var src = $(this).prop('src');
        src = src.replace(oldskinurl, selectedskinurl);
        $(this).attr('src', src);
    });
}
function changeIconsOnPanorama() {
    $.each(jsonHotSpot, function (ind, dat) {
        RemoveHotspot(ind);
        var marzipanoHotspot = {};
        marzipanoHotspot = AddCustomHotSpot(dat.hotspotname, dat.hotspotpan, dat.hotspottilt, dat.hotspotimagename, dat.target, dat.hotspoturl);
        dat.marzipanoHotspot = marzipanoHotspot;

    });
    $('.out').css('border', '5px solid ' + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.animationcolor + '');
    $('.in-2').css('background-color', '' + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.animationcolor + '');
}
var autorotateToggleElement = document.querySelector('#autorotateToggles');
// Set up autorotate, if enabled.
autorotate = Marzipano.autorotate({ yawSpeed: 0.03, targetPitch: null, targetFov: Math.PI / 2 });

autorotateToggleElement.classList.add('enabled');


window.setTimeout(function () { startAutorotate(); }, 500);
window.setTimeout(function () { stopAutorotate(); }, 600);
function getFree() {    
    if (isLogin == 'True') {
        $("#txtEmail").val($("#hdEmail").val());
        $("#divOrderSnapshot").modal('hide');
        $("#btnCreateFree").click();
    }
    else {
        $("#divOrderSnapshot").modal('hide');
        $("#divCreateSnapshot").modal('show');
    }
}
function cancelFree() {
    $("#divOrderSnapshot").modal('show');
    $("#divCreateSnapshot").modal('hide');
}
function addFreeSnapshot() {
    GetSnapshotStartPosition();
    var lstHotspots = [];
    for (var index in jsonHotSpot) {
        var coords = view.coordinatesToScreen(jsonHotSpot[index].marzipanoHotspot.position);
        lstHotspots.push(
            {
                hotspotfov: jsonHotSpot[index].hotspotfov,
                hotspotpan: jsonHotSpot[index].hotspotpan,
                hotspottilt: jsonHotSpot[index].hotspottilt,
                hotspotimagename: jsonHotSpot[index].hotspotimagename,
                hotspotname: jsonHotSpot[index].hotspotname,
                pointX: null ? 0 : coords.x,
                pointY: null ? 0 : coords.y,
                percentX: null ? 0 : coords.x / canvasWidth * 100,
                percentY: null ? 0 : coords.y / canvasHeight * 100,
                hotspoturl: jsonHotSpot[index].hotspoturl,
                hotspoturltarget: jsonHotSpot[index].hotspoturltarget,
                hotspotcategoryvalue: jsonHotSpot[index].hotspotcategoryvalue,
                marzipanoHotspot: jsonHotSpot[index].marzipanoHotspot,
                hotspotcomments: jsonHotSpot[index].hotspotcomments
            });
    }
    var startParameters = "&startpan=" + startpan + "&starttilt=" + starttilt + "&startfov=" + startfov + "&geometrytype=" + GeometryType + "&skinid=" + skinid() + "&culture="+culture;
    var response = MakeSyncWebCall(urlToHit + startParameters, JSON.stringify(lstHotspots), "post");
    if (response != null && response.isSuccessful) {
        var orderId = response.snapshotGuid;
        var urlUpdateToHit = clientPath + "api/Snapshot/UpdateEmailAddress?orderid=" + orderId + "&email=" + $.trim($("#txtEmail").val()) + "&title=flyover";
        var responseUpdate = MakeSyncWebCall(urlUpdateToHit, {}, "post");
        if (responseUpdate == 200) {
            var urlpushSnaphotToHit =clientPath+ "api/Snapshot/pushSnaphotToAmazonBucket?orderId=" + orderId;
            var responsepushSnaphot = MakeSyncWebCall(urlpushSnaphotToHit, {}, "post");
            if (responsepushSnaphot != '') {
                var viteccustomerid = '';
                var vitecuserid = '';
                var vitecestatetype = '';
                var vitecorderid = '';
                var mspec = '';
                var objectid = '';
                var watermark = "1";

                var urlSnapshototherinfo = clientPath+"api/Snapshot/AddSnapshototherinfo?snapshotguid=" + orderId + "&objectid=" + objectid + "&vitecuserid=" + vitecuserid + "&vitecestatetype=" + vitecestatetype + "&viteccustomerid=" + viteccustomerid + "&vitecorderid=" + vitecorderid + "&mspec=" + mspec + "&watermark=" + watermark;
                var responseSnapshototherinfo = MakeSyncWebCall(urlSnapshototherinfo, {}, "post");
                if (responseSnapshototherinfo == 200) {
                    $("#divCreateSnapshot").modal('hide');
                    showSuccessMessage(snapshotSuccessMsg);
                    if (isLogin == 'True') {
                        setTimeout(function () { window.location.href="../Dashboard.aspx" }, 3010);
                    }
                }
            }
        }
    }
}
function showSuccessMessage(text) {
    $("#messageText").html(text);
    $("#divSucessMessage").modal('show');
    setTimeout(function () { $("#divSucessMessage").modal('hide'); }, 3000);
}