var isHotspotClick = false;
var marzipanomap;
var marzipanoRadar = null, infoPopupWindowId = '';
var HspotIndex = 1;
var pageName = window.location.href;
//var allowPanoClick = false;
var isMouseMove = false, isPanoView = 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();
if (toureSkinType == 2 || cameratype == 2 || cameratype == 3) {
    startFov = $('#hdn_maxFov').val();
}
var initialView = {
    yaw: startYaw,
    pitch: startPitch,
    fov: startFov
};
var controls, VRredirectURL;
$(document).ready(function () {
    if (isMarzipanoAllowed() == "True" && isPanoPublished() == 'True') {
        VRredirectURL = location.href + "&isVrDisplay=true";// "PreviewTour.aspx?panoguid=" + returnQueryString("panoguid") + "&tourid=" + $("#hdTourid").val() + "&isVrDisplay=true";

        if (pageName.toLowerCase().indexOf('tour.aspx') > -1) {
            isPanoView = false
        } else {
            isPanoView = true;
        }
        if (typeof isVRView == 'undefined') {
            displayMarzipanoView();
        }
        else {
            displayVrView();
        }
        //=======================================================
        controls = viewer.controls();
        var viewInElement = document.querySelector('#viewIn');
        var viewOutElement = document.querySelector('#viewOut');
        if (viewInElement != null) {
            controls.registerMethod('inElement', new Marzipano.ElementPressControlMethod(viewInElement, 'zoom', -velocity, friction), true);
        }
        if (viewOutElement != null) {
            controls.registerMethod('outElement', new Marzipano.ElementPressControlMethod(viewOutElement, 'zoom', velocity, friction), true);
        }
        var viewInNewTourElement = document.querySelector('#viewInNewTour');
        var viewOutNewTourElement = document.querySelector('#viewOutNewTour');
        if (viewInNewTourElement != null) {
            controls.registerMethod('inElement', new Marzipano.ElementPressControlMethod(viewInNewTourElement, 'zoom', -velocity, friction), true);
        }
        if (viewOutNewTourElement != null) {
            controls.registerMethod('outElement', new Marzipano.ElementPressControlMethod(viewOutNewTourElement, 'zoom', velocity, friction), true);
        }
        //=========================================================
        var viewerElement = document.getElementById('pano');
        if (viewer != null) {
            viewer.addEventListener('viewChange', function () {
                addSniperHotSpot();
                //resetRightLevelPosition();
                updateCompass();
            });
        }
        if (isMapAllowed != false) {
            google.maps.event.addDomListener(window, 'load', initMarzipanoMap);
        }
        if (viewSnipper() == false && skinid() != 92 && skinid() != 102) {
            toggleAutorotate();
        }
        if (!mql.matches || navigator.userAgent.match(/iPad/i) != null) {
            $('#DIV_VRTogglesTour2').hide();
        }
        else {
            $('#DIV_VRTogglesTour2').show();
        }
        if (mql.matches == true) {
            $('#fullscreenToggles').hide();
        }
        else {
            $("#viewIn").css('visibility', 'visible');
            $("#viewOut").css('visibility', 'visible');
        }
        if (window.location != window.parent.location && $('#div_Marzipano').width() <= 500) {
            window.setTimeout(function () {
                if (jsonHotSpot.length > 0) {
                    $('.bx-viewport').hide();
                }
            }, 500);
        }
        $("#marzimapPopUp").on("shown.bs.modal", function () {
            google.maps.event.trigger(marzipanomap, "resize");
            var latlng = new google.maps.LatLng(panolatitude(), panolongitude());
            marzipanomap.setCenter(latlng);
        });
    }
});
function updateMarzipanoRadar() {
    if ((!activeNodeLatLng) || (!pano) || (!marzipanomap)) return;
    var d2r = Math.PI / 180;
    var r2d = 180 / Math.PI;

    var fov = (view.fov() * 180) / 3.14159;
    var panDiff = $('#hdn_panNorth').val();
    var pan = ((-1) * (view.yaw() * 180) / 3.14159) - panDiff;
    var zoom = marzipanomap.getZoom();
    if (((panolatitude() != 0) || (panolongitude() != 0))) {
        if (zoom < 6) zoom = 6; // avoid large radar beams on world map

        if ((fov == lastFov) && (pan == lastPan) && (zoom == lastZoom) && (panolatitude() == activeNodeLatLng.lat()) && (panolongitude() == activeNodeLatLng.lng())) return; // nothing to do
        lastPan = pan;
        lastFov = fov;
        lastZoom = zoom;
        activeNodeLatLng = new google.maps.LatLng(panolatitude(), panolongitude());
        var rLat = 4.0 * r2d / Math.pow(2, zoom);     // beam size
        var rLng = rLat / Math.cos(activeNodeLatLng.lat() * d2r);

        // generate radar fan for fov
        var radar_poly = new Array();

        radar_poly.push(activeNodeLatLng);
        var segments = 5;
        for (i = -segments; i <= segments; i++) {
            var angle = (fov / (2 * segments)) * i;
            var x = -rLng * Math.sin((pan + angle) * d2r) + activeNodeLatLng.lng();
            var y = rLat * Math.cos((pan + angle) * d2r) + activeNodeLatLng.lat();
            radar_poly.push(new google.maps.LatLng(y, x));
        }
        // clear old radar
        if (marzipanoRadar) {
            marzipanoRadar.setMap(null);
            marzipanoRadar = null;
        }
        // show radar
        marzipanoRadar = new google.maps.Polygon({
            paths: radar_poly,
            strokeColor: "#000000",
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: "#000000",
            fillOpacity: 0.35
        });

        marzipanoRadar.setMap(marzipanomap);
    } else {
        // clear radar 
        if (marzipanoRadar) {
            activeNodeLatLng = new google.maps.LatLng(0, 0);
            marzipanoRadar.setMap(null);
            marzipanoRadar = null;
        }
    }
}
if (window.matchMedia) {
    var setMode = function () {
        if (mql.matches) {
            document.body.classList.remove('desktop');
            document.body.classList.add('mobile');
        } else {
            document.body.classList.remove('mobile');
            document.body.classList.add('desktop');
        }
    };
    var mql = new Object();// matchMedia("(max-width: 500px), (max-height: 500px)");
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        mql.matches = true;
    }
    else {
        mql.matches = false;
    }

    setMode();
    //mql.addListener(setMode);
} else {
    document.body.classList.add('desktop');
}
// Detect whether we are on a touch device.
document.body.classList.add('no-touch');
window.addEventListener('touchstart', function () {
    document.body.classList.remove('no-touch');
    document.body.classList.add('touch');
});

