//Make the DIV element draggagle:
//dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {

    // alert();
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (document.getElementById(elmnt.id + "header")) {
        /* if present, the header is where you move the DIV from:*/
        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
    } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
    }

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
        $('.menu-btn.bottom').addClass('full-opacity');

    }

    function elementDrag(e) {
        if ($('.menu-btn.bottom').position().top <= 90) {
            $('.menu-btn.bottom').css('top', '91px');
            return;
        }
        var windowHeight = $(window).height();
        if ($('.menu-btn.bottom').position().top >= (windowHeight - 50)) {
            $('.menu-btn.bottom').css('top', (windowHeight - 51));
            return;
        }

        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";

        // console.log(elmnt.style.top);


        // elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        //  $('.menu-btn.bottom').addClass('full-opacity');
        // $(".menu-btn.bottom").click(function (event) {
        //     event.preventDefault();
        // });
    }

    function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
        if ($(".side-menu").mouseenter()) {
            $('.menu-btn.bottom').removeClass('full-opacity');

        }
    }
}







var _DRAGGGING_STARTED = 0;
var _LAST_MOUSEMOVE_POSITION = { x: null, y: null };
var _CONTAINER_WIDTH = $(".video-container").outerWidth();
var _CONTAINER_HEIGHT = $(".video-container").outerHeight();
/*drag video inside div*/
var _video_LOADED = 0;
var _video_WIDTH;
var _video_HEIGHT;
var zoomVal = parseInt("100");
var _DIV_OFFSET = $('.video-container').offset();


// video is loaded
function videoLoaded() {
    _video_WIDTH = $(".drag-video").width();
    _video_HEIGHT = $(".drag-video").height();
    _video_LOADED = 1;
}

function videoMouseDown(event) {
    // debugger;
    videoLoaded();
    _DIV_OFFSET = $('.video-container').offset();
    /* video should be loaded before it can be dragged */
    if (_video_LOADED == 1) {
        _DRAGGGING_STARTED = 1;

        /* Save mouse position */
        _LAST_MOUSE_POSITION = { x: event.pageX - _DIV_OFFSET.left, y: event.pageY - _DIV_OFFSET.top };
    }
}
function videoMouseup() {
    _DRAGGGING_STARTED = 0;
}



function videoMousemove(event, asd) {


    // _DRAGGGING_STARTED = 1;
    if (_DRAGGGING_STARTED == 1) {

        //   debugger;

        var oldWidth = $(".video-container").outerWidth();
        var oldHeight = $(".video-container").outerHeight();
        _CONTAINER_WIDTH = oldWidth;
        _CONTAINER_HEIGHT = oldHeight;



        var current_mouse_position = { x: event.pageX - _DIV_OFFSET.left, y: event.pageY - _DIV_OFFSET.top };
        var change_x = current_mouse_position.x - _LAST_MOUSE_POSITION.x;
        var change_y = current_mouse_position.y - _LAST_MOUSE_POSITION.y;

        /* Save mouse position */
        _LAST_MOUSE_POSITION = current_mouse_position;

        var video_top = parseInt($(".drag-video").css('top'), 10);
        var video_left = parseInt($(".drag-video").css('left'), 10);

        var video_top_new = video_top + change_y;
        var video_left_new = video_left + change_x;

        /* Validate top and left do not fall outside the video, otherwise white space will be seen */
        if (video_top_new > 0)
            video_top_new = 0;
        if (video_top_new < (_CONTAINER_HEIGHT - _video_HEIGHT))
            video_top_new = _CONTAINER_HEIGHT - _video_HEIGHT;

        if (video_left_new > 0)
            video_left_new = 0;
        if (video_left_new < (_CONTAINER_WIDTH - _video_WIDTH))
            video_left_new = _CONTAINER_WIDTH - _video_WIDTH;
        $(".drag-video").css({ top: video_top_new + 'px', left: video_left_new + 'px' });
    }
}



function showSlidePopup() {

    $('.side-popup ').addClass('show-sp');
    $('.mask-bg').removeClass('hide');
    $('body').addClass('hide-scroll');
}


function hideSlidePopup() {
    $('.side-popup').removeClass('show-sp');
    $('.mask-bg').addClass('hide');
    $('body').removeClass('hide-scroll');
}

function toggleSideMenu() {
    $('body').toggleClass('show-tooltip');
    $('.side-menu').toggleClass('collapsed');
    $('.main-content').toggleClass('collapsed');
    $('.menu-btn').toggleClass('open');


    $('.side-menu').addClass('animate');
    $('.main-content').addClass('animate');
    $('.menu-btn').addClass('animate');



    setTimeout(function () {
        $('.side-menu').removeClass('animate');
        $('.main-content').removeClass('animate');
        $('.menu-btn').removeClass('animate');
    }, 300);
}



$(window).on('load', function () {
    // animation for logo and user info of header
    $('.logo').removeClass('out');
    $('.user-info').removeClass('out');
    var userInfoWidth = $('.user-info').width();
    var rightVal = '-' + (userInfoWidth - 70);
    $('.user-info').css('right', + rightVal);

});