if ($('#hdMarzipanoSkinDetail').val() != '') {
    //var screenfull = window.screenfull;
    MarzipanoSkinDetail = $.parseJSON($('#hdMarzipanoSkinDetail').val());
    'use strict';
    infoPopupWindowId = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.infoPopupWindowId;
    if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.subscriptiontype == 2) {
        infoPopupWindowId = 'info_popUpFreemium';
    }
    var subscriptiontype = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.subscriptiontype;
    var showInfoButton = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showInfoButton;
    var showzoombutton = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showzoombutton;
    var showsharebutton = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showsharebutton;
    var showcopyright = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showcopyright;

    //============= info button will not be visible for online users ===========
    if (showInfoButton == true && subscriptiontype != 2 && subscriptiontype != 3 && subscriptiontype != 4 && subscriptiontype != 5) {
        $('#aInfoWindow').show();
    }
    if (subscriptiontype >= 2 && pageName.toLowerCase().indexOf('downloadpanobankimages.aspx') <= -1) {
        $('.compass').css("visibility", "hidden");
    }
    if (showzoombutton == true) {
        $('#div_ViewIn').show();
        $('#div_ViewOut').show();
    }
    else {
        $('#div_ViewIn').hide();
        $('#div_ViewOut').hide();
    }
    if (showsharebutton == true) {
        $('#social-media').show();
    }
    else {
        $('#social-media').hide();
    }

    var showHotspotTitleBorder = MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder;

    var scene;
    var viewer;
    var imagesPath = $('#hdmarzipanoimgUrl').val();// GetMarzipanoImageBasePath() + "/" + $.trim(MarzipanoSkinDetail.data.marzipanoPanoImagesList[0].countrycode) + "/" + $.trim(MarzipanoSkinDetail.data.marzipanoPanoImagesList[0].panobankguid) + "/" + MarzipanoSkinDetail.data.marzipanoPanoImagesList[0].marzipanoImageName + "_{f}.jpg";//"panoimages/test" + "_" + "{f}.jpg";
    var previewImagesPath = $('#hdmarzipanoimgUrl').val().replace('{f}', 'preview');
    var source = Marzipano.ImageUrlSource.fromString(
      imagesPath,
        { cubeMapPreviewUrl: previewImagesPath, cubeMapPreviewFaceOrder: 'fdrblu' }
    );
    var geometry;
    if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hasSingleImage == true) {
        if ($('#hdnPreviewSingleImageUrl').val() != "") {
            source = new Marzipano.ImageUrlSource(function (tile) {
                if (tile.z === 0) {
                    return { url: $('#hdnPreviewSingleImageUrl').val() };
                } else {
                    return { url: imagesPath };
                }
            });
        }
        geometry = new Marzipano.EquirectGeometry([{ width: 256 }, { width: 4000 }]);
    }
    else {
        geometry = new Marzipano.CubeGeometry([{ tileSize: 256, size: 256, fallbackOnly: true }, { size: 1024, tileSize: 1024 }]);
    }
    var limiter;
    if (checkIframRequest() == true) {
        limiter = Marzipano.util.compose
            (
                Marzipano.RectilinearView.limit.vfov($('#hdn_minFov').val(), $('#hdn_maxFov').val()),
                Marzipano.RectilinearView.limit.hfov($('#hdn_minFov').val(), $('#hdn_maxFov').val()),
                Marzipano.RectilinearView.limit.pitch($('#hdn_minFov').val(), $('#hdn_minFov').val())
            );
    } else {
        limiter = Marzipano.util.compose
            (
                Marzipano.RectilinearView.limit.vfov($('#hdn_minFov').val(), $('#hdn_maxFov').val()),
                Marzipano.RectilinearView.limit.hfov($('#hdn_minFov').val(), $('#hdn_maxFov').val()),
                Marzipano.RectilinearView.limit.pitch(-Math.PI / 2, Math.PI / 2)
            );
    }
    var settings = {
        "mouseViewMode": "drag",
        "autorotateEnabled": false,
        "fullscreenButton": true,
        "viewControlButtons": false
    };
    var fullscreenToggleElement = document.querySelector('#fullscreenToggles');
    if (fullscreenToggleElement != null) {
        fullscreenToggleElement.addEventListener('click', toggleFullscreen);
    }
    var fullscreenToggleElementTour2 = document.querySelector('#fullscreenTogglesTour2');
    if (fullscreenToggleElementTour2 != null) {
        fullscreenToggleElementTour2.addEventListener('click', toggleFullscreen);
    }
    $('#div_Marzipano').bind('drag', function () {
        $('.line').css({ 'width': '0px', 'height': '0px', 'background-color': '' });
        screenfull.toggle(this);
    })
    // DOM elements for view controls.
    //var viewUpElement = document.querySelector('#viewUp');
    //var viewDownElement = document.querySelector('#viewDown');
    //var viewLeftElement = document.querySelector('#viewLeft');
    //var viewRightElement = document.querySelector('#viewRight');
    // Dynamic parameters for controls.
    var velocity = 0.7;
    var friction = 3;

    // Associate view controls with elements.
    //controls.registerMethod('upElement', new Marzipano.ElementPressControlMethod(viewUpElement, 'y', -velocity, friction), true);
    //controls.registerMethod('downElement', new Marzipano.ElementPressControlMethod(viewDownElement, 'y', velocity, friction), true);
    //controls.registerMethod('leftElement', new Marzipano.ElementPressControlMethod(viewLeftElement, 'x', -velocity, friction), true);
    //controls.registerMethod('rightElement', new Marzipano.ElementPressControlMethod(viewRightElement, 'x', velocity, friction), true);
    $("#viewMap").click(function () {

        $('#marzimapPopUp').modal("show");
    });


    $('#pano').mousedown(function (e) {
        isMouseMove = true;
        if (isPreview == false && MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.allowdrawline == true) {
            if (editMode.get() == "hide") {
                var parentOffset = $(this).parent().offset();
                //var pressPosition = { x: e.clientX, y: e.clientY }
                var pressPosition = { x: e.pageX - parentOffset.left, y: e.pageY - parentOffset.top }

                var obj = view.screenToCoordinates(pressPosition);
                var position = {
                    yaw: obj.yaw,
                    pitch: obj.pitch,
                    fov: view.fov()
                };
                hotSpotCount += 1;

                addLineSpotOnPosition(position);

                var lineHeight = $('#txtWidth').val() == "" ? 5 : $('#txtWidth').val() == "0" ? 5 : $('#txtWidth').val();
                var lineColor = $('#hdn_rowcolor').val();
                var lineStyle = $('input[name=lineType]:checked').val();
                if (hotSpotCount > 1) {
                    //arrHotSpot.push({ 'point1': point1.id, 'point2': point2.id, 'lineId': lineId, 'point1Yaw': point1.yaw, 'point1Pitch': point1.pitch, 'point1Fov': point1.fov, 'point2Yaw': point2.yaw, 'point2Pitch': point2.pitch, 'point2Fov': point2.fov, 'lineHeight': lineHeight, 'lineBackColor': lineColor, 'lineStyle': lineStyle, isLineDraw: true });

                    var newLinePointArr = [];
                    newLinePointArr.push({ point1Yaw: point1.yaw, point1Pitch: point1.pitch, point1Fov: point1.fov });
                    newLinePointArr = addLineHotSpotArray($('#' + point1.id).offset(), $('#' + point2.id).offset(), newLinePointArr);
                    var point3 = {
                        yaw: newLinePointArr[parseInt(newLinePointArr.length / 2)].point1Yaw,
                        pitch: newLinePointArr[parseInt(newLinePointArr.length / 2)].point1Pitch,
                        fov: newLinePointArr[parseInt(newLinePointArr.length / 2)].point1Fov,
                    };
                    addNewLinePoint(point3, HspotIndex, lineId, 2);
                    newLinePointArr.push({ point1Yaw: point2.yaw, point1Pitch: point2.pitch, point1Fov: point2.fov });
                    //linepointspots = linepointspots.concat(newLinePointArr);
                    arrHotSpot.push({ 'point1': point1.id, 'point2': point2.id, 'lineId': lineId, 'point1Yaw': point1.yaw, 'point1Pitch': point1.pitch, 'point1Fov': point1.fov, 'point2Yaw': point2.yaw, 'point2Pitch': point2.pitch, 'point2Fov': point2.fov, 'point3Yaw': point3.yaw, 'point3Pitch': point3.pitch, 'point3Fov': point3.fov, 'lineHeight': lineHeight, 'lineBackColor': lineColor, 'lineStyle': lineStyle, isLineDraw: true });
                    drawSingleLine(point1, point2, lineId, lineHeight, lineColor, lineStyle, arrHotSpot.length - 1);
                    isMouseMove = false;
                    //drawLine();
                }
            }
            else if (editMode.get() != 'hide') {
                $('.circle').remove()
            }
        }
    });
    //=============== Color Picker
    if (window.location.href.toLowerCase().indexOf('dynamicdroneviewbank.aspx') > -1) {
        $('#colorSelector').ColorPicker({
            color: '#0000ff',
            onShow: function (colpkr) {
                $(colpkr).fadeIn(500);
                return false;
            },
            onHide: function (colpkr) {
                $(colpkr).fadeOut(500);
                return false;
            },
            onChange: function (hsb, hex, rgb) {
                $('#divLineColor').css('backgroundColor', '#' + hex);
                $('#hdn_rowcolor').val('#' + hex);
            }
        });
    }
    'use strict';
    (function () {

        function EditMode() {
            var self = this;

            this.shiftPressed = false;
            this.ctrlPressed = false;

            window.addEventListener('keydown', function (e) {
                var previousEditMode = self.get();
                if (e.keyCode === 16) {
                    self.shiftPressed = true;
                }
                if (e.keyCode === 17) {
                    self.ctrlPressed = true;
                }
                if (self.get() !== previousEditMode) {
                    self.emit('changed');
                }
            });

            window.addEventListener('keyup', function (e) {
                var previousEditMode = self.get();
                if (e.keyCode === 16) {
                    self.shiftPressed = false;
                }
                if (e.keyCode === 17) {
                    self.ctrlPressed = false;
                }
                if (self.get() !== previousEditMode) {
                    self.emit('changed');
                }
            });

            window.addEventListener('blur', function () {
                var previousEditMode = self.get();
                self.shiftPressed = false;
                self.ctrlPressed = false;
                if (self.get() !== previousEditMode) {
                    self.emit('changed');
                }
            });
        }

        Marzipano.dependencies.eventEmitter(EditMode);

        EditMode.prototype.get = function () {
            if (this.shiftPressed) {
                return 'hide';
            } else if (this.ctrlPressed) {
                return 'show';
            } else {
                return false;
            }
        }
        window.editMode = new EditMode();
    })();

    //$(document).ready(function () {
    //    if (skinid() != 52) {
    //        $("#info_popUp").click(function () {
    //            $("#info_popUp").hide();
    //        });
    //    }
    //    else { $('.infocloseIcon').hide(); }
    //    $("#info_popUpFast").click(function () {
    //        $("#info_popUpFast").hide();
    //    });
    //});
    var autorotateToggleElement = document.querySelector('#autorotateToggles');

    if (viewSnipper() != true) {
        if (pageName.toLowerCase().indexOf("tour.aspx") > -1) {
            if (toureSkinType == 2) {
                autorotateToggleElement = document.querySelector('#autorotateTogglesTour2');
            }
        }
        // Set up autorotate, if enabled.
        autorotate = Marzipano.autorotate({ yawSpeed: 0.03, targetPitch: null, targetFov: Math.PI / 2 });
        if (settings.autorotateEnabled) {
            autorotateToggleElement.classList.add('enabled');
        }
        if (autorotateToggleElement != null) {
            autorotateToggleElement.addEventListener('click', toggleAutorotate);
        }
    }
    if (allowPanoClick == true) {
        if (autorotateToggleElement != undefined) {

            var panoQuery = document.querySelector('#pano');
            if (panoQuery != null) {
                if (mql.matches) {
                    panoQuery.addEventListener('touchstart', function () {
                        autorotateToggleElement.classList.remove('enabled');
                        stopAutorotate();
                    });
                }
                else {
                    panoQuery.addEventListener('click', function () {
                        autorotateToggleElement.classList.remove('enabled');
                        stopAutorotate();
                    });
                    $('#pano').dblclick(function (e) {
                        autorotateToggleElement.classList.add('enabled');
                        startAutorotate();
                    })
                }
            }
        }
    }

    $('#pano').mouseup(function (e) {
        isMouseMove = false;
        if (isPreview == false && MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.allowdrawline == true) {
            if (editMode.get() != 'hide' && hotSpotCount > 0) {
                //arrPoly.push({ arrHotSpot: arrHotSpot });
                hotSpotCount = 0;
                //arrHotSpot = [];
                //drawLine();
            }
            else if (editMode.get() != 'hide') {
                drawLine();
            }
        }
    });

}
// Display scene.
function displayMarzipanoView() {
    if (typeof viewer != 'undefined') { viewer.destroy(); }
    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();

}

function toggleFullscreen() {
    $('#div_Marzipano').trigger('drag');
}
var viewerElement = document.getElementById('pano');


//============== hotspot region starts hear ============
var point1 = {};
var point2 = {};
var lineId = null;
var arrPoly = [];
var arrHotSpot = [];
var linepointspots = [];
var hotSpotCount = 0;
var editMode = window.editMode;

function getImageUrl(ImageName) {
    var imagedetail = {};
    $.each(MarzipanoSkinDetail.data.hotSpotImagesList, function (index, HotSpotImageData) {
        if (HotSpotImageData.name == ImageName) {
            imagedetail.imageSrc = SkinBaseUrl() + "images/" + HotSpotImageData.imageName;
            imagedetail.imageHeight = HotSpotImageData.imageHeight;
            imagedetail.imageWidth = HotSpotImageData.imageWidth;
            return false;
        }
    })
    return imagedetail;
}
function closeVideo() {
    $('#videoContainer_iframe').attr('src', '');
    $('#videoContainer1').hide();

}
function popUpVideo(video, hptspotId) {
    $('#videoContainer_iframe').attr('src', video);
    $('#videoContainer1').show();//css('style', 'position: absolute; left: 50%; top: 50%; transform-origin: 50% 50% 0px;  z-index:99999; transition: none; visibility:inherit;');
    $('#videoContainer_iframe').removeClass('tourinvideo');
    if (video.indexOf('fastout') > -1) {//to add fake class to get whether tour or vr-photo is added in video hotspot
        $('#videoContainer_iframe').addClass('tourinvideo');
    }
    autorotateToggleElement.classList.remove('enabled');
    stopAutorotate();
    return false;
}
function popUpComments(commentsImageName, text, hptspotId) {
    var commentsDivId = "comments_" + hotspotId;
    $("div").remove('#' + commentsDivId);
    //var Wrapper = "<div id=" + commentsDivId + " style='position:absolute;left: 0px;top:  0px;width: 300px;height: 100px;background: #ffffff;border: 3px solid #71a5cb;text-align: left;padding: 0px 1px 0px 1px;overflow: hidden;overflow-y: auto;padding:10px; margin-top:-48px; margin-left:20px;'>" + text + "</div>";
    //$(hptspotId).parent().append(Wrapper);


    var commentsDivId = '<div class="ggskin ggskin_text" style="height: 130px; opacity: 1; position: absolute;  visibility: inherit; width: 283px; transform-origin: 0% 50% 0px; transition: all 500ms ease-out 0ms;';

    if (commentsImageName.search('right') >= 0) {
        commentsDivId += 'left: 0px;top: -53px;';
    }
    else if (commentsImageName.search('left') >= 0) {
        commentsDivId += 'left: 32px;top: -1px;';
    }
    else {
        commentsDivId += 'left: 32px;top: -53px;';
    }
    commentsDivId += '">';
    commentsDivId += '<div style="position:absolute;left: 0px;top:  0px;width: 264px;height: 110px;background: #ffffff;';
    //if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hotspotTitleBorderColor.toLowerCase() != '#ffffff') {
    commentsDivId += 'border: 3px solid ' + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hotspotTitleBorderColor + ';';
    //}
    //else {
    //    iconTitleStyle += "border:0px;";

    //}
    commentsDivId += 'text-align: left;padding: 0px 1px 0px 1px;overflow: hidden;overflow-y: auto;padding:10px;font-family:' + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hotspottitlefont + '" class="commentsPcontent">';
    commentsDivId += text;
    commentsDivId += '</div>';
    //if (viewSnipper() == true) {
    //    commentsDivId += '<div class="ggskin ggskin_image closeComments" style="cursor: pointer; height: 14px; left: 264px; opacity: 1; position: absolute; top: 0px; visibility: inherit; width: 15px; transform-origin: 0% 0% 0px; transition: all 500ms ease-out 0ms;" onclick="closeComments(this);" onTouchstart="closeComments(this);">';
    //} else {
    commentsDivId += '<div class="ggskin ggskin_image closeComments" style="cursor: pointer; height: 14px; left: 264px; opacity: 1; position: absolute; top: 0px; visibility: inherit; width: 15px; transform-origin: 0% 0% 0px; transition: all 500ms ease-out 0ms;" onclick="closeComments(this);" onTouchstart="closeComments(this);">';
    //}
    //commentsDivId += '<img class="ggskin ggskin_image" src="' + SkinBaseUrl() + 'images/btnpop.png" style="position: absolute;top: 0px;left: 26px;width: 100%;height: 100%;-webkit-user-drag:none;" >';
    if (pageName.toLowerCase().indexOf("previewtour.aspx") == -1) {
        commentsDivId += '<img class="ggskin ggskin_image" src="' + SkinBaseUrl() + 'images/btnpop.png" style="position: absolute;top: 0px;left: 26px;width: 100%;height: 100%;-webkit-user-drag:none;" >';
    }
    else {
        commentsDivId += '<img class="ggskin ggskin_image" src="' + SkinBaseUrl() + 'images/btnpop.png" style="position: absolute;top: 0px;left: 6px;width: 100%;height: 100%;-webkit-user-drag:none;" >';
    }
    commentsDivId += '</div>';
    commentsDivId += '</div>';
    $(hptspotId).parent().append(commentsDivId);
}

function openPopupInfo() {
    $("#divScreenShot").modal("show");
}
//=============== Draw line ===========
function lineDistance(x, y, x0, y0) {
    return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};