/*hide zoom slider & camera zoom lock on stop mouse movement */
var timeout = null;
$(document).on('mousemove', function () {
    if (timeout !== null) {
        clearTimeout(timeout);

        $('.popup-action').removeClass('hide');
        $('.enhance-video').removeClass('hide');
        $('.live-view-cam-bottom-action.view-mode').removeClass('hide');
    }

    timeout = setTimeout(function () {

        $('.popup-action').addClass('hide');
        $('.enhance-video').addClass('hide');
        $('.live-view-cam-bottom-action.view-mode').addClass('hide');

    }, 5000);
});


// for camera live view
function liveViewContainer() {
    // debugger;
    var bodyHeight = $('.live-view-content').height();
    var bodyWidth = $('.live-view-content').width();
    var currentWidthLiveViewCameras = $('.live-view-cameras').width();
    var currentHeightLiveViewCameras = $('.live-view-cameras').height();

    // alert(bodyWidth + ' and ' + bodyHeight );
    if (bodyHeight > bodyWidth) {

        var assignHeight = bodyWidth * 9 / 16;
        var marginLeft = '-' + Math.round(bodyWidth / 2) + 'px';
        var marginTop = '-' + Math.round(assignHeight / 2) + 'px';

        $('.live-view-cameras').css('height', Math.round(assignHeight));
        $('.live-view-cameras').css('width', Math.round(bodyWidth));
        $('.live-view-cameras').css('margin-left', marginLeft);
        $('.live-view-cameras').css('margin-top', marginTop);
        $('.live-view-cameras').css('top', '50%');


    } else
    // if (currentWidthLiveViewCameras >= bodyWidth) {

    //     if (bodyWidth > bodyHeight) {

    //         var assignWidth = bodyHeight * 16 / 9;
    //         var marginLeft = '-' + assignWidth / 2 + 'px';

    //         $('.live-view-cameras').css('height', bodyHeight);
    //         $('.live-view-cameras').css('width', assignWidth);


    //         $('.live-view-cameras').css('margin-left', marginLeft);

    //         $('.live-view-cameras').css('margin-top', '0');
    //         $('.live-view-cameras').css('top', '0');

    //     } else if (bodyWidth < bodyHeight) {
    //         var assignHeight = bodyWidth * 9 / 16;
    //         var marginLeft = '-' + bodyWidth / 2 + 'px';
    //         var marginTop = '-' + assignHeight / 2 + 'px';

    //         $('.live-view-cameras').css('height', assignHeight);
    //         $('.live-view-cameras').css('width', bodyWidth);
    //         $('.live-view-cameras').css('margin-left', marginLeft);

    //         $('.live-view-cameras').css('margin-top', marginTop);
    //         $('.live-view-cameras').css('top', '50%');





    //     } else {
    //         alert('hello');
    //     }



    // } else 
    {

        //alert('width jada hai');

        var assignWidth = bodyHeight * 16 / 9;
        var marginLeft = '-' + Math.round(assignWidth / 2) + 'px';

        $('.live-view-cameras').css('height', Math.round(bodyHeight));
        $('.live-view-cameras').css('width', Math.round(assignWidth));


        $('.live-view-cameras').css('margin-left', marginLeft);

        $('.live-view-cameras').css('margin-top', '0');
        $('.live-view-cameras').css('top', '0');


    }
}
$(window).resize(function () {
    liveViewContainer();


    //   var bodyHeight = $('.live-view-content').height();
    //   var bodyWidth = $('.live-view-content').width();
    //   alert(bodyWidth + ' and ' +  bodyHeight);

});



// function expendCamera(obj) {

//     var position = $(obj).closest('.live-view-cam').position();

//     $(obj).closest('.live-view-cam').css('left', position.left);
//     $(obj).closest('.live-view-cam').css('top', position.top);
//     $(obj).closest('.live-view-cam').addClass('expend-cam');

//     setTimeout(function () {
//         $('.live-view-cam').addClass('hide');
//         $(obj).closest('.live-view-cam').removeClass('hide');
//         $(obj).closest('.live-view-cam').addClass('expend-cam-full');


//         $('.normal-cam-view').removeClass('hide');
//         $('.expend-cam-view').addClass('hide');


//     }, 1);

// }

// function normalCamera(obj) {


//     $(obj).closest('.live-view-cam').removeClass('expend-cam-full');

//     setTimeout(function () {
//         $(obj).closest('.live-view-cam').css('left', '');
//         $(obj).closest('.live-view-cam').css('top', '');
//         $(obj).closest('.live-view-cam').removeClass('expend-cam');
//         $('.live-view-cam').removeClass('hide');

//         $('.normal-cam-view').addClass('hide');
//         $('.expend-cam-view').removeClass('hide');


//     }, 201);

// }


function camSetting(obj) {
    $(obj).closest('.cam-setting').css('top', '-100px');
}