function drawLine() {
    if (isMouseMove == false) {
        if (arrHotSpot.length > 0) {
            $.each(arrHotSpot, function (indexHotspot, hotspotData) {
                //if (hotspotData.isLineDraw == false) {
                //var pointA = $('#' + hotspotData.point1).offset();
                //var pointB = $('#' + hotspotData.point2).offset();
                //if (pointB.left != 0 && pointA.top != 0 && pointA.left != 0 && pointB.top != 0) {
                //    stopAutorotate();
                drawSingleLine({ id: hotspotData.point1, fov: hotspotData.point1Fov, yaw: hotspotData.point1Yaw, pitch: hotspotData.point1Pitch },
                    { id: hotspotData.point2, fov: hotspotData.point2Fov, yaw: hotspotData.point2Yaw, pitch: hotspotData.point2Pitch }, hotspotData.lineId, hotspotData.lineHeight, hotspotData.lineBackColor, hotspotData.lineStyle, indexHotspot)
                //startAutorotate();
                //}
                //}
            });
        }
    }
}
function drawSingleLine(a, b, lineId, lineHeight, lineColor, lineStyle, lineIndex) {
    if (typeof a != 'undefined' & typeof b != 'undefined') {
        //var a = $('.info-hotspot-icon')[index - 1], b = $('.info-hotspot-icon')[index]
        var line = $("#" + lineId);
        var pointA = $('#' + a.id).offset();
        var pointB = $('#' + b.id).offset();
        //var canvasWidth = $('#pano').offset().left + $('#pano').width();
        //var canvasHeight = $('#pano').offset().top + $('#pano').height();
        if (typeof pointA != 'undefined' && typeof pointB != 'undefined' && pointA != null && pointB != null) {
            if ($('#' + a.id).css('display') != 'none' || $('#' + b.id).css('display') != 'none') {
                try {
                    var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
                    var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);
                    if ($('#' + a.id).css('display') == 'none' || pointA.top <= 10 || pointA.left > 8000) {
                        var newpoint = getNextPointOnScreen($($('#' + b.id).find('div')[0]).attr('id'));
                        if (typeof newpoint == 'undefined') {
                            angle = undefined;
                        }
                        else {
                            pointA = $('#' + newpoint).offset();
                            a.id = newpoint;
                            angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
                        }
                    }
                    else if ($('#' + b.id).css('display') == 'none' || pointB.top <= 10 || pointB.left > 8000) {
                        var newpoint = getNextPointOnScreen($($('#' + b.id).find('div')[0]).attr('id'))
                        if (typeof newpoint == 'undefined') {
                            angle = undefined;
                        }
                        else {
                            pointB = $('#' + newpoint).offset();
                            b.id = newpoint;
                            line = $('#' + a.id).find('div')[1];
                            newLineId = '';
                            angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
                        }
                        //angle -= 180;
                    }
                    else {
                        var newpoint = getNextPointOnScreen(lineId)
                        $($('#' + a.id).find('div')[1]).css({ 'border': '0px', 'width': 0, 'background-color': '' });
                        $('#' + newpoint).css({ 'border': '0px', 'width': 0, 'background-color': '' });
                    }
                    if ($('#' + a.id).css('display') != 'none' && $('#' + b.id).css('display') != 'none' && angle != undefined) {
                        var pointAcenterX = $('#' + a.id).width() / 2;
                        var pointAcenterY = $('#' + a.id).height() / 2;
                        var pointBcenterX = $('#' + b.id).width() / 2;
                        var pointBcenterY = $('#' + b.id).height() / 2;
                        var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);
                        // Set Angle
                        if (distance <= 15000) {
                            $(line).css('transform', 'rotate(' + angle + 'deg)');
                            // Set Width
                            $(line).css('width', distance + 'px');
                            $(line).css({ 'border-top': lineHeight + 'px ' + lineStyle + ' ' + lineColor });
                            // Set Position
                            $(line).css('position', 'absolute');

                            //$(line).offset({ top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX });


                            if (angle < 0 && pointB.left > pointA.left) {
                                $(line).offset({ top: pointB.top + pointAcenterY, left: pointA.left + pointAcenterX });
                                $(line).offset({ top: pointB.top + pointAcenterY, left: pointA.left + pointAcenterX });
                            }
                            else if (angle < 0 && pointB.left < pointA.left) {
                                $(line).offset({ top: pointB.top + pointAcenterY, left: pointB.left + pointAcenterX });
                                $(line).offset({ top: pointB.top + pointAcenterY, left: pointB.left + pointAcenterX });
                            }
                            else if (pointB.left < pointA.left) {
                                $(line).offset({ top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX });
                                $(line).offset({ top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX });
                            } else {
                                $(line).offset({ top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX });
                                $(line).offset({ top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX });
                            }
                        }
                    }
                    else {
                        $(line).css({ 'border': '0px', 'width': 0, 'background-color': '' });
                    }
                } catch (e) {

                }
            }
            else {
                $(line).css({ 'border': '0px', 'width': 0, 'background-color': '' });
            }
        }
        else {
            $(line).css({ 'border': '0px', 'width': 0, 'background-color': '' });
        }
    }
}
function addLineHotSpotArray(pointA, pointB, newLinePointArr) {
    if (pointB.left != 0 && pointA.top != 0 && pointA.left != 0 && pointB.top != 0) {
        var parentOffset = $('#pano').offset();
        var p1 = {}, p2 = {};
        if (pointA.left > pointB.left) {
            p2 = { 'x': pointA.left - parentOffset.left, 'y': pointA.top - parentOffset.top };
            p1 = { 'x': pointB.left - parentOffset.left, 'y': pointB.top - parentOffset.top };
        }
        else {
            p1 = { 'x': pointA.left - parentOffset.left, 'y': pointA.top - parentOffset.top };
            p2 = { 'x': pointB.left - parentOffset.left, 'y': pointB.top - parentOffset.top };
        }
        var pxd = p2.x - p1.x;
        var pyd = p2.y - p1.y;
        var steps = Math.max(p1.x, p1.y, p2.x, p2.y);
        var coords = [];

        var dotcount = 1;
        for (var i = 0; i <= steps; i++) {
            var pressPosition = { x: p1.x += pxd / steps, y: p1.y += pyd / steps }
            var obj = view.screenToCoordinates(pressPosition);
            var position = {
                yaw: obj.yaw,
                pitch: obj.pitch,
                fov: view.fov()
            };
            hotSpotCount += 1;
            newLinePointArr.push({ point1Yaw: obj.yaw, point1Pitch: obj.pitch, point1Fov: view.fov() });
        }
    }
    return newLinePointArr;
}

var cnt = 1;
var newLineId = ''
//============ hot spot region ==============
function addSpotOnPosition(target, hotspoturl, sceneId, marzipanoHotspot, showIcon, isLast, customClassName, layerId) {
    var iconWrapper = document.createElement('div');
    iconWrapper.classList.add('info-hotspot-icon-wrapper');
    if (customClassName != undefined) {
        iconWrapper.classList.add(customClassName);
    }
    var wrapperId = "hotspoticonwrapper_" + marzipanoHotspot.HspotIndex;
    iconWrapper.setAttribute("id", wrapperId);
    marzipanoHotspot.wrapperId = wrapperId;
    var hs = 'z-index:9999;';
    if (marzipanoHotspot.imagePath.indexOf("hs_centerpicture") > -1 || marzipanoHotspot.imagePath.indexOf("hs_leftpicture") > -1 || marzipanoHotspot.imagePath.indexOf("hs_rightpicture") > -1) {
        hs = 'z-index:99999;';
    }

    iconWrapper.setAttribute('style', hs);
    var imageSrc = "", imagedetail;
    var icon;
    var childLabel = document.createElement('div');
    //===== for tour skin 2 and indoor panorama show animated icon ==
    if (toureSkinType == 2 && viewtype == 1 && marzipanoHotspot.imagePath.indexOf('hs_hview') > -1) {
        var iconAnimationWrapper = document.createElement('div');
        iconAnimationWrapper.classList.add('textInfo');

        var animationhotspot = document.createElement('div');
        animationhotspot.classList.add('hotspot');

        var animationhotspotout = document.createElement('div');
        animationhotspotout.classList.add('out');
        animationhotspot.appendChild(animationhotspotout);

        var animationhotspotin = document.createElement('div');
        animationhotspotin.classList.add('in');
        animationhotspot.appendChild(animationhotspotin);

        var animationhotspotin_2 = document.createElement('div');
        animationhotspotin_2.classList.add('in-2');
        animationhotspot.appendChild(animationhotspotin_2);

        iconAnimationWrapper.appendChild(animationhotspot);
        hotspotId = "hotspotId_" + marzipanoHotspot.HspotIndex;

        iconAnimationWrapper.setAttribute("id", hotspotId);
        iconWrapper.appendChild(iconAnimationWrapper);
        if (marzipanoHotspot.imagePath.indexOf('hs_hviewhide') > -1) {
            imagedetail = getImageUrl(marzipanoHotspot.imagePath.replace("hs_hviewhide", "hs_hview"));
            imagedetail.imageSrc = imagedetail.imageSrc.replace("hs_hview", "hs_hviewhide");
        }
        else {
            imagedetail = getImageUrl(marzipanoHotspot.imagePath)
        }
    }
    else {
        if (marzipanoHotspot.imagePath.indexOf('hs_hviewhide') > -1) {
            imagedetail = getImageUrl(marzipanoHotspot.imagePath.replace("hs_hviewhide", "hs_hview"));
            imagedetail.imageSrc = imagedetail.imageSrc.replace("hs_hview", "hs_hviewhide");
        }
        else if (marzipanoHotspot.imagePath.indexOf('companylogo') > -1 && viewtype != 0) {            
            iconWrapper.removeAttribute('class');
            iconWrapper.classList.add('companywrapper');
            $('.companywrapper>img').addClass('bottomlogoimg');
            var logo = "";
            if (typeof (isCustomLogo) != 'undefined' && isCustomLogo == "True") {
                logo = customLogoUrl;
            }
            else {
                logo = "images/bottomlogo.png";
            }
            //imagedetail = { imageSrc: logo, imageHeight: 112, imageWidth: 254 }
            imagedetail = { imageSrc: logo, imageHeight: customLogoHeight, imageWidth: customLogoWidth }
        }
        else {
            imagedetail = getImageUrl(marzipanoHotspot.imagePath)
        }
        //============ picture hotspot =========
        if (marzipanoHotspot.imagePath.indexOf("hs_centerpicture") > -1 || marzipanoHotspot.imagePath.indexOf("hs_leftpicture") > -1 || marzipanoHotspot.imagePath.indexOf("hs_rightpicture") > -1) {
            icon = document.createElement('div');
            icon.classList.add('reveal');
            //=========== camera image ===========
            var iconPictureImage;
            iconPictureImage = document.createElement('img');
            iconPictureImage.src = imagedetail.imageSrc;//'images/blue_droneview.png';
            hotspotId = "hotspotId_" + marzipanoHotspot.HspotIndex;
            iconPictureImage.setAttribute("id", hotspotId);
            marzipanoHotspot.hotspotId = hotspotId;
            icon.appendChild(iconPictureImage);

            //============== reveal-content div ===========
            var revealcontent = document.createElement('div');
            revealcontent.classList.add('reveal-content');
            var revealcontent1 = document.createElement('div');
            revealcontent1.classList.add('reveal-content-inn');
            revealcontent.appendChild(revealcontent1);
            //============= image picture ===============
            var vrPictureImage = document.createElement('img');
            vrPictureImage.src = hotspoturl;//'images/blue_droneview.png';
            revealcontent1.appendChild(vrPictureImage);

            var revealText = document.createElement('p');
            revealText.setAttribute("id", hotspotId + "_title");
            var revealTextSpan = document.createElement('span');
            revealTextSpan.innerHTML = marzipanoHotspot.title;
            revealText.appendChild(revealTextSpan);
            revealcontent.appendChild(revealText);
            icon.setAttribute("id", 'reveal_' + hotspotId);
            iconWrapper.appendChild(icon);
            iconWrapper.appendChild(revealcontent);

        }
        else if (marzipanoHotspot.imagePath.indexOf('companylogo') == -1) {
            icon = document.createElement('img');
            icon.src = imagedetail.imageSrc;//'images/blue_droneview.png';

            hotspotId = "hotspotId_" + marzipanoHotspot.HspotIndex;
            icon.setAttribute("id", hotspotId);
            marzipanoHotspot.hotspotId = hotspotId;
            icon.classList.add('info-hotspot-icon');
            iconWrapper.appendChild(icon); 
            if (marzipanoHotspot.imagePath.indexOf("hs_center") > -1 || marzipanoHotspot.imagePath.indexOf("hs_left") > -1 || marzipanoHotspot.imagePath.indexOf("hs_right") > -1) {
                if (marzipanoHotspot.imagePath.indexOf("Link") > -1 || marzipanoHotspot.imagePath.indexOf("Video") > -1 || marzipanoHotspot.imagePath.indexOf("comment") > -1 || marzipanoHotspot.imagePath.indexOf("Droneview") > -1 || marzipanoHotspot.imagePath.indexOf("Vr") > -1 || marzipanoHotspot.title.toLowerCase().indexOf('for sale') > -1 || marzipanoHotspot.title.toLowerCase().indexOf('till salu') > -1 || marzipanoHotspot.title.toLowerCase().indexOf(jQuery.parseHTML('myyd&auml;&auml;n')[0].data) > -1) {
                    var classname = 'element';
                    var outerclass = 'hotspot-outer'
                    if (marzipanoHotspot.imagePath.indexOf("Droneview") > -1)
                    {
                        outerclass = 'hotspot-outer-helicopter';
                        classname = 'elementhelicopter';
                    }
                    else if (marzipanoHotspot.imagePath.indexOf("Vr") > -1) {
                        outerclass = 'hotspot-outer-helicopter';
                        classname = 'element360';
                        if (marzipanoHotspot.imagePath.indexOf("hs_left") > -1) {
                            classname = 'element360left';
                        } else if (marzipanoHotspot.imagePath.indexOf("hs_right") > -1) {
                            classname = 'element360right';
                        }
                    }
                    else if (marzipanoHotspot.imagePath.indexOf("hs_left") > -1) {
                        classname = 'elementleft';
                    }else if (marzipanoHotspot.imagePath.indexOf("hs_right") > -1) {
                        classname = 'elementright';
                    } 
                    var divAnimation = document.createElement('div');
                    divAnimation.classList.add(outerclass);
                    var divInnerAnimation = document.createElement('div');
                    divInnerAnimation.classList.add(classname);
                    divAnimation.appendChild(divInnerAnimation);
                    iconWrapper.appendChild(divAnimation);
                }
            }
        }
        else if (marzipanoHotspot.imagePath.indexOf('companylogo') > -1 && viewtype != 0) {
            if ($("#hdTourid").val() != '10009') {
                icon = document.createElement('img');
                icon.src = imagedetail.imageSrc;//'images/blue_droneview.png';

                hotspotId = "hotspotId_" + marzipanoHotspot.HspotIndex;
                icon.setAttribute("id", hotspotId);
                marzipanoHotspot.hotspotId = hotspotId;
                icon.classList.add('info-hotspot-icon');
                icon.classList.remove();
                icon.classList.add('bottomlogoimg');
                iconWrapper.appendChild(icon);
            }
        }
    }
    var iconStyle = "";

    var iconTitleStyle = "";
    if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hotspotTitleBorderColor != null) {
        if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder == true) {
            iconTitleStyle += "border:4px solid " + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hotspotTitleBorderColor + ";";
        }
        //}
        iconTitleStyle += "color:" + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hotspotTitleForeColor + ";font-family:" + MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.hotspottitlefont + ";";
    }
    if (marzipanoHotspot.title == "") {
        iconTitleStyle += "display:none;";
    }
    if (marzipanoHotspot.imagePath.indexOf("hs_centerpicture") > -1 || marzipanoHotspot.imagePath.indexOf("hs_leftpicture") > -1 || marzipanoHotspot.imagePath.indexOf("hs_rightpicture") > -1) {

    }
    else if (marzipanoHotspot.imagePath.indexOf("hs_left") > -1) {
        if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder == false) {
            iconTitleStyle += "padding:1px 4px 1px 14px;";
        }
        else {
            iconTitleStyle += "padding:1px 4px 1px 13px;";
        }
        childLabel.classList.add('hotspotlabel-left');
        if (skinid() == "94") {
            iconStyle = 'position:absolute; top:-' + parseInt(imagedetail.imageHeight) + 'px; left:-' + (parseInt(imagedetail.imageWidth) / 2 - 5) + 'px;';
        } else {
            iconStyle = 'position:absolute; top:-' + parseInt(imagedetail.imageHeight) + 'px; left:-5px;';
        }
        if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder == true) {
            if (skinid() == "94") {
                iconTitleStyle += 'position:relative; width:auto; top:-' + (parseInt(imagedetail.imageHeight) / 2) + 'px; left:' + (parseInt(imagedetail.imageWidth) - 19) + 'px;';
            } else {
                iconTitleStyle += 'position:relative; width:auto; top:-' + (parseInt(imagedetail.imageHeight) - 2) + 'px; left:' + (parseInt(imagedetail.imageWidth) - 19) + 'px;';
            }
        }
        else {
            if (skinid() == "94") {
                iconTitleStyle += 'position:relative; width:auto; top:-' + ((parseInt(imagedetail.imageHeight) / 2) - 5) + 'px; left:' + (parseInt(imagedetail.imageWidth) / 2 - 19) + 'px;';
            }
            else {
                iconTitleStyle += 'position:relative; width:auto; top:-' + (parseInt(imagedetail.imageHeight) - 5) + 'px; left:' + (parseInt(imagedetail.imageWidth) - 17) + 'px;';
            }
        }
    }
    else if (marzipanoHotspot.imagePath.indexOf("hs_right") > -1) {
        if (skinid() == "94") {
            iconStyle = 'position:absolute; top:-' + (parseInt(imagedetail.imageHeight) - 1) + 'px; left:-' + (parseInt(imagedetail.imageWidth) / 2 - 5) + 'px;';
        } else {
            iconStyle = 'position:absolute; top:-' + (parseInt(imagedetail.imageHeight) - 1) + 'px; left:-' + (parseInt(imagedetail.imageWidth) - 5) + 'px;';
        }
        if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder == true) {
            childLabel.classList.add('hotspotlabel-right-border');
        }
        else {
            skinid() == "94" ? childLabel.classList.add('hotspotlabel-right-round') : childLabel.classList.add('hotspotlabel-right');            
        }
    }
    else if (marzipanoHotspot.imagePath.indexOf("companylogo") > -1) {
        iconStyle = 'position:absolute; top:-' + parseInt(imagedetail.imageHeight) / 2 + 'px; left:-' + parseInt(imagedetail.imageWidth) / 2 + 'px;width:' + parseInt(imagedetail.imageWidth) + 'px';
    }
    else {
        iconTitleStyle += "padding:1px 6px;";
        iconStyle = 'position:absolute; top:-' + parseInt(imagedetail.imageHeight) + 'px; left:-' + parseInt(imagedetail.imageWidth) / 2 + 'px;';
        if (viewSnipper() != true && MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder == false) {
            if (toureSkinType == 2 && viewtype == 1 && marzipanoHotspot.imagePath.indexOf('hs_hview') > -1) {
                iconTitleStyle += 'position:relative; left:-50%; bottom:67px !important; float:left;';
            }
            else {
                iconTitleStyle += 'position:relative; left:-50%; bottom:' + ((skinid() == "94" && marzipanoHotspot.imagePath.indexOf("hs_hview") == -1) ? (parseInt(imagedetail.imageHeight) + 5) : (parseInt(imagedetail.imageHeight) + 22)) + 'px !important;';
            }
        }
        else if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder == false) {
            iconTitleStyle += 'position:relative; left:-50%; bottom:' + (skinid() == "94" ?(parseInt(imagedetail.imageHeight)+5):(parseInt(imagedetail.imageHeight) + 22)) + 'px !important;';
        }
        else {
            iconTitleStyle += 'position:relative; left:-50%; bottom:' + (skinid() == "94" ?(parseInt(imagedetail.imageHeight)): (parseInt(imagedetail.imageHeight) + 31)) + 'px !important;';
        }
    }

    if (marzipanoHotspot.imagePath.indexOf("hs_hview") > -1 || marzipanoHotspot.imagePath.indexOf("Video") > -1 || marzipanoHotspot.imagePath.toLowerCase().indexOf("comment") > -1 || marzipanoHotspot.imagePath.indexOf("Link") > -1 || marzipanoHotspot.imagePath.toLowerCase().indexOf("droneview") > -1 || marzipanoHotspot.imagePath.toLowerCase().indexOf("vr") > -1) {
        iconStyle += 'cursor: pointer;';
    }
    if (marzipanoHotspot.imagePath.indexOf("hs_right") == -1) {
        iconTitleStyle += "white-space: nowrap; background: #fff;  z-index:-1;";
    }
    if (icon != undefined) {
        icon.setAttribute('style', iconStyle);
    }
    marzipanoHotspot.hotspotTitleId = hotspotId + "_title";
    if (imagedetail.imageSrc != undefined && imagedetail.imageSrc.indexOf("picture") == -1) {
        childLabel.setAttribute('style', iconTitleStyle);
        childLabel.setAttribute("id", hotspotId + "_title");
        var childLabelSpan = document.createElement('span');
        childLabelSpan.innerHTML = marzipanoHotspot.title;
        childLabel.appendChild(childLabelSpan);
        iconWrapper.appendChild(childLabel);
    }
    if (layerId == undefined) {
        sceneId.hotspotContainer().createHotspot(iconWrapper, marzipanoHotspot.position);
    }
    else {
        if (layerId == "") {
            var _hotspotContainer = new Marzipano.HotspotContainer(viewer._controlContainer, viewer._stage, view, viewer._renderLoop, { rect: layerId.effects().rect });
            _hotspotContainer.createHotspot(iconWrapper, marzipanoHotspot.position);
        } else {
            var _hotspotContainerRight = new Marzipano.HotspotContainer(viewer._controlContainer, viewer._stage, view, viewer._renderLoop, { rect: layerId.effects().rect });
            _hotspotContainerRight.createHotspot(iconWrapper, marzipanoHotspot.position);
        }
    }
    if (marzipanoHotspot.imagePath.indexOf("picture") > -1) {
        if (mql.matches) {
            //if (navigator.userAgent.toLowerCase().indexOf("iphone") == -1 && navigator.userAgent.toLowerCase().indexOf("ipad") == -1) {
            var hotspotQuery = document.querySelector('#reveal_' + hotspotId);
            hotspotQuery.addEventListener('touchstart', function () {
                $('.info-hotspot-icon-wrapper').css('z-index', '9999');
                $(this).parent().css('z-index', '99999');
                // for android only
                if (navigator.userAgent.toLowerCase().indexOf("iphone") == -1 && navigator.userAgent.toLowerCase().indexOf("ipad") == -1) {
                    //$(this).hasClass('hovered') == false ? $(this).addClass('hovered') : $(this).removeClass('hovered');
                    if ($(this).hasClass('hovered') == false) {
                        $('.reveal').removeClass('hovered');
                        $(this).addClass('hovered');
                    }
                    else {
                        $('.reveal').removeClass('hovered');
                    }
                }
            });
            //}
        }
        else {
            $('.reveal').mouseover(function () {
                $('.info-hotspot-icon-wrapper').css('z-index', '9999');
                $(this).parent().css('z-index', '99999');
            });
        }
        //iconTitleStyle += " position:relative; padding:1px 6px;"
        //$('#' + hotspotId + '_title').attr('style', iconTitleStyle);
        resetHotspotPosition(hotspotId, imagedetail);

    }

    if (marzipanoHotspot.imagePath.indexOf("Video") > -1 || marzipanoHotspot.imagePath.indexOf("Droneview") > -1 || marzipanoHotspot.imagePath.indexOf("Vr") > -1) {
        if (mql.matches) {
            var hotspotQuery = document.querySelector('#' + hotspotId);
            hotspotQuery.addEventListener('touchstart', function () {
                return popUpVideo(hotspoturl, this);
            });
            var divanimation = $('#' + hotspotId).parent().find('.hotspot-outer');
            $(divanimation).on('touchstart', function () {
                return popUpVideo(hotspoturl, this);
            });
        }
        else {
            $('#' + hotspotId).click(function () {
                return popUpVideo(hotspoturl, this);
            });
            $('#' + hotspotId).parent().find('.hotspot-outer').click(function () {
                return popUpVideo(hotspoturl, this);
            });
        }
    }
    else if (marzipanoHotspot.imagePath.toLowerCase().indexOf("comment") > -1) {
        if (mql.matches) {
            var hotspotQuery = document.querySelector('#' + hotspotId);
            hotspotQuery.addEventListener('touchstart', function () {
                return popUpComments(marzipanoHotspot.imagePath, hotspoturl, this)
            });
            var divanimation = $('#' + hotspotId).parent().find('.hotspot-outer');
            $(divanimation).on('touchstart', function () {
                return popUpComments(marzipanoHotspot.imagePath, hotspoturl, this)
            });
        }
        else {
            $('#' + hotspotId).click(function () {
                return popUpComments(marzipanoHotspot.imagePath, hotspoturl, this)
            });
            $('#' + hotspotId).parent().find('.hotspot-outer').click(function () {
                return popUpComments(marzipanoHotspot.imagePath, hotspoturl, this)
            });
        }
    }
    else if (marzipanoHotspot.imagePath.indexOf("Link") > -1) {

        if (mql.matches) {
            //var img = $('#' + marzipanoHotspot.hotspotId);
            //$('#' + marzipanoHotspot.wrapperId + ' img').replaceWith('<a href=' + hotspoturl + ' target=' + target + '>' + img[0].outerHTML + '</a>');
            var hotspotQuery = document.querySelector('#' + hotspotId);
            hotspotQuery.addEventListener('touchstart', function () {
                if ($('#hdnRefereurl').val() != undefined && $('#hdnRefereurl').val() != '') {
                    if ((hotspoturl.toLowerCase().indexOf('fastout.com/p') > -1) || (hotspoturl.toLowerCase().indexOf('fastout.com/v') > -1)) {
                        var newurl = getLongUrl(hotspoturl);
                        newurl += "&domainrefurl=" + $('#hdnRefereurl').val();
                        hotspoturl = newurl;
                    }
                }
                var win = window.open(hotspoturl, target);
                if (win) {
                    win.focus();
                } else {
                    ////Browser has blocked it
                    window.location.href = hotspoturl;
                }
            });
            var divanimation = $('#' + hotspotId).parent().find('.hotspot-outer');
            $(divanimation).on('touchstart', function () {
                if ($('#hdnRefereurl').val() != undefined && $('#hdnRefereurl').val() != '') {
                    if ((hotspoturl.toLowerCase().indexOf('fastout.com/p') > -1) || (hotspoturl.toLowerCase().indexOf('fastout.com/v') > -1)) {
                        var newurl = getLongUrl(hotspoturl);
                        newurl += "&domainrefurl=" + $('#hdnRefereurl').val();
                        hotspoturl = newurl;
                    }
                }
                var win = window.open(hotspoturl, target);
                if (win) {
                    win.focus();
                } else {
                    ////Browser has blocked it
                    window.location.href = hotspoturl;
                }
            });
        }
        else {
            $('#' + hotspotId).click(function () {
                if ($('#hdnRefereurl').val() != undefined && $('#hdnRefereurl').val() != '') {
                    if ((hotspoturl.toLowerCase().indexOf('fastout.com/p') > -1) || (hotspoturl.toLowerCase().indexOf('fastout.com/v') > -1)) {
                        var newurl = getLongUrl(hotspoturl);
                        newurl += "&domainrefurl=" + $('#hdnRefereurl').val();
                        hotspoturl = newurl;
                    }
                }
                window.open(hotspoturl, target);
            });
            $('#' + hotspotId).parent().find('.hotspot-outer').click(function () {
                if ($('#hdnRefereurl').val() != undefined && $('#hdnRefereurl').val() != '') {
                    if ((hotspoturl.toLowerCase().indexOf('fastout.com/p') > -1) || (hotspoturl.toLowerCase().indexOf('fastout.com/v') > -1)) {
                        var newurl = getLongUrl(hotspoturl);
                        newurl += "&domainrefurl=" + $('#hdnRefereurl').val();
                        hotspoturl = newurl;
                    }
                }
                window.open(hotspoturl, target);
            });
        }
    }
    else if (marzipanoHotspot.imagePath.indexOf("hs_hview") > -1) {
        if (mql.matches) {
            var hotspotQuery;
            if (toureSkinType == 2 && viewtype == 1 && marzipanoHotspot.imagePath.indexOf('hs_hview') > -1) {
                hotspotQuery = document.querySelector('#' + hotspotId + ' div');
            }
            else {
                hotspotQuery = document.querySelector('#' + hotspotId);
            }
            hotspotQuery.addEventListener('touchstart', function () {
                isHotspotClick = true;
                getPanoramaDetail(marzipanoHotspot.destinationpanoguid);
            });
        }
        else {
            if (toureSkinType == 2 && viewtype == 1 && marzipanoHotspot.imagePath.indexOf('hs_hview') > -1) {
                $('#' + hotspotId + ' div').click(function () {
                    isHotspotClick = true;
                    getPanoramaDetail(marzipanoHotspot.destinationpanoguid);
                });
            }
            else {
                $('#' + hotspotId).click(function () {
                    isHotspotClick = true;
                    getPanoramaDetail(marzipanoHotspot.destinationpanoguid);
                });
            }
        }
    }
    //resetRightLevelPosition();
    return marzipanoHotspot;
}

function getLongUrl(shortUrl) {
    if (shortUrl != "") {
        var url = 'api/tourpreview/GetLongUrlForTour?shortUrl=' + shortUrl;
        var response = MakeSyncWebCall(url, '', "Get");
        return response;
    }

}
function addNewHotSpot(target, hotspoturl, sceneId, marzipanoHotspot, customClassName, layerId) {

    marzipanoHotspot = addSpotOnPosition(target, hotspoturl, sceneId, marzipanoHotspot, true, false, customClassName, layerId);
    HspotIndex += 1;
    return marzipanoHotspot;
}
function getNextPointOnScreen(lineId) {
    if ($($('.' + lineId)[0]).css('display') != 'none') {
        return $($('.' + lineId)[0]).attr("id");
    }
}
function addNewLineHotSpot(sceneId, marzipanoHotspot, lineHeight, lineColor, lineId, isAddedArray) {
    var iconWrapper = document.createElement('div');
    iconWrapper.classList.add('info-hotspot-icon-wrapper');
    iconWrapper.classList.add(lineId);
    var wrapperId = "hotspoticonwrapper_" + marzipanoHotspot.HspotIndex;
    iconWrapper.setAttribute("id", wrapperId);
    marzipanoHotspot.wrapperId = wrapperId;
    //var hs = 'z-index:9999; background-color:' + lineColor + '; height:' + lineHeight + 'px; width:' + lineHeight + 'px;';
    //iconWrapper.setAttribute('style', hs);
    sceneId.hotspotContainer().createHotspot(iconWrapper, marzipanoHotspot.position);
    if (isAddedArray == false) {
        linepointspots.push({ point1Yaw: marzipanoHotspot.position.yaw, point1Pitch: marzipanoHotspot.position.pitch, point1Fov: marzipanoHotspot.position.fov, lineId: lineId, lineHeight: lineHeight, lineBackColor: lineColor, lineId: lineId, lineStyle: 'solid' });
    }
    return marzipanoHotspot;
}
function addLineSpotOnPosition(position, layerId) {
    $('.circle').remove();
    var iconWrapper = document.createElement('div');
    iconWrapper.classList.add('info-hotspot-icon-wrapper');
    var wrapperId = "Linehotspoticonwrapper_" + HspotIndex;
    iconWrapper.setAttribute("id", wrapperId);
    wrapperId = wrapperId;
    //var hs = 'z-index:9999;';
    //iconWrapper.setAttribute('style', hs);
    if (isPreview != true) {
        var childLabel = document.createElement('div');
        childLabel.classList.add('circle');
        iconWrapper.appendChild(childLabel);
    }
    var childDiv = document.createElement('div');
    childDiv.classList.add('line');

    var hs1 = 'clear:both;';
    childDiv.setAttribute('style', hs1);
    lineId = "LineDivLine_" + HspotIndex;
    childDiv.setAttribute("id", lineId);
    iconWrapper.appendChild(childDiv);

    var childDiv = document.createElement('div');
    childDiv.classList.add('line');
    childDiv.setAttribute("id", "LineDivLine_" + HspotIndex + "_B");
    iconWrapper.appendChild(childDiv);

    if (layerId == undefined) {
        scene.hotspotContainer().createHotspot(iconWrapper, position);
    }
    else {
        if (layerId == "") {
            var _hotspotContainer = new Marzipano.HotspotContainer(viewer._controlContainer, viewer._stage, view, viewer._renderLoop, { rect: layerId.effects().rect });
            _hotspotContainer.createHotspot(iconWrapper, position);
        } else {
            var _hotspotContainerRight = new Marzipano.HotspotContainer(viewer._controlContainer, viewer._stage, view, viewer._renderLoop, { rect: layerId.effects().rect });
            _hotspotContainerRight.createHotspot(iconWrapper, position);
        }
    }
    if (hotSpotCount == 1) {
        point1.id = wrapperId;
        point1.yaw = position.yaw;
        point1.pitch = position.pitch;
        point1.fov = position.fov;
    }
    else if (hotSpotCount == 2) {
        point2.id = wrapperId;
        point2.yaw = position.yaw;
        point2.pitch = position.pitch;
        point2.fov = position.fov;
    }
    else {
        point1.id = point2.id;
        point1.yaw = point2.yaw;
        point1.pitch = point2.pitch;
        point1.fov = point2.fov;

        point2.id = wrapperId;
        point2.yaw = position.yaw;
        point2.pitch = position.pitch;
        point2.fov = position.fov;
    }
    HspotIndex += 1;
}
function addNewLinePoint(position, HspotIndex, lineId, index, layerId) {
    var iconWrapper = document.createElement('div');
    iconWrapper.classList.add('info-hotspot-icon-wrapper');
    iconWrapper.classList.add(lineId);
    var wrapperId = "Linehotspoticonwrapper_" + HspotIndex + "_" + index;
    iconWrapper.setAttribute("id", wrapperId);
    wrapperId = wrapperId;
    //var hs = 'z-index:9999;';
    //iconWrapper.setAttribute('style', hs);
    iconWrapper.setAttribute('index', index);

    var childDiv = document.createElement('div');
    childDiv.classList.add('line');
    //lineId = "LineDivLine_" + HspotIndex;
    childDiv.setAttribute("id", lineId + '_' + index);
    iconWrapper.appendChild(childDiv);

    //var icon = document.createElement('img');
    //icon.src = 'images/blue_droneview.png';
    //icon.classList.add('info-hotspot-icon');
    //iconWrapper.appendChild(icon);
    if (layerId == undefined) {
        scene.hotspotContainer().createHotspot(iconWrapper, position);
    }
    else {
        if (layerId == "") {
            var _hotspotContainer = new Marzipano.HotspotContainer(viewer._controlContainer, viewer._stage, view, viewer._renderLoop, { rect: layerId.effects().rect });
            _hotspotContainer.createHotspot(iconWrapper, position);
        } else {
            var _hotspotContainerRight = new Marzipano.HotspotContainer(viewer._controlContainer, viewer._stage, view, viewer._renderLoop, { rect: layerId.effects().rect });
            _hotspotContainerRight.createHotspot(iconWrapper, position);
        }
    }
}
function getLoweredPageName() {
    var pagename = window.location.href.substring(window.location.href.lastIndexOf("/") + 1).toLowerCase();
    if (pagename.indexOf("?") > -1) {
        pagename = pagename.split("?")[0];
    }
    return pagename;
}
var sniperHotspotnew = null;
function addSniperHotSpot() {
    var parent = $('#pano');
    var position = {
        yaw: view.yaw(),
        pitch: view.pitch(),
        fov: view.fov()
    };
    if (viewSnipper() == true && sniperHotspotnew == null) {
        sniperHotspotnew = document.createElement('img');
        sniperHotspotnew.src = SkinBaseUrl() + 'images/sniper.png';
        sniperHotspotnew.setAttribute('id', "sniperHotspotnew");
        sniperHotspotnew.setAttribute('style', 'display:none');
        $('#pano').append(sniperHotspotnew);
        if (typeof (role) != 'undefined') {
            if (role == "0" && getLoweredPageName() == "dynamicdroneviewbank.aspx") {
                $('#pano').append('<div class="watermark img-responsive"><img src="images/watermark.PNG" /></div>');
            }
        }
    }
    window.setTimeout(function () {
        if (viewSnipper() == true) {
            var hs = 'position:absolute;';
            hs += 'transform-origin: 50% 50%;';
            hs += 'visibility: inherit;';
            if (parent) {
                var w = parent.width();
                hs += 'left:' + ((w / 2) - ($('#sniperHotspotnew').outerWidth() / 2)) + 'px;';
                var h = parent.height();
                hs += 'top:' + (((h / 2)) - ($('#sniperHotspotnew').outerHeight() / 2)) + 'px;';
            }
            hs += 'display:block;';
            sniperHotspotnew.setAttribute('style', hs);
        }
        drawLine();
    }, 300);
}
//=========================================
var lstRemoveLinePointA = '';
function removeNewHotSpot() {

    if (arrHotSpot.length > 0) {
        divWrap = arrHotSpot[arrHotSpot.length - 1];
        if (divWrap != "") {
            $("div").remove('#' + divWrap.point2);
            $("div").remove('.' + divWrap.lineId);
            arrHotSpot.splice(arrHotSpot.length - 1, 1);
            if (arrHotSpot.length == 0) {
                isLastHotspot = true;
            }
            if (isLastHotspot == true) {
                $("div").remove('#' + divWrap.point1);
            }
        }
    }
}
function UpdateMarzipanoHotspotTitle(id, text) {
    text == "" ? $('#' + id).hide() : $('#' + id).show();
    $('#' + id).find('span').html(text);    
    if (text.toLowerCase().indexOf('for sale') > -1 || text.toLowerCase().indexOf('till salu') > -1 || text.toLowerCase().indexOf(jQuery.parseHTML('myyd&auml;&auml;n')[0].data) > -1) {
        var imagedetail = $('#' + id).parent().find('.info-hotspot-icon')
        if ($('#' + id).parent().find('.hotspot-outer').length == 0 && ($(imagedetail).attr('src').indexOf('hs_center') > -1 || $(imagedetail).attr('src').indexOf('hs_right') > -1 || $(imagedetail).attr('src').indexOf('hs_left') > -1)) {
            var classname = 'element';
            var outerclass = 'hotspot-outer'
            if ($(imagedetail).attr('src').indexOf("Droneview") > -1) {
                outerclass = 'hotspot-outer-helicopter';
                classname = 'elementhelicopter';
            }
            else if ($(imagedetail).attr('src').indexOf("VR") > -1) {
                outerclass = 'hotspot-outer-helicopter';
                classname = 'element360';
                if ($(imagedetail).attr('src').indexOf('hs_left') > -1) {
                    classname = 'element360left';
                } else if ($(imagedetail).attr('src').indexOf('hs_right') > -1) {
                    classname = 'element360right';
                }
            }
            else if ($(imagedetail).attr('src').indexOf('hs_right') > -1) {
                classname = 'elementright';
            }
            else if ($(imagedetail).attr('src').indexOf('hs_left') > -1) {
                classname = 'elementleft';
            }
            $('#' + id).parent().append('<div class=' + outerclass + '><div class=' + classname + '></div></div>');
        }
    }
    if ($('#' + id).hasClass('hotspotlabel-right')) {
        ////////////$('#' + id).find('span').html(text + "&nbsp;&nbsp;");
        ////////////w = $('#' + id).width() + $('#' + id).parent().find('img').width();
        ////////////if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder == false) {
        ////////////    if (window.location.href.toLowerCase().indexOf("fastout.com") == -1 && pageName.toLowerCase().indexOf("createdroneview.aspx") == -1) {
        ////////////        w = w - 12;
        ////////////    } else {
        ////////////        w = w - 7;
        ////////////    }
        ////////////    //$('#' + id).css("height", '22px');
        ////////////    //$('#' + id).css("padding", '0px 3px 2px 2px');
        ////////////}
        ////////////else {
        ////////////    $('#' + id).css("padding", '1px 3px 2px 3px');
        ////////////    w = w - 5;
        ////////////}
        ////////////$('#' + id).css("left", -(w) + 'px');
        //$('#' + id).css('left', - $('#' + id).width());
    }
        //else if ($('#' + id).hasClass('hotspotlabel-left')) {
        //    if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder == false) {
        //        //$('#' + id).css("height", '22px');
        //        //$('#' + id).css("padding", '0px');
        //        //$('#' + id).find('span').html("&nbsp;&nbsp;" + text);
        //    }
        //    else {
        //        $('#' + id).find('span').html("&nbsp;&nbsp;&nbsp;" + text);
        //    }
        //}
    else {
        //if (MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.showHotspotTitleBorder == false) {
        //    $('#' + id).css("height", '22px');
        //    $('#' + id).css("padding", '0px');
        //}
        $('#' + id).find('span').html(text);
    }

}
function UpdateMarzipanoHotspotTitlePosition(id, text) {
}
function hideInfoWindow() {
    $('#' + infoPopupWindowId).modal('hide');
    //if (skinid() == "76" || skinid() == "80") {
    //    $('#info_popUpSvensk').modal('hide');
    //}
    //else if (skinid() != "58") {
    //    $('#info_popUp').modal('hide');
    //}
    //else {
    //    $('#info_popUpFast').modal('hide');
    //}
}
function showInfoWindow() {
    $('#' + infoPopupWindowId).modal('show');
    //if (skinid() == "76" || skinid() == "80") {
    //    $('#info_popUpSvensk').modal('show');
    //}
    //else if (skinid() != "58") {
    //    $('#info_popUp').modal('show');
    //}
    //else {
    //    $('#info_popUpFast').modal('show');
    //}
}
function closeComments(obj) {
    $(obj).parent().remove();
}

function startAutorotate() {
    if (autorotateToggleElement != undefined) {
        if (!autorotateToggleElement.classList.contains('enabled')) {
            return;
        }
        viewer.startMovement(autorotate);
    }
}
function stopAutorotate() {
    if (isHotspotClick == undefined || isHotspotClick == false) {
        viewer.stopMovement();
        viewer.setIdleMovement(Infinity);
    }
    isHotspotClick = false;
}
function toggleAutorotate() {
    if (autorotateToggleElement != undefined) {

        if (autorotateToggleElement.classList.contains('enabled')) {
            autorotateToggleElement.classList.remove('enabled');
            stopAutorotate();
        } else {
            autorotateToggleElement.classList.add('enabled');
            startAutorotate();
        }
    }
}

function exportImage() {
    var colorCanvas = scene.hotspotContainer().source().asset().element();
    var width = colorCanvas.width;
    var height = colorCanvas.height;

    var merged = document.createElement('canvas');
    merged.width = width;
    merged.height = height;
    var ctx = merged.getContext('2d');

    ctx.drawImage(colorCanvas, 0, 0);
    ctx.drawImage(bwCanvas, 0, 0);

    var data = merged.toDataURL('image/jpeg', 85);
    window.open(data);
}
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 setinfo_popUpPosition() {
    if (skinid() == "7") {
        $('.infocloseIcon').css({ 'left': '-30px', 'top': '5px' });
        $("#span_contactNo").html('<a href="https://www.fastout.com" target="_blank">Click here for more information</a>');
        $("#info_popUp").modal('show');
    }
    else if (skinid() == "52" || skinid() == "53") {
        $('.infocloseIcon').hide();
    }
}

function stopTouchAndScrollEventPropagation(element, eventList) {
    var eventList = ['touchstart', 'drag', 'touchmove', 'touchend', 'touchcancel',
                      'wheel', 'mousewheel'];
    for (var i = 0; i < eventList.length; i++) {
        element.addEventListener(eventList[i], function (event) {
            event.stopPropagation();
        });
    }
}

function checkIframRequest() {
    try {
        if (window.self != window.top && mql.matches == true && MarzipanoSkinDetail.data.marzipanoSkinCompanyInfo.isPanoMovement == false) {
            return true;
        }
    } catch (e) {
        return false;
    }
    return false;
}
function closepopUpFreemium() {
    $('#info_popUpFreemium').modal('hide');
}

function resetHotspotPosition(curHotSpotId, imagedetail) {
    var iconStyle = "";
    //if (mql.matches) {
    //    iconStyle = 'position:absolute; top:-28px; left:-28px;';
    //}
    //else {
        iconStyle = 'position:absolute; top:-' + parseInt(imagedetail.imageHeight) + 'px; left:-' + parseInt(imagedetail.imageWidth) / 2 + 'px;';
    //}
    if (imagedetail.imageSrc.indexOf("picture") > -1 || imagedetail.imageSrc.indexOf("hs_hview") > -1 || imagedetail.imageSrc.indexOf("Video") > -1 || imagedetail.imageSrc.toLowerCase().indexOf("comment") > -1 || imagedetail.imageSrc.indexOf("Link") > -1 || imagedetail.imageSrc.indexOf("Droneview") > -1 || imagedetail.imageSrc.indexOf("Vr") > -1) {
        iconStyle += 'cursor: pointer;';
    }
    $('#' + curHotSpotId).parent().attr('style', iconStyle);
    var titleObj = $('#' + curHotSpotId).parent().find($('#' + curHotSpotId + '_title'));
    if (imagedetail.imageSrc.indexOf("picture") > -1) {
        $(titleObj).addClass('pictureTitle');
    }
    else if (mql.matches) {
        $(titleObj).css('top', '-76px').css('left', '0').css('bottom', '0px');
    }
    else {
        $(titleObj).css('top', '-87px').css('left', '0').css('bottom', '0px');
    }
}